How to target a braille / screen-reader via CSS

Question

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 )

Answer 1

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>

Answer 2

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.

Answer 3

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 as i 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).