Make Flash accessible to screen readers in transparent window mode

The detour around flash for accessibility

Yahoo! Tech’s home page features a flash-based media space that highlights stories, comparisons, buying guides, blog posts, and more. Making this accessible required a bit of trial and error, but the solution was simple and can be used by sites everywhere.

Step 1. Inserting the flash object

The site uses the Unobtrusive Flash Object script by Bobby van der Sluis. This script checks to see if the user has JavaScript enabled and the correct version of Flash in their browser. If so, it inserts the code required to display the movie. If the user doesn’t have the requirements, a default set of information is presented.

This script cures the validation errors caused by the normal flash insertion code. Theoretically, it would also allow you to provide good, accessible content to those not using JavaScript and Flash enabled browsers, i.e. screen readers and search robots.

Window Mode Transparency conflict

However, we had an issue with the flash movie conflicting with a DHTML drop down menu. The flash movie wanted to have the highest z-index and thus sat on top of the menu. To cure this problem, we added the attribute wmode:transparent. This tells the flash movie: your window mode is transparent, you are not the boss, go sit in the back and let others take center stage.

This cured the overlapping issues but negated the accessibility features that we had hoped for. User testing with a screen reader was disheartening. Screen readers ignore flash movies with window mode transparent. They want to do what’s best for the user and ignore the little guy in the back corner.

We began searching for answers on the flash and accessibility forums and couldn’t find a way to get screen readers to read a flash movie with wmode:transparent. It simply isn’t possible at this time.

Step 2. Time for a detour

The U.F.O. enabled page features a div with default text. This is where we originally duplicated the content being fed via xml to the flash movie. Our hope was that the screen readers would ignore the flash and read the HTML content in this div. When this wasn’t possible, we literally thought outside the box.

The U.F.O. script uses visibility:hidden to hide the default box. We tried using text-indent and negative margins instead, but it still was not available to the screen reader.

The default div now has your standard non-optimized warning text: “For the best experience, please enable JavasScript and download the latest version of Flash….

screen with css disabled - both versions viewable
We then created a new div (id=”alternatecontent”) that features the content from the flash movie. It is pushed off screen by using absolute positioning. This hides the duplicated content from the visual design while providing the content to those without the visual abilities.

We’re satisfying two audiences with just a little extra code. Add the extra div for your screen reader audience (…and search engines!) when using wmode:transparent in your Flash movie. You’ll create valid, visually dynamic, and accessible pages.

Listen to the Yahoo! Tech media space as read by a screen reader (.mp3)

Get rid of the dotted lines on links with image replacement

Update 2-26-2014

This is obviously an outdated article. Please do not follow the older advice on using outline:none and hiding focus. We need to provide some visual cue that a user has placed their focus on a link or button via the keyboard. The key is not to hide focus, rather to avoid generating the marching ants that went off screen with older methods of image replacement. The key is hide the text while not pushing it off-screen. Thierry Koblentz’s article Clip your hidden content for better accessibility is the gold standard on using hidden text while avoiding the off-screen outlines and making your site global-ready.

If you do decide to use outline:none, you must make sure that you re-define the focus style. This is normally done by duplicating the :hover style

:hover, :focus, :active {
    text-decoration:underline;
}

Original post

I don’t remember where I first found this tip (Hedger Wang?), but it’s a good one. If you are using image replacement, i.e. background images and negative text-indent, you may notice a dotted line appear when the link is clicked and waiting for the page to change (:focus). It’s outlining the text that happens to be wayyyyy off screen. It’s easy as pie to fix this issue.

CSS Fix

This will fix the problem in Firefox. Just drop this into your global.css file.

a:focus {
    -moz-outline-style: none;
}/*this avoids having image replacement sections display a dotted outline*/

JavaScript Fix

This will fix the issue in the other browsers.

var theahrefs = document.getElementsByTagName('a');
//fix dotted line thing when link is OnClicked
for(var x=0;x!=theahrefs.length;x++){
    theahrefs[x].onfocus = function stopLinkFocus(){this.hideFocus=true;};
}

Update Your JavaScript Libraries

JavaScript libraries are a blessing to those of us that feel overwhelmed by the code. If you’ve used Prototype, Rico, Yahoo’s YUI libraries, or others in the past year, don’t neglect the versioning. These scripts get updated to fix bugs and add features.

I’m working on a project that had some annoying errors that were quickly fixed by simply upgrading to the most recent version of a YUI library object. Set yourself a reminder in Backpack or Thunderbird to check your sites every 4-6 months for updates, it’s an easy way to keep up to date.

Background image for visited links

Visited and unvisited screenshots on designmeltdown.com
I’ve been a recent convert to Design Meltdown. The site disects a visual theme and gives examples on how to use them and where they are being used. While exploring the latest post about sketches for the web, I noticed an interesting approach to the visited pages.

The Breakdown

The site has a series of floated divs to display the screenshots. The screenshot is applied as the background image of the div with an inline style. Inside the div is a link that is given display:block and a transparent background image.

Great idea – room for improvement?

While I think the visual design for these screenshots is well thought-out. I don’t like the underlying code. The screenshots are content; miniature representations of other sites. Adding them to the CSS is treating them as decorative elements. The text for each link is: “SCREENSHOT, ” making the page unusable with the styles disabled. To give this page more structure and semantic strength, I would modify the underlying code as such:

HTML Code

CSS Code


.screenshotlist {float:left; list-style-type:none;}
.screenshotlist li {float:left; margin:9px; }
.screenshotlist a {display:block; width:146px; height:130px; position:relative; }
.screenshotlist a strong {text-indent:-1000em; z-index:20; position: absolute; top:0; left:0; width:100%; height:100%; background:url(screenshot.png) no-repeat -154px 0; }
.screenshotlist a:visited strong {background-position:0 0;}
.screenshotlist a img {margin:5px 0 0 5px; border:none; z-index:1;}

Benefits of the new code

screenshot mask
The screenshots now have some structure; an unordered list with links full of good, crunchy content. Screenreaders and those without CSS will have access to the information. Javascript can be used to target links within the screenshotthumb div to open a new window without the need of inline scripting.

Cavaets: I haven’t tested this code yet. It’s very possible the z-index styles are not required. As an alternative, remove the margin on the image and replace it with a border. Add a rule to change the border color on hover and visited.

Design Meltdown is a great site for learning about design concepts. I’ve gleaned a number of nice ideas from them and would love to say I gave a bit of help back to them.