测试 Oracle JET 应用以实现无障碍环境：可视化检查

简介

Web 内容可访问性准则 (Web Content Accessibility Guidelines，WCAG) 2.2 包含用于创建可访问 Web 应用程序的一组超过 60 个成功标准。在此学习路径中，我们将重点介绍这些标准的子集，主要侧重于：

本教程侧重于应用程序测试的开始位置：视觉检查。本教程及其后面的两个教程 Test an Oracle JET App for Keyboard-Only Accessibility 和 Perform Screen-Reader Validation on an Oracle JET App 将引导您完成必要的测试步骤。在继续学习路径之前，您必须按顺序完成这三个测试教程。

评估 Web 应用程序的可访问性的第一步是对应用程序执行可视化审查。在审查期间，查找以下项目：

目标

在本教程中，您将学习如何对 Web 应用执行手动可访问性测试，并了解 Oracle JavaScript 审计框架如何帮助查找可访问性问题。

Prerequisites

任务 1：准备启动应用程序

我们在此学习路径中使用的是 Oracle JET 13.0 Nav Drawer 入门应用程序。

  1. 在您希望应用程序位于的文件系统中的位置，将下载的 ACCLearningPath.zip 提取到 ACCLearningPath 文件夹中。

  2. 打开终端窗口并验证是否安装了最新版本的 Oracle JET 命令行界面 (command-line interface，CLI)（需要发行版 13.0 或更高版本）。

    $ ojet --version

    如果显示了最新版本的 Oracle JET CLI，则安装是正确的。如果没有，请使用适用于您的平台的 npm install 命令重新安装。

    • 对于 Windows：

       $ npm install -g @oracle/ojet-cli

    • 对于 Mac 和 Linux 系统：

       $ sudo npm install -g @oracle/ojet-cli

      安装完成后，Oracle JET CLI 将显示所有更改的摘要。

  3. 导航到 ACCLearningPath 目录并恢复 Oracle JET 应用程序工具。

    $ ojet restore

  4. 运行该应用程序。

    $ ojet serve

    Oracle JET 工具在本地 Web 浏览器中运行您的应用。浏览器将打开应用程序的“简介”页面，其中加载了“概览”选项卡。该应用程序已就绪。

    将终端窗口和浏览器保持打开状态，以便您的应用使用您所做的任何更改自动更新。

任务 2：审核应用程序

Oracle JET 审计框架 (JAF) 是一个命令行实用程序和支持 API，用于根据 Oracle JET 应用程序在配置文件中找到的运行时选项来审计其文件。应用程序的审计返回的诊断消息源自特定于应用程序的 JET 发行版版本的内置规则集。但是，审计框架是可扩展的，用户可以通过编写定制规则来扩展其功能。

Oracle JAF 审计可以帮助您识别应用中的可访问性和其他问题，但它们无法找到我们将在 ACCLearningPath 应用中解决的所有可访问性问题。因此，除了审计应用程序之外，您还应遵循此确定可访问性问题学习路径中概述的过程和步骤来查找和解决可访问性问题。在开始工作之前，应首先运行 JAF 审计以使示例应用程序可供访问，以便确定应用程序中的潜在问题。有关 Oracle JAF 的更多信息，请参见 Using and Extending the Oracle JET Audit Framework 。

