Published on June 16, 2017 by Chrome

ARIA Authoring Practices: Dialog – goo.gl/ibNKWw
eBay MIND Patterns: Dialog – goo.gl/FI5NHa
Inert Polyfill – goo.gl/nXMS1V

The accessible modal dialog. It seems like such an easy thing to build, but in reality, it’s a total pain! Today on A11ycasts I’ll show you how to properly manage focus when adding a dialog to the page, and how to prevent a screen reader user from accidentally escaping behind the modal. In a few short minutes you’ll be up to speed and ready to ship your first full accessible dialog!

Watch all A11ycasts episodes: goo.gl/06qEUW

Subscribe to the Chrome Developers YouTube channel for updates on new episodes of A11ycasts: goo.gl/LLLNvf

Leave a Reply

39 Comments on "Accessible Modal Dialogs — A11ycasts #19"

Notify of
avatar

Jonathan Hodgson
Guest
Jonathan Hodgson
3 days 23 hours ago

How can you tell the screen reader to read the contents of the screenreader? I noticed that your screen reader read it but cant work out why from the JavaScript.

Jonathan Hodgson
Guest
Jonathan Hodgson
3 days 23 hours ago

Would you advise implementing similar techniques for a slide in menu?

Martin Ždila
Guest
Martin Ždila
5 days 1 hour ago

I think that you should also set previousActiveElement to null on dialog closing to let browser free it in case it is removed from DOM.

DJVESKO
Guest
DJVESKO
5 days 16 hours ago

Great! Just one think I don't like. The position: fixed. If for some reason the dialog gets super big or viewport is super small, there is no way to move it. If you use position: absolute, you can achieve fairly similar behaviour, with this edge case covered.

Michael Ball
Guest
Michael Ball
6 days 3 hours ago

I've seen solutions that trap tab (and shift-tab) and manually direct focus inside the modal – is there a way to do that, and to to direct the next tab event to something outside the web content, or would inert be the only way to handle it?

Thad Humphries
Guest
Thad Humphries
6 days 19 hours ago

Would you put this and other A11ycast code on GitHub?

Neil Osman
Guest
Neil Osman
7 days 1 hour ago

Thanks Rob, great show.One other alternative is to set focus on the <dialog tabindex="-1" aria-label="STRING" aria-describedby="ID_REF"> element itself. As role dialog is interactive, windows SR users cant navigate the a11y tree and there for all text should be communicated through to aria-describedby attribute. BTW, last time i checked, this inert polyfill failed to work with MS Edge

Nicolás Parada
Guest
Nicolás Parada
7 days 3 hours ago

Very useful component. Nice work as always, Rob. Thanks 👍

DJDavid98
Guest
DJDavid98
7 days 5 hours ago

Oh god please don't promote the transform centering method, I've had people ask me why their dialog was getting blurry for no reason and it's because of that 100% of the time

Neil Osman
Guest
Neil Osman
7 days 1 hour ago

Was not aware of that. Does it also happen with vh/vw units?

MeTRoD
Guest
MeTRoD
7 days 4 hours ago

Yeah I know I've run into this problem as well. It mostly happens on Chrome though. It's probably the element landing on a sub-pixel position or something.

Marcel Robitaille
Guest
Marcel Robitaille
7 days 9 hours ago

Are you using dialog polyfill?

wpDiscuz