Go to overview: WAI-ARIA techniques with code examples

Using Aria role=dialog to expose a dialog (pop-up div box)

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

Twitter: @wcagtest

Last update: 18 March 2013

Note: There is now a modified version of this dialog based on input by @cookiecrook, to improve accessibility in iOS which attains accessibility in JAWS + Firefox and improves mobile accessibility somewhat.

This 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 utilises the focus management scripts from Making an accessible dialog box by Nicholas C. Zakas. (Note that the latter author recommends using aria-describedby to reference the heading inside the dialogue).

Note: according to @jage9, role=dialog also works in Window-Eyes 8.

Example

Display a dialog

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 - link ENTER Enter - Just an example - dialog TAB OK - button TAB cancel - button ENTER Enter - Display a dialog - link
  • Arrowing through virtual buffer:
    DOWN ARROWlink - Display a dialog ENTER Enter - Just an example - dialog TAB Just an example - dot - OK - cancel - heading level 3 TAB tab - OK - button ENTER Enter - Display a dialog - link
Win 7, FF 18, JAWS 14 Not supported
  • Tabbing: JAWS does not announce role dialog but the h3 heading is referenced.
    TAB Display a dialog - link ENTER Enter - Just an example - heading level 3 TAB OK - button TAB cancel - button ENTER Enter - Display a dialog - visited link
  • Arrowing through virtual buffer: JAWS does not announce role dialog .
    DOWN ARROW visited link - Display a dialog ENTER Enter - Just an example - heading level 3 TAB Just an example - OK - button - cancel - button ENTER Display a dialog - visited link
Win 7, IE9, NVDA 2012.2.1 Supported (but repetitive)
  • Tabbing: NVDA announces role dialog but speaks h3 twice (first, as reference of aria-labelledby, then, as initial content of the dialogue).
    TAB Display a dialog - link ENTER Just an example - dialog - Just an example TAB OK - button TAB cancel - button ENTER aria role dialog document - visited link - display a dialog
  • Arrowing through virtual buffer: Same behavior as with tabbing.
Win 7, FF 18, NVDA 2012.2.1 Supported
  • Tabbing: NVDA announce role dialog.
    "Display a dialog - link ENTER Just an example - dialog TAB OK - button TAB cancel - button ENTER aria role dialog document - visited link - display a dialog
  • Arrowing through virtual buffer: Same behavior as with tabbing.
Mac OS 10.8.x, Safari, VoiceOver
(Test supplied by @cookiecrook)
 Supported
  • Tabbing:
    TAB Display a dialog - link RETURN Just an example - with 2 items - dialog - OK button RETURN Display a dialog - link
  • 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 Supported (but repetitive)

(Please note that later versions of VoiceOver will have better support and may produce different output.)

  • Very verbose output:
    Display a dialog - link RETURN Just an example - OK - Just an example - Cancel - Just an example - dialog TAB OK - Just an example - button TAB cancel - Just an example - button RETURN visited link - display a dialog
  • Arrowing with VO + arrow right: Same behavior as with tabbing (only that link needs to be activated with VO + space bar).
iOS 6.1,Safari, VoiceOver (iPad mini) Not supported VoiceOver does not read role dialog. Script to move focus to dialog does not work; after activating the link (double-tab), the announcement of "display.." seems to be interrupted by the fous move to the first focusable item on the page ("Go to overview"). Accessing the dialogue would then need to move the oage again before reaching it. Script to contain focus in dialog does not work.
RIGHT SWIPE Display a dialog - hyperlink DOUBLE TAP display - go to overview
Android 4.2, Firefox, Talkback (Nexus 7) Partial support

While aria role dialog is announced, this only happens after closing (hiding) the dialog. Behavior not quite consistent: Calling up the dialog first just announces just "navigating", at the second attempt the heading level and content is spoken.

  • First try: RIGHT SWIPE link - display a dialog DOUBLE TAP navigating RIGHT SWIPE button - OK RIGHT SWIPE button - cancel DOUBLE TAP aria role equals dialog - visited link - display a dialog.
  • Second try: RIGHT SWIPE link -display a dialog DOUBLE TAP heading level 3 - Just an example IGHT SWIPE button - OK IGHT SWIPE button - cancel DOUBLE TAP aria role equals dialog - visited link - display a dialog

Note that while the script correctly moves the focus back to the triggering link, script does not keep the focus inside the dialogue; swiping moves beyond the dialog's focusable items.