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 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 or aria-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>
• Add the id reference in the DOM to the aria-labelledby/aria-describedby attribute, when the error state occurs.

Further reading: Notes on Using ARIA in HTML