Go to overview: WAI-ARIA techniques with code examples

Using Aria role=dialog (optimised for mobile browsers), now also tested with NVDA 2012.3.1

Detlev Fischer, (detlev [dot] fischer [ at ] testkreis [dot] de)

Twitter: @wcagtest

Last update: 15 April 2013

The example

Display a dialog

Notes on recent changes and updates

Note (9. April): Following feedback from @mixolydian who asked why testing had originally used a slightly dated version of NVDA, I have re-tested with a more recent version (2012.3.1), only to find that the script re-focussing the triggering button does not work anymore in NVDA.

Note (10. April): A discussion with @jcsteh shows that the reason why focus management in NVDA currently does not work properly may be that the focus is re-set before the setting of aria-hidden to false takes effect (even though the line occurs before the focus is re-set). Interestingly, this problem did not occur in NVDA 2012.2 because that version did not support aria-hidden and thereby did not prevent the re-setting the focus into something NVDA thinks is still hidden. I have filed a bug @ NVDA.

This serves to show that any optimisation of code and ARIA markup to ensure something works across as many platforms, browsers and screen readers as possible deals with a moving target. The fine-tuned behavior may fail to work its magic in the next minor update of a browser or screenreader.

Earlier note: Following feedback and active code input from @cookiecrook I have updated the original example of role=dialog to improve accessibility (see section on changes below).

Description and background of example

