牢记可访问性的写作JavaScript

提升JavaScript组件可访问性的技巧

本文将分享一些关于如何提升JavaScript组件可访问性，并为用户提供更多、更好的网站或Web应用程序交互方式的技巧。

本文最初发表于Medium

在第一篇文章《编写具有可访问性的HTML》中，我解释了为什么以及如何开始关注Web可访问性，并分享了一些关于如何改进标记以使网站更易访问的技巧。其中一些技巧非常基础，但仍然很有价值。这一切都归结于前端开发中两个最重要的不成文规则：学习基础知识，并花足够的时间来规划和编写HTML。清晰语义化的标记将使你和你的用户都受益。

幸运的是，HTML并非我们制作网站的唯一语言，但语言越复杂，出错的可能性就越大，而JavaScript可能会变得非常复杂。当我们专注于代码是否有效时，很容易忘记那些使用鼠标或触摸板以外的输入设备的用户，例如键盘或屏幕阅读器用户。在这篇关于Web可访问性的四篇文章中的第二篇中，我收集了一些关于编写JavaScript时需要考虑的事项以及如何使JavaScript组件更易访问的技巧。

关键要点

• JavaScript可以用来提升网站的可访问性，而不是阻碍它。它可以使更广泛的受众访问内容，包括那些使用旧浏览器、慢速互联网连接或严格安全限制的用户。
• 焦点管理对于网站的可访问性至关重要。网站应该可以通过键盘进行导航，允许用户按照文档对象模型 (DOM) 的顺序从一个可聚焦元素跳转到另一个可聚焦元素。
• 使用正确的HTML元素，例如在需要按钮时使用 <button></button> 元素，对于可访问性至关重要。HTML元素的误用可能会为键盘和屏幕阅读器用户造成问题。
• 当内容动态变化时，必须告知屏幕阅读器用户。这可以通过使用ARIA实时区域来实现，ARIA实时区域允许屏幕阅读器宣布内容更新。
• 开发人员不必猜测他们的组件必须提供哪些使用模式才能实现可访问性。《WAI-ARIA Authoring Practices 1.1指南》等资源可以提供宝贵的见解。

JavaScript并非敌人

在阅读我的技巧之前，我想指出重要的一点——创建可访问的网站并不意味着你必须决定是否使用JavaScript。可访问性是关于使尽可能多的人访问内容，这也包括使用旧浏览器和计算机、慢速互联网连接、严格安全限制（例如，没有JavaScript）等等的用户。在JavaScript可能无法工作或加载时间过长等情况下，体验可能并不理想，但如果网站可访问且可用，则仍然足够好。

如果JavaScript可执行，它甚至可以用来改进可访问性。Sara Soueidan在《构建一个完全可访问的帮助工具提示……比我想象的要难》中写了她创建工具提示组件的经验。她解释了为什么“每个无JavaScript的解决方案都伴随着一个非常糟糕的缺点，会对用户体验产生负面影响”，以及为什么JavaScript对于可访问性很重要。

Marco Zehe在他的文章《JavaScript并非可访问性的敌人！》中写了更多关于JavaScript和可访问性的内容。我强烈建议你阅读他的文章。

但介绍性的谈话就到这里！让我们开始吧……

良好的焦点管理至关重要

确保我们的网站可以通过键盘进行导航非常重要。许多用户在浏览网页时依赖键盘。其中包括有运动障碍的人、盲人以及由于某种原因无法使用鼠标或触摸板的人。

通过键盘导航网站意味着按照DOM顺序从一个可聚焦元素跳转到另一个可聚焦元素。这通常是通过使用 Tab 键或 Shift Tab 来实现反向方向。可聚焦元素包括链接、按钮和表单元素。它们可以使用 Enter 键，有时还可以使用 Spacebar 进行选择。通过以不同的方式可聚焦和可选择，它们具有非常有用的默认功能。因此，使用正确的语义元素并以逻辑顺序编写HTML是有意义的。

诸如 <div>、<code><span></span> 或 <div> 等元素默认情况下无法聚焦。我们经常使用这些标签来创建由JavaScript驱动的自定义组件，这对于键盘用户来说可能存在问题。 <p><strong>使不可聚焦元素可聚焦</strong></p> <p>可以通过添加 <code>tabindex 属性和整数数值来使不可聚焦元素可聚焦。如果将值设置为0，则该元素将变得可聚焦并可以通过键盘访问。如果该值为负数，则该元素可在编程上进行聚焦（例如，使用JavaScript），但无法通过键盘访问。你也可以使用大于0的值，但这会改变自然的Tab键顺序，并被认为是一种反模式。

<h2 id="一个可聚焦的标题">一个可聚焦的标题</h2>

