Note: some content on this page has had
aria-hidden="true" added for more precise testing.
Accessible name
This sounds something like:
Favourite colour, edit text"
Code: we add a for attribute on
the label element. We set the value to match the
id attribute on the input element to give the
field an accessible name.
Accessible description
Not your second favourite colour
This sounds something like:
Favourite colour, edit text. Not your second
favourite colour."
Note: there's a short pause between the accessible name
and the accessible description.
Code: we add an
aria-describedby attribute on the input element.
We set the value to match the id attribute on the help text
element to give the field an accessible description.
Field error with validation message
Validation messages are a special case of accessible description. We can
have multiple accessible descriptions, and we can choose the order they
are announced in. We also mark the field itself as having an error.
Not your second favourite colour
Please enter your favourite colour
This sounds something like:
Favourite colour, invalid data, edit text.
Not your second favourite colour Please enter your favourite colour"
.
Note: there's a short pause between the accessible name and the accessible
descriptions, but not between the two accessible descriptions.
Code: we set the value of the
aria-describedby attribute to both the
id attribute on the help text element and the
id attribute of the error text (separated by a space) to give
the field two accessible descriptions: some help text and
some error text.