测试 Oracle JET 应用以实现仅键盘可访问性

简介

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

Web 内容可访问性指南 (WCAG) 2.1 概述了创建可访问 Web 应用程序的许多成功标准。本教程重点介绍那些仅使用键盘的标准。

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

目标

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

先决条件

为创建 Oracle JET 应用程序而设置的开发环境，安装了 JavaScript 运行时 Node.js 和 Oracle JET 发行版 13.0（或更高版本）命令行界面
已安装 Google Chrome Web 浏览器并将其设置为默认 Web 浏览器
访问 WCAG 2.1
访问 Oracle JET 键盘和手势指南
完成此学习路径中的上一教程： 测试 Oracle JET 应用以实现辅助功能：可视化检验

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

可视化检查提供可访问页面的结构和基本功能的概览。仅键盘测试是手动可访问性测试的中心；它使开发人员有机会从禁用的用户的角度与应用程序进行交互。此教程所关注的 WCAG 2.1 成功标准的子集涉及多个具体概念。

焦点指示：是否在页面上有当前位置的指示？
有意义的序列：应用程序选项卡顺序是否遵循可预测的模式？
与控件交互：使用键盘时是否所有控件都起作用？
键盘陷阱：焦点指示器卡在元素上吗？

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

所有可聚焦元素（可以通过 Tab 键接收焦点的页面元素）都必须只能使用键盘来访问。
所有可操作元素（通常由鼠标单击时执行函数的元素）必须仅使用键盘操作。当应用程序仅可供键盘访问时，具有重大电机残障的人可以使用备用输入设备。

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

WCAG Guideline 2.1 Keyboard Accessible 状态为 "Make all features available from a keyboard"。

此准则不应与名为 Web Content Accessibility Guidelines 2.1 的工作体相混淆，该准则提供了可访问软件的总体标准。
Success Criterion 2.1.3 Keyboard (No Exception) 状态：“所有内容的功能都可以通过键盘界面操作，而无需对单个击键进行特定计时。”

请注意，成功标准 2.1.3 的括号中包含文本“No Exception”。这表示必须提供键盘辅助功能。

WCAG 准则 2.1 和跟随它的成功标准强调了键盘无障碍性的绝对需要。键盘在为每个人带来技术方面发挥着关键作用。

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

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

WCAG Success Criterion 2.4.7 Focus Visible 状态：“任何键盘可操作用户界面都有一个操作模式，其中键盘焦点指示器可见。”

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

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

焦点矩形 1

焦点矩形 1

插图 focus_rec1.png 的说明

焦点矩形 2

焦点矩形 2

插图 focus_rec2.png 的说明

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

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

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

如果您的应用程序尚未运行，请导航到 ACCLearningPath 文件夹并启动它。
```
$ ojet serve 
```
当应用程序在浏览器中打开时，按 <Ctrl+L> 将焦点设置在地址栏上，然后按 <Tab> 将焦点移动到跳过导航链接。
按 <Tab> 可将焦点移至页面右上方用户菜单中的 john.hancock@oracle.com 。
按 <Tab> 可将焦点移动到用户菜单正下方主导航菜单中的简介。
按 <down arrow> 将焦点移至导航菜单中的资源，然后按 <Enter> 加载“资源”页。

插图 resources_page.png 的说明
按 <Tab> 可将焦点移动到 Oracle JET 主站点链接。

请注意，焦点位置没有明确指示。“资源”页面不符合“成功标准 2.4.7”。

在以下步骤中，您将修复缺失的焦点矩形问题以符合 WCAG 标准。
导航到 ACCLearningPath/src/js/views 文件夹，然后在代码编辑器中打开 resources.html 文件。

找到 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>

保存并关闭 resources.html。

您的文件看起来应与 resources-html.txt 类似。
重复上面的步骤 2 到步骤 6 以验证焦点矩形现在是否可见。

任务 3：验证有意义的标签序号

接下来进行仅键盘测试涉及将页面组织为用户选项卡进行测试。

WCAG 成功标准 1.3.2 有意义序列指出：“当呈现内容的顺序影响其含义时，可以以编程方式确定正确的读取序列。”
Success Criterion 2.4.3 Focus Order 指出：“如果可以按顺序导航 Web 页，并且导航序列影响含义或操作，则可聚焦组件将以保持含义和可操作性的顺序接收焦点。”

聚焦顺序最好用插图来理解。当用户通过页面跳转时，焦点位置不是随机的。它不会从页面的一侧移到另一侧并再次移回。它以预期和逻辑的方式移动。

在之前的 Verify the Existence of a Visual Focus 任务中，您看到焦点如何通过页面的标题按预期顺序移动；但是，"Resources"（资源）页面本身已编码以说明更随机的制表符顺序。

在正在运行的应用程序中，按 <Ctrl+L> 以设置地址栏的焦点。
按 <Tab> 可将焦点移动到跳过导航链接。
按 <Tab> 可将焦点移至页面右上方用户菜单中的 john.hancock@oracle.com 。
按 <Tab> 可将焦点移至主导航菜单中的简介。
按 <Tab> 可将焦点移动到页面正文中的 Oracle JET 主站点链接。
按 <Tab>。Focus 应移至 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 说明了如何确认修复有效。

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

<li><a tabindex="-1"
   href="https://docs.oracle.com/en/middleware/developer-tools/jet/13/books.html"
   target="_blank">Oracle JET Developer's Guide</a>
</li>

tabindex="-1" 属性使此链接完全脱离页面的选项卡顺序。

将 tabindex 属性的值修改为 0，以将链接返回到它在页面的制表符序列中的正确位置。

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

