Published on June 16, 2017 by Chrome
Want create site? Find Free WordPress Themes and plugins.

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

Did you find apk for android? You can find new Free Android Games and apps.

Leave a Reply

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

Notify of
avatar

Michelle Johnson
Guest
Michelle Johnson
4 months 11 days ago

my comment

Lee Taylor
Guest
Lee Taylor
5 months 11 days ago

Setting all non-dialog controls to inert, then setting them all back to non-inert. What if some of those controls are supposed to be inert already? You've now reset them all regardless…

Lazharus
Guest
Lazharus
5 months 24 days ago

Awesome stuff!! I will think in accessibility in my next projects for sure. One question, What is the font are you using in the code editor? Thanks and cotinue bringing this essential content!

Jonathan Hodgson
Guest
Jonathan Hodgson
5 months 26 days 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
5 months 26 days ago

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

Martin Ždila
Guest
Martin Ždila
5 months 27 days 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 months 28 days 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
5 months 28 days 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
5 months 29 days ago

Would you put this and other A11ycast code on GitHub?

Neil Osman
Guest
Neil Osman
5 months 29 days 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

1 2 3
wpDiscuz