对 Oracle JET 应用程序执行屏幕阅读器验证

简介

将屏幕阅读器与 Web 应用程序一起使用时，我们使用术语 validation 而不是单词 test 。有一个明确的答案与测试；验证意味着不止一个正确的答案。随着浏览器和屏幕阅读器版本的更改，验证结果略有变化。

Web 内容可访问性准则 (Web Content Accessibility Guidelines，WCAG) 2.2 包含用于创建可访问 Web 应用程序的一组超过 60 个成功标准。在本教程中，我们将重点介绍这些标准的子集，这些标准专门用于使用屏幕阅读器导航应用程序。

理想情况下，在不使用鼠标的情况下完成应用程序的屏幕阅读器审查，并且关闭或覆盖屏幕。

学习依赖屏幕阅读器的语音输出，而不是依赖于屏幕上直观地发生的事情。所看到和所听到的可能截然不同。请注意，倾听屏幕阅读器可能会对不熟悉屏幕阅读器的人构成挑战。

目标

在本教程中，您将学习如何使用屏幕阅读器验证 Web 应用程序，并熟悉屏幕阅读器的声音。

Prerequisites

设置为使用安装了 JavaScript 运行时 Node.js 和 Oracle JET 发行版 13.0（或更高版本）命令行界面创建 Oracle JET 应用程序的开发环境
Google Chrome Web 浏览器已安装并设置为默认 Web 浏览器
访问 Web 内容可访问性准则 2.2
访问《 Oracle JET Keyboard and Gesture Guide 》
完成此学习路径中的上一个教程，测试 Oracle JET 应用程序以实现仅键盘访问

在 Windows 上运行的两个最广泛使用的屏幕阅读器是 Vispero 的 Job Access With Speech(JAWS) 和 NVAccess 的 NonVisual Desktop Access(NVDA)。

注：此学习路径的作者更喜欢 JAWS 屏幕阅读器输出。虽然本教程的内容指定了 JAWS，但可以随时使用 JAWS 或 NVDA。

使用 JAWS

凭借二十多年的使用寿命，JAWS 是第一批进入辅助技术市场的屏幕阅读器之一。各种各样的声音可供选择，可以提供更个性化的听力体验。JAWS 功能支持 ARIA(Accessible Rich Internet App) 消息和复杂的 Web 结构，作者认为，它通常比其他屏幕阅读器更强大。JAWS 提供 40 分钟的免费演示期，这足以支持本教程。

下载最新 JAWS 发行版并进行安装。在启动浏览器执行验证之前，请始终记得启动 JAWS。

使用 NVDA

NVDA 是免费的。它是开源的，由 Python 提供支持。用户通常更喜欢 NVDA 提供的声音，对 JAWS 和 NVDA 的头对头评论显示 NVDA 更准确地阅读网页。JAWS 可能会猜测读取标签，而 NVDA 则严格从标记中读取。NVDA 的两个主要特点是其小资源需求及其可移植性。将其安装在闪存驱动器上，以便在其他设备上运行软件。

下载最新 NVDA 发行版并进行安装。

有几个 WCAG 2.2 成功标准可以解决屏幕阅读器验证问题。

Success Criterion 1.1.1 Non-text Content（成功标准 1.1.1 非文本内容）指出：“提供给用户的所有非文本内容都有一个文本替代项”

所有图形都必须有文本标签。如果为图形提供了 alt 文本，则屏幕阅读器应通告 alt 文本。

Success Criterion 1.3.1 Info and Relationships 表示：“通过演示传达的信息、结构和关系可以通过编程方式确定，也可以通过文本方式提供。”

此标准是在以前的可视检验教程中引入的，因为标题是页面结构的一部分。在使用屏幕阅读器的上下文中，成功标准 1.3.1 指的是将标签与控件关联，并将行或列标题与数据单元格关联。

当您验证页面时，问问您自己，当按表格中的单元格移动单元格时，屏幕阅读器是否会宣布列标题和行标题以及单元格坐标和内容？

Success Criterion 4.1.2 Name，Role，Value 表示：“对于所有用户界面组件（包括但不限于：表单元素、链接和脚本生成的组件），名称和角色可以以编程方式确定；用户可以设置的状态、属性和值可以通过编程方式设置；用户代理可以使用这些项更改的通知，包括辅助技术。

屏幕阅读器应该公布控件的名称、角色、状态和值，因为这些控件会获得焦点。名称是控件的标签。角色是控制类型。状态定义是检查、选择、展开还是折叠控制。值是控件的实际内容。

Success Criterion 2.4.4 Link Purpose (In Context) （成功标准 2.4.4 链接用途（在上下文中）规定：“每个链接的用途都可以单独从链接文本中确定，也可以从链接文本及其以编程方式确定的链接上下文中确定，除非链接的用途对于一般用户来说是模糊的。”

验证屏幕阅读器在收到焦点时是否通告链接文本。确保文本足以标识链接的用途。

Success Criterion 2.5.3 Label in Name（名称中的成功标准 2.5.3 标签）指出：“对于标签中包含文本或文本图像的用户界面组件，名称包含直观显示的文本。”

组件的可见标签的文本必须包含在为辅助技术提供的标签信息中。如果组件使用 aria-label 属性，则 aria 标签的文本必须包括可见标签的文本，即使可见标签是图形也是如此。

Success Criterion 4.1.3 Status Messages 表示：“在使用标记语言实现的内容中，可以通过角色或属性以编程方式确定状态消息，以便通过辅助技术向用户显示这些消息而无需获得关注。”

屏幕阅读器应通告页面上显示的所有状态消息。这些消息将向用户通知对页面的更改或处理已完成。

