[whatwg] [HTML5] Accessibility question

[Ian Hickson]

On Sat, 22 Mar 2008, Nicholas C. Zakas wrote:
>
> Apologies for not replying sooner, I've been struck with a bit of the 
> flu.
> 
> The problem I'm trying to solve is the case where you need descriptive 
> text for screen readers but that text is not necessary for sighted 
> users. For example, our accessibility guidelines at Yahoo! say that 
> every unordered list (<ul>) should be preceeded by a header that 
> describes its use. The header may say something like "Page options" or 
> "Available styles" and we use CSS tricks (text-indent: -10000px;) to 
> hide these headings from display while allowing screen readers to read 
> them. To sighted users, the meaning of the list is apparent because they 
> can see the visual treatments we've applied whereas blind users would 
> just hear a list read out of context.
> 
> Another example is for buttons that make use of sprites. Something is 
> implemented as a link but with a background image that's part of a 
> sprite. The link needs to have descriptive text for screen readers but 
> the text is unnecessary for sighted users as they can see the image. For 
> example:
> 
> <a href="#" class="close"><span>Close</span></a>
> 
> For things like this, I usually end up using the same CSS trick 
> mentioned above to move the "Close" text out of the way. Just looking at 
> the HTML, it's not apparent that "Close" is not intended to seen. 
> Whereas the following clears it up:
> 
> <a href="#" class="close"><span noview>Close</span></a>
> 
> Now I know from looking at the source code that "Close" is clearly not 
> intended to be seen.

This seems like a CSS problem. The text is only inapplicable because of 
the CSS, right? If the CSS wasn't applied, then even on a screen, the user 
would need the titles or button text you've described.

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'