WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Pure CSS icons and accessibility

for

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
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


-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Iza
Bartosiewicz
Sent: 18 May 2010 03:58
To: <EMAIL REMOVED>
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

--

----
Izabella Bartosiewicz
Web Coordinator
RMIT University Library

03 9925 3103
<EMAIL REMOVED>
www.rmit.edu.au/library
www.linkedin.com/in/izabartosiewicz
twitter.com/mr0wka18 ( http://www.twitter.com/mr0wka18 )

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