如果你想了解更多关于 tabindex 的信息，请观看Rob Dodson的A11ycasts剧集《使用tabindex控制焦点》。

使用JavaScript聚焦元素

即使元素可聚焦，有时它们也不在正确的DOM顺序中。为了说明这一点，我在HTML、CSS和JS中创建了一个简单的模态窗口组件（演示和可编辑的Pen）。

如果你使用 Tab 键跳转到按钮并按下 Enter，则会弹出一个模态窗口。如果你再次按下 Tab 键，焦点将跳转到模态窗口下方视觉上显示的下一个链接。预期的行为应该是下一个聚焦的元素在模态窗口内。但事实并非如此，因为元素按照DOM顺序聚焦，而模态窗口位于文档的底部。你可以在此屏幕录制中看到它的实际效果。

要解决这个问题，你必须使模态窗口可聚焦，然后使用JavaScript聚焦它。

<h2 id="一个可聚焦的标题">一个可聚焦的标题</h2>

你可以在更新后的示例（演示和可编辑的Pen）中看到这一点，方法是将Tab键切换到按钮，按下 Enter 并再次按下Tab键。你会看到模态窗口本身现在已获得焦点。

这很好，但这里仍然存在两个问题。

如果你通过按下 Esc 关闭模态窗口，则焦点会丢失。理想情况下，焦点应该跳回到你打开模态窗口之前的按钮。为了实现这一点，你必须将最后一个聚焦的元素存储在一个变量中。

我们可以使用 document.activeElement 获取当前获得焦点的元素。

function showModal() {
  var modal = document.getElementById('modal2');
  modal.focus();
  ...
}

现在你有了对按钮的引用，你可以在关闭模态窗口时再次聚焦它。

var lastFocusedElement;

function showModal() {
  lastFocusedElement = document.activeElement;

  var modal = document.getElementById(modalID);
  modal.focus();
  ...
}

我已经在另一个Pen（演示和可编辑的Pen）中更新了代码。现在可访问性好多了，但仍然有改进的空间。

建议在打开模态窗口时将焦点保持在模态窗口内。现在仍然可以跳出模态窗口。我不会在这里详细介绍，但为了完整起见，我创建了第四个Pen，其中包含所谓的“键盘陷阱”（演示和可编辑的Pen）。只要模态窗口处于活动状态，焦点就会保持在模态窗口内，正如在此屏幕录制中可以看到的那样。

如果你比较第一个和最后一个Pen，你会发现并没有很多额外的代码。它可能并不完美，但最终的解决方案使用起来要好得多。

还有一个可访问模态窗口的示例和一篇名为《使用tabindex》的好文章，来自谷歌的人员撰写。如果你想了解更多关于键盘测试的信息，请访问WebAIM网站。他们提供了一份“最常见的在线交互、交互的标准按键以及测试期间需要考虑的其他信息”的列表。

有关焦点管理的更多示例，请查看Marcy Sutton的egghead.io视频《使用CSS、HTML和JavaScript进行焦点管理》或Rob Dodson的A11ycasts剧集《什么是焦点？》。

如果需要按钮，请使用 <button></button> 元素

我已经在第一篇文章中写过关于按钮的内容，但显然很多人使用通用元素作为按钮。因此，我想再写一些关于这个主题的内容也不会有什么坏处。

我创建了一个Pen（调试模式/带有代码的Pen）来说明使用 <div> 或 <code><span></span> 作为按钮而不是 <button></button> 或 <input type="button"> 元素的一些问题。如果你浏览页面，你会发现你可以聚焦第一个按钮，但不能聚焦第二个按钮。原因当然是——第一个按钮是 <button></button>，第二个按钮是 <div>。你可以通过向 <code><div> 添加 <code>tabindex="0" 来解决这个问题，这使得最初不可聚焦的元素可聚焦。这就是为什么第三个和第四个按钮可聚焦，即使它们是 <div>。 <pre class='brush:php;toolbar:false;'>&lt;h2 id=&quot;一个可聚焦的标题&quot;&gt;一个可聚焦的标题&lt;/h2&gt;</pre> <p>即使你添加了按钮的角色，“div-按钮”确实可聚焦，但仍然表现得像一个 <code><div>，。为了说明这一点，我向所有<code>.btn 元素添加了一个简单的点击事件处理程序（Pen）。如果你点击按钮，会弹出一个警报框，但如果你尝试使用按键（Enter 或 Spacebar）执行相同的操作，则只有第一个按钮会触发事件。你必须向“div-按钮”添加一个按键事件处理程序才能完全模拟默认的按钮行为，这似乎是不必要的额外开销，不是吗？这就是为什么如果你需要一个按钮，你应该使用 <button></button> 元素。观看Rob Dodson的A11ycasts剧集“Just use button”或阅读Adrian Roselli的《链接、按钮、提交和Divs，哦，天哪》以了解更多详细信息和示例。

