Form accessibility

Use label, aria-required and aria-invalid.

The label and for/id link

A form field gets its accessible name from a linked <label>. The link goes both ways: the label's for attribute and the input's id carry the same value. Example: <label for="email">Email</label> <input id="email">.

So when a screen reader focuses the input, it says 'Email'. Clicking the label also activates the input; that small touch grows the click area.

required and aria-invalid

For a normal <input>, use HTML's own required attribute to mark it as mandatory; this informs both the browser and screen readers. aria-required="true" is only for custom components built with <div>; it is redundant on standard inputs.

When you show a validation error, adding aria-invalid="true" lets screen-reader users hear the error. This carries no visual cue; it only informs assistive tech.

Exercise Write an accessible form field

Add a <form> to body. Inside the form put a <label for="email">Email</label> and an <input id="email" required>. The label's for value and the input's id must match exactly.

Show example solution

<body>
  <form>
    <label for="email">Email</label>
    <input id="email" required>
  </form>
</body>

Test yourself

Which of these is wrong usage?
- label for="name" with input id="name"
- Putting input inside label
- label for="name" with input name="name"
- label for="surname" with input id="surname"
Show answer

label for="name" with input name="name" — Correct. for matches id, not name.

Write the label tag

<____ for="email">Email</label>
<input id="email">

Show answer

<label for="email">Email</label>
<input id="email">

Match each attribute to its purpose

for

Links label to input
id

Input's unique key
aria-required

Marks a required field
aria-invalid

Marks a wrong value

Next lesson: Table accessibility

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies