How to target a braille / screen-reader via CSS
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?
: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 )
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…
<abbr title="Attachment Icon">A</abbr>