With the following markup:
<li role="treeitem" aria-expanded="false" class="expandable">Vegetables</li>
And this CSS:
.expandable:before { content: "\25BA"; /* a.k.a. ► */ }
The text character is exposed to accessibility trees according to the rules in the ARIA text alternative computation [1]. This character is spoken by some screen readers or text-to-speech engines as "Black right-pointing pointer" according to the unicode description for the character.
So the expandable tree item is spoken like this:
"Black right-pointing pointer, Vegetables, collapsed"
This is obviously not ideal, as the glyph is intended as a style that is already conveyed semantically via the attributes, and should be spoken as this:
"Vegetables, collapsed" (the 'collapsed' string varies by screen reader, but is generated based on aria-expanded="false")
CSS allows for text alternative fallback content to CSS-generated images, like so:
/* empty fallback text string, because the semantics are defined in the DOM */
.expandable:before { content: url(./img/collapsed.png), ""; }
/* similarly */
.new:before { content: url(./img/star.png), "New!"; }
/* or even better */
.new:before { content: url(./img/star.png), attr(data-new); } /* allows DOM localized values for @data-new="New!" */
However, there is no way to do the same thing with unicode characters exposed as text content.
.new:before { content: "\2730", "New!"; } /* both are text, so no way to declare modality in fallback order */
/* this character is ✰ which would be spoken as "black shadowed white star" instead of the intended "New!" */
If this were an element (as opposed to a pseudo-element) we could override the label with @aria-label or hide the element entirely with @aria-hidden. Since, to my knowledge, there is no way to define modality-specific alternatives to unicode glyphs, we could potentially implement the "reader" media type.
.expandable:before { content: "\25BA"; /* a.k.a. ► */ }
@media reader { .expandable:before { content: ""; } }
.new:before { content: "\2730"; /* a.k.a. ✰ */ }
@media reader { .new:before { content: "New!"; } }
However, the CSS 3 Reader draft [2] has made no progress since 2004, and appears to be stagnant.
What does the CSS working group recommend for this scenario?
Thanks in advance,
James Craig
1. http://www.w3.org/WAI/PF/aria/complete#tac_gencss
2. http://www.w3.org/TR/css3-reader/