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 n

Answer 1

You could code it up like this:

i icon Info
t icon 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).