Search code examples
iconsaccessibilityfont-facepseudo-element

Do any screen-readers or similar enabling technologies "read out" content defined by the css content property?

I'm doing a project with font icons for css3 and two separate approaches to mapping characters have come to light.

  1. Icons are mapped to common characters, including alphanumeric characters and other keyboard-based characters.
  2. Icons are mapped into the Private User Area of unicode (U+E000..U+F8FF)

All the things being equal, I'd do things the first way. Css3 content is presentation only, and, in good practice, shouldn't be used to convey meaning, and it is far more user friendly. Users, in this context, being front-end developers who would otherwise need to deal with hex codes in their stylesheets, who can instead use keyboard characters.

One argument I've seen for using the private user area is to ensure that the css-defined content is not read out by screen readers. That sounds reasonable, but I can't think of a reason why a screen reader would do such a thing. The :before and :after pseudo-elements which the content property is used with are, by definition, not part of the DOM.

I've come across this video which shows that my assumptions are correct in three cases: Youtube video submitted by Dan Tamas, testing screen-readers with the css content property

Are there any examples of a screen-reader that bugs out and starts reading out css content to users? Could that even happen?

Solution

  • Roger Johansson wrote in 2012-05:

    […] several screen readers will speak content that is created this way. VoiceOver does (in both OS X and iOS). NVDA does when used with Firefox, though not with IE.

    Related links: