W3C home > Mailing lists > Public > www-style@w3.org > November 2012

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

From: James Craig <jcraig@apple.com>
Date: Tue, 13 Nov 2012 14:41:41 -0800
Message-id: <3179C22A-6655-41CC-8506-D6275FE94CDC@apple.com>
To: "www-style@w3.org" <www-style@w3.org>
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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:23 UTC