手动无障碍功能测试

有关手动测试的基础知识

手动无障碍功能测试会使用键盘测试、视觉测试和认知测试、 和技巧，找出自动化工具无法发现的问题。自动 工具未涵盖 WCAG 中确定的所有成功标准， 至关重要，不要运行自动化无障碍功能测试，然后停止测试！

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

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

• 运行起来相当简单快速
• 与仅使用自动化测试相比，发现问题的几率更高
• 只需少量工具和专业知识即可取得成功

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

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

我们来比较一下目前可以检测到的无障碍功能元素和详细信息 与无法检测到的广告系列相比，由自动化工具提供。

手动测试的类型

在评估广告系列 提供数字无障碍设施的网页或应用Google Cloud 的三大重点领域是 手动测试包括键盘功能、视觉审核以及 常规内容检查。

我们将在本单元中对所有这些主题进行简要的介绍， 以下测试并未详尽列出所有手动测试 您可以或应该运行。我们建议您 手动无障碍功能核对清单 来自信誉良好的来源，并自行制定有针对性的人工测试核对清单 以满足您的特定数字产品和团队需求。

键盘检查

据估计，大约 25% 的数字无障碍问题与 或缺少键盘支持正如我们在“键盘专注模式”模块中所了解到的，这会影响所有类型的用户，包括视力正常且仅用键盘的用户、低视力/盲人屏幕阅读器用户，以及使用语音识别软件（其技术利用键盘可访问内容的技术）的用户。

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

• 网页或功能是否需要鼠标才能正常工作？
• Tab 键显示顺序是否合乎逻辑且直观？
• 键盘焦点指示器是否始终可见？
• 您是否会卡在不应限制焦点的元素中？
• 您能否浏览到应该限制焦点的元素后面或周围？
• 关闭获得焦点的元素时，焦点指示器是否返回到逻辑位置？

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

目视检查

视觉检查侧重于网页的视觉元素，并利用屏幕放大或浏览器缩放等工具来检查网站或应用的无障碍功能。

目视检查可以告知您：

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

内容检查

与侧重于布局、动作和颜色的视觉测试不同，内容检查侧重于网页上的字词。您不仅应查看文案本身，还应查看上下文，以确保其对他人有意义。

内容检查可以回答以下问题：

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

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

演示：手动测试

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

第 1 步

更新后的 CodePen 演示包含 自动无障碍功能更新所占的比例。

请在调试模式下查看，以继续执行 接下来的测试。这一点很重要，因为此操作会删除 <iframe> 周围的 演示网页，这可能会干扰某些测试工具。详细了解 CodePen 的调试模式。

第 2 步

将鼠标或触控板放在一旁，只使用键盘在 DOM 中上下导航，即可开始手动测试。

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

由于可见的焦点指示器已被移除，因此您应立即看到第一个键盘问题（或者，您不应看到该问题）。在演示中扫描 CSS 时，您应该会发现代码库中添加了令人生畏的“outline: none”。

  :focus {
    outline: none;
  }

让我们解决这个问题。

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

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

问题 2：焦点顺序

在您修改焦点指示器并且它可见后，请务必按 Tab 键 整个网页。执行此操作时，您应该会发现表单输入字段 用于订阅简报的未获得焦点。已移除 。

<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 键完成键盘测试时， 您可能已经注意到，键盘重点关注的是 不同疾病的段落。

为了确保我们的网页可供访问，链接必须与周围的文本区分开 并在鼠标指针悬停和键盘焦点时添加非颜色样式更改。

</ph> 让我们解决这个问题。

一种快速的解决方案是为段落内的链接添加下划线，使其更加醒目。这会解决无障碍功能问题，但可能无法满足您希望实现的整体设计美学。

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

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

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

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">。

<ph type="x-smartling-placeholder">

</ph>

问题 4：图标颜色对比度

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

</ph> 让我们解决这个问题。

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

</ph>

问题 5：内容布局

看一下段落内容的布局，您会发现段落中包含 理由。正如您在 Typography 模块， 这就形成了“太空河流”这可能会使一些人难以 方便用户阅读

p.bullet {
   text-align: justify;
}

让我们解决这个问题。

要在演示中重置文本对齐方式，您可以将代码更新为 text-align: left; 或将其从 CSS 中完全移除，因为左侧是 默认对齐方式请务必测试代码 继承的样式移除了默认的文本对齐方式。

p.bullet {
   text-align: left;
}

第 4 步

</ph> <ph type="x-smartling-placeholder">

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

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

下一步

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

现在，我们来看看最后一个测试单元 辅助技术测试：

检查您的理解情况

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