Dialog Accessibility

Best Practices

A dialog should use a native HTML <dialog> element.

A dialog is typically opened in one of two ways:

• Click-activated : explicitly opened and closed by clicking the button
• System-activated : automatically opened by the system/application on page load or at some other arbitrary time

Opening modal dialogs that are not requested by user (i.e. system-activated) are a violation of WCAG Guideline 3.2.5 (Level AAA) and therefore should be reserved for exceptional circumstances only.

Dialog must not be opened on hover or focus of button.

Dialog must be opened on click-event of button or via an application event.

Dialog must contain a dismiss button.

Dialog must contain at least one interactive element (this can be the dismiss button).

Dialog must be clearly labelled by an onscreen heading/title

Dialog must start heading hierarchy at level 2.

Interaction Design

This section provides detailed instructions for how different input types should navigate and operate the pattern.

Keyboard

If dialog button has focus, ENTER or SPACE key must open the dialog.

When the dialog opens, focus must move to the dismiss button.

Dialog must confine TAB and SHIFT-TAB to focusable elements of child window.

Pressing ESC key must close the dialog (unless the currently focussed element has existing ESC key behaviour) with no changes applied (effectively acting as a “cancel”).

Dialog button must receive focus when the dialog is closed.

Screen Reader

Dialog button must not announce ‘has popup’. A dialog is not considered a popup (i.e aria-haspopup="true" is not valid in this context).

Focussed element should be announced when child window opens (via focus management).

Title must be announced when the dialog opens.

Virtual cursor must be confined within child window.

Assistive technology might announce “Entering/leaving dialog” (or words to those affect) when focus enters or leaves the dialog respectively.

Pointer

Clicking dialog button must open dialog.

Clicking mask must dismiss dialog with no changes applied (effectively acting as a “cancel”).

ARIA Reference