E-mail List Archives
Thread: Content property and Failure 87 (non-decorative content)
Number of posts in this thread: 2 (In chronological order)
From: Fernand van Olphen
Date: Tue, Aug 01 2017 5:37AM
Subject: Content property and Failure 87 (non-decorative content)
No previous message | Next message →
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.
HTML
<i class="attention"></i>
CSS
.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"?
Regards,
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
From: Beranek, Nicholas
Date: Tue, Aug 01 2017 7:48AM
Subject: Re: Content property and Failure 87 (non-decorative content)
← Previous message | No next message
If you use aria-label with the <i> element, then you'll need to apply a role. In this case, I recommend adding role="img". That would be a sufficient technique for SC 1.1.1.
Nick