This information (I wrote) originally appeared in Using ARIA I am re-upping and updating it here as the Using ARIA has now been updated and the content removed.
Beware: Hiding Content Has No Effect on Accessible Name or Description Calculation
By design, hiding the content (using CSS display:none or visibility:hidden or the HTML hidden attribute) of the element(s) referenced by aria-labelledby and aria-describedby does not stop the content from being used to provide the name/description.
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-labelledbyoraria-describedby.
– Accessible Name and Description: Computation and API Mappings 1.2
In the following example the description will be available to assistive technology users in both states:
Non-error state: message visually hidden
<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 (appears that technique 2 is most robust):
- 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.
- Add the
idreference in the DOM to thearia-labelledby/aria-describedbyattribute, when the error state occurs.
try it yourself
See the Pen
ARIA error message patterns by steve faulkner (@stevef)
on CodePen.
Lyrics
They told you in school about freedom But when you try to be free they never let ya They said "it's easy, nothing to it" And now the army's out to get ya Sixty nine America in terminal stasis The air's so thick it's like drowning in molasses I'm sick and tired of paying these dues And I'm finally getting hip to the American ruse I learned to say the pledge of allegiance Before they beat me bloody down at the station They haven't got a word out of me since I got a billion years probation Sixty nine America in terminal stasis The air's so thick it's like drowning in molasses I'm sick and tired of paying these dues And I'm sick to my guts of the American ruse Phony stars, oh no! crummy cars, oh no! Cheap guitars, oh no! Joe's primitive bar... nah! Rock'em back, Sonic! The way they pull you over it's suspicious Yeah, for something that just ain't your fault If you complain they're gonna get vicious Kick in the teeth and charge you with assault Yeah, but I can see the chickens coming home to roost Young people everywhere are gonna cook their goose Lots of kids are working to get rid of these blues Cause everybody's sick of the American ruse Well well well, take a look around! Well well well, take a look around! Well well well, take a look around! Well well well, take a look around! Well well well, take a look around!