I use a webfont to display some icons on a website. This is fantastic because they scale, and i can print them if i want to... But the problem is that blind people see them as normal letters or characters. The following example returns me a nice Icon + text.
<span>i</span> Info
<span>t</span> Contact
etc...
A blind person will just read: iInfo, tContact etc...
Is it possible somehow to target only braille- & screen-readers with CSS?
I found this on the w3 website, but I'm not sure if the work in real live: http://www.w3.org/TR/CSS2/media.html#media-types
Does anyone have any experience with this?
------update-----
:before & :after -> Some screen-readers such as VoiceOver for MacOS do read the "content" part out loud. I have tested this by my self.
@media braille, speech -> Seams not to have a influence on VoiceOver. It reads whats visible on the screen (tested with safari & chrome)
speak: none; -> has no influence at all on VoiceOver or NVDA ( https://twitter.com/#!/jcsteh/status/143848614979055616 )
3 Answers 3
I think there is no "ultimate solution" to this. But you can use the abbr-tag to describe the use of your font-char, therefore most screen-readers will read-out the title-param of abbr and the user gets the meaning of the 'icon-character'.
I'm not 100% sure, but as it seams NVDA, JAWS and VoiceOver for iOS this works — on Mac OS X (unfortunately) not...
Example:
<abbr title="Attachment Icon">A</abbr>
-
1ah this is a pretty sexy solution. In this way blind people could skip the icon and at least its announced as such– meoCommented Dec 13, 2011 at 10:01
-
1
-
1@stringy macos reads it out loud like everything else... :/ But still, i think its the best solution until now...– meoCommented Dec 14, 2011 at 8:53
You're not alone in wondering about the accessibility issues here. There's a lot of discussion about it on the recent 24Ways article on displaying icons with fonts and data-attributes. The suggestion Jon Hicks makes is to only generate your span using the :before pseudo-element, which isn't picked up by most screen-readers (I believe Apple's VoiceOver might be the exception, but test it in all your target browsers anyway). That way, sighted users will get the icon and the text, while assisted browsers will get just the text.
Edited to add: I haven't tried this method myself, but it seems pretty simple and predictable.
-
1I want to argue against using :before and :after: the key issue here is that while the text in these is not part of the DOM, it is visible to sighted users, and fundamentally screenreaders are all about attempting to get parity with sighted users, one way or the other. If the content isn't as content in the DOM, they'll pull it from the CSS if necessary. If not in the current version, then likely in future versions. The danger with using them today assuming that readers will ignore them is that readers will likely change behavior in future, 'breaking' your page. Commented Dec 13, 2011 at 12:28
-
I see your point. I think the font-as-icon is the part that should be added via :before, and as a progressive enhancement for people whose browser & AT can handle it. The actual text/content should be part of the base HTML with no css/js trickery so that it's available to everyone. I do think the font-as-icon technique is not as robust as it should be and won't be using it myself. But if someone is going to use it, they might as well try to make it accessible using present technology.– stringyCommented Dec 14, 2011 at 1:53
-
1the odd thing about this, though, is that it's not progressive enhancement - it's almost a bizarro reverse version: what happens is that you start off with the :before text not getting read out because some screenreaders today ignore it, which is the desired effect; but later on, screenreaders catch up and add support for these, and then it 'breaks'. The problem here is that we're relying on a feature not being available; whereas PE is about working well when the feature isn't available, and working better when it is. Commented Dec 14, 2011 at 11:10
-
Wanted to add this github Terse Font Icons method as a variation on the Jon Hicks article. The fact that it works now but might not later on is what I mean when I say it's not robust.– stringyCommented Dec 20, 2011 at 0:59
You could code it up like this:
<span class="icon">i<span class="audio-description"> icon</span></span> Info
<span class="icon">t<span class="audio-description"> icon</span></span> Contact
with the following CSS:
.audio-description
{
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
@media speech
{
.icon
{
display: none;
speak: none;
}
}
This adds a description for each icon that can be read out by a screen reader, but moves it off the screen so it's not visible in a standard Web browser.
The advantage of this is that it should degrade gracefully:
- in a standard Web browser, your icon should be rendered the same way it is now (unless CSS is disabled, in which case the viewer will see the extra icon text)
- in a screen reader that respects
@media speech, the icon should not be read out at all - in a screen reader that does not respect
@media speech, the icon should be read out asi icon, etc.
Furthermore, since moving content off the screen seems to be a common approach for providing alternative text for screen readers, its unlikely this solution will suddenly break (i.e. screen readers aren't likely to say the icon part first even though it's been shifted off to the far left).
:beforepseudo-elements.