处理常见的无障碍问题

当我们在网络技术领域谈论可访问性时，大多数人会立即想到确保网站/应用程序对残疾人可用，例如

• 视障人士使用屏幕阅读器或放大/缩放功能访问文本。
• 有运动功能障碍的人使用键盘（或其他非鼠标功能）激活网站功能。
• 听障人士依靠字幕/旁白或其他文本替代品来获取音频/视频内容。

然而，说可访问性仅仅关乎残疾人是错误的。实际上，可访问性的目标是使您的网站/应用程序尽可能多的人在尽可能多的情况下都能使用，而不仅仅是那些使用高性能台式电脑的用户。一些例子可能包括

• 移动设备用户。
• 使用电视、手表等替代浏览设备的用户。
• 使用可能没有最新浏览器的旧设备的用户。
• 使用可能处理器速度较慢的低规格设备的用户。

从某种意义上说，整个模块都是关于可访问性的——跨浏览器测试确保您的网站能够尽可能多的人使用。 什么是可访问性？ 比这篇文章更全面、更彻底地定义了可访问性。

也就是说，本文将涵盖围绕残疾人以及他们如何使用网络的跨浏览器和测试问题。我们已经讨论了其他领域，例如 响应式设计 和 性能，这些内容在模块的其他地方有介绍。

在本节中，我们将详细介绍围绕网络可访问性出现的一些主要问题，这些问题与特定技术相关，以及需要遵循的最佳实践，以及您可以进行的一些快速测试，以查看您的网站是否朝着正确的方向发展。

语义 HTML（元素按其正确目的使用）本身就是可访问的——这种内容可以被有视力的人阅读（只要你不做一些愚蠢的事情，比如将文本设置得过小或使用 CSS 隐藏它），但它也可以被辅助技术使用，比如屏幕阅读器（字面上将网页读给用户的应用程序），并带来其他优势。

语义结构

语义 HTML 中最重要的快速获胜是使用标题和段落结构来组织您的内容；这是因为屏幕阅读器用户倾向于使用文档的标题作为路标，以便更快地找到他们需要的内容。如果您的内容没有标题，他们得到的就是一大块没有路标的文本墙，什么也找不到。不良和良好 HTML 示例

<font size="7">My heading</font>
<br /><br />
This is the first section of my document.
<br /><br />
I'll add another paragraph here too.
<br /><br />
<font size="5">My subheading</font>
<br /><br />
This is the first subsection of my document. I'd love people to be able to find
this content!
<br /><br />
<font size="5">My 2nd subheading</font>
<br /><br />
This is the second subsection of my content. I think it is more interesting than
the last one.

<h1>My heading</h1>

<p>This is the first section of my document.</p>

<p>I'll add another paragraph here too.</p>

<h2>My subheading</h2>

<p>
  This is the first subsection of my document. I'd love people to be able to
  find this content!
</p>

<h2>My 2nd subheading</h2>

<p>
  This is the second subsection of my content. I think it is more interesting
  than the last one.
</p>

此外，您的内容在源代码顺序上应该有逻辑意义——您始终可以使用 CSS 将其放置到您想要的位置，但您应该从一开始就将源代码顺序设置正确。

作为测试，您可以关闭网站的 CSS，看看没有它内容是否仍然易于理解。您可以通过手动从代码中删除 CSS 来执行此操作，但最简单的方法是使用浏览器功能，例如

• Firefox：从主菜单中选择查看 > 页面样式 > 无样式。
• Safari：从主菜单中选择开发 > 禁用样式（要启用开发菜单，请从Safari > 偏好设置 > 高级 > 在菜单栏中显示开发菜单）。
• Chrome：安装 Web Developer Toolbar 扩展程序，然后重启浏览器。点击出现的齿轮图标，然后选择CSS > 禁用所有样式。
• Edge：从主菜单中选择查看 > 样式 > 无样式。

使用原生键盘可访问性

某些 HTML 功能可以使用键盘进行选择——这是默认行为，自网络早期以来一直可用。具有此功能的元素是允许用户与网页交互的常见元素，即链接、<button> 和表单元素，如 <input>。