保存并关闭该文件。浏览器中的“资源”页面将自动刷新其新内容。
按 <Ctrl+L> 可在地址栏上设置焦点。
按 <Tab> 三次可在导航菜单中将焦点移动到简介。
按 <Tab> 可将焦点移动到 Oracle JET 主站点链接。
按 <Tab> 可将焦点移至 Oracle JET Developer’s Guide 链接。
继续按 <Tab>，直到焦点落在页脚中的关于 Oracle 链接上。

导航页面上的所有可聚焦元素后，请反转该处理。有时，在页面中向后移动时，路径会意外更改、出现新元素或某些元素消失。
使用 <Shift+Tab> 按从下到上的顺序移动，以确保在页面中反向导航时有意义的序列保持不变。

任务 4：与控制交互

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

WCAG 成功标准 2.1.1 键盘指出：“可以通过键盘界面操作内容的所有功能，而无需对单个击键进行特定计时，除非底层函数需要输入，这取决于用户的移动路径，而不仅仅是端点。”

例如，下面简要列出了与标准 HTML 组件交互的常见击键：

按 <Enter> 可激活链接、菜单项或选项卡栏中的选项卡。
按 <Space> 可激活按钮或切换复选框。
按 <down arrow> 可展开组合框或下拉列表。使用箭头键在列表中导航。

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

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

按 <Ctrl+L> 可在地址栏上设置焦点。
按 <Tab> 可将焦点移动到跳过导航链接。
按 <Tab> 可将焦点移至页面右上方用户菜单中的 john.hancock@oracle.com 。

根据 <oj-menu-button> 元素的键盘文档，按 <Space>、<Enter> 或 <down arrow> 将打开菜单，按 <Escape> 将关闭菜单。
按 <Space> 展开用户菜单。焦点移动到首选项。
按 <down arrow> 可向下移动菜单项列表。
按 <Escape> 关闭用户菜单。
按 <Tab>。焦点移动到用户菜单正下方主导航菜单中的 Introduction 。

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

任务 5：确定键盘陷阱

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

Success Criterion 2.1.2 No Keyboard Trap 状态：“如果可以使用键盘界面将键盘焦点移至页面的某个组件，则可以将焦点移出该页面仅使用键盘接口的组件，如果它需要超过未修改的箭头或 Tab 键或其他标准退出方法，则建议用户移除焦点的方法。”

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

让我们开始实践吧！

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

测试应用的“组织”页面时，请确认焦点位置始终可见并且焦点在可预测模式中移动。

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

“组织”页

插图 org_page.png 的说明

使用启动器应用程序执行组织页的键盘测试。

在应用程序的“资源”页面中，按 <Ctrl+L> 设置地址栏的焦点。
按 <Tab> 可将焦点移动到跳过导航链接。
按 <Tab> 可将焦点移至页面右上方用户菜单中的 john.hancock@oracle.com 。
按 <Tab> 可将焦点移至用户名下方主导航菜单中的简介。

根据 <oj-navigation-list> 元素的键盘文档，使用 <up arrow> 和 <down arrow> 键在主导航菜单中导航项。
按 <Enter> 可选择简介。
按 <Tab>，然后按 <right arrow> 将焦点移至选项卡栏中的“组织”选项卡。按 <Enter> 可加载“组织”页。

根据 <oj-tab-bar> 元素的键盘文档，使用箭头键在选项卡栏中移动。
按 <Tab> 可将焦点移到树视图。焦点落在第一个可聚焦项上，即会计节点。

根据 <oj-tree-view> 元素的键盘文档，使用 <up arrow> 和 <down arrow> 键在树视图中的节点之间导航。
按 <right arrow> 展开树中的会计组节点，然后按 <left arrow> 折叠组节点。
按两次 <down arrow> 将焦点移动到 RESEARCH 组节点中的员工 JONES 。按 <Enter> 键选择它。

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

插图 org_page_form.png 的说明
按 <Tab> 将焦点移到员工 ID 字段。
按 <Tab> 将焦点移到员工姓名字段。
按 <Tab> 可将焦点移到职称字段。
按 <Tab> 可将焦点移到聘用日期字段并显示展开的日历网格。

根据 <oj-date-picker> 元素的键盘文档，按方向键更改日历网格中的日期焦点。
按 <down arrow>，然后使用箭头键将焦点移至展开的日期选择器中的日期。然后按 <Enter> 选择日期。
按 <Tab> 将焦点移到薪金字段。

根据 <oj-input-number> 元素的键盘文档，使用 <up arrow> 增加薪金值并使用 <down arrow> 减少薪金值。
按 <Tab> 并尝试将焦点移到经理 ID 字段。

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

任务 6：移除陷阱

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

找到 <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>
   

保存文件。然后重复前面的 Identify a Keyboard Trap 任务中的步骤，以确保已删除键盘陷阱。
达到经理 ID 字段时，按 <Tab> 将焦点移动到作业单选按钮。

根据 <oj-radioset> 元素的键盘文档，使用 <up arrow> 选择组中的上一个按钮。使用 <down arrow> 选择组中的下一个按钮。
按 <Tab> 可将焦点移到页脚部分中的关于 Oracle 链接。
撤销处理。按 <Shift+Tab> 可返回作业单选按钮。继续按 <Shift+Tab> 可在页面中向后移动到用户菜单中的 john.hancock@oracle.com 。

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

仅键盘测试阶段已完成。继续学习此学习路径中的最终教程，即在 Oracle JET 应用程序上执行屏幕阅读器验证。