屏幕阅读器用户必须在内容动态更改时得到通知

通常，屏幕阅读器只会在元素获得焦点或用户使用屏幕阅读器自己的导航命令时宣布内容。如果内容是动态加载并插入到DOM中的，只有有视力的人才能注意到这些更改。ARIA实时区域提供了几种解决此问题的方法。我将通过一个示例向你展示如何操作。

假设你有一个配置文件设置页面，你可以在其中编辑个人数据并保存它。当点击保存按钮时，更改会被保存而无需重新加载页面。一个警报会通知用户更改是否成功。这可能会立即发生，也可能需要一些时间。我录制了一个简短的视频来向你展示我刚才解释的内容。

你可以看到操作成功了，但你听不到。屏幕阅读器用户不会注意到更改，但这个问题有一个简单的解决方案。通过向消息框添加“状态”或“警报”角色，屏幕阅读器将监听该元素中的内容更新。

function showModal() {
  var modal = document.getElementById('modal2');
  modal.focus();
  ...
}

如果消息文本发生更改，则会读出新文本。你可以在此视频中看到并听到它的实际效果，并查看此Pen中的代码。

礼貌对待你的用户

“状态”和“警报”之间的区别在于，“警报”会在屏幕阅读器正在宣布其他内容时中断它。相反，“状态”将等待屏幕阅读器完成宣布。

还有一个名为 aria-live 的属性，它可以取三个可能的值：off、polite或assertive。在这三个值中，off是默认值，aria-live="polite" 等效于 role="status"，aria-live="assertive" 等效于 role="alert"。在一些众所周知的预定义情况下，最好使用特定的提供的“实时区域角色”。此外，如果浏览器不支持角色，你可能需要尝试同时使用这两个属性。Léonie Watson在《屏幕阅读器对ARIA实时区域的支持》中分享了一些测试结果。

<h2 id="一个可聚焦的标题">一个可聚焦的标题</h2>

有时宣布不仅仅是已更改的内容是有意义的

默认情况下，屏幕阅读器只显示已更改的内容，即使同一实时区域内还有其他内容，但在某些情况下，宣布整个文本是有意义的。可以使用 aria-atomic 属性来更改默认行为。如果将其设置为true，辅助技术将显示元素的全部内容。

Paul J. Adam有一个 aria-atomic 测试用例演示，它比较了不同的实时区域设置。他还使用iOS 8.1上的VoiceOver测试了他的演示，并进行了录制，以便你可以看到它的实际效果。如果你想更好地理解 aria-atomic 的可能用例，我建议你观看该录制（VoiceOver iOS 8.1朗读剩余字符 aria-atomic 和 aria-relevant 在 aria-live 区域）。

一些需要考虑的事项

• 实时区域不会移动焦点，它们只会触发文本的宣布。
• 仅对关键更改使用警报。“状态”在大多数情况下更好，因为它更礼貌。
• 避免设计自动消失的警报，因为它们可能消失得太快。
• 在我的测试中，我遇到了VoiceOver的问题。使用CSS隐藏警报或动态创建警报并不总是有效。确保你在不同的浏览器和不同的软件中彻底测试你的实时区域。

当然，Rob Dodson还有一个关于详细信息和示例的A11ycasts剧集《警报！》。Heydon Pickering在他的ARIA示例集合中还有另一个实时区域示例。

你不必猜测你的组件必须提供哪些使用模式

想到一个组件在导航和可访问性方面必须提供的所有功能通常很困难。幸运的是，有一个名为《WAI-ARIA Authoring Practices 1.1》的资源可以帮助我们做到这一点。《WAI-ARIA Authoring Practices》是一份了解如何使用WAI-ARIA创建可访问的富互联网应用程序的指南。它描述了推荐的WAI-ARIA使用模式，并介绍了其背后的概念。

它们有构建手风琴、滑块、选项卡等的指南。

可访问的JavaScript组件

这里有一些关于可访问的JavaScript组件的优秀资源：

• 实用的ARIA示例
• Modaal——一个WCAG 2.0 Level AA可访问的模态窗口插件
• Frend——一系列可访问的现代前端组件
• A11Y项目模式

如果你知道任何其他资源，请在评论中分享。

总结

利用JavaScript的优势来提高网站的可访问性。注意焦点管理，了解常见的用法模式，并在操作DOM时考虑屏幕阅读器用户。最重要的是，不要忘记你为谁制作网站，并在制作过程中享受乐趣。

