网络默认情况下是可访问的。它在设计时就包含了使可访问性成为可能的特性，并且这些特性从一开始就一直是平台的一部分。近年来，可检查的可访问性树使我们更容易了解这些特性在实践中的工作原理。在这篇文章中，我们将探讨“良好”的客户端代码（HTML、CSS 和 JavaScript）如何改善辅助技术用户的体验，以及我们如何使用可访问性树来帮助验证我们对用户体验的工作。

人们的浏览方式不同

辅助技术 (AT) 是指帮助人们以适合自己的方式操作计算机的工具的总称。盲文显示器 例如，让盲人用户通过实时以盲文格式传达信息来理解屏幕上的内容。VoiceOver 是 Mac 和 iOS 的一个实用程序，它将文本转换为语音，以便人们可以收听界面。Dragon NaturallySpeaking 是一款允许人们通过对着麦克风说话来操作界面的工具。

可刷新盲文显示器（照片：Sebastien.delorme)

人们可以以最适合自己的方式使用网络这一理念是平台的基本设计原则。当网络被发明来 让科学家交换文档 时，这些科学家已经拥有了各种各样的系统。现在，在 2019 年，系统更加多样化。我们从手表到手机、平板电脑到电视，在各种设备上使用浏览器。我们始终需要能经受住考验并允许用户选择的网页。这些复原性和灵活性价值观始终是我们工作的核心。

AT 借鉴了这些基本原理。大多数辅助技术都需要知道用户屏幕上发生了什么。它们都必须理解用户界面，以便能够以用户理解的方式将界面传达给用户。很多年前，辅助技术依赖于 OCR（光学字符识别）技术来识别屏幕上的内容。后来，它们直接从浏览器获取标记。在现代操作系统上，软件更加先进：平台内置的可访问性 API 提供了指导。

前端代码如何提供帮助

特定于平台的可访问性 API 在不同的平台上略有不同。一般来说，它们了解特定于平台的事物：Windows 中的开始菜单、Mac 上的停靠栏、Firefox 中的收藏夹菜单…… 甚至 Firefox 中的地址栏。但是，当我们使用地址栏访问网站时，屏幕会显示它可能从未显示过的信息，更不用说对于 AT 用户来说了。可访问性 API 如何告知 AT 关于网站上的信息？好吧，这就是正确的客户端 HTML、CSS 和 JavaScript 可以提供帮助的地方。

无论我们编写的是纯 HTML、JSX 还是 Jinja，当有人访问我们的网站时，浏览器最终会接收标记作为任何界面的起点。它将该标记转换为内部表示形式，称为 DOM 树。DOM 树包含我们标记中所有内容的对象。在某些情况下，浏览器还会基于 DOM 树创建可访问性树，作为一种工具来更好地了解辅助技术用户的需求和体验。可访问性树会告知特定于平台的可访问性 API，然后这些 API 会告知辅助技术。因此，最终，我们的客户端代码会影响辅助技术用户的体验。

流程图：您的标记会生成 DOM 树，这会影响可访问性树，进而告知平台 API，最终会影响 AT 用户。

HTML

使用 HTML，我们可以明确地指定页面中的内容。我们可以定义什么是什么，或者用技术术语来说，提供语义。例如，我们可以将某项内容定义为

• 复选框或单选按钮
• 结构化数据的表格
• 列表，有序或无序，或定义列表
• 导航或页脚区域

CSS

样式表也会影响可访问性树：元素的布局和可见性有时会被考虑在内。设置为 display: none 或 visibility: hidden 的元素将完全从可访问性树中删除。将 display 设置为 table/table-cell 也会影响语义，正如 Adrian Roselli 在 Tables, CSS display properties and ARIA 中解释的那样。

如果您的网站动态地更改了 CSS 中生成的內容 (::before 和 ::after)，这些內容也会出现在可访问性树中或从其中消失。

然后，还有一些属性可以使视觉布局与 DOM 顺序不同，例如网格和弹性项目的 order 属性，以及 Grid Layout 中的 auto-flow: dense 属性。当视觉顺序与 DOM 顺序不同时，它也可能与可访问性树顺序不同。这可能会让 AT 用户感到困惑。Flexbox 规范 非常明确：CSS order 属性是“用于视觉而不是逻辑重新排序”。

JavaScript

JavaScript 允许我们更改组件的状态。这与可访问性息息相关，例如，我们可以确定

• 菜单是展开还是折叠？
• 复选框是选中还是未选中？
• 电子邮件地址字段是有效还是无效？

