它们可以用作通知弹出窗口 , 可选字段 ,甚至可以用作照片幻灯片放映 。
模态在现代浏览器中得到广泛支持。
相反,请查看A11y Dialog ,这是一个功能齐全的模式窗口, 首先将焦点放在辅助功能上。
您可以使用纯CSS构建这些窗口,但这不是最易用的解决方案。
您可以查看此演示以查看其实际效果。
它在具有自己的自定义API的 原始JavaScript上运行,并支持所有设备上的所有现代浏览器。
![A11y模态窗口](https://i-blog.csdnimg.cn/blog_migrate/fb6e5f39e3740c66eb61bf5f5c42a737.jpeg)
但是,此脚本使用ARIA标签来支持所有用户的现代可访问性。
它的确看起来像典型的模态窗口。
您可以单击或点击窗口外的任何位置以将其关闭,或在计算机上按ESC键。
默认情况下,“ A11y对话框”还支持触摸屏 ,因此点击与单击具有相同的效果。
这使得它在完全可访问的基础上轻巧。
不知何故,这个库很小, 只有1.2kb ,包括所有CSS和JS代码。
还有一段很长的篇幅介绍了DOM API,用于在页面上添加可以打开(或关闭)模式窗口的按钮 。
其中包括有关面向完整初学者的安装和设置的部分。
您可以通过阅读GitHub存储库了解更多信息,并且A11y Dialog也有自己的文档页面 。
您可以从GitHub 获取源代码 ,也可以从软件包管理器(例如npm或Bower)下载源代码 。
如果您想建立更多可访问的网站,请认真考虑在项目中运行A11y Dialog。
![A11y对话框](https://i-blog.csdnimg.cn/blog_migrate/c43c9cb8876f66e199a2434a4ca4af46.jpeg)
该库具有比ARIA可访问性更多的功能 ,因此如果要扩展模态窗口的功能,则值得进行测试。
查看主页以了解有关设置和基本JavaScript功能的更多信息。
翻译自: https://www.hongkiat.com/blog/accessible-modal-windows-a11y-dialog/