How to target a braille / screen-reader via CSS


Tags: html,css,accessibility

Problem :

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 )



Solution :

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>

    CSS Howto..

    How do I reference this textarea and checkbox?

    How Do I Get A Border From YUI GRID Tool?

    How to remove unwanted whitespace css/html

    JavaFx how to align only one column-header in tableview?

    Angular Material Flexbox - How to add margin between wrapped rows?

    How can I make it so the first element in a DIV has a different CSS to others?

    Dynamically loaded thumbnail image shows other thumbnails full size image instead of its own (using javascript hover over effect)

    How can I force browsers to reload cached CSS files when using Asp.Net Themes? [duplicate]

    How to style a dynamic html created by PHP

    Symfony2: How to link CSS to HTML part?

    How to push down absolute positioned div with CSS

    How to use CSS to make images in multiple li of one ul align by bottom edge?

    How to equally align two vertical columns created using a loop, an array, and appending childs in JavaScript (or CSS)?

    How to cancel a CSS style set by 'hover child' selector on event?

    CSS: how to make background on left and right of the content

    How to center a child element in CSS, even if it is larger than the parent?

    CSS How to display a single icon out of a matrix for a list item

    Extend page content in height or show white background under content

    How to access an svg inner id and have CSS change the fill color of that id?

    How to achieve the same background image effect made in other stack communities?

    How to call in Javascript a requestAnimationFrame loop?

    How do you prevent expanding outer element when adding padding? [duplicate]

    How can I add interactive content to a Bootstrap popover?

    How to target Syntax highlighter with CSS to change font size of code on display

    how to make the text in a div to not overflow its width

    (CSS) Set Id for Class How to Use

    How to override html property created by script (mediaelement.js)

    How to convert CSS class to id?

    Foundation 6: How to set .is-open-right translateX value with JavaScript

    How to change the background color of a span/div WITHOUT CSS [closed]