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″. :)

This entry was posted in Accessibility, Firefox. Bookmark the permalink.
Skip to top

Comments

19 Responses to Use CSS3 transforms, makes your pages more accessible!

  1. Twitter Comment


    RT @MarcoZehe Want to show rotated text? Use CSS3 Transforms, makes your pages more accessible! [link to post]

    Posted using Chat Catcher

  2. 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

  3. 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

  4. Twitter Comment


    rt @MarcoZehe: Want to show rotated text? Use CSS3 Transforms, makes your pages more accessible! [link to post]

    Posted using Chat Catcher

  5. Twitter Comment


    @MarcoZehe on a related note, how well supported is SVG for accessibility?

    Posted using Chat Catcher

  6. Twitter Comment


    @MarcoZehe CSS und Internet Explorer – das ist eine unendliche tragische Serie. :-( Oder besser gesagt Horror?

    Posted using Chat Catcher

  7. 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

  8. Ms2ger says:

    “and Opera 10 beta” – I wish that was true, but it doesn’t seem to be.

  9. Twitter Comment


    Want to show rotated text? Use CSS3 Transforms, makes your pages more accessible! [link to post] RT @MarcoZehe

    Posted using Chat Catcher

  10. 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

  11. 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

  12. 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

  13. 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

  14. Henny Swan says:

    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/ .

  15. Maxx Hilberer says:

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

  16. Henny Swan says:

    @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/

  17. Ms2ger says:

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

  18. Henny Swan says:

    @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

  19. Pingback: Laura Carlson (lauracarlson) 's status on Friday, 11-Sep-09 23:16:52 UTC - Identi.ca

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>