手动无障碍功能测试

手动测试基础知识

手动无障碍功能测试使用键盘、视觉和认知测试、工具和技术来查找自动化工具无法解决的问题。由于自动化工具无法涵盖 WCAG 中确定的所有成功标准，因此不要运行自动化无障碍功能测试然后停止测试，至关重要！

随着技术的进步，单靠自动化工具就可以涵盖更多测试，但目前，手动和辅助技术检查都需要添加到您的测试协议中，以涵盖所有适用的 WCAG 检查点。

手动无障碍功能测试的优点：

• 运行简单、使用快捷
• 与仅使用自动化测试相比，发现的问题所占百分比更高
• 只需极少的工具和专业知识，即可取得成功

手动无障碍功能测试的缺点：

• 比自动化测试更复杂、更耗时
• 可能很难大规模重复
• 需要更多无障碍功能方面的专业知识来运行测试和解读结果

我们来比较一下自动化工具当前能够检测到哪些无障碍元素和详细信息，以及无法检测到哪些无障碍元素和详细信息。

手动测试的类型

在查看网页或应用是否提供数字化无障碍体验时，您需要考虑多种手动工具和技术。手动测试中最关注的三个方面是键盘功能、侧重于视觉的审核和一般内容检查。

我们将在本单元中概括介绍上述每个主题，但以下测试并不会详尽列出您可以或应该运行的所有手动测试。我们建议您从信誉良好的手动无障碍功能核对清单入手，根据您的特定数字产品和团队需求自行开发重点测试核对清单。

键盘检查

据估计，在所有数字无障碍问题中，大约 25% 与缺少键盘支持有关。正如我们在键盘焦点模块中所介绍的，这会影响所有类型的用户，包括仅使用键盘的用户、弱视/盲人屏幕阅读器用户，以及使用语音识别软件（所用技术依赖于键盘访问内容）的用户。

键盘测试可回答如下问题：

• 网页或功能是否需要鼠标才能正常工作？
• Tab 键操作顺序是否合乎逻辑且直观？
• 键盘焦点指示灯是否始终可见？
• 你是否会陷入不应陷入焦点的元素？
• 您能否在应该陷入焦点的元素后方或周围导航？
• 关闭获得焦点的元素时，焦点指示器是否返回到逻辑位置？

虽然键盘功能的影响巨大，但测试程序非常简单。您只需抛开鼠标或安装一个小型 JavaScript 软件包，然后仅使用键盘来测试您的网站即可。以下命令对于键盘测试至关重要。

目视检查

目视检查主要关注网页的视觉元素，并会利用屏幕放大或浏览器缩放等工具来检查网站或应用的无障碍性。

通过目视检查，您可以了解：

• 是否存在自动化工具无法检测到的色彩对比度问题，例如渐变色或图片上的文字？
• 是否有任何元素看起来像标题、列表和其他结构元素，但却未按原样编码？
• 整个网站或应用中的导航链接和表单输入内容是否一致？
• 是否有任何闪烁、频闪或动画超出建议范围？
• 内容的间距是否正确？对于字母、字词、行和段落？
• 您是否可以使用屏幕放大镜或浏览器缩放功能查看所有内容？

内容检查

与关注布局、移动和颜色的视觉测试不同，内容检查关注页面上的字词。您不仅应审视文案本身，还应审视上下文，确保它对他人有意义。

内容检查可以解答诸多问题，例如：

• 网页标题、标题和表单标签是否清楚明确？
• 替代图片是否简洁、准确且实用？
• 仅颜色是传达含义或信息的唯一方式吗？
• 链接是描述性的，还是使用“了解详情”或“点击此处”等宽泛的文字？
• 网页中的语言是否有任何更改？
• 是否使用通俗易懂的语言，并且首次提及时是否拼写出了所有首字母缩略词？

有些内容检查可以部分自动执行。例如，您可以编写一个 JavaScript linter 检查“点击此处”并建议您进行更改。但是，这些自定义解决方案通常需要人工将文案更改为一些背景信息。

演示：手动测试

到目前为止，我们已经在演示网页上运行了自动化测试，发现并解决了八种不同类型的问题。现在，我们可以运行手动检查，看看能否发现更多无障碍功能问题。

第 1 步

