JavaScript 在我们创建的几乎所有内容中都发挥着重要作用，从较小的动态组件到在 JavaScript 框架（如 React 或 Angular）上运行的完整产品。
JavaScript 的这种使用（或过度使用）带来了许多令人担忧的趋势，例如由于大量代码导致的加载时间过长、非语义 HTML 元素的使用以及通过 JavaScript 注入 HTML 和 CSS。您可能不确定无障碍功能如何融入到这些部分中。
JavaScript 可能会对您网站的无障碍功能产生巨大影响。在本模块中，我们将分享一些通过 JavaScript 增强的通用无障碍功能模式，以及因使用 JavaScript 框架而引起的无障碍功能问题的解决方案。
触发事件
JavaScript 事件允许用户与 Web 内容互动并执行特定操作。许多人（例如屏幕阅读器用户、有精细运动技能障碍的人、没有鼠标或触控板的人以及其他人）依赖键盘支持来与 Web 互动。为您的 JavaScript 操作添加键盘支持至关重要，因为它会影响所有这些用户。
让我们来看一个 click 事件。如果在语义 HTML 元素（如 <button> 或 <a>）上使用 onClick() 事件，它自然会同时包含鼠标和键盘功能。但是，当 onClick() 事件添加到非语义元素（如通用 <div>）时，键盘功能不会自动应用。
<div role="button" tabindex="0" onclick="doAction()">Click me!</div>
<button onclick="doAction()">Click me!</button>
在 CodePen 上预览此比较。
如果非语义元素用于触发事件，则必须添加 keydown/keyup 事件来检测 Enter 键或空格键的按下。将触发事件添加到非语义元素通常会被遗忘。不幸的是，当它被遗忘时，结果就是一个只能通过鼠标访问的组件。仅使用键盘的用户将无法访问相关操作。
页面标题
正如我们在文档模块中学到的，页面标题对于屏幕阅读器用户至关重要。它告诉用户他们所在的页面以及他们是否已导航到新页面。
如果您使用 JavaScript 框架，则需要考虑如何处理页面标题。这对于从单个 index.html 文件加载的 单页应用 (SPA) 尤其重要，因为转换或路由（页面更改）不涉及页面重新加载。每次用户在 SPA 中加载新页面时，标题默认情况下都不会更改。
对于 SPA，可以手动或使用辅助程序包（取决于 JavaScript 框架）添加 document.title 值。向屏幕阅读器用户播报更新的页面标题可能需要一些额外的工作，但好消息是您有多种选择，例如动态内容。
动态内容
JavaScript 最强大的功能之一是能够将 HTML 和 CSS 添加到页面上的任何元素。开发人员可以根据用户的操作或行为创建动态应用程序。
假设您需要在用户登录您的网站或应用时向他们发送消息。您希望消息从白色背景中脱颖而出，并传达消息：“您现在已登录。”
您可以使用元素 innerHTML 来设置内容
document.querySelector("#banner").innerHTML = '<p>You are now signed in</p>';
您可以使用 setAttribute 以类似的方式应用 CSS
document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");
能力越大，责任越大。不幸的是，从历史上看，HTML 和 CSS 的 JavaScript 注入一直被滥用以创建无法访问的内容。此处列出了一些常见的误用
| 可能的误用 | 正确用法 |
|---|---|
| 渲染大量非语义 HTML | 渲染较小的语义 HTML 片段 |
| 不允许辅助技术识别动态内容 | 使用 setTimeout() 时间延迟，以便用户可以听到完整消息 |
动态应用 onFocus() 的样式属性 |
对 CSS 样式表中的相关元素使用 :focus |
| 应用内联样式可能会导致用户样式表无法正确读取 | 将您的样式保留在 CSS 文件中，以保持主题的一致性 |
| 创建非常大的 JavaScript 文件，这会降低网站的整体性能 | 少用 JavaScript。您可能可以在 CSS 中执行类似的功能（例如动画或粘性导航），CSS 解析速度更快，性能更高 |
对于 CSS，切换 CSS 类而不是添加内联样式，因为这样可以实现可重用性和简洁性。在页面上使用隐藏内容，并切换类以隐藏和显示动态 HTML 的内容。如果您需要使用 JavaScript 动态地将内容添加到您的页面，请确保它简单明了，当然，还要确保它是可访问的。
焦点管理
在键盘焦点模块中，我们介绍了焦点顺序和指示器样式。焦点管理是指知道何时何地捕获焦点以及何时不应捕获焦点。
焦点管理对于仅使用键盘的用户至关重要。
组件级别
当组件的焦点未得到正确管理时，可能会创建键盘陷阱。当仅使用键盘的用户卡在组件中，或者在应该保持焦点时焦点未保持时，就会发生键盘陷阱。
用户遇到焦点管理问题的最常见模式之一是模态组件。当仅使用键盘的用户遇到模态时，用户应该能够在模态的可操作元素之间进行 Tab 键切换，但不应在未明确关闭模态的情况下允许用户离开模态。JavaScript 对于正确捕获此焦点至关重要。
页面级别
当用户从一个页面导航到另一个页面时，也必须保持焦点。这在 SPA 中尤其如此，在 SPA 中没有浏览器刷新，并且所有内容都会动态更改。每当用户单击链接以转到应用程序内的另一个页面时，焦点要么保持在同一位置，要么可能被放置在完全不同的位置。
在页面之间转换（或路由）时，开发团队必须决定页面加载时焦点的位置。
有多种技术可以实现此目的
- 将焦点放在带有
aria-live公告的主容器上。 - 将焦点放回跳到主要内容的链接。
- 将焦点移到新页面的顶级标题。
您决定将焦点放在哪里将取决于您正在使用的框架以及您想要向用户提供的内容。它可能取决于上下文或操作。
状态管理
JavaScript 对无障碍功能至关重要的另一个领域是状态管理，或者当组件或页面的当前视觉状态传递给低视力、盲人或盲聋辅助技术用户时。
通常，组件或页面的状态通过 ARIA 属性进行管理，正如在ARIA 和 HTML 模块中介绍的那样。让我们回顾一下用于帮助管理元素状态的几种最常见的 ARIA 属性类型。
组件级别
根据您的页面内容以及用户需要的信息，在向用户传递有关组件的信息时，需要考虑许多 ARIA 状态。
例如，您可以使用 aria-expanded 属性来告诉用户下拉菜单或列表是展开还是折叠。
或者您可以使用 aria-pressed 来指示按钮已被按下。
在应用 ARIA 属性时，务必有选择性。仔细考虑用户流程，以了解应向用户传达哪些关键信息。
页面级别
开发人员通常使用称为 ARIA 实时区域的视觉上隐藏的区域来向辅助技术 (AT) 用户播报屏幕上的更改和警报消息。此区域可以与 JavaScript 结合使用，以在无需重新加载整个页面的情况下，将页面上的动态更改通知用户。
从历史上看，由于 JavaScript 的动态特性，它一直难以在 aria-live 和警报区域中播报内容。异步地将内容添加到 DOM 使 AT 难以拾取该区域并进行播报。为了使内容被正确读取，实时或警报区域必须在加载时位于 DOM 中，然后可以动态地交换文本。
如果您使用 JavaScript 框架，那么好消息是，几乎所有框架都有一个“实时播报器”软件包，它可以为您完成所有工作，并且是完全可访问的。无需担心创建实时区域和处理上一节中描述的问题。
以下是一些常见 JavaScript 框架的实时软件包
- React：react-aria-live 和 react-a11y-announcer
- Angular：
LiveAnnouncer - Vue：vue-a11y-utils
现代 JavaScript 是一种强大的语言，使 Web 开发人员能够创建强大的 Web 应用程序。这有时会导致过度工程化，并由此导致无法访问的模式。通过遵循本模块中的 JavaScript 模式和技巧，您可以使您的应用程序对所有用户更易于访问。
检查您的理解情况
测试您对 Javascript 的知识
使用 JavaScript 更改元素样式的最佳方法是什么？
所有 JavaScript 操作都可以支持键盘用户吗？