Accessible Modal Dialog Experiments

Experiments with approaches to targeting a dialog and variations on the structure of the dialog.

Dialog behaviors conform to ARIA Authoring Practices for modal dialog. Implementations of the structure of the dialog vary according to descriptions in the buttons — where the dialog is either a simple div, a div with a role of dialog, or a div with role of dialog containing a div with role of document; and where we throw focus to the heading in the div, to the wrapping dialog div, or wrapping document div. The penultimate three dialogs have the aria-modal attribute set to true and test whether aria-modal can be used to prune the accessibility tree and/or make the page under the dialog inert. The final dialog is a test of the HTML 5.1 dialog element.

Why do this last thing? To test if anything breaks with NVDA's reading of the focused element in the dialog. An issue in the NVDA GIT repo suggests a bug in some versions of NVDA, where the NVDA accessibility focus is unaware that browser programmatic focus has changed.

A Heading

Some content