Videos of screen readers using ARIA, updated

My previous post “Videos of screen readers using ARIA” needed a good updating: I’d found several more applicable videos and some of the original videos had disappeared from the web, leaving the links to them broken. This article includes all the content from that original post that’s still online plus all the new stuff I’ve found, organized by topic this time.

I’ve been doing a lot of investigation into WAI-ARIA for work recently, mainly revolving around educating other developers. I’ve found a lot of great demos of pages and widgets that use ARIA, but not too many videos of screen readers using said widgets. This is a shame, because it’s often hard to understand the impact of ARIA without hearing how a screen reader announces the content both without and with ARIA in place, and not many people have or know how to use screen readers. I can certainly show developers who are accessibility-newbies the ARIA demos, but their accessibility benefits aren’t that clear without a recording of a screen reader using them and their non-ARIA counterparts.

Nevertheless, I was able to find a few videos of screen readers using ARIA-enhanced widgets, as well as other uses of ARIA, and I wanted to share the links here. I’m willing to bet there are more out there—it’s just hard to find them, since simply searching for “aria” on YouTube will get you a bunch of videos of people singing opera, not screen readers! So if you know of others, please let us know in the comments.

Live regions

This video, though longer than it needs to be, is great because it shows a page without and then with ARIA live regions enabled, as well as the difference between “polite” and “rude” notifications.

Here’s a less clear but much shorter demo of live regions. Every time text is added to the log text box, the entire contents of the box are read out by the screen reader automatically:

And here’s the shortest of them all: a demo of how a screen reader would announce how many characters are remaining for your Tweet when typing one on Twitter—if Twitter were to actually implement live regions:

[Update 10/21/11] Another practical example of how to put live regions to use, this time on Yahoo!’s site for real. The video doesn’t mention ARIA live regions explicitly, but that’s how they’re getting the search results suggestions to be read out automatically.

Landmark roles

Lucica Ibanescu tested a page with and without ARIA landmark roles and recorded NVDA, JAWS, and Window-Eyes using both versions. Here’s the version with the ARIA landmarks:

Here’s how the landmarks on Flickr’s site are read:

Nomensa has a nice, simple demo of how landmarks are read on their own site:

Widgets

Aaron Gustafson has a video of his great TabInterface tabs widget being read by NVDA.

The Yahoo! User Interface (YUI) Library used to have video demos of all their ARIA-enhanced widgets online, but for some reason they’ve disappeared. However, I found someone else’s recording of YUI’s drop-down menu widget, seen here being read by NVDA:

You can also see how JAWS reads this menu. This same person posted a video of a different Yahoo drop-down menu widget that doesn’t use ARIA, so you can compare the two experiences with and without ARIA.

Similarly, here’s the ARIA version of YUI’s tabs:

Compare this to the experience with the older YUI tabs that don’t use ARIA.

Miscellaneous

Here’s a video of an extremely simple but very helpful use of ARIA: adding aria-describedby to “more” links so that the text that’s read out for each makes more sense out of context, such as when tabbing through the page or reading a list of links by themselves.

Here’s how the same page sounded before using aria-describedby:

You can see the code that produced this change in the article Easy Fixes to Common Accessibility Problems by Todd Kloots on the Yahoo! Accessibility blog.

Another quick and useful ARIA trick involves using aria-labelledby to label a form text field with the content of a select field rather than the label element, as seen here:

The code for this is fully described in the article “Create Dynamic Form Labels with ARIA” by Ted Drake on the Yahoo! Accessibility blog.

Here’s another video from Yahoo! showing how to use role="img" and aria-label to make a CSS background image be treated like a foreground image by a screen reader:

Any more?

If you know of any other videos of screen readers using ARIA-enhanced pages, please let me know in the comments. I’ll update this page with any videos you share plus new ones that come out over time that I happen to stumble across.