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:

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.

Did you like this?

16 Responses to “Videos of screen readers using ARIA”

  1. Joe Lewis

    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.

    Reply
    • Zoe Gillenwater

      This is a great resource, Lucica! I’ll add the video to this post later tonight if you don’t mind.

      Reply
    • Zoe Gillenwater

      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.

      Reply
  2. Lucica

    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.

    Reply

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>