在 CLI 模式下下载并使用 Oracle JAF 来检查可访问性问题。

  1. 使用 npm 安装 Oracle JAF CLI。

    打开终端窗口并检查已安装的 Oracle JAF 版本。

    $ ojaf -v

    如果未安装或您的 JAF 版本不是当前发行版，请卸载较旧版本并安装最新版本。

    $ npm uninstall -g @oracle/oraclejet-audit

    $ npm install -g @oracle/oraclejet-audit

  2. 导航到应用程序的 ACCLearningPath 目录，并使用 --init 命令行标志初始化默认 JAF 配置。

    $ ojaf --init

    工具支架将默认 JAF 配置文件 oraclejafconfig.json 放在 ACCLearningPath 目录中，并根据 JET 应用程序配置文件 oraclejetconfig.json（也位于应用程序的根目录中）定义默认配置设置。

  3. 在编辑器中打开 oraclejafconfig.json，并确保 jetVer 属性的值对于要审计的 JET 版本（例如 13.0、13.1 等）是正确的。

    "builtinJetRules": true,
   "jetVer": "13.0",

    您可以通过在 oraclejafconfig.json 文件中添加或修改 JAF 属性来定制应用程序审计。有关配置选项的完整说明，请参见 About the Oracle JAF Configuration File Properties 。

  4. 在首次审计应用程序之前，可以使用 --dryrun 命令行标志确认 JAF 将审计的文件的默认配置。

    $ ojaf --dryrun

    模拟运行不会审计应用程序，但会根据当前 JAF 配置设置确认要审计的文件。

    注：可以通过输入 ojaf --help 命令来获取命令行标志的完整列表。

  5. 通过输入用于调用 JAF 审计实用程序的命令来执行应用程序的审计。

    $ ojaf

  6. 运行审计时，Oracle JAF 将在目录中搜索 oraclejafconfig.json 并创建审计报告。

    该报告将列出在应用程序中发现的违规问题，以及它们在应用程序文件中的位置。此外，该报告还包括发现的问题及其严重性、审计的规则和审计的文件的摘要。

    JAF 审核报表

    在审计报告的问题列表中，请注意在 departments.html 文件中发现的严重性级别 blocker 问题：'aria-label' or 'aria-labelledby' missing on <oj-film-strip>。

    应用程序中的 Film-strip 组件中缺少 aria-label 属性，这可能会阻止屏幕阅读器访问组件的标识。这是我们将在后面的教程中解决的可访问性问题之一。

这是此学习路径中 Oracle JAF 讨论的结束。完成应用程序审计后，请记住从 ACCLearningPath 目录中删除文件夹 jaftmp@ 和文件 oraclejafconfig.json。

任务 3：复查页结构

页面结构是应用程序视觉检查的逻辑起点。HTML 标题提供了页面内容的大纲，而不会关注细节。屏幕阅读器提供快捷方式，允许用户在正确标记的标题之间快速移动。

使用 ACCLearningPath 应用程序查看页结构。

  1. 在正在运行的应用程序中，确定页面的各个部分是否由标题标识。

    标题的文本比页面上的常规文本大或样式不同。使用 <h1> 到 <h6> 标记创建真正的 HTML 标题。

  2. 确定每个标题的文本是否充分描述与之关联的内容。

    查看“Introduction（简介）”页的“Overview（概览）”选项卡。第三个最右侧的面板的标题为文本间距。此面板的内容涉及调整文本间距。因此，本标题是一个描述性充分的标题的例子。

  3. 使用 Chrome DevTools“元素”选项卡可确定标题是真实的 HTML 标题还是设计为类似于它们的文本。

    • 右键单击标题 "Introduction"（简介）页面，然后从上下文菜单中选择 Inspect（检查），以查看页的文档对象模型 (DOM) 结构。

      DOM 树中突出显示的元素（显示在 DevTools 元素窗格中）采用正确的方法来创建 HTML 标题。

       <h4>The Introduction Page</h4>

    • 关闭 DevTools，然后右键单击标题“资源”页，然后从上下文菜单中选择检查。

      此 DOM 树中突出显示的元素的文本样式类似于 HTML 标题。

       <span class="h4Style">The Resources Page</span>

      屏幕阅读器将不检测此代码作为标题。屏幕阅读器用户通常按标题浏览页面，并且忽略样式类似标题的文本。在以下步骤中，您将修复编码错误的标题。让您的应用运行并打开浏览器，观察以下更改如何影响该应用。

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

  5. 找到 <span class="h4Style"> 标记。

  6. 将 <span class="h4Style"> 标记替换为 <h4> 标记。

  7. 将 </span> 标记替换为 </h4> 标记。

  8. 在浏览器中保存文件并查看对应用程序的更改。

任务 4：查看页面标题

对应用程序进行视觉检查包括对页面标题有效性的评估。

