Dialog Focus in Screen Readers
October 12, 2020; 9 Comments
Creating an accessible dialog on the web is trickier than it should be. Lack of support for the <dialog> element, the need for fundraisers to get inert into WebKit, inconsistent support for the ARIA dialog role, and other annoyances make them problematic. Scott O’Hara has spent a few years covering the mess:
- How To Make Modal Windows Better For Everyone (2014)
- Making Modal Windows Better For Everyone, again… (2016)
- The current state of modal dialog accessibility (2018)
- Having an open dialog (2019)
Thankfully, we have a pattern (or variations on a pattern or two) that generally performs well across devices. For starters, you will need the inert polyfill, which essentially walks the DOM and makes everything unclickable and unfocusable. Then you will want to grab Scott O’Hara’s Accessible Modal Dialog pattern and wrangle it into your own project.
I generally took this approach when I made my Periodic Table of the Elements last year, spackling together a modal (with very basic vanilla script). I grabbed that modal recently to test a question that has come up a few times, both on client work and some code review — where do you put focus?
Managing focus for a modal is [...]