Use CSS3 transforms, makes your pages more accessible!

If you’re one of those types who likes to visually twist, rotate or tweak some text, in previous years the only real choice was to use pictures to achieve such visual effects. However, thanks to CSS3 transforms, supported in Firefox 3.5 and later, Safari 3 and later, and Opera 10 beta, it is now possible to use plain text and rotate, twist and tweak its looks via CSS. The big advantage: Screen readers will still read the text OK because their reading order is not influenced by the visual appearance of the text. So even text rotated by 45 or 90 degrees will appear correctly in a screen reader’s virtual buffer.

There even is a workaround for IE, but it doesn’t work in IE 8. To quote a friend from Germany: “Maybe IE 17”. 🙂


19 thoughts on “Use CSS3 transforms, makes your pages more accessible!

  1. You’re right Marco in that accessibility in SVG is definitely being talked about with more work planned

    There have also been discussions within W3C that WAI-ARIA version 2 will look more closely at making SVG accessible. Of course the drawback here is that we’re waiting for screen reader to catch up and work nicely with SVG.

    More info on my blog at .

  2. @Ms2ger: even if Opera 10 will not be able to render Transforms (i thought Opera announced their support some times ago…), it won’t affect many users anyhow. Transforms fortunately don’t need no fallback, so IE and Opera will display text boxes as they did since the beginning of time 🙂

  3. @Henny: Thanks! It’s just that I was rather disappointed when I tested in Opera 10b3 and they turned out not to work.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.