Today I started combing through code and underlying principles to create accessible dialogs (modals). The development of this pattern has eluded me in the past, so I wanted to tackle it first. I didn’t get as far as I’d liked (no coding on my part), but did squeeze in the time to at least review what others have done and why they did it.
Things I accomplished
- Read Accessible Modal Dialogs with Vanilla JS by Scott O’Hara.
- Read Modal Dialog Example (W3C).
- Browsed Modals examples by Salesforce.
- Read The Current State of Modal Dialog Accessibility (Paciello Group).
What I learned today
- I knew there was a dialog HTML element, but didn’t realize just how unequally supported it is across browsers. I see now why so many devs just use a div with ARIA role=”dialog” instead.
- Once a dialog is opened, focus should immediately move inside the dialog, and an accessible name (aria-label, aria-labelledby, or aria-describedby) and dialog role should be announced.
- When a dialog is open, the Tab key should not allow the user to get outside of the dialog box.
- A user should be able to close the dialog with Esc, tapping outside the box, pressing a Close button, or even F6 (reaching the address bar).
- When a dialog is closed, focus should return back to the element that initiated it.
- Dialogs should be hidden with visibility:hidden.
- Expected keyboard interactions within the dialog should be:
- Tab: Moves focus forward inside the dialog
- Shift + Tab: Moves focus backward inside the dialog
- Escape: Closes the dialog
With all the effort that goes into a custom dialog, and the many shortcomings with only partially-reliable workarounds, it makes me wonder if dialogs are really the answer to some “problems”. I look at the usability aspect for all users, and wonder if dialogs really meet a user’s need, or rather, a designer’s and business need.