更新后的 CodePen 演示已应用所有自动的无障碍功能更新。

在调试模式下查看该测试，以便继续进行后续测试。这一点非常重要，因为它会移除围绕演示网页的 <iframe>，这可能会干扰某些测试工具。详细了解 CodePen 的调试模式。

第 2 步

若要开始手动测试，请将鼠标或触控板放置在一边，然后仅使用键盘在 DOM 中上下导航。

问题 1：可见的焦点指示器

您应该会立即看到第一个键盘问题，或者您应该看不到该问题，因为可见的焦点指示器已被移除。扫描演示中的 CSS 时，应该会看到可怕的“outline: none”添加到代码库中。

  :focus {
    outline: none;
  }

让我们解决这个问题。

正如您在“键盘焦点”模块中学到的那样，您需要移除这行代码，以便网络浏览器为用户添加可见焦点。您可以更进一步，创建符合数字产品的美感样式的焦点指示器。

:focus {
  outline: 3px dotted #008576;
}

问题 2：焦点顺序

当您修改了焦点指示器且它可见后，请务必按 Tab 键浏览页面。执行此操作时，您应该会发现，用于订阅简报的表单输入字段没有获得焦点。它已被负的 tabindex 从自然焦点顺序中移除。

<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>

让我们解决这个问题。

由于我们希望人们使用此字段来注册我们的简报，因此，我们只需移除负的 tabindex 或将其设为 0，即可使输入内容重新变为可聚焦在键盘上。

<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" required>

第 3 步

检查完键盘焦点后，我们接着进行视觉和内容检查。

问题 3：链接色彩对比度

在您通过在演示页面上上下按 Tab 键进行键盘测试时，您可能会注意到键盘重点关注段落中关于不同医疗状况的三个视觉隐藏的链接。

为使我们的网页可供访问，链接必须在周围文字中突出显示，并在鼠标悬停和使用键盘焦点时包含非颜色样式更改。

让我们解决这个问题。

一种简单的解决方法是在段落内的链接中添加下划线，使其更加醒目。这可以解决无障碍功能问题，但可能不符合您希望实现的整体设计美学效果。

如果您选择不添加下划线，则需要修改颜色，使之符合背景和文案的要求。

使用链接对比度检查工具查看演示时，您会看到链接颜色符合常规大小的文字和背景之间的 4.5:1 色彩对比度要求。但是，不带下划线的链接还必须符合周围文本的 3:1 色彩对比度要求。

一种选择是更改链接颜色，以匹配页面上的其他元素。但是，如果您将链接颜色更改为绿色，还必须对正文文字进行修改，使其满足全部三个元素（链接、背景和周围文字）的整体色彩对比度要求。

问题 4：图标色彩对比度

另一个缺少色彩对比度的问题是社交媒体图标。在颜色和对比度模块中，您了解了基本图标需要与背景形成 3:1 的色彩对比度。不过，在该演示中，社交媒体图标的对比度为 1.3:1。

让我们解决这个问题。

为了满足 3:1 的色彩对比度要求，社交媒体图标已更改为更深的灰色。

问题 5：内容布局

如果您查看段落内容的布局，会发现文本完全对齐。正如您在排版模块中学到的，这会创建“空间河流”，这可能会使某些用户难以阅读文本。

p.bullet {
   text-align: justify;
}

让我们解决这个问题。

如需重置演示中的文本对齐方式，您可以将代码更新为 text-align: left;，或者从 CSS 中完全移除该行，因为左对齐方式是浏览器的默认对齐方式。请务必测试代码，以防其他继承的样式会移除默认的文本对齐方式。

p.bullet {
   text-align: left;
}

第 4 步

找出并修复上述步骤中列出的所有手动无障碍功能问题后，您的网页应与我们的屏幕截图类似。

您在手动检查中发现的无障碍功能问题可能比本单元介绍的要多。我们将在下一单元中介绍其中许多问题。

后续步骤

好样的！您已完成自动化测试和手动测试模块。您可以查看我们更新后的 CodePen，其中已应用所有自动和手动无障碍修复。

现在，我们来了解一下最后一个重点介绍辅助技术测试的测试模块。

检查您的掌握程度

测试您对手动无障碍功能测试的知识掌握情况