This was an issue I ran into today, so thought I’d blog about it.

When dealing with dynamically added and removed content on web pages, there are usually two approaches: One approach is to show and hide content in the place where the trigger for this change is. An example of that is the Mozilla Corporation Careers page. Clicking one of the links “Meet Mozilla”, “The team”, “Life at Mozilla” links will replace one text portion with another, in the same place, right below the list of these items.

The second approach is to add the new content to the end of the HTML document, and then use CSS to position the content on top of, or in the place of, a specific location visually. An example of this is the jQuery Thickbox demos page. Clicking one of the demo links, for example for the image, the gallery or the “keep in mind” demo, the text is being added to the end of the HTML, probably by some document.addXxx method in JavaScript or the like.

Visually, these two methods may vary a bit in styling, but have the same effect: You click something, and some text or images become visible or are being replaced by something else, without a page being reloaded.

For a screen reader user, the two methods make a profound difference. In order for a screen reader to present a web page to the blind user, a form of accessible tree traversal or even DOM or HTML parsing has to take place so the screen reader knows which elements there are, and in what order they appear. CSS styling is then used to determine whether something is hidden or visible, formatted as a block or the like. Also, some attributes for text etc. are being derived from this information. But positioning information is always secondary to the actual order in the source HTML, be it hard-coded or generated via JavaScript.

To put it in other words: Even a three-column page layout will appear to the screen reader user in a single-column, top-to-bottom fashion for easier readability.

The consequence is that, in the second example, the new content will always be found at the end of the screen-reader-rendered content. On Windows, this is at the end of the virtual buffer, even below the copyright notice or the like. On Linux and the Mac, one also has to use navigational methods to get to the end of the rendered content (for example by navigating all the way to the end with Orca or by getting to the last element while interacting with the HTML content on Mac). This is true across browsers (Firefox, IE, Safari). So to read the content that newly appeared in the thickbox, the user has to scroll all the way to the end, do whatever is necessary there, and then return to the top and navigate down using heading navigation or the like to find the place they left off. This is not very efficient or intuitive.

The same can be observed on Facebook where if you add a friend, the question whether you really want to send the friend request, will be appended and is found far down at the very bottom of the page for a screen reader user. Visually, it appears in the vicinity where a sighted user clicked the “Add as friend” button.

The Mozilla example, on the other hand, replaces the text right below the list, making it easily accessible within the context the user is currently working in anyway. The user never has to leave the general vicinity to get from introduction to the “Meet the team” etc. parts. Navigation back and forth is quick and efficient.

Therefore, when you design dynamic content, write an accordeon widget or the like, please please please always take the time to chose an appropriate div element in the vicinity of where the user is, and add or remove the dynamic content there instead of taking the maybe easier, but far less intuitive, route to simply dump to the end of the document node’s children and then use some weird styling to craft it visually. You’ll help all screen reader users visiting your site by offering them more efficiency in that they don’t have to navigate between chunks of the content that are far apart.

Mick and Jamie from NV Access, the organization behind the free and open-source NVDA screen reader for Windows, are taking new approaches to accessing accessible Flash and Java applets inside the browser.

Traditionally, Adobe Flash content is being rendered into the virtual buffer in Windows screen readers such as JAWS. Over the years, this has proven to cause several issues:

  • Dynamic content frequently updating causes the virtual buffer to either get out of date, or to update so frequently that reading the content is close to impossible.
  • Accessing content can be cumbersome if Forms Mode or similar concepts are not properly handled.

For these and other reasons, the WebAIM screen reader survey taken last year ranked Flash as the technology posing the most accessibility obstacles on the web for blind users. 71% of all participants found Flash to be difficult or extremely difficult to use. Inaccessible Flash applets, which take up the vast majority of Flash content out in the wild, are doing the rest to strengthen this view.

With Java applets, things get even more complicated. For one, one has to install the Java Access Bridge from Sun Microsystems, to get Java to be accessible at all, inside the browser and elsewhere. Once that hurdle is taken, Java applet content is not rendered inside the virtual buffer, but is present somewhere within the browser window, and one usually has to try to tab to it and get focus to it that way, outside the context of the virtual buffer. Accessible Java applets are very rare and currently hardly play any role when considering accessibility on the web. If at all, they’re viewed as obstacles and something to be avoided.

However, this could change with the approach the NV Access team is taking. In their latest snapshot build, they are introducing an interaction model that is remotely similar to what blind Mac users have come to know and appreciate from Apple’s VoiceOver screen reader. What you do is this:

  1. You load a web page that contains Flash content. For example, take any YouTube video.
  2. You navigate to a spot that says “embedded object clickable” with the normal virtual buffer navigation methods. For easiest access, NVDA provides the quick navigation key o to get to embedded objects.
  3. Press Enter.
  4. What this does is zoom in on the embedded Flash object and give it focus. Now, use Tab and Shift+Tab to navigate around the Flash app. Other keys such as the arrow keys also will perform differently now, for example left and right will scrub through the video on YouTube.
  5. When done, press NVDA+Space to leave the embedded object and zoom out, returning to the parent web page. Your virtual buffer navigation will now function the same way as it did before you zoomed in on the Flash.

One note of caution: I fell into the trap that I thought the content would be rendered in the virtual buffer, as is traditionally done with Windows screen readers. To be honest, I didn’t read the note on this feature before I played with it. 🙂 But if you don’t tab after pressing Enter, you will immediately leave the embedded object and continue navigating with the virtual cursor. This is because Flash does not focus any particular object inside the applet by default when the applet itself gains focus.

When I tried this on YouTube earlier, I had the feeling I had never seen so many details of the YouTube player before! 🙂

One more thing: The above technique will work in Firefox 3.5.x and the latest Minefield nightly builds, and it will also work in the 3.6b1 that’ll be available some time soon, but is not going to work in the 3.6alpha release we issued beginning of September, due to a regression that only recently got fixed in the 3.6 codebase.

With this new, in my opinion more user-friendly approach to accessing Flash content and Java applets, making sure your Flash or Java applets are accessible is becoming even more important than it already is, since blind users will be able to interact with applets more seamlessly than before.

And while we’re at it, the better support in NVDA for Flash should also be an incentive to Adobe to make Flash accessible on other platforms such as Linux and Mac. For the Mac, have a petition to Adobe for making Flash accessible on the Mac. If you haven’t already done so, I encourage you to show your support by signing that petition!