手动测试基础知识
手动无障碍功能测试使用键盘、视觉和认知测试、工具和技术来查找自动化工具无法发现的问题。由于自动化工具无法涵盖 WCAG 中确定的所有成功标准，因此您必须运行自动化无障碍功能测试并持续进行测试 ！
随着技术的发展，自动化工具可以涵盖更多测试， 但如今，您需要将手动检查和辅助技术检查添加到您的 测试协议中，以涵盖所有适用的 WCAG 检查点。
手动无障碍功能测试的优势：
- 运行起来相当简单快捷
- 比单独使用自动化测试发现的问题比例更高
- 成功所需工具和专业知识较少
手动无障碍功能测试的缺点：
- 比自动化测试更复杂且耗时
- 可能难以大规模重复
- 需要更多无障碍功能专业知识才能运行测试和解读结果
比较自动化工具可以检测到的无障碍功能元素和详细信息，以及无法检测到的元素和详细信息。
手动测试的类型
在检查网页或应用以了解数字无障碍功能时，需要考虑许多手动工具和技术。手动测试的三个主要关注点是键盘功能、以视觉为中心的审核以及一般内容检查。
在本单元中，我们将简要介绍这些主题，但以下测试并非您能够或应该运行的所有手动测试的详尽列表。我们建议您从信誉良好的来源开始使用 手动无障碍功能核对清单 ，并根据您的特定数字产品和团队需求制定自己的重点手动测试核对清单 。
键盘检查
据估计，大约 25% 的数字无障碍功能问题与缺少键盘支持有关。正如我们在 键盘焦点单元中所了解到的，这会影响所有类型的 用户，包括仅使用键盘的视力正常用户、低视力/盲人屏幕阅读器 用户，以及使用语音识别软件的用户，这些软件使用的技术也 依赖于内容是否可使用键盘访问。
键盘测试可以解答以下问题：
- 网页或功能是否需要使用鼠标才能正常运行？
- Tab 键顺序是否符合逻辑且直观？
- 键盘焦点指示器是否始终可见？
- 您是否会卡在不应捕获焦点的元素中？
- 您是否可以导航到应捕获焦点的元素后面或周围？
- 关闭获得焦点的元素时，焦点指示器是否返回到逻辑位置？
虽然键盘功能的影响很大，但测试过程却非常简单。您只需将鼠标放在一边，或安装一个 小型 JavaScript 软件包，然后 仅使用键盘测试您的网站即可。以下命令对于键盘测试至关重要。
视觉检查
视觉检查侧重于页面的视觉元素，并利用屏幕放大功能或浏览器缩放等工具来审核网站或应用的无障碍功能。
视觉检查可以告诉您：
- 是否存在自动化工具无法发现的色彩对比度问题，例如渐变色或图片上的文字？
- 是否存在看起来像标题、列表和其他结构元素，但未按此方式编码的元素？
- 导航链接和表单输入在整个网站或应用中是否一致？
- 是否存在任何闪烁、闪光或动画超出建议范围？
- 内容是否具有适当的间距？对于字母、字词、行和段落？
- 您是否可以使用屏幕放大镜或浏览器缩放功能查看所有内容？
内容检查
与侧重于布局、移动和颜色的视觉测试不同，内容检查侧重于页面上的文字。您不仅应查看文案本身，还应查看上下文，以确保其他人能够理解。
内容检查可以解答以下问题：
- 网页标题、标题和表单标签是否清晰且具有描述性？
- 图片替代文本是否简洁、准确且实用？
- 是否仅使用颜色作为传达含义或信息的唯一方式？
- 链接是否具有描述性，或者您是否使用了“了解详情”或“点击此处”等通用文字？
- 页面中的语言是否有任何变化？
- 是否使用了简洁的语言 ，并且所有缩写在首次引用时是否都已拼写出来？
部分内容检查可以部分自动化。例如，您可以编写一个 JavaScript 代码检查工具，用于检查“点击此处”并建议您进行更改。 不过，这些自定义解决方案通常仍需要人工将文案更改为具有上下文含义的内容。
演示：手动测试
到目前为止，我们已对演示网页运行了自动化测试，并发现和修复了八种不同类型的问题。我们现在准备运行手动检查，看看是否能发现更多无障碍功能问题。
第 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 或将其设置为零，即可让输入再次成为可使用键盘聚焦的元素。
<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， 其中应用了所有自动化和手动无障碍功能修复。
现在，请前往最后一个测试单元，该单元侧重于 辅助技术测试。