×

html · level 2 · unit 6 · lesson 3

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

aria-describedby joins to its box.

Help text tells visitors how to answer, such as At least 8 characters. People can see it next to the box, but a screen reader moving into the box only says the label.

Give the help text an id. Then add aria-describedby to the box, with that id as its value. Now a screen reader reads the label, then the help text.

Use the same trick for an error message, such as Choose a date in the future, so everyone hears what went wrong.

<form>
  <label for="pass">Password</label>
  <input type="password" id="pass" name="pass" minlength="8" aria-describedby="pass-help">
  <p id="pass-help">At least 8 characters, with one number.</p>
  <button>Create account</button>
</form>

Press show my page to see it here.

The value and the id must match exactly, like for and id on a label.