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


[James Craig:]
> 
> 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.

What screen readers are you using? Those I've tried limit themselves to DOM
nodes and have no access to generated content. 

> 
> 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!"; }

I assume you are referring to the GCPM version of the content property. I would 
expect "New!" to be used in this case if start.png does not load i.e. it's not 
really alt text fallback. (Also note that many implementations do not yet support 
this content syntax and will reject the declarations above).

> 
>  /* 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?

I'm not sure the content property supports the notion of alternative content
as you intend it yet.

Received on Thursday, 15 November 2012 21:13:18 UTC