WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Pure CSS icons and accessibility

for

From: Iza Bartosiewicz
Date: May 25, 2010 8:54PM

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