如何制作一个可及性强（accessible）的网页弹框

英文原文：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 Message</h3> <-- Your dialog code here --> </div> 在第一个例子里，aria-label属性被用来标明只被屏幕阅读器使用的标签。当对话框没有可视的标签时你可能想这么做。在第二个例子里，aria-labelledby属性被用来标明包含对话框标签的元素的ID。由于对话框有一个可视的标签，重复利用那个信息比复制它要有意义。当对话框被显示时，屏幕阅读器声明该对话框标签。

alertdialog（提示对话框）的角色是被设计用来引起用户注意的特殊类型的对话框。想象这是一种当你试图删除一些东西时候的确认对话框。一个提示对话框有很少的交互性。它的主要目的是吸引用户注意一个动作发生了。和对话框比较一下，后者可能是给用户输入信息如写一封新电子邮件或即时消息的一块地方。 当提示对话框被显示时，屏幕阅读器查找说明来朗读。推荐用aria-describedby元素来标明需要被朗读的文字。与aria-labelledby类似，这个属性是包含朗读内容的元素的ID。如果aria-describedby省略了，屏幕阅读器将尝试找出代表说明的文字，经常是选择元素的第一段文字内容。这里有个例子： <div id="my-dialog" role="alertdialog" aria-describedby="dialog-desc"> <p id="dialog-desc">Are you sure you want to delete this message?</p> <-- Your dialog code here --> </div> 这个例子使用了一个包含说明的元素。这么做确保了当对话框被显示时，正确的文字被朗读。 即使你省略了额外的属性，只为你的对话框使用了合适的角色（role)，应用的可访问性也有巨大的提升。

设置对话框的焦点 下面一部分关于创建一个可访问的对话框的内容是管理焦点。当一个对话框被显示，焦点应该被置于对话框之内，以便用户可以用键盘操纵。对话框中哪里是放置焦点的正确位置主要取决于对话框自身的目的。如果你有一个确认对话框带一个继续按钮一个取消按钮，那么你会希望默认焦点设在取消按钮。如果你有一个预计用户会输入文字的对话框，那么你会希望默认焦点设置在文本框。如果你找不到哪里放置焦点，那么一个很好的起点是设置焦点到代表对话框的元素。

由于大多数时间你将使用<div>元素代表一个对话框，默认的你并不能将焦点设置到它上面。替代的，你需要通过设置tabIndex属性为-1来使焦点能设置到该元素。这使得你能用JavaScript设置焦点到该元素，但不将该元素插入普通的tab顺序。那意味着用户不能通过敲tab键设置焦点到该对话框。你可以直接用HTML或用JavaScript做这些。HTML的： <div id="my-dialog" role="dialog" tabindex="-1" aria-labelledby="dialog-title"> <h3 id="dialog-title">New Message</h3> <-- Your dialog code here --> </div> JavaScript的： var div = document.getElementById("my-dialog"); div.tabIndex = -1; div.focus(); 一旦tabIndexis设置为-1,你可以像其他可聚焦的元素一样，调用该元素的focus()。然后用户就可以在对话框中敲tab来操作。

捕获焦点 另一个对话框可访问性的问题是焦点不会跑到对话框之外。很多情况下，对话框是模态的因此焦点不可能离开对话框。当对话框打开时敲击tab键使焦点设置最终跑到对话框后面，那么键盘用户返回对话框将非常困难。因此最好用一点JavaScript阻止那样的事情发生。 这个技术背后的基本思想是使用事件捕获侦听聚焦事件，这是由Peter-Paul Koch推广普及的技术，现在被许多的JavaScript库所采用。由于聚焦不会冒泡，你无法在事件流捕获它。你反而可以用事件捕获来拦截页面上的所有聚焦事件。然后，你只需要判断收到聚焦的元素是否在对话框之内。如果不在，将焦点设回到对话框。代码非常简单： document.addEventListener("focus", function(event) { var dialog = document.getElementById("my-dialog"); if (dialogOpen && !dialog.contains(event.target)) { event.stopPropagation(); dialog.focus(); } }, true);

这段代码侦听文档上的聚焦事件，以便在目标元素收到它们之前拦截所有这样的事件。假设对话框打开时一个dialogOpen变量被设置为true。当聚焦事件发生时，这个函数捕获事件并检查对话框是否打开，如果是，再检查收到聚焦的元素是否在对话框之内。如果两个条件都满足，聚焦就会设置会对话框。这可能影响到对话框下面的焦点返回到最顶部。结果是你不能按tab离开对话框，因此这使键盘用户很难再失去焦点。 如果你在使用一个JavaScript库，它可能具有代理聚焦事件的方式，通过这种方式你可以获得同样的效果。如果你需要在JavaScript库条件下支持 Internet Explorer 8和更早版本，那么就使用focus事件代替吧。

恢复焦点 最后一个对话框聚焦的困惑是，在对话框关闭时恢复焦点到页面的主要部分。思想很简单：为了打开对话框，用户可能激活了一个链接或按钮。然后焦点移到对话框内部，用户在那里完成一些任务之后关闭对话框。焦点应该返回之前被点击来打开对话框的链接或按钮，然后才可能继续操作该页面。这是在web应用中经常被忽视的方面，但它引起很大的不同。 相较其他几节，这只需要很少的代码来运作。所有浏览器都支持document.active元素，它表示现在获得焦点的元素。所有你需要做的就是在显示对话框之前查询这个值，然后在对话框关闭时将焦点设回到那个元素。例如： var lastFocus = document.activeElement, dialog = document.getElementById("my-dialog"); dialog.className = "show"; dialog.focus(); 代码重要的部分是它保存了最后获得焦点的元素。这样以来，你所需做的就是对话框关闭时将焦点设回到它： lastFocus.focus() 总体上说，这可能给你现有有关对话框的代码中只增加了很短的几行代码。

退出打开的对话框 怎样让用户方便并快速的关闭对话框呐。最好的办法是采用“Esc”键。这也是桌面应用程序关闭应用程序的方式，这对用户来说也非常友好。只要监听被按下的“Esc”键，然后就可以关闭对话框，例如: document.addEventListener("keydown", function(event) { if (dialogOpen && event.keyCode == 27) { // 关闭对话框 } }, true); “Esc”键值是27，因此你需要监听keydown事件，一旦触发就关闭掉对话框并激活先前的对象。

总结 帖子中已经很明白了，不需要太多的代码就可以创建一个对话框，并且还适合只有一个键盘的屏幕阅读器，仅仅数行代码就可以提升你的用户体验。有很多使用弹出对话框的网页程序，仅仅少数做得好，还有大部分拥有糟糕的用户体验，因此，希望这个帖子对你制作自己的可访问性对话框有所帮助。 参考文献 WAI-ARIA (W3C) Delegating the focus and blur events by Peter-Paul Koch (Quirksmode)