HTML dialog: Getting accessibility and UX right
Briefly

HTML dialog: Getting accessibility and UX right
"Back in 2021, I had the privilege of working on the U.S. Web Design System (USWDS), designing, coding, and writing documentation for a variety of UI components. This might be some of the widest-reaching work I have ever done, or ever will do. The USWDS is used on nearly every public-facing government website and many internal systems. We can probably toss a few state websites into the mix as well. Getting accessibility right is critical, because any defect within a component affects every instance"
"An accessible modal should offer an equivalent experience to how a sighted user using a cursor would experience one. That will require: Making users aware the modal exists Easy access to the contents of the modal Preventing access to content underneath the modal A clear method to dismiss the modal, if it can be dismissed Returning the user to a logical place when the modal is closed"
Work on the U.S. Web Design System (USWDS) produced a standardized modal component used across public-facing government websites and internal systems. Modals were highly requested and presented an opportunity to improve accessibility across many implementations. Accessible modals must make users aware of their presence, provide easy access to content, prevent interaction with background content, include a clear dismissal method, and return users to a logical place after closing. Achieving this requires careful focus management, disabling underlying content while the modal is active, extensive JavaScript to handle show/hide and focus, and cross-browser and screen reader testing.
Read at Jared Cunha
Unable to calculate read time
[
|
]