Day 39: Concepts Concerning Custom Modals
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 accomplishedPermalink for "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 todayPermalink for "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
- Once a dialog is opened, focus should immediately move inside the dialog, and an accessible name (
aria-describedby) and dialog role should be announced.
- When a dialog is open, Tab 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
- Expected keyboard interactions within the dialog should be:
- Tab: Moves focus forward inside the dialog
- Shift + Tab: Moves focus backward inside the dialog
- Esc: 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.
Other articles I read todayPermalink for "Other articles I read today"
- The Definitive Guide to Form Label Positioning (SitePoint)
- Writing Government Information for People with Cognitive Disabilities (YouTube)