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