JavaScript

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

这种使用（或过度使用）JavaScript 的做法带来了许多令人担忧的趋势，例如由于代码量过多、使用非语义 HTML 元素以及通过 JavaScript 注入 HTML 和 CSS 而导致的加载时间过长。您可能不确定无障碍功能在这些方面发挥着怎样的作用。

JavaScript 可能会对您网站的无障碍功能产生巨大影响。在本单元中，我们将分享一些由 JavaScript 增强的无障碍功能常规模式，以及针对使用 JavaScript 框架时出现的无障碍问题的解决方案。

触发事件

借助 JavaScript 事件，用户可以与 Web 内容互动并执行特定操作。许多人（例如屏幕阅读器用户、精细运动技能残障人士、没有鼠标或触控板的用户等）依靠键盘支持与网页进行交互。请务必为 JavaScript 操作添加键盘支持，因为这会影响所有这些用户。

我们来看看点击事件。 如果对语义 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，可以手动或使用帮助程序包添加 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;");

能力越强，责任也就越重。遗憾的是，HTML 和 CSS 的 JavaScript 注入一直被滥用来创建无法访问的内容。下面列出了一些常见的误区：

可能的滥用 正确使用
呈现大块非语义 HTML 块 渲染较小的语义 HTML 片段
辅助技术未能识别动态内容 使用 setTimeout() 延迟时间让用户听到完整消息
动态为 onFocus() 应用样式属性 在 CSS 样式表中，对相关元素使用 :focus
应用内嵌样式可能会导致无法正确读取用户样式表 将样式保留在 CSS 文件中，以保持主题的一致性
创建会降低网站整体性能的超大 JavaScript 文件 减少使用 JavaScript。您或许可以在 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 框架的实时软件包：

现代 JavaScript 是一种强大的语言，可让 Web 开发者构建强大的 Web 应用。这有时会导致过度工程化，进而导致不可访问的模式。通过遵循本单元中的 JavaScript 模式和提示，您可以让所有用户都能更方便地使用您的应用。

检查您的理解情况

测试您对 JavaScript 知识的掌握情况

使用 JavaScript 更改元素样式的最佳方式是什么？

使用 JavaScript 直接在 HTML 元素中应用动态样式。
这会导致 JavaScript 文件膨胀，并且效率低下。
使用 JavaScript 切换元素的类，并将样式添加到 CSS 样式表中。
将样式保留在 CSS 样式表中，并使用轻量级 JavaScript 更改类名称。

所有 JavaScript 操作是否都支持键盘用户？

可以，但您可能需要执行一些额外的工作。
语义 HTML 默认支持键盘用户，但具有操作的非语义元素需要额外的 JavaScript。
是的，所有操作都自动支持键盘用户。
只有语义 HTML 会自动支持键盘焦点。
不可以，您只能使用语义 HTML 支持键盘用户。
所有 HTML 元素都可以支持键盘用户。