浏览正在运行的启动程序应用程序并查看每个页面标题。

  1. 确定页面标题是否明确标识页面、选项卡和应用程序名称。

  2. 确定在页面之间或在“简介”页面上的选项卡之间导航时页面标题是否更改。

    所显示的每个新页或选项卡的页标题应更改。例如，在页面右上角的主菜单中选择 Introduction 时，标题需要改为“Introduction”，选择 Resources 时，标题应改为“Resources”。

    “简介”页面的标题应包括“简介”一词和当前选定选项卡的名称。从选项卡栏中选择其他选项卡时，标题应更改以反映新选择的选项卡。

    • 简介 - 概览
    • 简介 - 组织机构
    • 简介 - 员工
    • 简介 - 部门

    “资源”页面标题也应包括“资源”一词。

    您会注意到，在页面或选项卡之间导航时，页面标题不会更改。此问题将在后面的教程中得到修复。

当 Web 应用程序的页标题中存在导航链接和徽标等重复内容时，请包括跳过导航链接。行业标准建议，跳转导航链接应隐藏在视图中，直到通过跳转访问。

测试在浏览器中运行的应用程序中是否存在跳过导航链接。

  1. 在应用程序中，按 <Ctrl+L> 将焦点移至地址栏。

  2. 按 <Tab> 可使跳过导航链接显示并接收焦点。

    由于未显示跳过导航链接，因此焦点将转到页面右上角用户菜单中的第一个可聚焦元素：john.hancock@oracle.com 。可聚焦元素在 Keyboard-Only Accessibility 教程中进行了更详细的定义。

    在测试期间，您已确定启动程序没有实施跳过导航链接。

    添加跳过导航链接有三个步骤：

    1. 将链接添加到 index.html 文件。
    2. 向 app.css 文件中添加样式类以隐藏跳过导航链接，直到跳转到该链接。
    3. 将目标锚点添加到 intro.html 和 resources.html 文件中。

更新 index.html 文件

index.html 文件定义 Oracle JET Web 应用程序的总体结构。需要在此页面中放置跳过导航链接。

  1. 导航到 ACCLearningPath/src 目录并在代码编辑器中打开 index.html。

  2. 找到 <body> 标记。

    <body class="oj-web-applayout-body">
   <!-- Template for rendering navigation items shared between nav bar and nav list -->

  3. 在 <body> 标记和其后面的注释之间插入一个链接（目标为 #main）。

    <body class="oj-web-applayout-body">
   <a class="hideSkipNav" href="#main">Skip to main content</a>
   <!-- Template for rendering navigation items shared between nav bar and nav list -->

    hideSkipNav 类将导致链接不可见，直到用户从页面顶部开始并按 <Tab>。

  4. 保存并关闭 index.html。您的文件应类似于 index-html.txt 。

更新 app.css 文件

我们在 index.html 文件中引用了 hideSkipNav 样式类。现在，我们需要在 app.css 中定义它。所有自定义样式定义都位于此文件中。

  1. 导航到 ACCLearningPath/src/css 文件夹并编辑 app.css。

  2. 将 .hideSkipNav 样式类和属性添加到文件的末尾。

    .hideSkipNav { 
   position: absolute;
   left: -1000px; }

.hideSkipNav:focus {
   position: unset;
   left: 0px; }

  3. 保存并关闭 app.css。您的文件应类似于 app-css.txt 。

更新页面的 HTML 文件

由于跳过导航链接的目标应位于每个页面的主要内容的顶部，因此请将目标锚点标记同时添加到“简介”和“资源”页面。

  1. 导航到 ACCLearningPath/src/js/views 文件夹并编辑 intro.html 文件。

  2. 找到带有 oj-hybrid-padding 类的 <div>。

    <div class="oj-hybrid-padding">
   <div id="mainContainer">

  3. 在两个 <div> 标记之间插入锚点标记和 h2 标题。

    <div class="oj-hybrid-padding">
<a id="main">
   <h2>Introduction</h2>
</a>
   <div id="mainContainer">

    添加的代码不仅提供了跳过导航链接的目标，而且还提供了用于改进页面结构的 h2 标题。

  4. 保存并关闭 intro.html。您的文件应类似于 intro-html.txt 。

  5. 在代码编辑器中打开 resources.html 并找到带有 oj-hybrid-padding 类的 <div>。

    <div class="oj-hybrid-padding">
   <ul>

  6. 在 <div> 和 <ul> 标记之间插入锚点标记和 h2 标题。

    <div class="oj-hybrid-padding">
<a id="main">
   <h2>Resources</h2>
