Modals - Keyboard behaviour and ARIA

Question

When a modal dialog box is triggered, the keyboard focus needs to immediately move to the first actionable element in the modal. This is mentioned in the WAI-ARIA authoring practices. Is this because it's an ARIA modal, or because modals are only an ARIA thing?

Answer

You can’t really build an accessible custom modal dialog without ARIA to establish role and labelling for the dialog, and to set the non-dialog content as inert with aria-hidden=true (assuming that content remains somewhat visible and isn’t temporarily removed altogether with display:none).

The ARIA authoring practices are good for getting a sense of expected/conventional interaction patterns with different widgets. For example, https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal.

Moving focus to the dialog’s first focusable element, that’s more to do with WCAG SC 2.4.3, I think. But, assuming that the non-dialog content is totally inert and keyboard focus is trapped in the dialog, then not moving focus to the dialog is probably not a big deal. This is because the next tab press will move focus to the first focusable element in the dialog, since the dialog’s contents are the only thing in the tab order at that point.

But if the dialog was not a modal, and keyboard focus didn’t move there, and if there were no other indication that the dialog had appeared, then not moving focus would likely fail 2.4.3 and 1.3.1 (for visibly showing the new dialog, but not programmatically).

Last updated