Learn how to create a modal dialog with accessible keyboard and screen reader mechanics using the native HTML5 dialog element and experimental inert attribute (with polyfills) and JavaScript focus management. We'll explore how to make a DIV or non-modal dialog into a modal one to contrast the differences. Finally, we'll expose accessibility information for NVDA, Voiceover, JAWS and other screen readers.

For more details on creating accessible dialog content, check out this great article by Marco Zehe, Advanced ARIA Tip #2: Accessible Modal Dialogs: https://www.marcozehe.de/2015/02/05/advanced-aria-tip-2-accessible-modal-dialogs/

Used in this lesson:

• Google dialog element polyfill: https://github.com/GoogleChrome/dialog-polyfill
• Inert attribute polyfill: https://github.com/WICG/inert

 

1. When you close the dialog, should focus the open button so users know where they are.

2. Difference between Modal vs Dialog, whether user can tap any action button other the dialog is something we need to be careful. aria-hidden need to be apply to the main body when Modal show up.

3. For close the dialog, we need to add 'Esc' key for the close button

4. Dialog title, you have use h2 tag for the dialog title, it is helpful for the screen reader.

 

<iframe frameborder="no" height="265" scrolling="no" src="//codepen.io/cayden-egghead/embed/zgNZGR/?height=265&theme-id=0&default-tab=html,result" style="width: 100%;" title="12-accessible-modal-dialogs" width="320"></iframe>