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).

Example

Just an example.

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.

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.