您可以使用我们的 native-keyboard-accessibility.html 示例（参见 源代码）来试一试——在一个新标签页中打开它，然后尝试按 Tab 键；按几次之后，您应该会看到 Tab 焦点开始在不同的可聚焦元素之间移动；聚焦元素在每个浏览器中都带有高亮的默认样式（在不同的浏览器之间略有不同），这样您就可以知道哪个元素是聚焦的。

然后您可以按 Enter/Return 键来跟随聚焦的链接或按下按钮（我们已经包含了一些 JavaScript 来使按钮显示一条消息），或者开始输入文本以在文本输入框中输入文本（其他表单元素有不同的控件，例如 <select> 元素可以使用向上和向下箭头键显示其选项并循环浏览它们）。

请注意，不同的浏览器可能具有不同的键盘控制选项。大多数现代浏览器都遵循上面描述的 Tab 模式（您也可以使用 Shift + Tab 向后移动可聚焦元素），但有些浏览器有自己的怪癖

• Mac 上的 Safari 默认情况下不允许您使用 Tab 键浏览链接；要启用此功能，请打开系统设置，向下滚动到键盘，然后启用键盘导航。如果您使用的是旧版本的 macOS，请参阅 Apple 的 macOS 用户指南中的 使用键盘模拟鼠标操作。

此示例突出了使用正确的语义元素来完成正确工作的必要性。可以使用 CSS 将任何元素的样式设置为看起来像链接或按钮，并可以使用 JavaScript 使其像链接或按钮一样工作，但它们实际上不是链接或按钮，您将失去这些元素为您免费提供的许多可访问性。因此，如果可以避免，请不要这样做。

另一个技巧——如我们的示例所示，您可以使用 :focus 伪类来控制可聚焦元素在聚焦时的外观。最好将焦点和悬停样式结合起来，以便用户获得视觉提示，告诉他们控件在激活时会执行操作，无论他们使用的是鼠标还是键盘

a:hover,
input:hover,
button:hover,
select:hover,
a:focus,
input:focus,
button:focus,
select:focus {
  font-weight: bold;
}

构建键盘可访问性

有时无法避免失去键盘可访问性。您可能继承了一个语义不太好的网站（也许您最终使用了一个生成由 <div> 构成的按钮的糟糕 CMS），或者您正在使用一个没有内置键盘可访问性的复杂控件，比如 HTML <video> 元素（令人惊讶的是，Opera 是唯一一个允许您使用 Tab 键浏览 <video> 元素的默认浏览器控件的浏览器）。您在这里有几个选择

1. 使用 <button> 元素（我们可以默认使用 Tab 键访问！）和 JavaScript 创建自定义控件，以连接它们的功能。参见 创建跨浏览器视频播放器，其中包含一些很好的示例。
2. 通过 JavaScript 创建键盘快捷键，以便在您按键盘上的某些键时激活功能。参见 桌面鼠标和键盘控件，其中包含一些游戏相关示例，可以适应任何目的。
3. 使用一些有趣的策略来模拟按钮行为。例如，我们的 fake-div-buttons.html 示例（参见 源代码）。在这里，我们赋予了假的 <div> 按钮可以被聚焦的能力（包括通过 Tab 键），方法是为每个按钮添加 tabindex="0" 属性（参见 WebAIM 的 tabindex 文章，其中包含更多非常有用的细节）。这允许我们使用 Tab 键聚焦按钮，但不能使用 Enter/Return 键激活它们。为此，我们必须添加以下 JavaScript 技巧
   js

   document.onkeydown = (e) => {
     if (e.code === "Enter") {
       // The Enter/Return key
       document.activeElement.onclick(e);
     }
   };
   

   在这里，我们向 document 对象添加了一个监听器，以检测何时在键盘上按下按钮。我们通过事件对象的 code 属性检查按下了哪个按钮；如果它与 Return/Enter 匹配，我们使用 document.activeElement.onclick() 运行存储在按钮的 onclick 处理程序中的函数。 activeElement 为我们提供了当前在页面上聚焦的元素。

文本替代

文本替代对于可访问性非常重要——如果一个人有视觉或听力障碍，无法看到或听到某些内容，那么就会有问题。最简单的文本替代方法是简单的 alt 属性，我们应该将其包含在所有包含相关内容的图像上。这应该包含对图像的描述，以便成功地传达其在页面上的含义和内容，以便屏幕阅读器可以读取它并读给用户听。

