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 comments:

  1. @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 :)

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

What are your thoughts?