FLUID-258: Dissect Dojo examples to techniques to make widgets accessible in non-ARIA environments

Description

We need to develop techniques for the Reorderer and Lightbox to function accessibly in non-ARIA environment.s

Comments

• Michelle D'Souza commented 2008-03-13T15:21:49.000-0400

  David, Joseph and I (Michelle) met to talk about options for non-ARIA support. We came up with a few techniques that we'd like to try. These include improvements to the ARIA.

  1) Add an aria-describedby and a labelledby to the Reorderer container that links it with the instructional message.

  2) Add a title to each thumbnail div with the form "thumnail of <name>". This will need to be done in an internationalization friendly manner.

  3) Add a role to the instructional message of type "description"

  4) Add an aria-describedby and a labelledby to each thumbnail that links it with the image link inside the thumbnail.

• Anastasia Cheetham commented 2008-03-17T11:38:40.000-0400

  A thought about point #2 in Michelle's comment:

  Given that the title will contain the name of the image, then the title becomes part of the template that must be filled in by the application using the Lightbox. So for example, the Image Gallery Tool will have to be updated to fill in the name of the image.

• Anastasia Cheetham commented 2008-03-20T11:18:27.000-0400

  Investigating "describedby" and "labelledby."

  According to http://developer.mozilla.org/en/docs/Accessible_DHTML,"describedby" is not supported by JAWS in FF, though "labelledby" is supported by both JAWS and Window-Eyes in FF. So I have been focussing on "labelledby."

  So far, only FF3 will allow JAWS to read the "labelledby" label. FF2 does not, IE7 does not. I haven't yet tested Window-Eyes.

• David Bolter commented 2008-03-20T11:33:25.000-0400

  Anastasia, just a reminder that you might want to try aaa:labelledby in FF2 instead of aria-labelledby... if you haven't already. Also when using describedby="foo" be sure to add the role "description" on the thingy with id "foo".

• Anastasia Cheetham commented 2008-03-20T11:36:05.000-0400

  David, thanks for the pointers. I did try both of those suggestions, to no effect.

• Anastasia Cheetham commented 2008-03-20T12:15:07.000-0400

  Regarding getting a screen reader to read the instructions:

  Labelledby (and describedby, I might assume) work when an item gets focus. We put focus on the thumb, not on the lightbox itself, so even if this technique worked in all environments, it wouldn't work as a way to get the instructions read.

  Putting the instructions div into the taborder before the lightbox itself can be useful:

  • JAWS with IE7 will read the contents of the div.
  • If the title attribute of the div includes the same instruction text, JAWS with FF2 and FF3 will read that (they won't read the text within the div)

  Regarding describing the thumbnails:

  labelledby and describedby don't seem to offer anything that the title attribute doesn't offer, and do require a separate div containing the relevant text, and so seem less attractive than the title option.

• Anastasia Cheetham commented 2008-03-20T13:04:25.000-0400

  Regarding adding title attributes to thumbnails:

  Adding a title attribute does not seem to add anything that is not already available through the image alt text and the link text - it either replaces the image alt text or it supplements it. In the case of mouse-based actions, it seems to complicate the issue by sometimes causing uninformative text to be spoken.

  A better solution might be to modify the alt text to say "Banada thumbnail" (rather than just "Banana") to imply that it is an image, and to distinguish it from the link text.