</a>
   <ul>

  7. 保存并关闭 resources.html。您的文件应类似于 resources-html.txt 。

  8. 在正在运行的应用程序中，按 <Ctrl+L> 将焦点移至地址栏。

  9. 按 <Tab> 可使跳过导航链接显示并接收焦点。

  10. 按 <Enter> 以激活跳过导航链接。

    然后，焦点将移至页面的主要内容。

    在测试了跳过导航链接的功能之后，请移至视觉检查的下一个元素。

任务 6：检查颜色和位置的使用情况

按钮是将用户从一个页面或操作移动到下一个页面的方向的组成部分。开发人员使用彩色按钮增强页面的外观和功能。“按绿色按钮继续”是一个常见的指令。然而，如果没有适当的标签，视力受损的用户无法遵循这些和类似的指令。

"Overview"（概述）页面的中心面板包含一个工具栏，其中包含三个彩色按钮，以及一些根据按钮的颜色和位置按按钮的说明。盲人或色盲用户无法区分这些按钮，因为它们没有标签或其他区分功能。这组按钮未通过成功标准 1.3.3 和 1.4.1。

使用颜色说明

中央面板中的每个彩色按钮都必须具有与其关联的文本标签。以下更改将颜色名称作为标签添加到按钮中。

  1. 导航到 ACCLearningPath/src/js/views 文件夹并编辑 overview.html 文件。

  2. 找到三个 oj-button 元素的集合。

    <oj-button id="chat"
   class="demo-button-green button-set-width"
   chroming="solid"
   on-oj-action="[[greenActivated]]">
</oj-button>
<oj-button id="paint"
   class="demo-button-red button-set-width"
   chroming="solid"
   on-oj-action="[[redActivated]]">
</oj-button>
<oj-button id="bookmark"
   class="demo-button-purple button-set-width"
   chroming="solid"
   on-oj-action="[[purpleActivated]]">
</oj-button>

  3. 修改代码中的按钮以创建颜色标识符。

    <oj-button id="chat"
   class="demo-button-green button-set-width"
   chroming="solid"
   on-oj-action="[[greenActivated]]">Green
</oj-button>
<oj-button id="paint"
   class="demo-button-red button-set-width"
   chroming="solid"
   on-oj-action="[[redActivated]]">Red
</oj-button>
<oj-button id="bookmark"
   class="demo-button-purple button-set-width"
   chroming="solid"
   on-oj-action="[[purpleActivated]]">Purple
</oj-button>

  4. 保存 overview.html 并验证按钮现在是否具有相应的文本标签。

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

任务 7：验证可读性

视觉检查的最后阶段是针对低视力用户进行的。确定调整行、字和字符间距还是更改页面的缩放级别可提高或降低可读性。

我们将使用“Overview（概览）”页面说明这些标准，并验证应用程序中的文本间距和缩放。

验证文本间距和缩放

  1. 在正在运行的应用程序中，检查页面最右侧的面板，标题为文本间距。该面板包含两个部分。比较两节中的文本，以确保所有文本都存在。

    面板的顶部具有具有正常间距的文本。底部包含具有增加字符、单词和行间距的相同文本。

    如果下方部分中的任何字符均未被扭曲、剪辑或重叠，则此页面符合“成功标准 1.4.12”。

  2. 将浏览器的缩放级别提高到 200%。单击工具栏中的放大镜缩放图标，然后单击 + 符号以增加缩放。

    如果所有文本都是可读的，并且文本在每个面板中正确包装，则页面在 200% 放大时满足成功标准 1.4.4。

    • Success Criterion 1.4.10 Reflow（成功标准 1.4.10 回流）指出：“可以在不丢失信息或功能的情况下呈现内容，并且无需在两个维中滚动即可：
      • 垂直滚动内容的宽度相当于 320 CSS 像素；
      • 水平滚动内容的高度相当于 256 个 CSS 像素。除了部分内容需要二维布局的使用或意义。

    该页面应重新格式化，以仅向一个方向滚动。页面是水平或垂直滚动的，但不是两个方向滚动。成功标准 1.4.10 使页面更易于使用。

  3. 将缩放比例增加到 400%。

  4. 检查页面中滚动条的外观。如果水平滚动条和垂直滚动条都显示，则此页面将失败。

初始测试阶段已完成。

后续步骤

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

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

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

更多学习资源

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

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