The ARIA attributes aria-labelledby and aria-describedby can be used to provide an accessible name or accessible description for a subset of HTML elements. It is important to note that by design, hiding the content (using CSS display:none
or visibility:hidden
or the HTML hidden attribute) of the element(s) referenced by these attributes does not stop the content from being used to provide the name/description.
Hidden or visible – makes no difference
By default, assistive technologies do not relay hidden information, but an author can explicitly override that and include hidden text as part of the accessible name or accessible description by using
aria-labelledby
oraria-describedby
.
– Accessible Name and Description: Computation and API Mappings 1.1
In the following example the description will be available to assistive technology users in both states:
Non error state: message not visible
<label>Name <input type="text" aria-describedby="error-message"></label>
<span id="error-message" style="display:none"> You have provided an incorrect name</span>
Note: addition of aria-hidden=true
to the referenced element makes no difference:
<span id="error-message" style="display:none" aria-hidden="true"> You have provided an incorrect name</span>
Error state: message visible
<span id="error-message" style="display:inline"> You have provided an incorrect name</span>
Methods to provide context sensitive name/description text
If you want to associate context sensitive text, such as an error message you can:
- Add the referenced element to the DOM when the error state occurs.
- Add the error text as child of the referenced element in the DOM when the error state occurs.
- non error state:
<p id="error1"></p>
- error state:
<p id="error1">incorrect mallory!</p>
- non error state:
- Add the
id
reference in the DOM to thearia-labelledby/aria-describedby
attribute, when the error state occurs.
Further reading: Notes on Using ARIA
Comments
Hi there,
I am trying to understand what work is required to achieve AA Accessibility standard to a web application. Is there a checklist available somewhere I can grab and use as a reference for the work required on each module?
thanks a lot!