CSS generated content and screen readers

As all widely used web browsers (unless you still consider IE7 as being widely used) now support the :before and :after pseudo-elements along with the content property, using those pseduo-elements has become more and more common.

There are many clever CSS tricks they can be used for, like implementing a particular design without having to insert extra markup into your HTML. There is one catch though, and many developers seem unaware of this: 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. I made a CSS generated content demo page so you can try it yourself.

Depending on what is inserted, this may not be a problem. It may even be a good thing. But I have seen developers use CSS pseudo-elements to insert nonsensical content that they wouldn’t put in the HTML because it isn’t semantic, thinking that “well, this is CSS, and CSS is for presentation, so it should be all good”. And I can’t blame anyone for thinking that, because some of the things that happen with Screen readers and CSS are pretty unintuitive.

CSS generated content can cause problems for screen reader users in two ways:

So just a brief heads-up that CSS generated content is not invisible to all screen readers. Neither is it announced by all screen readers. In other words, use with care and consider what happens both when it is supported and when it isn’t.

Posted on May 18, 2012 in CSS, Accessibility