Codelab: Adding ARIA to a Form
Build a real registration form with aria-label, aria-describedby, aria-live error messages, and accessible validation.
Set up your project
In this codelab, you will build a registration form from scratch that uses ARIA attributes to create a fully accessible experience. The form will have labeled inputs, descriptive help text connected via aria-describedby, a live error region, and proper focus management. By the end, you will understand exactly when and how to use ARIA to enhance forms beyond what native HTML provides.
Open a terminal by pressing Ctrl + Alt + T on Linux, then type the following commands one at a time, pressing Enter after each:
- mkdir ~/aria-form-lab — Creates a new project folder.
- cd ~/aria-form-lab — Moves into the folder.
- touch index.html style.css script.js — Creates three files: HTML for structure, CSS for styles, and JavaScript for form validation. This is the first time we are using JavaScript in a codelab — it is necessary because ARIA live regions work by dynamically updating content, which requires JavaScript.
- code . — Opens VS Code with the project folder.
We will start with the HTML and CSS, then add JavaScript for the validation behavior that makes the ARIA attributes come alive.