WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Pure CSS icons and accessibility

for

From: Nancy Johnson
Date: May 28, 2010 11:00AM

The other issue is until IE support CSS3, its impractical.

Nancy

On Tue, May 25, 2010 at 9:54 PM, Iza Bartosiewicz
< <EMAIL REMOVED> > wrote:
> Thanks Sofia and Bim,
>
> Whether this technique takes off or not, the sites will have to work with the CSS switched off.
>
> cheers
> Iza
>
>
>> I would also look at accessibility for users displaying content with their
>> own color combination. The settings involved tend to turn off all authored
>> foreground colors, background colors and background images, resulting in the
>> disappearance of these types of images/icons. This technique cannot be
>> relied upon for important images.
>>
>> Cheers,
>> Sofia
>
>> Well the icons do look rather cool, and as you say, do  scale well.  It
>> doesn't look as they should be stand alone links though. Using keyboard
>> navigation  I couldn't tell which one was in focus.  JAWS does pick up
>> something, but more often than not it would be more of a hindrance than
>> a help, JAWS treated it as an empty link, so part of the URL is
>> announced.  In this case, it's just "rathersplendid", but with less
>> humanly recognisable or long URL references, it could be a real
>> nightmare.
>>
>> If the icons were included in part of a visible text link, this would be
>> accessible, as long as the icons weren't being used to convey useful
>> information.  For instance we all know what an RSS feed is I think, but
>> if the link were just "feed" accompanied by the RSS icon, this would be
>> visibly complete, but no good if you can't see the image.  Depending on
>> the web site, "feed" could mean anything.
>>
>> Other views?
>>
>> Bim
>>
>>
>
>> Subject: [WebAIM] Pure CSS icons and accessibility
>>
>> Greetings,
>>
>> I was reading Zander Martineau's post about his experiment with pure CSS
>> icons. It is interesting to see what can be created with the CSS alone,
>> although at this stage it seems like a lot of effort just to create
>> image replacements, which may not work as expected in some browsers or
>> devices.
>>
>> On the positive side, these icons scale well; however, the linked
>> examples from Zander's demo may not be accessible to JAWS. Each link
>> contains a bunch of spans and no link text, so to make this work would
>> require a link text to be positioned off-screen. This, on the other
>> hand, may affect keyboard accessibility...
>>
>> What are your thoughts on the pros and cons of this technique?
>>
>> Article: http://rathersplendid.net/home/pure-css-icons
>> Demo: http://rathersplendid.net/cssicons/
>>
>> cheers
>> Iza
>
>
>