I'm using a webfont to display icons on a website. It works great visually — scalable, printable, and lightweight.
But there's a big accessibility issue: screen readers interpret them as regular characters.
For example, this code:
<span>i</span> Info
<span>t</span> Contact
Looks fine to sighted users, but a screen reader reads it as "iInfo", "tContact", etc. — which is confusing.
My question:
Is there a way to target only screen readers (or braille devices) via CSS?
I came across this W3C spec: http://www.w3.org/TR/CSS2/media.html#media-types
…but I'm unsure if it actually works in real-world scenarios.
Update (based on tests):
:before / :after → Some screen readers (e.g., macOS VoiceOver) do read the content out loud.
@media braille, speech → No effect on VoiceOver (tested in Safari & Chrome).
speak: none; → No noticeable effect in VoiceOver or NVDA (confirmed).
Has anyone found a reliable way to hide visual-only icon fonts from screen readers?
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>