弹出窗口在网页设计中是一项常见的功能，它可以用于展示详细信息、表单填写、消息提示等。然而，弹出窗口的可访问性常常被忽视，给使用屏幕阅读器或键盘导航的用户带来困扰。在本文中，我们将探讨如何构建一个具有良好可访问性的弹出窗口。
1. 使用语义化标签
为弹出窗口的内容使用语义化标签，这将有助于屏幕阅读器正确地解读和呈现弹窗的内容。例如，使用<dialog>元素来表示弹出窗口的对话框，使用<h1>到<h6>元素来标识对话框的标题等。
<dialog>
<h1>弹出窗口标题</h1>
<p>弹出窗口的详细内容...</p>
</dialog>
2. 添加适当的键盘导航支持
使用键盘导航可以帮助键盘用户访问和操作弹出窗口。为弹窗中的交互元素（如按钮、链接和表单字段）添加适当的焦点管理，确保用户可以通过键盘在弹窗中导航，并使用回车键执行操作。
<dialog>
<h1>弹出窗口标题</h1>
<p>弹出窗口的详细内容...</p>
<button>关闭</button>
<button>确定</button>
</dialog>
在弹窗打开时，将焦点设置到弹窗的第一个可交互元素上，并且在用户关闭弹窗后，将焦点返回到弹窗打开前的位置。
3. 提供可见和可访问的关闭功能
弹出窗口需要提供明显可见的关闭功能，方便用户关闭窗口，而不是依赖于用户对浏览器的默认行为。在弹窗中添加一个关闭按钮或者取消按钮，并为其添加适当的键盘事件，使用户可以通过键盘关闭弹窗。
<dialog>
<h1>弹出窗口标题</h1>
<p>弹出窗口的详细内容...</p>
<button class="close-btn">关闭</button>
<button>确定</button>
</dialog>
const dialog = document.querySelector('dialog');
const closeBtn = document.querySelector('.close-btn');
closeBtn.addEventListener('click', () => {
dialog.close();
});
4. 提供明确的焦点指示
当弹出窗口打开时，应该使用CSS或JS在弹窗周围添加焦点指示，以帮助用户更容易地在窗口中导航。这可以通过添加焦点环或边框样式来实现，并且还可以使用可访问的ARIA属性来强调当前活动的窗口元素。
dialog[open] {
outline: none;
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);
}
dialog[open] [aria-selected="true"] {
border: 1px solid blue;
}
5. 考虑使用模态对话框
对于一些需要用户完成的任务，例如填写表单或进行确认，建议使用模态对话框，这时用户无法离开对话框直到完成任务或者关闭对话框。这些对话框会锁住焦点，禁用后面的内容，使得用户不会跳过对话框直接操作背后的界面。
dialog.showModal();
总结起来，构建可访问性良好的弹出窗口需要使用语义化标签、添加适当的键盘导航支持、提供可见和可访问的关闭功能、提供明确的焦点指示以及考虑使用模态对话框。通过遵循这些原则，我们可以帮助用户更轻松地访问和使用弹出窗口。
本文来自极简博客，作者：冬日暖阳，转载请注明原文链接：构建可访问性良好的弹出窗口