超越

暂时就到这里。我希望这些技巧能帮助你编写更易访问的HTML和JavaScript。非常感谢Heydon Pickering，因为他的书《包容性前端设计模式》是大多数你刚刚阅读的内容的基础。如果你想了解更多关于可访问性和包容性设计的信息，我强烈建议你阅读他的书。

特别感谢Adrian Roselli帮助我撰写这篇文章，以及Eva校对我的写作。

资源

这是本文中所有链接资源的列表。

• A11ycasts #03 — 什么是焦点？
• A11ycasts #04 — 使用tabindex控制焦点
• A11ycasts #05 — 只使用按钮
• A11ycasts #10 — 警报！
• 书籍：《包容性前端设计模式》
• 不要使用大于0的tabindex
• 使用CSS、HTML和JavaScript进行焦点管理
• 可聚焦元素——浏览器兼容性表
• 链接、按钮、提交和Divs，哦，天哪
• MDN：HTMLElement.focus()
• MDN：tabindex
• MDN：可通过键盘导航的JavaScript组件
• 令人难以置信的可访问模态窗口
• 使用tabindex
• WebAIM键盘测试
• WebAIM键盘可访问性
• WAI-ARIA aria-atomic

关于编写具有可访问性的JavaScript的常见问题解答

编写具有可访问性的JavaScript的重要性是什么？

编写具有可访问性的JavaScript至关重要，因为它确保你的网站或应用程序可供所有人使用，包括残疾人士。这不仅拓宽了你的用户群，而且还增强了用户体验和满意度。在许多地区，这对于法律合规性也很重要，因为可访问性是根据各种残疾歧视法案的要求。

如何使我的JavaScript代码更易访问？

有几种方法可以使你的JavaScript代码更易访问。首先，确保你的网站或应用程序对键盘友好。这意味着用户应该能够仅使用键盘导航你的网站。其次，确保你的网站易于使用屏幕阅读器导航。这可以通过使用语义HTML和ARIA角色来实现。最后，始终为图像提供替代文本，并确保你的网站具有足够的颜色对比度。

什么是ARIA，它如何提高可访问性？

ARIA代表Accessible Rich Internet Applications（可访问的富互联网应用程序）。它是一组属性，定义了使Web内容和Web应用程序更易于残疾人士访问的方法。ARIA有助于使用Ajax、HTML、JavaScript和相关技术开发的动态内容和高级用户界面控件。它可以通过提供有关元素、其角色及其当前状态的附加信息来提高可访问性。

键盘导航如何增强可访问性？

键盘导航对于无法使用鼠标或触摸屏的用户至关重要。通过确保网站或应用程序的所有功能都可以仅使用键盘访问，你可以使你的网站更容易被运动障碍或视力障碍的用户访问。这可以通过在JavaScript代码中使用 tabindex 和焦点管理来实现。

语义HTML在可访问性中的作用是什么？

语义HTML是指使用HTML标记来增强内容的语义或含义。例如，对按钮使用 <button></button> 标签，而不是样式使其看起来像按钮。这对于可访问性很重要，因为它为屏幕阅读器提供了有意义的信息，帮助视力障碍的用户理解内容并导航网站。

如何确保足够的颜色对比度以实现可访问性？

足够的颜色对比度对于视力障碍的用户很重要。你可以通过选择符合WCAG 2.1对比度比率指南的颜色组合来确保这一点。有一些在线工具可以帮助你检查所选颜色的对比度比率。

提供图像替代文本的重要性是什么？

为图像提供替代文本对于依赖屏幕阅读器的视力障碍用户至关重要。替代文本应准确描述图像内容，以便无法看到图像的用户仍然可以理解其在页面上下文中的用途。

如何测试JavaScript代码的可访问性？

有几种工具可用于测试JavaScript代码的可访问性。这些工具包括aXe和Lighthouse等自动化测试工具，以及使用屏幕阅读器和仅键盘导航进行的手动测试。重要的是结合使用自动化测试和手动测试，以确保全面的可访问性。

JavaScript中的一些常见可访问性问题是什么？

JavaScript中的一些常见可访问性问题包括缺乏键盘可访问性、颜色对比度不足、图像缺少替代文本以及缺少ARIA角色或ARIA角色使用不正确。这些问题可能会使你的网站难以或无法被残疾人士使用。

如何了解更多关于JavaScript和可访问性的信息？

有很多资源可以帮助你了解更多关于JavaScript和可访问性的信息。这些资源包括来自W3C等组织的在线教程、课程和文档。此外，练习编写可访问的代码并定期测试代码的可访问性可以大大提高你的理解和技能。