验证 Oracle JET 组件表和消息的可访问性

简介

在 Perform Screen-Reader Validation on an Oracle JET App 教程中，我们在“Employees（员工）”页中解决了几个可访问性问题。我们将在本教程中解决一些问题。

目标

在本教程中，您将学习如何在 ACCLearningPath 应用程序的“Employees（员工）”页面中识别和修复剩余的可访问性问题。

Prerequisites

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

任务 1：验证页结构

审核的第一步是确保页面中存在所有必需的 HTML 标题。

导航到终端中的 ACCLearningPath 目录并运行应用程序。
```
$ ojet serve
```
您的浏览器将打开应用程序的“Introduction（简介）”页面，其中已加载“Overview（概览）”选项卡。单击选项卡栏中的“员工”选项卡，并检查“员工”页面。

“员工”页面由两个页面组成。页面本身和每个面板中缺少 HTML 标题。
导航到 ACCLearningPath/src/js/views 文件夹并在编辑器中打开 employees.html 文件。

在文件中找到第一个打开的 <div> 标记。

<div class="oj-hybrid-padding">
   <oj-messages id="messagesId"
      messages="[[messagesDataprovider]]"
      display="notification"
      position="[[positionObject]]">
   </oj-messages>

在打开 <div> 标记后，立即插入 h3 标题以标识“员工”页面。

<div class="oj-hybrid-padding">
   <h3>Employees</h3>
   <oj-messages id="messagesId"
      messages="[[messagesDataprovider]]"
      display="notification"
      position="[[positionObject]]">
   </oj-messages>

找到构成包含表的左侧面板的起始 <div> 标记。

   
<div class="oj-flex-item">
   <oj-table id='table'
      class="table-size"
      first-selected-row="{{selectedRow}}"
      aria-label="Employees Table"
      . . . >
   

在打开的 <div> 和 <oj-table> 标记之间，插入一个 h4 标题以正确标记此面板。

   
<div class="oj-flex-item">
   <h4>Employees Table</h4>
   <oj-table id='table'
      class="table-size"
      first-selected-row="{{selectedRow}}"
      aria-label="Employees Table"
      . . . >
   

编辑 <oj-table> 元素的 aria-label 属性，以包括第二个面板中显示的标题文本和说明文本。
```
   
<div class="oj-flex-item">
   <h4>Employees Table</h4>
   <oj-table id='table'
      class="table-size"
      first-selected-row="{{selectedRow}}"
      aria-label="Employees Table - Activate a row to see employee details"
      . . . >
   
```
该表现在同时遵循 WCAG Success Criterion 2.5.3 Label in Name 和 WCAG Success Criterion 1.3.1 Info and Relationship 。要满足这些条件，必须将右侧面板中的视觉标签和说明文本包括在控件的语音标签中。

找到开始的 <div> 标记，该标记定义“员工”页面中将保存员工详细信息的正确面板。

<div id="detailContainer"
   class="oj-flex-item"
   style="margin-left: 30px; min-width: 200px">
   <hr style="margin-top:12px;">
   <oj-bind-if test="[[!activeRow()]]">

在 <div> 和 <oj-bind-if> 标记之间，在用于标识此面板的水平规则下方插入一个 h4 标题。

<div id="detailContainer"
   class="oj-flex-item"
   style="margin-left: 30px; min-width: 200px">
   <hr style="margin-top:12px;">
   <h4>Employee Details</h4>
   <oj-bind-if test="[[!activeRow()]]">

保存文件。您的文件应类似于 employees-page-html.txt 。
在正在运行的应用程序中验证应用的更改。

任务 2：执行仅键盘测试

本节和本教程的以下执行屏幕阅读器测试部分无需使用鼠标即可完成。在此测试期间，请确保始终明确标识焦点，并且标签顺序可预测。

