在复杂的 Oracle JET 组件中测试键盘导航

简介

我们将在 ACCLearningPath 应用程序中首次查看“Departments（部门）”选项卡。遵循此可访问性系列的上一学习路径中概述的审核流程来确定任何可访问性问题。

目标

在本教程中，您将学习如何在 ACCLearningPath 应用程序的“Departments（部门）”选项卡中识别和修复可访问性问题。

Prerequisites

设置为使用安装了 JavaScript 运行时 Node.js 和 Oracle JET 发行版 13.0（或更高版本）命令行界面创建 Oracle JET 应用程序的开发环境
访问 Oracle JET 开发人员手册
访问《 Oracle JET Keyboard and Gesture Guide 》
完成此学习路径中的上一个教程：验证 Oracle JET 组件表和消息的可访问性

任务 1：复查页结构

在终端窗口中，导航到 ACCLearningPath 文件夹并运行应用程序。
```
$ ojet serve
```
浏览器中的应用程序将打开“Introduction（简介）”页面，并加载“Overview（概览）”选项卡。
单击选项卡栏中的“部门”选项卡并评估页面结构。“部门”页由三个面板组成，每个面板使用各种 Oracle JET 组件显示部门数据。
导航到 ACCLearningPath/src/js/views 文件夹并在代码编辑器中打开 departments.html 文件。

找到文件中的主 <div> 标记。

<div class="oj-hybrid-padding">
   <div id="mainContainer" class="oj-flex" style="width:100%;">

在两个 <div> 标记之间插入 h3 标题以标识“部门”页。

<div class="oj-hybrid-padding">
   <h3>Departments</h3>
   <div id="mainContainer" class="oj-flex" style="width:100%;">

找到定义包含薄膜条的中间面板的 <div> 标记。

<div class="oj-flex-item fs-container">
   <oj-film-strip id="deptFilmstrip" max-items-per-page="1"
      . . . >

在开口的 <div> 和 <oj-filmstrip> 标记之间插入 h4 标题，以标识面板并为薄膜条提供可见标签。

<div class="oj-flex-item fs-container">
   <h4>Departments Film Strip</h4>
   <oj-film-strip id=“deptFilmstrip” max-items-per-page=“1”
      . . . >

找到构成包含数据网格的左侧面板的 <div> 标记。

<div class="oj-flex-item">
   <oj-data-grid id="datagrid"
      style="width:100%; min-width:400px; height:200px; margin-bottom:5px"
      . . . >

在 <div> 和 <oj-data-grid> 标记之间插入 h4 标题，以标识面板并为数据网格提供可见标签。

<div class="oj-flex-item">
   <h4>Departments Data Grid</h4>
   <oj-data-grid id="datagrid"
      style="width:100%; min-width:400px; height:200px; margin-bottom:5px"
      . . . >

找到构成包含图表的第三个面板的起始 <div> 标记。

  <div class="oj-flex-item oj-sm-margin-4x-horizontal">
     <oj-chart id="pieChart" type="bar" data="[[chartDataProvider]]" animation-on-display="auto" animation-on-data-change="auto"
        . . . >

在开头的 <div> 和 <oj-chart> 标记之间插入 h4 标题。此标题标识面板，并用作图表的可视标签。

  <div class="oj-flex-item oj-sm-margin-4x-horizontal">
     <h4>Salaries by Department</h4>
     <oj-chart id="pieChart"
        type="bar"
        data="[[chartDataProvider]]"
        animation-on-display="auto"
        animation-on-data-change="auto"
        . . . >

保存文件。在浏览器中，验证对应用程序的 "Departments"（部门）选项卡的更改。

任务 2：执行仅键盘测试

可访问性审核的第二部分是对应用程序的“部门”选项卡执行仅键盘测试。

按 <Ctrl+L> 设置对地址栏的焦点。
按 <Tab>。焦点移动到跳过导航链接。
按 <Tab>。焦点在页面右上角的用户菜单中移至 john.hancock@oracle.com 。
按 <Tab>。焦点在用户菜单下方的导航菜单中移至简介。
按 <Tab>。焦点移至选项卡栏中的概览。
按 <Tab>。焦点移至电影条中的会计。
按 <right arrow> 移至电影胶片中的下一个条目 Research 。
按 <left arrow> 以返回到电影条中的会计。
按 <right arrow> 三次。焦点移至电影胶片中的最后一个条目 Operations 。
按 <Tab>。焦点移至数据网格中的第一个数据体单元格，位于 Id 列下。聚焦单元的值为 10。
按 <right arrow>。焦点移至数据网格第二列名称下的会计。
按 <right arrow>。焦点在数据网格的最后一列 Location 中移动到 New York（纽约）。

请注意，焦点大纲显示在包含城市名称的单元格周围。
按 <F2>。焦点大纲将收紧，仅将单元格中的文本 New York 括起来。

根据 <oj-data-grid> 元素的键盘文档，使用 <F2> 使单元的内容可操作。使用 <F2> 函数键可以启动活动组件支持的操作。在这种情况下，单元格包含将激活的 Google 地图的链接。
按 <Enter> 以激活 New York 链接。将打开一个新的浏览器窗口，打开纽约的 Google Maps 页面。
按 <Ctrl+F4> 关闭 Google Maps 窗口。
按 <Esc>。焦点大纲将扩大到第三列中包含 New York 的单元格周围。

