Day 39: Concepts Concerning Custom Modals

Published on 08 Jan 2019

• journal
• resources
• was
• aria
• javascript
• patterns
• techniques

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.

• 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).

• 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, 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 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
  • 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.

• The Definitive Guide to Form Label Positioning (SitePoint)
• Writing Government Information for People with Cognitive Disabilities (YouTube)