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

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:

Does anyone have any experience with this?


: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 (!/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


<abbr title="Attachment Icon">A</abbr>

    CSS Howto..

    CSS how to align elements

    How can I apply percentage-based positioning to background-image sprites with pure CSS?

    How do I make the .left class appear below the header but keep the header position as fixed?

    How to change an image on mouseover of wrapper div

    How can i scroll to specific ID using Header?

    How can I style a JavaFX SplitMenuButton in CSS

    how to load multiple lazy css load file

    How to reposition my jQuery popup?

    How to make multiple gradient work with CSS

    How to replicate the CSS design of a website

    How to wrap lines in an inline-block with CSS?

    How to make rollover images in CSS using multiple image backgrounds and :hover pseudo

    Dompdf: how to get background image to show on first page only

    How to use css in

    How to style QTableView CSS

    JavaScript/CSS: How to resize (scale) window content

    How to get CSS hover menus to stay on top

    How to fit a big picture in a smaller space

    how to add an image on a div without losing previous content in CSS hover effect

    How do I set a cell background colour based on its contents using PHP after reading values from MySQL?

    How to put a background image on a site

    How to align brand title and links left in Bootstrap navbar?

    How to make attractive dropdown menu using css3? [closed]

    How do I center a dynamic div?

    How to show indicator of loading?

    How to use getElementId on and ID's Element

    How to add element to existing css class [closed]

    How can I mimic Leaflet.Draw tooltip style with a different tooltip plugin?

    2 Sidebar Columns Layout (How)?

    How to select a great grandchild of an element by its id