英文原文：Making an accessible dialog box

中文翻译原文：可交互的弹出窗

?

在今天的web应用中，对话框差不多像他们在桌面应用中一样常见。用一点JavaScript和CSS来显示或隐藏一个覆盖在页面上的元素相当简单，但是很少有人考虑它如何影响可访问性。在很多情况下，它是可访问性的灾难。输入焦点没有被正确处理，屏幕阅读器(译者注：弱视盲人等使用)无法判断一些东西已被改变。事实上，制作一个完全可访问的对话框一点也不难，你只需要理解几行代码的重要性。

ARIA 角色

如果你希望屏幕阅读器用户意识到一个对话框弹出来了，那么你需要学一点可访问的富互联网应用(ARIA)角色。ARIA角色给HTML元素提供了额外的语义，好让浏览器与屏幕阅读器能以更具描述性的方式通信。有数目非常多的角色改变了屏幕阅读器识别页面元素的方式。对对话框来说，有两个有趣的：对话框和提示对话框。

在很多案例中，dialog(对话框)是可使用的角色。通过设置它为一个元素role（角色）的属性，你告诉浏览器该元素的目的是一个对话框。

<div id="my-dialog" role="dialog">
    <-- Your dialog code here -->
</div>

当一个具有dialog角色的元素设置为可见，浏览器告诉屏幕阅读器一个新的对话框被打开了。那使屏幕阅读器的用户认识到他们不再在通常的页面流之中了。

对话框也有可能具有标签。你可以指定一个标签，或者通过aria-label属性标明标签的文字，或者通过aria-labelledby属性标明包含标签的元素的ID。这里有几个例子：

<div id="my-dialog" role="dialog" aria-label="New Message">
    <-- Your dialog code here -->
</div>

<div id="my-dialog" role="dialog" aria-labelledby="dialog-title">
    <h3 id="dialog-title">New M