HTML & CSS · Senior · Question 67 of 75

How do you correctly associate an error message with an input?

<input id="email" aria-invalid="true" aria-describedby="email-error" />
<p id="email-error">Enter a valid email</p>

✓Correct answer: Mark the field with aria-invalid and point aria-describedby at the message
2Put the message in the placeholder
3Only color the border red

Explanation

Screen readers then read the error when the field is focused. Color alone fails WCAG for users who can't distinguish it.

Further reading

Test yourself

Take the HTML & CSS · Senior quiz: questions and options are shuffled, and you get a review of your mistakes at the end.