JAWS 和 NVDA 可能以不同的方式呈现材料，但每个屏幕阅读器必须传达有关页面上元素的某些信息：

名称、角色、状态和值。
链接文本。
图形替代文本。
列和行标题，包括单元格坐标和表中的内容。

任务 3：使用 JAWS 验证“员工”选项卡

无论您使用的是 JAWS 还是 NVDA，屏幕阅读器验证的过程都是相似的。验证的目的是确保准确读取页面的元素。这个过程可能看起来很乏味，但两个屏幕阅读器都有特殊的按键，允许用户通过标题，链接或表单控件更快地导航 Web 应用程序。

使用任一屏幕阅读器时，请使用全尺寸键盘，因为屏幕阅读器使用键盘右侧的数字键盘进行特殊控件。

使用屏幕阅读器和入门应用程序验证“简介”页面的“员工”选项卡。

启动 JAWS 或 NVDA。

在打开浏览器之前启动屏幕阅读器始终是最佳做法。本练习可确保在屏幕阅读器和浏览器之间建立所有必要的连接。
运行启动程序应用程序。
```
$ ojet serve
```
浏览器将打开应用程序的“简介”页面，您可以开始验证。

当页面完全加载时，两个屏幕阅读器都应开始读取。
在正在运行的应用程序中，使用鼠标单击“Employees（员工）”选项卡。在此步骤之后，请勿使用鼠标。
按 <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 说，“Table with 6 columns and more than 13 rows …”屏幕阅读器将继续读取表头和数据。

屏幕阅读器均未提供有关表包含内容的全面信息。

成功标准 4.1.2 指定标识用途的标签必须附在表中。向表中添加说明性标签。
导航到 ACCLearningPath/src/js/views 文件夹并打开 employees.html 文件。

找到 <oj-table> 标记。

      
  <oj-table id="table"
     class="table-size"
     first-selected-row="{{selectedRow}}"
     . . .
  </oj-table>
      

修改标记以包括 aria-label 属性。

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

保存并关闭该文件。您的文件应类似于 employees-html.txt
重复第 3 步至第 9 步，验证在表收到焦点时是否已使用 aria-label。表中的初始 <Tab> 将焦点放在第一列标题上，JAWS 表示：“表包含 6 列和 13 行以上。雇员表。列标题 1。员工编号。”
按 <down arrow>。焦点移至第 1 行第 1 列中的表单元格。JAWS 说：“Row 1. 7839。已取消选中。列 1。雇员编号。7839”。

非禁用用户单击行中的任意位置进行选择。但是，仅使用键盘的用户按空格键可选择行。
按 <right arrow> 移至第二列。JAWS 将阅读“第 2 列”。用户名 King”。

按下箭头键可向所选箭头键的方向移动一个单元格。JAWS 应读取新行或列号和标题，具体取决于表中的移动是垂直还是水平。例如，JAWS 在垂直导航表时会读取行的员工编号列的行号和值。
再次按 <right arrow> 可移动到 Title 列。JAWS 说：“第 3 列。头衔主席”。
按 <down arrow>。JAWS 说：“行 2. 7698。已取消选中。职位经理”。

任务 4：验证表数据编辑

在正在运行的应用程序中，按 <Home> 键可移至表的第一列和第一行。然后按 <Space> 选择该行，然后按 <F2> 将该行切换到可操作模式。

当表中存在可制表元素（如行最后一列中的“编辑”按钮）时，按 <F2> 会将焦点移至第一个可制表元素。JAWS 将焦点移至“编辑”按钮，并说“编辑”按钮。要激活，请按 Enter。”
按 <Enter>。JAWS 打开“编辑员工”表单，并表示“编辑员工”。员工 ID:7839 …”JAWS 将继续阅读表单中的员工信息，直到按下键为止。
按 <Tab> 将焦点移至员工姓名字段。JAWS 表示：“Employee Name edit（编辑员工姓名）。King。键入文本。”
键入新名称，然后按 <Tab> 键。JAWS 说：“Job Title edit。总裁。键入文本。”
按 <Tab>。JAWS 表示：“聘用日期为只读编辑。1981 年 11 月 16 日。”
按 <Tab>。JAWS 表示：“Salary edit spinbox.5,000。请输入大于或等于 0 的数字。要设置值，请使用箭头键或键入值。”
按 <Tab>。JAWS 说：“Save（保存）”按钮。要激活，请按 Enter。”
按 <Enter> 以激活“Save（保存）”按钮。JAWS 将读取类似的状态消息以进行保存：“消息类别：确认。更新已保存。已保存对员工 Onegin 的更改。无障碍学习路径”。屏幕阅读器用户需要了解涉及页面标题、消息区域的显示以及保存确认的信息。关闭消息框。

JAWS 和 NVDA 都有一个用于定位有标签图形的快捷键。按 <Shift+G> 将焦点移至页面上的下一个有标签图形。Oracle 徽标是“简介”页面上的唯一图形。Focus 转向标识，JAWS 称其为“Oracle 标识图形”。

后续步骤

本教程总结了此学习路径中有关 Web 应用程序可访问性的模块确定可访问性问题。

您可以在验证和修复应用程序可访问性模块中继续学习路径中的下一个教程自定义连接的活动周期事件。

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

对 Oracle JET 应用程序执行屏幕阅读器验证

简介

目标

Prerequisites

任务 1：下载并安装屏幕阅读器

使用 JAWS

使用 NVDA

任务 2：准备屏幕阅读器验证

任务 3：使用 JAWS 验证“员工”选项卡

任务 4：验证表数据编辑

任务 5：使用屏幕阅读器验证有标签图形

后续步骤

更多学习资源