测试 Oracle JET 应用程序以实现仅键盘辅助功能

简介

这是 Identify Accessibility Issues 学习路径中的第二个教程。

Web 内容可访问性准则 (Web Content Accessibility Guidelines，WCAG) 2.2 概述了创建可访问的 Web 应用程序的许多成功标准。本教程重点介绍解决仅使用键盘的那些标准。

只有键盘可访问的应用程序可以与备用输入设备一起使用，供移动性有限或无法操纵鼠标的人使用。当人们可以使用键盘时，互联网就在他们的指尖。

目标

在本教程中，您将学习如何对 Web 应用程序执行仅键盘测试。

Prerequisites

任务 1：为仅键盘辅助功能测试做准备

可视化检查提供了可访问页面的结构和基本功能的概述。仅键盘测试是手动可访问性测试的中心；它为开发人员提供了从禁用用户的角度与应用程序交互的机会。WCAG 2.2 成功标准的子集，本教程重点介绍几个特定的概念。

本节开头提到的成功标准间接地涉及可聚焦元素的概念，因此需要定义几个术语。

通过定义和解释这些适用的概念，您可以准备测试启动应用程序。

请注意“Success Criterion 2.1.3（成功标准 2.1.3）”括号中的文本“No Exception（无例外）”。这表示键盘辅助功能是必需的。

WCAG 准则 2.1 和其后的成功标准强调了键盘可访问性的绝对需求。键盘在将技术带给每个人方面发挥着关键作用。

任务 2：验证是否存在可视焦点

仅键盘辅助功能测试仅依赖于焦点指示器。遵守以下“焦点可见”成功标准是不可协商的。禁用的用户无法在没有活动焦点的应用程序中导航，或者当焦点放置不明确时。

在通过 Web 应用程序进行选项卡时，应始终有一个标识焦点位置的可见指示符。指示器通常是矩形。禁用聚焦矩形会导致此标准失败。

应用程序开发人员为他们编写的应用程序和程序感到自豪。他们的目标是将功能与具有视觉吸引力的体验相结合。聚焦矩形通常会减损设计；因此，开发人员经常隐藏或禁用它，并违反成功标准 2.4.7。

聚焦矩形 1

聚焦矩形 1

聚焦矩形 2

聚焦矩形 2

在上面的两个屏幕截图中找到焦点。

第一个屏幕截图 Focus Rectangle 1 表示具有正确焦点指示的页面。焦点指示器非常明显，因为它围绕页面左上角的“Overview（概览）”选项卡。第二个屏幕截图是 Focus Rectangle 2 ，在 "Overview"（概述）选项卡周围没有任何焦点指示。

在“简介”页面上浏览前几个可聚焦的组件时，请关注焦点矩形。

  1. 如果您的应用尚未运行，请导航到 ACCLearningPath 文件夹并启动它。

    $ ojet serve

  2. 当应用程序在浏览器中打开时，按 <Ctrl+L> 将焦点设置为地址栏，然后按 <Tab> 将焦点移至跳过导航链接。

  3. 按 <Tab> 可将焦点移至用户菜单中位于页面右上角的 john.hancock@oracle.com 。

  4. 按 <Tab> 可将焦点移至用户菜单下方主导航菜单中的简介。

  5. 按 <down arrow> 将焦点移至导航菜单中的资源，然后按 <Enter> 以加载“资源”页。

    “资源”页

  6. 按 <Tab> 将焦点移至 Oracle JET 主站点链接。

    请注意，没有明确的焦点位置指示。“资源”页未通过“成功标准 2.4.7”。

    在以下步骤中，您将修复缺失的焦点矩形问题，以符合 WCAG 标准。

  7. 导航到 ACCLearningPath/src/js/views 文件夹并在代码编辑器中打开 resources.html 文件。

  8. 找到 Oracle JET 主站点的链接。

    <li><a style="outline-width:0"
   href="https://www.oracle.com/webfolder/technetwork/jet/index.html"
   target="_blank">Oracle JET Main Site</a>
</li>

    在 style 属性中将 "outline-width:0" 更改为 "outline-width:3"。

    <li><a style="outline-width:3"
   href="https://www.oracle.com/webfolder/technetwork/jet/index.html"
   target="_blank">Oracle JET Main Site</a>
</li>

  9. 保存并关闭 resources.html。

    您的文件应类似于 resources-html.txt 。

  10. 重复上面的步骤 2 到 6 以验证焦点矩形现在是否可见。

任务 3：验证有意义的选项卡顺序

仅键盘测试的下一个部分涉及在用户选项卡中组织页面。

聚焦顺序最好用插图来理解。由于用户在页面中选项卡，焦点位置不是随机的。它不会从页面的一侧移动到另一侧并再次移动。它以预期和逻辑的方式移动。