缺少 alt 文本可以通过多种方式进行测试，例如使用辅助功能 审计工具。

对于视频和音频内容，alt 文本稍微复杂一些。有一种方法可以定义文本轨道（例如字幕）并在播放视频时显示它们，以 <track> 元素和 WebVTT 格式的形式（有关详细教程，请参阅 向 HTML 视频添加字幕）。这些功能的 浏览器兼容性 很好，但如果您想为音频提供文本替代或支持较旧的浏览器，在页面上的某个位置或单独的页面上提供一个简单的文本转录可能是个好主意。

元素关系和上下文

HTML 中有一些功能和最佳实践旨在提供上下文和元素之间的关系，而这些关系在其他情况下不存在。三个最常见的示例是链接、表单标签和数据表。

无障碍链接文本的关键在于，使用屏幕阅读器的人员通常会使用一种通用功能，即拉起页面上所有链接的列表。在这种情况下，链接文本需要在上下文中说得通。例如，标记为“点击此处”、“点击我”等的链接列表对于无障碍来说非常糟糕。链接文本最好在上下文中和非上下文中都有意义。

接下来是我们的表单 <label> 元素，它是使表单无障碍的核心功能之一。表单的问题在于，您需要标签来说明应该在每个表单输入中输入什么数据。每个标签都需要包含在 <label> 中，以便将其明确地链接到其对应的表单输入（每个 <label> 的 for 属性值需要与表单元素 id 值匹配），即使源顺序不是完全合乎逻辑的（公平地说，它应该）。

最后，简要介绍一下数据表。基本数据表可以使用非常简单的标记编写（参见 bad-table.html 实时 和 源代码），但它存在问题——屏幕阅读器用户无法将行或列关联起来作为数据分组——要做到这一点，您需要知道标题行是什么，以及它们是标题行、列等。对于这样的表格，这只能通过视觉方式完成。

如果您改为查看 punk-bands-complete.html 示例（实时，源代码），您会看到一些辅助功能在这里发挥作用，例如表格标题（<th> 和 scope 属性）、<caption> 元素等。

CSS 往往提供的基本无障碍功能比 HTML 少，但如果使用不当，它仍然可能对无障碍造成同样大的损害。我们已经提到了几个涉及 CSS 的无障碍提示。

• 使用正确的语义元素在 HTML 中标记不同的内容；如果您想创建不同的视觉效果，请使用 CSS——不要滥用 HTML 元素来获得您想要的样式。例如，如果您想要更大的文本，请使用 font-size，而不是 h1 元素。
• 确保您的源顺序在没有 CSS 的情况下有意义；您可以始终使用 CSS 以任何您想要的方式为页面设置样式。
• 您应该确保按钮和链接等交互式元素具有适当的焦点/悬停/活动状态设置，以向用户提供关于其功能的视觉提示。如果您出于样式原因删除了默认值，请确保您包含一些替换样式。

您应该考虑其他一些因素。

颜色和颜色对比度

在为您的网站选择配色方案时，您应该确保文本（前景）颜色与背景颜色形成良好的对比。您的设计可能看起来很酷，但如果患有色盲等视力障碍的人无法阅读您的内容，那它就没有什么用。使用 WebAIM 的 颜色对比度检查器 等工具来检查您的方案是否对比度足够。

另一个提示是不要仅仅依靠颜色来表示路标/信息，因为这对那些看不见颜色的人来说毫无用处。例如，不要用红色标记必填表单字段，而是用星号标记，并且用红色标记。

隐藏内容

在很多情况下，视觉设计要求并非所有内容都同时显示。例如，在我们的 选项卡式信息框示例（参见 源代码）中，我们有三个信息面板，但我们将它们 定位 在彼此之上，并提供可以点击的选项卡以显示每个面板（它也可以用键盘访问——您也可以使用 Tab 和 Enter/Return 来选择它们）。

屏幕阅读器用户并不关心这些——只要源顺序有意义，他们就可以访问所有内容，他们就满意了。绝对定位（如在此示例中使用）通常被视为隐藏内容以产生视觉效果的最佳机制之一，因为它不会阻止屏幕阅读器访问它。

