JavaScript 在我们创建的所有内容中都起着重要作用 - 从小到 为在 JavaScript 框架上运行的完整产品添加动态组件，例如 React 或 Angular。
对 JavaScript 的这种使用（或过度使用）带来了许多令人震惊的趋势， 例如因代码大量、使用非语义 HTML 导致的加载时间较长 以及通过 JavaScript 注入 HTML 和 CSS。您可能 不确定如何将无障碍功能纳入各个环节。
JavaScript 会极大地影响网站的可访问性。在本课中， 我们将分享一些无障碍功能的常规模式，这些模式 以及因使用 JavaScript 而引起的无障碍功能问题的解决方案， 编写代码。
触发事件
JavaScript 事件让用户能够与 Web 内容交互，并执行 特定操作。很多人，比如屏幕阅读器用户 精细运动技能残疾人、没有鼠标或触控板的人、 等，需要依靠键盘支持与网页互动。 为 JavaScript 操作添加键盘支持至关重要，因为 都会影响所有这些用户
我们来看一个点击事件。
如果对语义 HTML 元素（例如 <button>）使用了 onClick() 事件
或 <a>，那么其中自然同时包含鼠标和键盘功能。不过，
发生 onClick() 事件时，系统不会自动应用键盘功能
添加到非语义元素中，例如通用 <div>。
<div role="button" tabindex="0" onclick="doAction()">Click me!</div>
<button onclick="doAction()">Click me!</button>
在 CodePen 上预览此比较。
如果针对触发器事件使用了非语义元素， keydown/keyup 事件 来检测是否按 Enter 键或空格键。将触发器事件添加到 往往会忘记非语义元素。很遗憾，当它被忘记时 最终得到一个只能通过鼠标访问的组件。仅使用键盘 用户将无权执行相关操作。
网页标题
正如我们在“文档”模块中所了解到的， 网页标题对屏幕阅读器用户必不可少。它可以告诉用户 以及他们是否导航到了新页面
如果您使用 JavaScript 框架，则需要考虑如何处理网页
标题。对于
单页应用 (SPA)
从单个 index.html 文件加载为转换或路由（页面
不涉及重新加载网页。每当用户加载新网页时
SPA，则默认情况下，标题不会更改。
对于 SPA，document.title 值可以手动添加，也可以使用帮助软件包添加（具体取决于 JavaScript 框架）。宣布推出 更新后的网页标题 屏幕阅读器用户可能需要执行一些额外的工作 例如动态内容
动态内容
JavaScript 最强大的功能之一是能够添加 HTML 和 CSS 添加到网页上的任何元素中。开发者可以创建动态应用 根据用户的操作或行为来调整广告。
假设您需要在用户登录您的网站时向其发送消息 或应用您需要确保消息在白色背景中脱颖而出，并且能够直接传递 以下消息：“您现在已登录。”
您可以使用元素 innerHTML
来设置内容：
document.querySelector("#banner").innerHTML = '<p>You are now logged in</p>';
您可以按照类似的方式应用 CSS
setAttribute:
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 向网页动态添加内容，确保网页简单且 当然还要便于访问
焦点管理
在“键盘焦点”模块中，我们介绍了焦点 顺序和指示器样式焦点管理就是了解应该陷入的困境和时机 以及何时不应陷入困境。
焦点管理对于仅使用键盘的用户至关重要。
组件级别
当组件的焦点未正确管理时，您可以创建键盘陷阱。 当仅使用键盘的用户卡在某个组件中时，就会出现键盘陷阱； 不会保持焦点。
用户遇到焦点管理问题的最常见模式之一 位于模态组件中。当仅使用键盘的用户遇到模态窗口时， 应该能够在模态窗口的操作元素之间来回切换，但它们 除非明确将其关闭，否则不得在模态窗口之外执行。 JavaScript 对于正确捕获此焦点至关重要。
网页级
此外，当用户在页面间导航时，还必须保持焦点。这是 在 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 应用。这有时会导致过度工程， 扩展程序、无法访问的模式通过遵循 JavaScript 格式和提示 您可以使您的应用更方便所有用户访问。
检查您的理解情况
测试您对 JavaScript 知识的掌握情况
使用 JavaScript 更改元素的样式的最佳方式是什么？
所有 JavaScript 操作都可以支持键盘用户吗？