Videos of screen readers using ARIA
Recordings of screen readers using widgets with and without WAI-ARIA can be a good educational resource for why ARIA is important to accessibility. There aren’t many out there, but here’s what I found.
Note: This article is out of date. The new post “Videos of screen readers using ARIA, updated” contains all the original content that is still relevant plus new content that’s arisen since this piece was written.
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, 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.
This first video is the best, as it shows a page without and then with ARIA live regions enabled, as well as the difference between polite and rude notifications.
ARIA Live Regions Screen Reader Demo
YUI has ARIA versions of several of their widgets, and each has a video of a screen reader using it:
- YUI 3 Beta 1 ARIA Menu Button
- YUI 3 Beta 1 ARIA Tabview
- YUI 3 Beta 1 ARIA Toolbar
- ARIA-enabled Alert dialog
- Example Page Using YUI Grids And ARIA Landmark Roles
- Menu Button Using The “activedescendant” Property
- Screen reader accessible Menu Button
- Menu Button Using Roaming TabIndex Technique
- YUI MenuNav Node Plugin using ARIA
- Using the Carousel ARIA Plugin
- Using the Menu ARIA Plugin
- Using the Container ARIA Plugin
- Using the Button ARIA Plugin
Unfortunately none of the YUI videos demonstrate what the user would hear were it not for the addition of ARIA, but they’re interesting nonetheless.
Update 2/17/11:
A couple comments pointed me to some additional videos of screen readers using ARIA.
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:
Aaron Gustafson also has a video of his great TabInterface widget being read by NVDA.
Stunning CSS3: A Project-based Guide to the Latest in CSS
Flexible Web Design: Creating Liquid and Elastic Layouts with CSS
[...] This post was mentioned on Twitter by Monique Brunel, Joseph R. Lewis ? and Jason Kiss, Zoe M. Gillenwater. Zoe M. Gillenwater said: Videos of screen readers using ARIA widgets: http://bit.ly/ePB17U (new on my blog) Do u have more examples to add? (pls RT) #a11y [...]
At exactly the moment I was asking around how user agents support ARIA, your post graciously appeared in my Twitter stream. I loves the lazywebz—thank you for posting this.
You’re welcome! I love the lazy web too.
This is a very useful video, thanks. It could have done with including a demo of the assertive attribute for aria-live but otherwise great.
[...] Videos of screen readers using ARIA Zoe Gillenwater spotlights video documentation on ARIA usage. Most were created by Todd Kloots of the Yahoo! Accessibility Lab. Visit his video channel for more videosRecordings of screen readers using widgets with and without WAI-ARIA can be a good educational resource for why ARIA is important to accessibility. There aren’t many out there, but here’s what I found. [...]
I was playing with ARIA too lately and wrote an article about how screen readers read ARIA in combination with HTML5 (since everyone out there told us we should combine them) and the result is here:
http://cssgallery.info/how-screen-readers-speak-a-page-with-html5-and-aria/
This is a great resource, Lucica! I’ll add the video to this post later tonight if you don’t mind.
Great links Zoe, thanks. I have been diving into ARIA quite a bit as well. I recorded interaction with TabInterface.js in Firefox with NVDA a while back (in case you’re interested).
Thanks so much for this, Aaron! I’m currently working on creating a tab interface using ARIA. I’ve been having trouble figuring out how to move out of the tabs and into the content of the tab panels, in both NVDA and JAWS. Perhaps it’s just the script I’m using. I’ll check yours out today.
Oh, another thing Aaron: I love your “Why ARIA?” presentation on Slideshare. Viewed it a while back and wish I could have seen the presentation in person. Thanks for sharing it.
Sure, I am not an expert so Windows Eyes test was a total failure – but it’s a good starting point to learn how to use screen readers. I think more videos like these are needed so we can all learn from each other’s experience and prove that testing your website with a screen reader is not rocket science – you don’t need to be an expert or a blind user to start using one today.
[...] while but, the team at Patriot has taken it to a whole new level. Saved the best for last! Check out this page which shows actual videos of screen readers using ARIA interfaces. ARIA is probably one of the most [...]
[...] with newer technologies such as WAI-ARIA to make accessible rich Internet applications. Check out examples of screen readers using interacting with ARIA live regions. I’m excited to work more with newer technologies and set standards for our company’s [...]
[...] previous post “Videos of screen readers using ARIA” needed a good updating: I’d found several more applicable videos and some of the [...]
[...] than on learning ARIA is a crime. (Furthermore, learning ARIA isn’t complete unless you’re listening to the results in a [...]