Accessibility Technology

WAI-ARIA / HTML5 Accessibility Testing Toolbar

I have to admit that I had no idea what the hell a favelet was, so I Googled it.  Smashing Magazine had this to say, it seemed relevant, so I shamelessly stole it from  Hopefully the copyright gods won’t strike me down:

If you’ve used them once you’ll never be able to work without them. Bookmarklets (or Favelets) are tiny Javascript-Snippets, which are stored within a bookmark and add particular functionalities to the browser you’re using. It doesn’t matter whether you browse, bookmark, look up, search, design or program – depending on your interests, bookmarklets can significantly enhance your efficiency and productivity.

Ok, got it…now this session might make some sense to me.  WARNING FROM THE FUTURE:  unfortunately, I was a little lost in this session until I understood that the presenters were showcasing favelets they built and use to look at and test ARIA and HTML5 elements in the browser.  I must have been in the minority in this audience, ’cause pretty much everyone else seemed to know what the presenters were talking about.


  • Jim Thatcher
  • Suzanne Taylor (works for Pearson)


  • His favelets were inspired by web accessibility Toolbar
  • Make things go faster and be more thorough
  • In IE, they’re saved as bookmarklets
  • Started with images
  • Wanted to provide alerts and alert counts
  • Text size favelets
  • Skip links favelet checks for skip links and whether they will “work” or not in IE6-8
  • Form labels favelet
  • Presented a slide with a large list of favelets, which I won’t transcribe here
  • DOM reader for HTML5 canvas objects
  • Simple example:  simple drawings – short text alternatives
  • Fallback content is supposed to be sent to Assistive Technologies; AT tries to read whatever is displayed.
  • Conditional drawings – dynamically generated text alternatives:  JS draws on canvas, Writes parallel content to the DOM



  • Tracking focus for:  Magnifiers
  • scrolling with text to speech
  • scrolling with voice control
  • support for keyboard access
Landmark favelet demonstrated on Jim’s web site.  Highlights all the landmarks…groovy.  Had a slide which showed which listed all the WAI-ARIA and HTML5 landmarks, another one which listed warnings.
ARIA favelet displays
  • All role attributes
  • All aria 1-* attributes
  • Shows all of these, whether they are coded correctly or not
  • Tabindex=”-1″ (with WAI-ARIA developer coes keyboard access; developer must code any changes in focus)
  • Referenced elements
  • Referencing based on IDs
Slider / Range Favelet and Spin Button / Number Favelet
  • Make choosing numbers more user-friendly
Progress Bar and Scrollbar Favelets
  • If there’s interactivity on the canvas, is that passed via API to the AT?  No, you pass it to the DOM, which then passes it to the AT.
  • Is it valid HTML to put any tag into Canvas?  Yes
  • Are favelets screen reader accessible?  Long answer that eventually got to “yes”
  • Which browsers show ARIA?  All show some, but they’re not consistent.



By Paul Schantz

CSUN Director of Web & Technology Services, Student Affairs. husband, father, gamer, part time aviator, fitness enthusiast, Apple fan, and iguana wrangler.

One reply on “WAI-ARIA / HTML5 Accessibility Testing Toolbar”

%d bloggers like this: