JavaScript

JavaScript 在我们创建的几乎所有内容中都发挥着重要作用，从较小的动态组件到在 JavaScript 框架（例如 React 或 Angular）上运行的完整产品，无不如此。

这种对 JavaScript 的使用（或过度使用）带来了许多令人担忧的趋势，例如由于代码量过大而导致加载时间过长、使用非语义 HTML 元素，以及通过 JavaScript 注入 HTML 和 CSS。您可能不确定无障碍功能如何融入这些内容。

JavaScript 可能会对网站的无障碍功能产生巨大影响。在本模块中，我们将分享一些通过 JavaScript 增强的无障碍功能的一般模式，以及针对因使用 JavaScript 框架而出现的无障碍功能问题的解决方案。

触发事件

JavaScript 事件允许用户与网页内容互动并执行特定操作。许多人（例如屏幕阅读器用户、精细运动技能障碍人士、没有鼠标或触控板的人等）依赖于键盘支持来与网络互动。 向 JavaScript 操作添加键盘支持至关重要，因为它会影响所有这些用户。

我们来看一个点击事件。 如果在语义 HTML 元素（例如 <button> 或 <a>）上使用 onClick() 事件，它自然会包含鼠标和键盘功能。但是，当 onClick() 事件 添加到非语义元素（例如通用 <div>）时， 键盘功能不会自动应用。

<div role="button" tabindex="0" onclick="doAction()">Click me!</div>

<button onclick="doAction()">Click me!</button>

在 CodePen 上预览此比较 on 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 signed in</p>';

您可以使用 setAttribute以类似的方式应用 CSS：

document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");

能力越大，责任越大。遗憾的是，从历史上看，JavaScript 注入 HTML 和 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 模式和提示，您可以让应用对所有用户更具可访问性。