另一方面，您不应该使用 visibility: hidden 或 display: none，因为它们会将内容从屏幕阅读器中隐藏。当然，除非您有充分的理由要将这些内容从屏幕阅读器中隐藏。

JavaScript 在无障碍方面与 CSS 存在相同的问题——如果使用不当或过度使用，它可能会对无障碍造成灾难性的影响。我们已经暗示了一些与 JavaScript 相关的无障碍问题，主要是在语义 HTML 领域——您应该始终使用适当的语义 HTML 来实现功能，无论它在哪里可用，例如，根据需要使用链接和按钮。如果可能，不要使用带有 JavaScript 代码的 <div> 元素来伪造功能——这很容易出错，而且比使用 HTML 提供给您的免费功能更费力。

简单功能

通常，简单功能应该仅使用 HTML 就可以实现——JavaScript 应该只用于增强功能，而不是完全构建它。JavaScript 的良好用途包括

• 提供客户端表单验证，它可以快速向用户发出有关其表单条目问题的警报，而无需等待服务器检查数据。如果没有，表单仍然可以使用，但验证可能会更慢。
• 为 HTML <video> 提供自定义控件，使这些控件对仅键盘用户可访问（如前所述，大多数浏览器中的默认浏览器控件对键盘不可访问）。

更复杂的 JavaScript 实现可能会导致无障碍问题——您需要尽力而为。例如，期望您使使用 WebGL 编写的复杂 3D 游戏对盲人 100% 无障碍是不合理的，但您可以实现 键盘控制，使其对非鼠标用户可用，并使配色方案对比度足够高，以便色觉缺陷者可以使用。

复杂功能

对于无障碍来说，主要存在问题的领域之一是涉及复杂表单控件（如日期选择器）和经常且增量更新的动态内容的复杂应用程序。

非本机复杂表单控件存在问题，因为它们往往涉及许多嵌套的 <div>，而浏览器默认情况下不知道如何处理它们。如果您自己发明它们，您需要确保它们可以通过键盘访问；如果您使用某种第三方框架，请仔细查看可用的选项，以了解它们的可访问性，然后再开始使用它们。例如，Bootstrap 在可访问性方面看起来还不错，尽管 Rhiana Heath 的 使 Bootstrap 更具可访问性 探讨了它的一些问题（主要与颜色对比度相关），并提供了一些解决方案。

定期更新的动态内容可能成为一个问题，因为屏幕阅读器用户可能会错过它，尤其是如果它意外更新。如果您有一个使用 XMLHttpRequest 或 Fetch 定期更新主内容面板的单页应用程序，屏幕阅读器用户可能会错过这些更新。

WAI-ARIA

您是否需要使用这种复杂的功能，或者简单的语义 HTML 就足够了？如果您确实需要复杂性，您应该考虑使用 WAI-ARIA（可访问的富互联网应用程序），它是一种规范，为复杂表单控件和更新面板等项目提供语义（以新的 HTML 属性的形式），这些语义可以被大多数浏览器和屏幕阅读器理解。

为了处理复杂的表单小部件，您需要使用 ARIA 属性（如 roles）来声明不同元素在小部件中的作用（例如，它们是选项卡还是选项卡面板？）、aria-disabled 来声明控件是否被禁用等。

为了处理定期更新的内容区域，您可以使用 aria-live 属性，它标识一个更新区域。它的值指示屏幕阅读器应以多快的速度读出它。

• off: 默认值。不应宣布更新。
• polite: 只有在用户空闲时才会宣布更新。
• assertive: 应尽快向用户宣布更新。

以下是一个示例

<p><span id="LiveRegion1" aria-live="polite" aria-atomic="false"></span></p>

您可以在 Freedom Scientific 的 ARIA（可访问的富互联网应用程序）实时区域 示例中看到一个实际示例——突出显示的段落应每 10 秒更新一次内容，屏幕阅读器应该将此读出给用户。 ARIA 实时区域 - 原子 提供了另一个有用的示例。

我们没有足够的空间在这里详细介绍 WAI-ARIA，您可以在 WAI-ARIA 基础知识 中了解更多信息。

现在，我们已经介绍了不同 Web 技术的无障碍注意事项，包括一些测试技术（如键盘导航和颜色对比度检查器），让我们来看看在进行无障碍测试时可以使用哪些其他工具。

