E-mail List Archives
Thread: Pure CSS icons and accessibility
Number of posts in this thread: 5 (In chronological order)
From: Iza Bartosiewicz
Date: Mon, May 17 2010 9:57PM
Subject: Pure CSS icons and accessibility
No previous message | Next message →
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 ADDRESS 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...
From: Egan, Bim
Date: Wed, May 19 2010 2:30PM
Subject: Re: Pure CSS icons and accessibility
← Previous message | Next message →
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 ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Iza
Bartosiewicz
Sent: 18 May 2010 03:58
To: = EMAIL ADDRESS 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 ADDRESS 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...
From: Sofia Celic-Li
Date: Mon, May 24 2010 6:45PM
Subject: Re: Pure CSS icons and accessibility
← Previous message | Next message →
Hi 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
From: Iza Bartosiewicz
Date: Tue, May 25 2010 8:54PM
Subject: Re: Pure CSS icons and accessibility
← Previous message | Next message →
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
From: Nancy Johnson
Date: Fri, May 28 2010 11:00AM
Subject: Re: Pure CSS icons and accessibility
← Previous message | No next message
The other issue is until IE support CSS3, its impractical.
Nancy
On Tue, May 25, 2010 at 9:54 PM, Iza Bartosiewicz
< = EMAIL ADDRESS 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
>
>
>