WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Pure CSS icons and accessibility


From: Egan, Bim
Date: May 19, 2010 2:30PM

Hi Iza,

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

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?


-----Original Message-----
[mailto: <EMAIL REMOVED> ] On Behalf Of Iza
Sent: 18 May 2010 03:58
Subject: [WebAIM] Pure CSS icons and accessibility


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

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/



Izabella Bartosiewicz
Web Coordinator
RMIT University Library

03 9925 3103
twitter.com/mr0wka18 ( http://www.twitter.com/mr0wka18 )

Save a tree... Don't print this email unless you have to...