有很多可用的审计工具，你可以将你的网页输入到这些工具中。它们会审查你的网页并返回页面上存在的无障碍问题列表。让我们看一个例子，使用Wave，这是一个在线无障碍测试工具，它接受网页地址并返回该页面的带注释视图，突出显示无障碍问题。

1. 访问Wave 主页。
2. 将我们bad-semantics.html 示例的 URL 输入到页面顶部附近的文本输入框中。然后按回车键或单击/点击输入框最右侧的箭头。
3. 该网站应该会返回对无障碍问题的描述。单击显示的图标，以查看有关 Wave 评估识别的每个问题的更多信息。

Deque 的 aXe 工具 比我们上面提到的审计工具更进一步。与其他工具一样，它检查页面并返回无障碍错误。它最直接有用的形式可能是浏览器扩展

• Chrome 版 aXe
• Firefox 版 aXe

这些扩展将在浏览器开发者工具中添加一个无障碍选项卡。例如，我们安装了 Firefox 版本，然后使用它来审计我们bad-table.html 示例。我们得到了以下结果

aXe 也可以使用npm安装，并且可以与像Grunt 和Gulp 这样的任务运行器、像Selenium 和Cucumber 这样的自动化框架、像Jasmine 这样的单元测试框架以及更多其他工具集成（同样，有关详细信息，请参阅aXe 主页）。

使用屏幕阅读器进行测试绝对值得，这样你就能习惯视力严重障碍者如何使用网络。有很多屏幕阅读器可用

• 有些是付费的商业产品，比如JAWS（Windows）。
• 有些是免费产品，比如NVDA（Windows）、ChromeVox（Chrome、Windows 和 macOS）以及Orca（Linux）。
• 有些是内置于操作系统中的，比如VoiceOver（macOS 和 iOS）、ChromeVox（在 Chromebook 上）以及TalkBack（Android）。

通常，屏幕阅读器是独立的应用程序，运行在主机操作系统上，不仅可以阅读网页，还可以阅读其他应用程序中的文本。情况并非总是如此（ChromeVox 是浏览器扩展），但通常，屏幕阅读器倾向于以略微不同的方式运行并具有不同的控件，因此你需要查阅所选屏幕阅读器的文档以获取所有详细信息——也就是说，它们基本上以相同的方式工作。

让我们使用几个不同的屏幕阅读器进行一些测试，让你大致了解它们的运作方式以及如何使用它们进行测试。

VoiceOver

VoiceOver (VO) 是你的 Mac/iPhone/iPad 的免费软件，因此如果你使用苹果产品，它非常适合在桌面/移动设备上进行测试。我们将在 MacBook Pro 上的 macOS 上对其进行测试。

要打开它，请按 Cmd + F5。如果你以前没有使用过 VO，你会看到一个欢迎屏幕，你可以在其中选择启动 VO 或不启动 VO，并运行一个非常有用的教程来学习如何使用它。要再次关闭它，请再次按 Cmd + F5。

当 VO 打开时，显示屏看起来基本相同，但你会在屏幕左下角看到一个黑框，其中包含有关 VO 当前选中内容的信息。当前选中内容也会被突出显示，带有黑边框——此突出显示称为VO 光标。

要使用 VO，你将大量使用“VO 修饰键”——这是一个键或键组合，你需要在实际 VO 键盘快捷键之外按下它才能使其生效。使用这种修饰键在屏幕阅读器中很常见，这样可以使它们保持命令不与其他命令冲突。在 VO 的情况下，修饰键可以是 CapsLock 或 Ctrl + Option。

VO 有很多键盘命令，我们不会在这里全部列出。以下表格列出了你在网页测试中需要用到的基本命令。在键盘快捷键中，“VO”表示“VoiceOver 修饰键”。

这似乎有很多命令，但当你习惯了它，VO 就会经常提醒你某些地方要使用什么命令。现在试试 VO；然后，你可以继续在屏幕阅读器测试 部分中尝试我们的一些示例。

NVDA

NVDA 仅适用于 Windows，你需要安装它。

