[ARIA] Accessible modal dialogs
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.
最新文章
- 扩展html 无边框的input 边框
- .Net 三款工作流引擎比较：WWF、netBPM 和 ccflow
- Bean的生命周期
- hdoj-2025
- HDU3535AreYouBusy（分组背包）
- IAR ERROR --- [Li006]
- 代码收藏 JS实现页内查找定位功能
- arm的编译器里已经有C标准库的lib包了,android为啥还要自己再实现呢
- c# datetime与 timeStamp（unix时间戳） 互相转换
- HTTP 400错误--请求无效
- ubuntu下使用crontab
- Matlab:线性热传导（抛物线方程）问题
- Java 笔试题（一）
- tf.unstack\tf.unstack
- 怎样用Java代码来把SSL的证书自己主动导入到Java的秘钥存储文件（keystore）
- .net 获取浏览器Cookie（包括HttpOnly）
- nodejs中引入art-template模板
- boost库做什么用呢？
- PHP命名空间 namespace 及导入 use 的用法
- python 赋值 深浅拷贝