The example shows how to use the Aria role dialog when opening pseudo window (div boxes) dialogues via scripting. The div with role=dialog references the h3 heading inside the dialog box via the aria-labelledby attribute, as recommended by @gezlemon in his article Custom-Built Dialogs. For simplicty, the dialogue div is originally just hidden, not dynamically inserted on the page via DOM scripting (I hope this doesn't make a difference in terms of focus handling, but it may).

The example is based the focus management scripts from Making an accessible dialog box by Nicholas C. Zakas (note that this author recommends using aria-describedby to reference the heading inside the dialogue).

Changes to improve accessibility and full keyboard access

Change to improve behavior in OS X

Results

Aria role dialog to announce a dialog (pop-up div box)

The sequence runs from focusing the trigger link to refocusing the same link after closing the dialogue. Tabbing action is indicated with TAB, enter with ENTER (Mac OS X: RETURN), arrowing down with DOWN ARROW, swiping with RIGHT SWIPE, double tapping with DOUBLE TAP.

Win 7, IE 9, JAWS 14 Supported
  • Tabbing:
    TAB Display a dialog - button ENTER Enter - Just an example - dialog - OK button TAB cancel button ENTER Display a dialog - button

    Note: Tabbing cycles focus within dialog but only because dialog code is placed at at the very beginning of the page - if placed at the end, tabbing beyond the 'Cancel' button focuses the browser chrome, then leads back into the dialog.

  • Arrowing through virtual buffer:
    DOWN ARROW Display a dialog - button ENTER Enter - Just an example - dialog - OK - button DOWN ARROW Cancel - button ENTER Enter - Display a dialog - button

    Note that arrowing down will not continue beyond 'Cancel' button (just repeat it). Arrowing up beyond h3 'Just an example' stops at reading the page title.
Win 7, FF 20, JAWS 14 Supported
  • Tabbing:
    TAB Display a dialog - button ENTER Enter - Just an example - dialog - OK - button TAB cancel - button ENTER Display a dialog - button

    Note: Same tabbing behaviour applies as noted above in results for Win 7, IE 9, JAWS 14.

  • Arrowing through virtual buffer:
    DOWN ARROW Display a dialog - button ENTER Enter - Just an example - dialog - OK - button DOWN ARROW blank DOWN ARROW Cancel button ENTER Display a dialog - button

    Note that arrowing down will not continue beyond "Cancel button" (just repeat it). Arrowing up will end at "Just an example".
Win 7, IE9, NVDA 2012.3.1 Supported (but no re-focusing of trigger)
  • Tabbing:
    TAB Display a dialog - button ENTER Just an example - dialog - OK - button TAB Cancel - button ENTER Screenreader testing of aria role dialog improved script - document - go to overview - visited link - WAI-ARIA techniques with code examples

    Note that with NVDA 2012.3.1, the focus management with aria-hidden does not seem to work as it did under NVDA 2012.2.1 - after closing the dialog, the visual focus indication moves to the triggering button, but the SR focus moves to the start of the page and reads it.

  • Arrowing through dialog produces strange results:
    DOWN ARROW button - Display a dialog ENTER link - Just an example - dialog - OK - button DOWN ARROW Just an example - OK - Cancel - Go to overvew - WAI-ARIA techniques with code examples - using Aria role dialog optimised for mobile. Further DOWN ARROW presses will repeat last long chunk of output.

    (Please correct me if I get things wrong using NVDA. Pressing NVDA key + space to switch back from focus mode to virtual buffer seems to have no effect, while ESC closes the dialog (as provisioned by the script.)
Win 7, IE9, NVDA 2012.2.1 Supported
  • Tabbing:
    TAB Display a dialog - button ENTER Just an example - dialog - OK - button TAB cancel - button ENTER aria role dialog document - button - display a dialog
  • Arrowing through dialog produces strange results:
    DOWN ARROW button - Display a dialog ENTER link - Just an example - dialog - OK - button DOWN ARROW go to overview - (starts reading page from top..) DOWN ARROW blank - aria role dialog document - button display a dialog - Just an example - dialog - Just an example (further arrowing up or down produces no results (application mode? effect of aria-hidden?)
Win 7, FF 20, NVDA 2012.3.1 Supported (but no re-focussing of trigger)
  • Tabbing:
    TAB Display a dialog - button ENTER Just an example - dialog - OK - button TAB cancel - button ENTER Screen reader testing of aria role=dialog - improved script - document - go to overview - visited link - WAI-ARIA techniques with code examples

    • Note that with NVDA 2012.3.1, the focus management with aria-hidden does not seem to work as it did under NVDA 2012.2.1 - after closing the dialog, the visual focus indication moves to the triggering button, but the SR focus moves to the start of the page and reads it.

  • Arrowing through virtual buffer: Reads role=dialogue, but re-setting the SR focus to triggering button does not work, as above.
    ARROW DOWN button - Display a dialog ENTER Just an example - dialog - OK - button Arrowing up and down produces no results. TAB cancel - button ENTER Screen reader testing of aria role=dialog - improved script.. (Please correct me if I got things wrong using NVDA)
Win 7, FF 18, NVDA 2012.2.1 Supported
  • Tabbing:
    TAB Display a dialog - button ENTER link - Just an example - dialog - OK - button TAB cancel - button ENTER aria role dialog document - button - display a dialog
  • Arrowing through virtual buffer:
    ARROW DOWN button - Display a dialog ENTER Just an example - dialog - OK - button Arrowing up and down produces no results. TAB cancel - button ENTER aria role dialog document - button - display a dialog.
Mac OS 10.8.x, Safari, VoiceOver Supported
  • Tabbing:
    TAB Display a dialog - button RETURN Just an example - with 2 items - dialog - OK button RETURN Display a dialog - button
  • Arrowing with VO + arrow right: Same behavior as with tabbing (only that link needs to be activated with VO + space bar).
Mac OS 10.8.x, Safari, VoiceOver
(Test supplied by @cookiecrook)
 Supported
  • Tabbing:
    TAB Display a dialog - button RETURN Just an example - with 2 items - dialog - OK button RETURN Display a dialog - button
  • Arrowing with VO + arrow right: Same behavior as with tabbing (only that link needs to be activated with VO + space bar).
Mac OS 10.6.8, Safari, VoiceOver Partial support

While VO does not speak role dialog, it does announce the dialog heading associated via aria-labelledby.

  • Tabbing:
    Display a dialog - button RETURN OK - Just an example - button TAB Cancel - Just an example - button RETURN Display a dialog - button
  • Arrowing with VO + arrow right: Same behavior as with tabbing (only that link needs to be activated with VO + space bar).
iOS 6.1.3, Safari, VoiceOver (iPad mini) Partial support

While VO does not speak role dialog, it does announce the dialog heading associated via aria-labelledby. Focus handling works only when everything outside the dialogue is masked with aria-hidden.

Swiping:
RIGHT SWIPE Display a dialog - button DOUBLE TAP Display a dialog - Just an example - heading level 3 RIGHT SWIPE OK - button RIGHT SWIPE Cancel - button DOUBLE TAP Display a dialog - button.

Note that the focus trapping behaviour (i.e., VO focus can't be moved beyond the cancel button) depends on the entire rest of the page (i.e. everything but the dialog div) hidden with aria-hidden. Otherwise the VO focus will move to the next bit in source code order that you failed to hide (circling to page start at page end), not to the dialog. While the script should move the focus to the OK button, it actually moves it to the first element of the dialog, the heading.
Android 4.2, Firefox, Talkback (Nexus 7) Partial support

Swiping:
RIGHT SWIPE display a dialog - button DOUBLE TAP button OK RIGHT SWIPE button - cancel DOUBLE TAP aria role equals dialog - button - display a dialog.

Note that the role dialog is announced only after closing the dialog, so this is not so useful. Setting the focus to the dialog div or the h3 heading instead of the OK button might be advantageous here.