Dialog: Improve accessibilty

[jzaefferer]

add an aria-describedby attribute on the dialog if there is nothing yet in the dialog content.

@ezufelt could you give this a try? I've put together a test page for modal form dialog's with better markup then those in our demos:

http://view.jqueryui.com/dialog/tests/visual/dialog/form.html

That page has some info on what it provides and what we expect to happen based on the current implementation. Looking for input both on our assumptions as well as the implementation.

This change and a few already landed in master overlap with changes from this earlier pull request: https://github.com/jquery/jquery-ui/pull/704/files
Restoring focus to the trigger is implemented, setting the aria-describedby attribute is being added here, though only under the condition that there's no markup including an aria-describedby attribute yet.

I hope we can get away without the extra role="document" wrapper element. Base on my testing with current Firefox, NVDA and JAWS 12, it seems to work fine without it.

[jzaefferer]

@larowlan @ezufelt could you review and test this? Its supposed to replace #704.

[larowlan]

@jzaefferer have sent call-out to a11y folks involved with Drupal to help test

[mgifford]

Well, I'm not much of a screen reader tester, but this is what I get in FF with VoiceOver:

Open Form Dialog Button - On focus

"dog" - content selected - "Your favorite animal" "Please share some personal information" "Please share some personal information" Text

Open Propt Dialog Button - On focus

Password Text

So it's better.

But It is really hard to understand the context that I'm getting dropped into with the Open Form Dialog Button & not sure why it repeats itself.

With the Open Propt Dialog Button I really don't know what I'm missing. I don't hear the other information on the dialog.

But I can open & close it pretty well & jump between the elements.

[larowlan]

Feedback from Vincenzo Rubano (falcon03 on drupal.org)

1. FF 16 + Windows 7 + NVDA 2012.2.1 or Jaws 13: works as expected.
2. IE 9 + Windows 7 + NVDA 2012.2.1: dialogs work as expected, even if all groups labels are announced and this could eventually create confusion for the end user.
3. IE 9 + Windows 7 + Jaws 13: The first form dialog doesn't work as expected, since descriptions aren't announced. The second dialog works as expected, but the description is read only after the password field label.
4. Safari + Mac OS X: . Dialog doesn't work as expected, since when it opens the cursor is moved to the first form field and the dialog title and dialog description aren't announced. If I want to read them, I have to move back to them and then come back to the first form field of the dialog. Not a great thing.

[jzaefferer]

Thanks @mgifford and @larowlan for the feedback. I just tested with VoiceOver on OSX 10.6 with both Firefox and Safari. In both cases VoiceOver doesn't read any of the aria-markedup descriptions. Consider that those work pretty well as intended for both JAWS and NVDA, I don't think we should try to work around VoiceOver's limitations with some hack like live-regions.

I'll also ping Hans Hillen about this, maybe he some more input.

[jzaefferer]

Merged the dialog-review branch. That improves focus handling, which is relevant here as well, and uses the button widget for the close button, which is more accessible as well (tooltip text, space-to-activate works).

[jzaefferer]

I've commented on the two dialog accesiblity tickets: http://bugs.jqueryui.com/ticket/7861#comment:6 and http://bugs.jqueryui.com/ticket/7862#comment:5
In short: Modal dialogs work really well, non-modals have issues.

I've tested, with VoicerOver the modified dialog by @hanshillen found here: http://hanshillen.github.com/jqtest/#goto_dialog
The result is the same: VoiceOver ignores aria-described and role=group elements, so text outside of the inputs can be read only using VO+cursor keys (ctrl+option+cursor up/down). Unhelpfully, VoiceOver then restricts that navigation to the surrounding group.

[jzaefferer]

Landed in master, closing six tickets.

[larowlan]

Great work guys!