Web Design  »  Articoli  »  Web design 

Accessibility of STR

In the first version of STR, I used display:none to hide the plain text, letting show the flash movie dinamically added by Javascript.

Anyone involved in web development should be aware that display:none and visibility:hidden are two enemies of accessibility, since they will hide the text to some screen reader based on the rendering engine of Internet Explorer (for instance IBM Home Page Reader). There are lots of way of hiding a text while maintaining accessibility intact that could be borrowed from Image Replacement techniques.

So, I decided to adopt in the improved version of STR a replacement techique mostly based on the best IR technique ever: the Gilder and Levin cover-up span. Applied to IR, the cover-up span has a small disadvantage: the use of an extra (empty) span.

Since in STR the code for embed the Flash movie is added dynamically by Javascript, this disadvantage disappears, bringing also a significant improvement: in the case Javascript is on, Flash Player is available but disabled or blocked, the plain text will remain visible. This is the best improvement I brought to the first version of STR. So, basically in STR now the Flash movie is laid over the text that is going to replace: this should grant accessibility to screen reader, text browsers and users with Flash available but blocked. You can look how the page would render with flash blocked or disabled.

Another good point about STR is that while replacing links (or elements that contain just links) STR will preveserve them in the DOM tree, mantaining accessibility intact also in this case.

Compatibility

About the browser compatibility: STR has been tested and works fine in Internet Explorer 5.x and 6 on Windows, Opera 7.6, FireFox 1.1 and Safari 1.3.

Everyone who have tried embedding Flash in a pure DOM way maintaining the maximum cross-browser compatibility and injecting just the object element knows that is a real pain. So, I did it short and used innerHTML. You should be aware that this property is not part of standard EcmaScript nor of the DOM specifications, but it's extended on a very large set of browsers. This solution however will not work on XHTML pages served with mime type of application/xhtml+xml.

Credits, licence and download

I'd like to thank John Hanna from wow-factor.com, which encouraged me to translate the article on STR and provided me the screenshots for this one since I've got the italian version of SwishMAX. My "thank you" goes also to Shawn Inman, Mike Davidson and Geoff Sterns, whose ideas about IFR, sIFR and FlashObject are simply wonderful.

The fonts used for the example are: Airbus Special, SF Movie Poster, Eurasia and Bit4. They're all free fonts, and you could find them with Google.

English audience doesn't know about the first version of STR. All I can say is that in the version I've presented here I did a big step forward.. Even if STR is really basic and not so flexible as sIFR. I did my best, and almost reached my possibilities in improving it since I bought SwishMax and started playing with it just to develop STR. That's why I decided to release STR under a Creative Commons Deed. If you've done significant improvements, please let it know by writing me or publishing them in your website. If further and major improvements will come, perhaps I'll write a follow-up or open a Wiki.

If you've haven't done it yet, download STR here. And if you haven't got SwishMax, you can download a 15-days full working trial from the Swishzone website. Enjoy!

Altri articoli

Altre guide

Altre newsletter