在“员工”页面中，按 <Ctrl+L> 将焦点设置为地址栏。
按 <Tab>。焦点移动到跳过导航链接。
按 <Tab>。焦点在页面右上角的用户菜单中移至 john.hancock@oracle.com 。
按 <Tab>。焦点在用户菜单下方的主导航菜单中移至简介。
按 <Tab>。焦点移至选项卡栏中的概览。
按 <Tab>。焦点移至员工表中的第一列标题 Employee Number 。
按 <down arrow> 可将焦点放在表的第一个数据行上。

“员工详细信息”表单应显示在页面右侧的面板中。
按 <Space> 选择行，然后按 <F2> 将焦点移至第一个可跳转元素，即编辑按钮。
按 <Space> 可激活 Edit 按钮。此时将打开“编辑员工”对话框，焦点将移至员工 ID 字段。
按 <Tab>。焦点移至员工姓名字段。
按 <Tab>。“焦点”将移至“职务”字段。
按 <Tab>。焦点移至聘用日期字段。
按 <Tab>。焦点移至薪金字段。
按 <Tab>。焦点移动到 Save（保存）按钮。
按 <Space> 可激活 Save 按钮并关闭对话框。焦点移回“雇员表”的选定第一个数据行。

请注意页面左上角的消息框。此消息框用于确认已保存更新。

屏幕放大软件将焦点放在“雇员表”上，因此确认消息可能位于放大器的视口之外。
导航到 ACCLearningPath/src/js/viewModels 文件夹并编辑 employees.js。

找到 this.positionObject 的定义。

  this.positionObject = {
     my: { vertical: "top", horizontal: "start" },
     at: { vertical: "top", horizontal: "start" },
     of: "window",
  };

修改 positionObject 定义，使对象的位置基于表而非窗口。

  this.positionObject = {
     my: { vertical: "top", horizontal: "start" },
     at: { vertical: "top", horizontal: "start" },
     of: "#table",
  };

保存文件。然后重复执行仅键盘测试的步骤 1 到 15，以验证确认消息的位置已移至表。

之后的消息框

可访问性审查的最后一部分是屏幕阅读器验证。以下验证步骤基于使用 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（主要区域）”选项卡。已选择“员工”选项卡。3/4。”
按 <Tab>。JAWS 表示：“表包含 6 列和超过 13 行。员工表 - 激活一行以查看员工详细信息。列标题 1，员工编号。”焦点移至表列标题行中的第一个单元格。
按 <down arrow>。JAWS 说：“行 1:7839。已取消选中。第 1 列，员工编号：7839。”Focus 位于表的第一个数据行中。
按 <right arrow>。JAWS 表示列号和雇员用户名。
按 <Space>。选择该行，JAWS 说：“Space（空间）”。已选择”。
按 <F2> 可移动到第一个可制表元素。JAWS 说：“编辑按钮。要激活，请按 Enter。”
按 <Enter>。JAWS 说：“编辑员工。编辑雇员。“Employee Id 7,839 …”屏幕阅读器将打开“Edit Employee（编辑员工）”对话框，并继续阅读，直到按下某个键。
按 <Tab> 五次，将可编辑和只读字段移至 Save 按钮。JAWS 说：“Save（保存）”按钮。要激活，请按 Enter。”
按 <Enter>。JAWS 说：“消息类别：确认。更新已保存。已保存对员工 Onegin 的更改。”您的应用程序中的员工用户名可能因前面的教程中所做的编辑而有所不同。
按 <F6> 可读取消息框内容。JAWS 表示：“消息是互补的。更新已保存。输入消息区域。按 F6 可返回到之前关注的元素。”
按 <Tab>。JAWS 说：“关闭按钮。要激活，请按 Enter。”
按 <Enter> 键关闭消息框。焦点返回到表和之前选择的单元格。
停止您的屏幕阅读器。
在终端窗口中，通过按 <Ctrl+C> 退出应用程序，并在出现提示时输入 y。

这将完成第三组可访问性修复。

后续步骤

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

本教程是验证和修复应用程序可访问性模块的一部分。

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