1. 从nvaccess.org 下载它。你可以选择捐款或免费下载；你还需要提供你的电子邮件地址才能下载它。
2. 下载完成后，安装它——双击安装程序，接受许可并按照提示操作。
3. 要启动 NVDA，双击程序文件/快捷方式，或使用键盘快捷键 Ctrl + Alt + N。启动它后，你会看到 NVDA 欢迎对话框。在这里，你可以选择几个选项，然后按确定按钮开始使用。

NVDA 现在将在你的计算机上处于活动状态。

要使用 NVDA，你将大量使用“NVDA 修饰键”——这是一个键，你需要在实际 NVDA 键盘快捷键之外按下它才能使其生效。使用这种修饰键在屏幕阅读器中很常见，这样可以使它们保持命令不与其他命令冲突。在 NVDA 的情况下，修饰键可以是 Insert（默认设置）或 CapsLock（可以通过在按确定按钮之前选中 NVDA 欢迎对话框中的第一个复选框来选择）。

NVDA 有很多键盘命令，我们不会在这里全部列出。以下表格列出了你在网页测试中需要用到的基本命令。在键盘快捷键中，“NVDA”表示“NVDA 修饰键”。

屏幕阅读器测试

现在您已经习惯使用屏幕阅读器，我们希望您使用它进行一些快速的辅助功能测试，以便了解屏幕阅读器如何处理良好和不良网页功能。

• 查看 good-semantics.html，并注意屏幕阅读器如何找到标题并将其提供给导航使用。现在查看 bad-semantics.html，并注意屏幕阅读器如何无法获取此信息。想象一下，当尝试浏览一个非常长的文本页面时，这将是多么令人讨厌。
• 查看 good-links.html，并注意它们在脱离上下文时是如何有意义的。 bad-links.html 并非如此，它们都只是“点击这里”。
• 查看 good-form.html，并注意表单输入是如何使用它们的标签来描述的，因为我们正确地使用了 <label> 元素。在 bad-form.html 中，它们得到一个无用的标签，类似于“空白”。
• 查看我们的 punk-bands-complete.html 示例，并查看屏幕阅读器如何能够将内容的列和行关联起来并一起读出，因为我们已正确定义了标题。在 bad-table.html 中，所有单元格都无法关联。请注意，NVDA 在您页面上只有一个表格时，似乎表现得有点奇怪；您可以尝试 WebAIM 的表格测试页面。
• 查看我们之前看到的 WAI-ARIA 实时区域示例，并注意屏幕阅读器如何不断地读出不断更新的部分。

如上所述，您不能仅仅依靠自动化工具来确定您网站上的辅助功能问题。建议您在制定测试计划时，应尽可能包含一些辅助功能用户组（请参阅我们在课程早期介绍的 用户测试 部分，以获取更多背景信息）。尝试让一些屏幕阅读器用户参与，一些仅使用键盘的用户，一些失聪用户，以及其他可能适合您要求的其他用户组。

以下清单为您提供了确保您已为您的项目执行了推荐的辅助功能测试的清单。

1. 确保您的 HTML 尽可能地语义正确。 验证它 是一个很好的开始，使用 审计工具 也是如此。
2. 检查您的内容在 CSS 关闭时是否有意义。
3. 确保您的功能 可以通过键盘访问。使用 Tab、Return/Enter 等进行测试。
4. 确保您的非文本内容具有 文本替代。一个 审计工具 适合捕获此类问题。
5. 使用合适的检查工具，确保您网站的 颜色对比 可接受。
6. 确保 隐藏的内容 可被屏幕阅读器看到。
7. 确保功能在没有 JavaScript 的情况下尽可能可用。
8. 在适当的地方使用 ARIA 来提高辅助功能。
9. 通过 审计工具 运行您的网站。
10. 使用屏幕阅读器测试它。
11. 在您网站上某个可找到的地方包含一个辅助功能策略/声明，以说明您做了什么。

您会在辅助功能方面遇到许多其他问题；真正需要知道的最重要的事情是如何在网上找到答案。请参阅 HTML 和 CSS 文章的 寻求帮助部分，以获得一些有用的建议。

希望这篇文章能为您提供一个关于您可能遇到的主要辅助功能问题的基础知识，以及如何测试和克服这些问题。

在下一篇文章中，我们将更详细地探讨功能检测。

• 上一步
• 概述：跨浏览器测试
• 下一步