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 🙂


Leave a Reply to Ms2ger Cancel reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

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