CSS issue: Need fallback alternatives for CSS generated *text* content containing unicode glyphs

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/

Received on Tuesday, 13 November 2012 22:42:29 UTC