使用A11y对话框构建可访问的模态Windows

它们可以用作通知弹出窗口 ， 可选字段 ，甚至可以用作照片幻灯片放映 。

模态在现代浏览器中得到广泛支持。

相反，请查看A11y Dialog ，这是一个功能齐全的模式窗口， 首先将焦点放在辅助功能上。

您可以使用纯CSS构建这些窗口，但这不是最易用的解决方案。

您可以查看此演示以查看其实际效果。

它在具有自己的自定义API的 原始JavaScript上运行，并支持所有设备上的所有现代浏览器。

但是，此脚本使用ARIA标签来支持所有用户的现代可访问性。

它的确看起来像典型的模态窗口。

您可以单击或点击窗口外的任何位置以将其关闭，或在计算机上按ESC键。

默认情况下，“ A11y对话框”还支持触摸屏 ，因此点击与单击具有相同的效果。

这使得它在完全可访问的基础上轻巧。

不知何故，这个库很小， 只有1.2kb ，包括所有CSS和JS代码。

还有一段很长的篇幅介绍了DOM API，用于在页面上添加可以打开（或关闭）模式窗口的按钮 。

其中包括有关面向完整初学者的安装和设置的部分。

您可以通过阅读GitHub存储库了解更多信息，并且A11y Dialog也有自己的文档页面 。

您可以从GitHub 获取源代码 ，也可以从软件包管理器（例如npm或Bower）下载源代码 。

如果您想建立更多可访问的网站，请认真考虑在项目中运行A11y Dialog。

该库具有比ARIA可访问性更多的功能 ，因此如果要扩展模态窗口的功能，则值得进行测试。

查看主页以了解有关设置和基本JavaScript功能的更多信息。

翻译自: https://www.hongkiat.com/blog/accessible-modal-windows-a11y-dialog/