Short note on aria-labelledby and aria-describedby
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
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
– 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:
- error state:
<p id="error1">incorrect mallory!</p>
- non error state:
- Add the
idreference in the DOM to the
aria-labelledby/aria-describedbyattribute, when the error state occurs.
Further reading: Notes on Using ARIA in HTML