在以前的验证是否存在可视化焦点任务中，您已看到焦点如何按预期顺序通过页面的标题移动；但是，“资源”页面本身已编码以说明更随机的选项卡顺序。

  1. 在正在运行的应用程序中，按 <Ctrl+L> 以设置对地址栏的焦点。
  2. 按 <Tab> 将焦点移至跳过导航链接。
  3. 按 <Tab> 可将焦点移至用户菜单中位于页面右上角的 john.hancock@oracle.com 。
  4. 按 <Tab> 可将焦点移至主导航菜单中的简介。
  5. 按 <Tab> 可将焦点移至页面正文中的 Oracle JET 主站点链接。

  6. 按 <Tab>。焦点应移至 Oracle JET Developer’s Guide ，而应移至 Oracle JET Cookbook 链接。

    Oracle JET Developer’s Guide 链接不在选项卡序列中，这违反了成功标准 2.4.3。

    步骤 7 到步骤 11 介绍了将 Oracle JET Developer’s Guide 链接返回到选项卡序列中正确位置的必要方法。步骤 12 至 16 说明了如何确认修复工作。

  7. 在代码编辑器中，找到 resources.html 文件中的 Oracle JET Developer’s Guide 链接。

    <li><a tabindex="-1"
   href="https://www.oracle.com/pls/topic/lookup?ctx=jetlatest&id=JETDG"
   target="_blank">Oracle JET Developer's Guide</a>
</li>

    tabindex="-1" 属性会使此链接完全脱离页面的制表符顺序。

  8. 将 tabindex 属性的值修改为 0，以将链接返回到页面的制表符序列中的适当位置。

    <li><a tabindex="0"
   href="https://www.oracle.com/pls/topic/lookup?ctx=jetlatest&id=JETDG"
   target="_blank">Oracle JET Developer's Guide</a>
</li>

  9. 保存并关闭该文件。浏览器中的“Resources（资源）”页面会自动刷新其新内容。

  10. 按 <Ctrl+L> 设置对地址栏的焦点。

  11. 按三次 <Tab> 可将焦点移至导航菜单中的简介。

  12. 按 <Tab> 将焦点移至 Oracle JET 主站点链接。

  13. 按 <Tab> 将焦点移至 Oracle JET Developer’s Guide 链接。

  14. 继续按 <Tab>，直到焦点落在页脚中的关于 Oracle 链接上。

    在页面中导航所有可聚焦元素后，请撤消该处理。有时，在页面中向后移动时，路径会意外更改、出现新元素或某些元素消失。

  15. 使用 <Shift+Tab> 可以按从下到上顺序移动，以确保在页面中反向导航时有意义的序列保持不变。

任务 4：与控制交互

本教程中使用的许多控件是 Oracle JET 特定的控件。Oracle JET 的一项功能是，其组件的设计中已内置了仅键盘辅助功能。使用 Oracle JET 的开发人员可以直接从 Oracle JET Cookbook 中复制组件并将其放置到位，并且可以访问生成的代码。

例如，下面是用于与标准 HTML 组件交互的常见击键的简要列表：

注：对于某些控件，如导航菜单、选项卡栏、单选按钮组和类似的组控件，您可能需要选项卡进入控件，然后使用箭头键在控件内导航。

使用正在运行的启动程序应用程序与多个 Oracle JET 组件进行交互。

  1. 按 <Ctrl+L> 设置对地址栏的焦点。

  2. 按 <Tab> 将焦点移至跳过导航链接。

  3. 按 <Tab> 可将焦点移至用户菜单中位于页面右上角的 john.hancock@oracle.com 。

    根据 <oj-menu-button> 元素的键盘文档，按 <Space>、<Enter> 或 <down arrow> 可打开菜单，按 <Escape> 可关闭菜单。

  4. 按 <Space> 展开用户菜单。焦点移至首选项。

  5. 按 <down arrow> 可向下移动菜单项列表。

  6. 按 <Escape> 键关闭用户菜单。

  7. 按 <Tab>。焦点在用户菜单下方的主导航菜单中移至简介。

    有关每个 Oracle JET 组件的特定击键的其他信息，请参见《Oracle JET Keyboard and Gesture Guide 》。

任务 5：确定键盘陷阱

本教程开始时介绍的最后一个主题涉及一个称为键盘陷阱的概念。当用户无法使用 <Tab>、<Shift+Tab> 或任何箭头键将焦点从页面上的元素移走时，会发生键盘陷阱。

键盘陷阱可使整个页面对仅键盘用户不可用。键盘陷阱的常见解决方案是重新启动应用程序。

让我们实践！

本教程的这一部分提供了纯键盘测试方法的详细示例。

在测试应用程序的“组织”页面时，请验证焦点位置是否始终存在可见指示，并且焦点以可预测的模式移动。

