无障碍支持是一个广泛的话题，它旨在帮助那些需要额外辅助或特殊功能才能访问 Web 内容的人群，如视障人士、听障人士、以及使用辅助设备的人。
在前端开发中，我们可以使用一些技术来增加我们的 Web 内容的可访问性。接下来我们将探讨如何在 JavaScript 中实现无障碍支持。
盲人与键盘焦点
对于使用屏幕阅读器的视障人士来说，键盘是他们的主要输入设备。使用键盘浏览网站时，他们会使用 Tab 键将焦点从一个元素转移到另一个元素。
因此，确保网站上所有的元素都可以通过键盘访问是非常重要的。我们可以使用 tabindex 属性来确保元素可以被按顺序访问。
<button tabindex="1">第一个按钮</button> <button tabindex="2">第二个按钮</button> <button tabindex="3">第三个按钮</button>
标题、描述和标签
屏幕阅读器可以使用文档标题和页面元素的描述来向用户报告当前页面的信息。
为了使我们的页面对屏幕阅读器更友好，我们可以使用 HTML 的语义标签和属性，如 h1、h2、aria-label、aria-labelledby、title 等，来描述我们的页面和元素。
<h1>JS 中的无障碍支持</h1> <button aria-label="回到顶部">回到顶部</button> <img src="example.png" alt="这是一个示例图片" title="示例图片">
使用 ARIA 角色
ARIA（Accessible Rich Internet Applications）是一组属性、角色和状态，可以帮助我们改进 Web 内容的可访问性。
当 HTML 中没有提供足够的语义时，我们可以使用 ARIA 角色来帮助屏幕阅读器理解页面上的元素。常见的 ARIA 角色包括按钮、链接、对话框、下拉菜单等。
<button role="button">单击这里</button> <a role="link" href="https://www.example.com">前往示例网站</a> <div role="dialog">这是一个对话框</a> <select role="menu">下拉菜单</select>
颜色对比度
使用正确的颜色对比度可以帮助视障人士区分页面上的不同元素。为了检查我们的页面中的颜色对比度是否足够，可以使用一些在线工具，如 Color Contrast Analyzer。
常见问题
1. 禁用 tabindex 是个好主意吗？
是的，如果一个元素本来就会被自然排序到正确的位置，那么为它设置 tabindex 就是多此一举。这可能会使 keyboard navigation 更加困难。
2. 为什么我们需要避免在焦点移走时改变焦点？
当屏幕阅读器用户使用 Tab 键在页面上导航时，他们希望焦点停留在他们最关心的元素上。如果焦点在不受用户控制的情况下突然移动，可能会导致他们感到困惑和挫败。
3. 对于某些元素，是否始终需要为其使用 aria-label 或 aria-labelledby？
不一定。当一个元素拥有很好的语义，并且屏幕阅读器可以正确地读出其默认行为时，不需要使用 aria-label 或 aria-labelledby。但是，在某些情况下，例如某些自定义控件或视觉元素，这些属性可以提供额外的信息。
结论
通过以上技术，我们可以改进我们 Web 内容的无障碍支持，并帮助视障人士和其它需要额外帮助的人更容易地访问我们的网站。
在开发一个更容易访问的 Web 内容时，我们应该注意使用语义化的 HTML 标签和属性、正确的颜色对比度，以及避免在焦点移走时改变焦点等。
一些支持无障碍的开发人员工具，例如屏幕阅读器和无障碍检查器，可以帮助我们检查我们的 Web 内容的可访问性，从而进一步改进我们的工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6715c8dead1e889fe218e719