请注意，可访问性树实现可能会有所不同，从而导致浏览器之间出现差异。例如，在某些浏览器中，缺少的值被计算为 null，而在其他浏览器中则为 ''（空字符串）。不同的实现是 开发标准计划 正在进行中的诸多原因之一。

可访问性树中有什么内容？

可访问性树包含我们大多数 HTML 元素的可访问性相关元信息。参与的元素决定了这意味着什么，因此我们将查看一些示例。

一般来说，可访问性树对象中包含四项内容

• name：我们如何引用这个东西？例如，一个文本为“阅读更多”的链接的名称将是“阅读更多”（有关如何计算名称的更多信息，请参阅 可访问性名称和描述计算规范）
• description：如果我们想要添加任何内容到名称中，我们该如何描述这个元素？表格的描述可以解释该表格提供了哪种信息。
• role：它是什么类型的对象？例如，它是一个按钮、一个导航栏还是一个项目列表？
• state：如果有的话，它是否有状态？考虑复选框的选中/未选中状态，或 <summary> 元素的折叠/展开状态

此外，可访问性树通常包含有关元素可以执行哪些操作的信息：可以跟随链接，可以在文本输入框中键入，等等。

在 Firefox 中检查可访问性树

所有主要浏览器都提供了检查可访问性树的方法，以便我们可以确定元素的名称计算结果，或者根据浏览器的解释，它的角色是什么。有关如何在 Firefox 中实现这一点的一些背景信息，请参阅 Marco Zehe 的文章 Introducing the Accessibility Inspector in the Firefox Developer Tools。

以下是它在 Firefox 中的工作原理

• 在“设置”中，在“默认开发者工具”下，确保选中“可访问性”复选框
• 您现在应该看到“可访问性”选项卡
• 在“可访问性”选项卡中，您将找到包含所有对象的可访问性树

其他浏览器

在 Chrome 中，可访问性树信息与 DOM 检查器一起使用，可以在“可访问性”选项卡下找到。在 Safari 中，它位于 DOM 树旁边的面板中的“节点”选项卡中，与 DOM 属性一起使用。

一个示例

假设我们有一个表单，人们可以在其中选择他们最喜欢的水果

<form action="">
  <fieldset>
    <legend>Pick a fruit </legend>
    <label><input type="radio" name="fruit"> Apple</label>
    <label><input type="radio" name="fruit"> Orange</label>
    <label><input type="radio"  name="fruit"> Banana</label>
  </fieldset>
</form>

在 Firefox 中，这会创建许多对象，包括

• • 一个角色为 grouping、名为 Pick a fruit 的对象
  • 三个角色为 label、名为 Apple、 Orange 和 Banana 的对象，带有操作 Click，以及以下状态：selectable text、 opaque、 enabled、 sensitive
  • 一个角色为 radiobutton、名为 Apple 的对象，带有操作 Select，以及以下状态： focusable, checkable, opaque, enabled, sensitive

等等。当我们选择“Apple”时，checked 将被添加到它的状态列表中。

请注意，标记中表达的每一项内容都会以有用的方式反映出来。因为我们在单选按钮组中添加了一个 legend，所以它会显示为一个名为“Pick a fruit”的对象。因为我们使用了类型为 radio 的输入，所以它们会显示为相应的类型，并具有相关状态。

如前所述，我们不仅仅通过标记来影响这一点。CSS 和 JavaScript 也会影响它。

使用以下 CSS，我们将有效地从可访问性树中删除名称，使 fieldset 成为无名对象

legend { display: none; /* removes item from accessibility tree */ }

这至少在某些浏览器中是正确的。当我在 Firefox 中尝试时，它的启发式方法仍然设法将名称计算为“Pick a fruit”，而在 Chrome 和 Safari 中，它完全被忽略了。这对真实用户来说意味着什么：他们将无法获得有关如何处理 Apple、Orange 和 Banana 的信息。

如前所述，我们还可以使用 JavaScript 来影响可访问性树。以下是一个示例

const inputApple = document.querySelector(‘input[radio]’);
inputApple.checked = true; // alters state of this input, also in accessibility tree

您对 DOM 元素进行的任何操作，无论是通过 DOM 脚本还是您选择的框架，都会更新可访问性树。

结论

为了给用户提供良好的体验，辅助技术会以不同于我们预期的方式呈现我们的网页。 然而，它们所呈现的内容直接基于我们提供的內容和语义结构。 作为设计师和开发人员，我们可以通过编写良好的 HTML、CSS 和 JavaScript 来确保辅助技术能够理解我们的页面。 可检查的辅助功能树可以帮助我们直接在浏览器中验证我们的名称、角色和状态是否合理。