WebAIM - Web Accessibility In Mind

E-mail List Archives

Content property and Failure 87 (non-decorative content)


From: Fernand van Olphen
Date: Aug 1, 2017 5:37AM

Hi everyone,

My question is about the use of aria-label in conjunction with the content property.

Suppose a non-decorative icon (an error) is inserted via the content property.

<i class="attention"></i>

.attention: : before {
content: 'a123';

If I check Failure 87 (https://www.w3.org/TR/WCAG20-TECHS/F87.html), it says, under Procedure, step 3:

"If the inserted content is not decorative, check that the information is provided to assistive technologies and is also available when CSS is turned off."

"Also available when CSS is turned off": does that mean that the information must be in the HTML, like this:

<i class="attention"></i><span class="visuallyhidden">Error</span>

Or is aria-label also allowed:

<i class="attention" aria-label="error"></i>

In short my question is: should I consider aria-label as information that is "also available when CSS is turned off"?


Fernand van Olphen
Accessibility Advisor
Municipality of The Hague

De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u op: http://www.denhaag.nl/disclaimer