This is for this development stage. It lets us double check that all attributes are what we think they are while testing ARIA support. (I wrote it based on concepts illustrated in the favelets by Jim Thatcher.)

It is not quite the type of tool I'd recommend for testing in the production environment. It's too generic, but we'll have other tools for that shortly.

What is this?

Well, you put this in your bookmarks or favorites in your browser and when you choose it, it lets you know what aria attributes are present on the current page. It checks for role attributes, any attributes beginning with "aria-" and any tabindex="-1" attributes.

An alert lets you know a summary of the results. If there are elements with WAI-ARIA, an h6 heading is placed right before each such element and indicates what the attributes are. For screen reader users, this heading always begins with the word "Found" and the end of the element is marked with "END Element".

Get the Favelet:

  • javascript:void((function(){var%20element=document.createElement('script');element.setAttribute('src','http://www.manateeroad.com/favelets/revealARIA.js');document.body.appendChild(element)})());
  • ARIA Right click this link (Ctrl+Space on a Mac or Shift+F10 on Windows) and choose "Add to Favorites" or "Bookmark this Link")

Tested Successfully with:

  • Windows XP Laptop
    • IE 7
    • FF 3.5.7
  • Windows 8 NetBook
    • IE 8
    • FF 3.5.7

To Do:

  • Handle Frames
  • When value of aria attribute is an id, highlight target object and reveal its id
  • Write VPAT! (pattern in addition to color, h6 always starting with F to find element, and element end marker)