根据 <oj-data-grid> 元素的键盘文档，使用 <Esc> 退出可操作模式，以便您可以继续导航到其他组件。
按 <Tab>。焦点将移至条形图中的第一个条形。

可访问性审查的最后一部分是屏幕阅读器验证。以下验证步骤基于使用 JAWS 屏幕阅读器，但如果使用的是 NVDA 屏幕阅读器，结果将相似。

在终端窗口中，通过按 <Ctrl+C> 退出正在运行的应用程序，并在出现提示时输入 y。
启动您的屏幕阅读器，然后重新启动您的 Web 应用。
```
$ ojet serve
```
您的应用将自动在浏览器中打开；页面完全加载后，屏幕阅读器将开始阅读。
单击选项卡栏中的“部门”选项卡。在此之后，请不要使用鼠标。
按 <Ctrl+L> 将焦点设置为地址栏。
按 <Tab>。JAWS 读作“跳转到主内容”。相同的页面链接。”
按 <Tab>。JAWS 表示：“Banner 区域。工具栏。john.hancock@oracle.com 按钮菜单。按空格键激活菜单，然后使用箭头键导航。
按 <Tab>。JAWS 说：“Navigation region（导航区域）”选项卡。已选择“Introduction（简介）”选项卡。共 1 个，共 2 个。”
按 <Tab>。JAWS 表示：“Main region（主要区域）”选项卡。已选择“部门”选项卡。4 个，共 4 个。”
按 <Tab> 将焦点移至胶片条。JAWS 说：“会计。纽约 3 名员工显示第 1 页，共 4 页。”
按 <Tab> 将焦点移至数据网格。JAWS 表示：“这是一个包含 4 行 3 列的数据网格。标识。名称。地点”。读取列标题后，屏幕阅读器从左到右读取表的数据体单元格。然后，它读取当前焦点，“Row 1（行 1）”。列 1。标识：10。”
按 <right arrow>。JAWS 说：“第 2 列。名称：会计”。
按 <right arrow>。JAWS 说：“第 3 列。地点：纽约。包含控制。您已到达最后一列。”
按 <Tab>。JAWS 说：“数据可视化：图表。图形。系列：会计；组：部门；价值：USD 3,750.00。图形”。

请注意，当焦点在面板之间移动时，JAWS 不会指示面板标题。也无法将电影胶片从页面滚动到页面。
在代码编辑器中打开 departments.html 文件。
- Success Criterion 4.1.2 Name，Role，Value 要求三个面板中的每个组件都具有与其关联的标签。级别 4 标题用作可见标签。
- Success Criterion 2.5.3 Label in Name 要求标签中包含标题的整个文本。在以下步骤 18 到 23 中添加的 aria-label 属性将包含面板的标题文本。

找到开头的 <oj-film-strip> 标记并添加 aria-label 属性。

  <oj-film-strip id="deptFilmstrip"
     max-items-per-page="1"
     aria-label="Departments Film Strip - Use the paging controls in the next region to change pages."
     arrow-visibility="hidden"
     class="demo-stretch-items"
     . . . >

找到开头的 <oj-data-grid> 标记并添加 aria-label 属性。

  <oj-data-grid id="datagrid"
     style="width:100%; min-width: 400px; height:200px;margin-bottom:5px"
     aria-label="Departments Data Grid -- Press enter on the city name to open a google map of the city."
     data="[[dgDataProvider]]"
     header.column.style="[[getCellWidth]]"
     . . . >

找到开头的 <oj-chart> 标记并添加 aria-label 属性。

  <oj-chart id="pieChart"
     type="bar"
     aria-label="Salaries by Department bar chart"
     data="[[chartDataProvider]]"
     animation-on-display="auto"
     animation-on-data-change="auto"
     . . . >

最后的更改涉及中间面板中胶片带的分页控件。

找到关闭的 </oj-film-strip> 和 </oj-bind-if> 标记。

        </oj-film-strip>
     </div>
  </div>
  </oj-bind-if>

在结束的 </div> 和 </oj-bind-if> 标记之间添加分页控件和围绕 div 元素的元素。

        </oj-film-strip>
     </div>
  </div>
  <div class="oj-flex oj-sm-flex-items-initial oj-sm-justify-content-center">
     <div class="oj-flex-item">
        <div style="text-align: center;">
        <div style="display: inline-block;margin-top: 4px;">
           <oj-paging-control id="pagingControl"
              aria-controls="deptFilmstrip"
              data="[[pagingModel]]"
              page-size="0"
              page-options='{"type": "dots"}'>
           </oj-paging-control>
        </div>
        </div>
     </div>
  </div>
  </oj-bind-if>

保存文件。您的文件应类似于 departments-html.txt 。
重新运行屏幕阅读器验证。确保对胶片带、数据网格和图表使用标签，并且胶片带下方存在分页控件。

后续步骤

本教程总结了此学习路径中有关 Web 应用程序可访问性的模块验证和修复应用程序可访问性。

您可以返回可访问性学习路径的主页来访问有关可访问性的所有模块以及其他学习路径。

复杂 Oracle JET 组件中的测试键盘导航

简介

目标

Prerequisites

任务 1：复查页结构

任务 2：执行仅键盘测试

后续步骤

更多学习资源

复杂 Oracle JET 组件中的测试键盘导航

简介

目标

Prerequisites

任务 1：复查页结构

任务 2：执行仅键盘测试

任务 3：执行屏幕阅读器验证

后续步骤

更多学习资源