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”. 🙂
Twitter Comment
RT @MarcoZehe Want to show rotated text? Use CSS3 Transforms, makes your pages more accessible! [link to post] – Posted using Chat Catcher
LikeLike
Twitter Comment
RT @ScreenOrigami: RT @MarcoZehe Want to show rotated text? Use CSS3 Transforms, makes your pages more accessible! [link to post] – Posted using Chat Catcher
LikeLike
Twitter Comment
RT @fernmuendlich: RT @MarcoZehe Want to show rotated text? Use CSS3 Transforms, makes your pages more accessible! [link to post] – Posted using Chat Catcher
LikeLike
Twitter Comment
rt @MarcoZehe: Want to show rotated text? Use CSS3 Transforms, makes your pages more accessible! [link to post] – Posted using Chat Catcher
LikeLike
Twitter Comment
@MarcoZehe on a related note, how well supported is SVG for accessibility? – Posted using Chat Catcher
LikeLike
Twitter Comment
@theunfocused a11y for SVG is still being discussed in the WG AFAIK. There was talk of using WAI-ARIA, but don’t know where that is now. – Posted using Chat Catcher
LikeLike
Twitter Comment
@MarcoZehe CSS und Internet Explorer – das ist eine unendliche tragische Serie. 😦 Oder besser gesagt Horror? – Posted using Chat Catcher
LikeLike
Twitter Comment
RT @domasofan: rt @MarcoZehe: Want to show rotated text? Use CSS3 Transforms, makes your pages more accessible! [link to post] – Posted using Chat Catcher
LikeLike
“and Opera 10 beta” – I wish that was true, but it doesn’t seem to be.
LikeLike
Twitter Comment
Want to show rotated text? Use CSS3 Transforms, makes your pages more accessible! [link to post] RT @MarcoZehe – Posted using Chat Catcher
LikeLike
Twitter Comment
RT @ezufelt: Want to show rotated text? Use CSS3 Transforms, makes your pages more accessible! [link to post] RT @MarcoZehe – Posted using Chat Catcher
LikeLike
Twitter Comment
Play with text on web pages, but stay accessible. How? With CSS3 Transforms. [link to post] (@MarcoZehe via @ezufelt) – Posted using Chat Catcher
LikeLike
Twitter Comment
RT @stcaccess: Play with text on web pages, but stay accessible. How? With CSS3 Transforms. [link to post] (@MarcoZehe via @ezufelt) – Posted using Chat Catcher
LikeLike
You’re right Marco in that accessibility in SVG is definitely being talked about with more work planned http://www.w3.org/TR/SVGTiny12/access.html.
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 http://www.iheni.com/just-how-accessible-is-svg/ .
LikeLike
@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 🙂
LikeLike
@Maxx and @Ms2ger – I’m an Opera person and am happy to say that CSS transforms are on their way. You can check out this article about our CTO HÃ¥kon Wium Lie discussing upcoming CSS support in Opera along with a short video demo:
http://webworkerdaily.com/2009/03/27/opera-still-cooking-with-css3-on-the-way/
LikeLike
@Henny: Thanks! It’s just that I was rather disappointed when I tested in Opera 10b3 and they turned out not to work.
LikeLike
@Ms2ger well we hope to fix that and glad you road tested O10b3 🙂
By the way, I also found HÃ¥kon’s presentation from SXSW 09 if that’s of interest
http://people.opera.com/howcome/2009/talks/03-css3.html
LikeLike