WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Content property and Failure 87 (non-decorative content)

for

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Fernand van Olphen
Sent: Tuesday, August 01, 2017 7:37 AM
To: ' = EMAIL ADDRESS REMOVED = ' < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] Content property and Failure 87 (non-decorative content)

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 The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.