您将测试的页面将通过“简介”页面上的“组织”选项卡进行访问。

组织页

使用启动应用程序对“组织”页执行键盘测试。

  1. 在应用程序的“资源”页面中，按 <Ctrl+L> 以将焦点设置为地址栏。

  2. 按 <Tab> 将焦点移至跳过导航链接。

  3. 按 <Tab> 可将焦点移至用户菜单中位于页面右上角的 john.hancock@oracle.com 。

  4. 按 <Tab> 可将焦点移至用户名下方主导航菜单中的简介。

    根据 <oj-navigation-list> 元素的键盘文档，使用 <up arrow> 和 <down arrow> 键在主导航菜单中导航项。

  5. 按 <Enter> 可选择简介。

  6. 按 <Tab>，然后按 <right arrow> 将焦点移至选项卡栏中的“组织”选项卡。按 <Enter> 以加载“组织”页。

    根据 <oj-tab-bar> 元素的键盘文档，使用方向键在选项卡栏内移动。

  7. 按 <Tab> 将焦点移至树视图。将焦点置于第一个可聚焦项 Accounting 节点上。

    根据 <oj-tree-view> 元素的键盘文档，使用 <up arrow> 和 <down arrow> 键在树视图中的节点之间导航。

  8. 按 <right arrow> 展开树中的 Accounting 组节点，然后按 <left arrow> 折叠组节点。

  9. 按两次 <down arrow>，将焦点移至 RESEARCH 组节点中的员工 JONES 。然后，按 <Enter> 以选择它。

    表单将显示在页面右侧，其中包含员工详细信息。

    具有员工详细信息表单的组织标签

  10. 按 <Tab> 将焦点移至员工 ID 字段。
  11. 按 <Tab> 将焦点移至员工姓名字段。
  12. 按 <Tab> 将焦点移至职称字段。

  13. 按 <Tab> 将焦点移至聘用日期字段并显示展开的日历网格。

    根据 <oj-date-picker> 元素的键盘文档，按箭头键更改日历网格中的日期焦点。

  14. 按 <down arrow>，然后使用箭头键将焦点移至展开的日期选择器中的日期。然后，按 <Enter> 以选择日期。

  15. 按 <Tab> 将焦点移至薪金字段。

    根据 <oj-input-number> 元素的键盘文档，使用 <up arrow> 增大薪金值，使用 <down arrow> 减小薪金值。

  16. 按 <Tab> 并尝试将焦点移至 Manager ID 字段。

    您是否注意到，焦点移至薪金字段后，按 <Tab> 或 <Shift+Tab> 并没有将焦点移出该字段？此字段具有键盘陷阱。如果不修复代码，退出陷阱的唯一方法是刷新页面。

任务 6：删除陷阱

  1. 导航到 src/js/views 文件夹并在编辑器中打开 organization.html 文件。

  2. 找到 <oj-input-number> 元素，其中 id="salary"：

       
<oj-input-number id="salary"
   label-hint="Salary"
   value="{{empDetails().sal}}"
   min="0"
   step="1"
   on-blur="[[setKeyTrap]]">
</oj-input-number>

    删除导致键盘陷阱的 on-blur 属性。

       
<oj-input-number id="salary"
   label-hint="Salary"
   value="{{empDetails().sal}}"
   min="0"
   step="1">
</oj-input-number>

  3. 保存文件。然后重复前面的标识键盘陷阱任务中的步骤，以确保已删除键盘陷阱。

  4. 当访问 Manager Id 字段时，按 <Tab> 将焦点移至 Jobs 单选按钮。

    根据 <oj-radioset> 元素的键盘文档，使用 <up arrow> 选择组中的上一个按钮。使用 <down arrow> 选择组中的下一个按钮。

  5. 按 <Tab> 可将焦点移至页脚部分中的关于 Oracle 链接。

  6. 撤消处理。按 <Shift+Tab> 可移回作业单选按钮。继续按 <Shift+Tab> 将页面移回用户菜单中的 john.hancock@oracle.com 。

如果您对在 Oracle JET 组件中使用或导航所需的击键有任何疑问，请记得查阅《Oracle JET Keyboard and Gestures Guide 》。

仅键盘测试阶段已完成。

后续步骤

继续本模块中的下一个教程。

本教程是确定辅助功能问题模块的一部分。

您可以返回辅助功能学习路径的主页以访问有关辅助功能的所有模块。

更多学习资源

通过 docs.oracle.com/learn 浏览其他实验室，或者通过 Oracle Learning YouTube 频道访问更多免费学习内容。此外，请访问 education.oracle.com/learning-explorer 以成为 Oracle Learning Explorer。

有关产品文档，请访问 Oracle 帮助中心。