说明

网站设计者经常想要去创建一个对话框，却不使用由浏览器提供的弹窗。通常情况下，会将对话内容包含在一个div中，并在CSS中使用Z-order和绝对位置将div放置在页面内容上面。

为了做到无障碍，这样的对话框必须遵循以下几个简单的规则：

1. 使用链接或按钮的onclick事件触发弹出对话框的脚本；
2. 将对话框div立即放置在DOM触发元素之后。该触发元素将保留焦点，并将在元素后插入对话框内容，会使对话框中的内容位于屏幕阅读器阅读顺序或tab顺序的下一个焦点。该对话框可以在页面上仍保持相对其他内容的绝对位置。这可以通过在HTML中创建一个对话框并且使用CSS隐藏，如下面的样例所示，或者使用脚本将对话框立即插入到触发元素之后。
3. 保证对话框中的HTML满足同样的无障碍标准。

使用触发链接开启和关闭对话框，和当键盘焦点离开时关闭对话框，是好的做法但不是必须要做的。