JavaScript 在我们创建的几乎所有事物中都发挥着重要作用，从较小的动态组件，到在 JavaScript 框架（如 React 或 Angular）上运行的完整产品，不一而足。
对 JavaScript 的这种使用（或过度使用）带来了许多令人担忧的趋势，例如由于大量代码导致加载时间过长、使用非语义 HTML 元素，以及通过 JavaScript 注入 HTML 和 CSS。而且您可能不确定无障碍功能在各方面是如何发挥作用的。
JavaScript 对网站的可访问性有很大影响。在本单元中，我们将分享一些可通过 JavaScript 增强的常规无障碍功能模式，以及针对因使用 JavaScript 框架而出现的无障碍功能问题的解决方案。
触发事件
JavaScript 事件可让用户与 Web 内容互动并执行特定操作。许多人（例如屏幕阅读器用户、有精细运动技能残疾的人、没有鼠标或触控板的用户等等）依靠键盘支持与网页互动。请务必为 JavaScript 操作添加键盘支持，因为这会影响所有这些用户。
我们来看一个点击事件。如果将 onClick() 事件用于 <button> 或 <a> 等语义 HTML 元素，那么该事件自然就会同时包含鼠标和键盘功能。不过，将 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，可以手动添加 document.title 值，也可以使用辅助软件包添加（具体取决于 JavaScript 框架）。向屏幕阅读器用户宣布更新后的网页标题可能需要执行一些额外的操作，但好消息是，您还有其他选择，例如动态内容。
动态内容
JavaScript 最强大的功能之一就是能够向网页上的任何元素添加 HTML 和 CSS。开发者可以根据用户的操作或行为创建动态应用。
假设您需要在用户登录您的网站或应用时向其发送一条消息。您希望该消息从白色背景中突出显示，并传达以下消息：“您现在已登录”。
您可以使用元素 innerHTML 设置内容：
document.querySelector("#banner").innerHTML = '<p>You are now logged in</p>';
您可以通过类似的方式使用 setAttribute 应用 CSS：
document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");
能力越强，责任也就越重。遗憾的是，利用 JavaScript 注入 HTML 和 CSS 一直被滥用来创建无法访问的内容。下面列出了一些常见的误用：
| 可能遭到滥用 | 正确用法 |
|---|---|
| 渲染大块非语义 HTML | 呈现更小的语义 HTML 片段 |
| 没有留出时间让辅助技术识别动态内容 | 使用 setTimeout() 的延迟时间，让用户听到完整消息 |
为 onFocus() 动态应用样式属性 |
对 CSS 样式表中的相关元素使用 :focus |
| 应用内嵌样式可能会导致用户样式表无法正确读取 | 将您的样式保存在 CSS 文件中，以确保主题的一致性 |
| 创建会降低整体网站性能的超大型 JavaScript 文件 | 减少使用 JavaScript。您或许能够在 CSS 中执行类似功能（例如动画或粘性导航），它们解析得更快，而且性能更高 |
对于 CSS，请切换 CSS 类，而不是添加内嵌样式，因为这样可以实现可重用性和简单性。使用页面上的隐藏内容以及切换类来隐藏和显示动态 HTML 的内容。如果您需要使用 JavaScript 向网页动态添加内容，请确保内容简洁明了，当然，无障碍。
焦点管理
在键盘焦点模块中，我们介绍了焦点顺序和指示器样式。焦点管理是指知道何时何地陷入焦点以及何时不应陷入。
焦点管理对于仅使用键盘的用户来说至关重要。
组件级别
如果组件的焦点未正确管理，您便可能会创建键盘陷阱。 如果仅使用键盘的用户卡在组件中，或者没有正确保持焦点，就会发生键盘陷阱。
用户遇到焦点管理问题的最常见的模式之一是模态组件。当仅使用键盘的用户遇到模态时，用户应该能够在模态的可操作元素之间按 Tab 键，但不得在未明确关闭的情况下允许这些元素超出模态窗口。JavaScript 对于正确捕获此焦点至关重要。
网页级
当用户从一个网页导航到另一个网页时，还必须保持焦点。在 SPA 中尤其如此，在 SPA 中，不需要刷新浏览器，而且所有内容都会动态变化。无论何时，只要用户点击链接前往应用中的另一个页面，焦点就会保持在同一位置，或者可能完全位于其他位置。
在页面之间转换（或路由）时，开发团队必须决定页面加载时焦点会去向何处。
有多种方法可以实现这一目标：
- 使用
aria-live通知将焦点放在主容器上。 - 将焦点重新置于链接上，以跳至主要内容。
- 将焦点移至新页面的顶级标题。
至于您决定将重点放在何处，取决于您所使用的框架以及要向用户提供的内容。它可能取决于上下文或操作。
状态管理
JavaScript 对无障碍功能至关重要的另一个领域是状态管理，即当组件或页面的当前视觉状态传递给弱视、失明或失聪的辅助技术用户时。
通常情况下，如 ARIA 和 HTML 模块中所述，通过 ARIA 属性管理组件或页面的状态。我们来了解一下可用于帮助管理元素状态的一些最常见的 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 操作都能支持键盘用户吗？