Implementation advice
When an error occurs:
-
prefix the
<title>
with "Error: " - show an error summary at the top of the page
-
move keyboard focus to the start of the summary
to move keyboard focus, put
tabindex="-1"
on the containing div and useobj.focus()
-
ensure that the summary is announced to as many screen readers as possible
use
role="alert"
on the containingdiv
- use a heading at the top of the summary
-
associate the heading with the summary box
use the ARIA attribute
aria-labelledby
on the containingdiv
, so that screen readers will automatically announce the heading as soon as focus is moved to the div - link from the error list in the summary to the fields with errors
- add a 5px red left border to the field with the error
- show a red and bold error message between each question and field with an error
- associate each error message with the corresponding field by adding it to the label (or legend)
Also consider using the aria-invalid
attribute to programmatically indicate that a field has an error. The value of the aria-invalid attribute will vary depending on the type of error.