自定义互联生命周期事件

简介

Oracle JavaScript Extension Toolkit (JET) 应用程序包含每次将页面或选项卡加载到浏览器中时触发的生命周期事件。通过 this.connected() 函数，可以定制页面标题，使其特定于新显示的页面或选项卡。该功能还提供了一个将自定义消息写入 aria-live 区域的机会，这将导致屏幕阅读器宣布页面或选项卡已加载。

目标

在本教程中，您将学习如何设置可访问的页面标题，并为 ACCLearningPath 应用程序中显示的每个页面和选项卡向 aria-live 区域提供正确的加载消息。

Prerequisites

设置为使用安装了 JavaScript 运行时 Node.js 和 Oracle JET 发行版 13.0（或更高版本）命令行界面创建 Oracle JET 应用程序的开发环境
访问 Oracle JET 开发人员手册
访问《 Oracle JET Keyboard and Gesture Guide 》
完成此系列中的上一个学习路径：使 Oracle JET 应用程序可访问：确定问题，以便您更新了 ACCLearningPath 应用程序

任务 1：定义需求

根据 WCAG Success Criterion 2.4.2 Page Titled （WCAG 成功标准 2.4.2 页面标题），Web 应用程序的每个页面都需要有一个描述性的唯一标题。标题应包括页面、选项卡和应用程序名称。标题的格式没有特定的要求，但行业标准是首先包括页面和选项卡名称，然后是应用程序名称。当标题按此顺序组织时，屏幕阅读器首先会说出最重要且限制性最强的信息。

尽管在加载新页面时标题会更改，但屏幕阅读器并不总是宣布页面已更改。尤其是在单页应用程序（如 Oracle JET 应用程序）中，页面和选项卡加载未向屏幕阅读器发送通知。为了使 Oracle JET 更易于访问，使用 Oracle JET 入门模板（版本 8.0.0 或更高版本）创建的所有应用程序都包含函数 accUtils.announce()。该函数将文本写入 aria-live 区域，该区域始终存在于文档对象模型 (DOM) 中。Oracle JET 模板还包括在 this.connected 生命周期函数内调用 accUtils.announce() 方法。此调用中的文本说明页面或选项卡已加载。

任务 2：自定义 `this.connected` 生命周期功能

新创建的 Oracle JET 应用程序中的 this.connected() 函数非常简洁。

this.connected = function() {
      accUtils.announce("Dashboard page loaded.", "assertive");
      document.title = "Dashboard";
      // Implement further logic if needed
};

accUtils.announce() 方法的第一个参数是要使用的文本。第二个参数确定是立即使用文本还是等到屏幕阅读器在其缓冲区中完成其他项的通话。

导航到 ACCLearningPath/src/js/viewModels 文件夹并在代码编辑器中打开 intro.js 文件。

查找并修改 this.connected() 函数。然后保存并关闭该文件。

   this.connected = function () {
      accUtils.announce("Introduction page loaded.", "assertive");
      document.title = "Introduction -- Accessibility Learning Path";
      // Implement further logic if needed
   };

在编辑器中打开 resources.js 并修改其 this.connected() 函数。然后保存并关闭该文件。

   this.connected = function () {
      accUtils.announce("Resources page loaded.", "assertive");
      document.title = "Resources -- Accessibility Learning Path";
      // Implement further logic if needed
   };

在编辑器中打开 overview.js 并修改其 this.connected() 函数。然后保存并关闭该文件。

   this.connected = function () {
      accUtils.announce("Overview tab loaded.", "polite");
      document.title = "Introduction : Overview -- Accessibility Learning Path";
      // Implement further logic if needed
   };

在编辑器中打开 organization.js 并修改其 this.connected() 函数。然后保存并关闭该文件。

   this.connected = function () {
      accUtils.announce("Organization tab loaded.", "polite");
      document.title = "Introduction : Organization -- Accessibility Learning Path";
      // Implement further logic if needed
   };

在编辑器中打开 employees.js 并修改其 this.connected() 函数。然后保存并关闭该文件。

   this.connected = function () {
         accUtils.announce("Employees tab loaded.", "polite");
         document.title = "Introduction : Employees  --  Accessibility Learning Path";
         // Implement further logic if needed
   };

在编辑器中打开 departments.js 并修改其 this.connected() 函数。然后保存并关闭该文件。

   this.connected = function () {
         accUtils.announce("Departments tab loaded.", "polite");
         document.title = "Introduction : Departments  -- Accessibility Learning Path";
         // Implement further logic if needed
   };

启动屏幕阅读器。
运行该应用程序。
```
   $ ojet serve
```
浏览器将打开应用程序的“Introduction（简介）”页面，其中加载了“Overview（概览）”选项卡。
验证标题是否为“Introduction：Overview - Accessibility Learning Path”，并且屏幕阅读器表示“Introduction page load（已加载简介页面）”和“Overview tab load（加载概览选项卡）”。
单击选项卡栏中的“组织”选项卡。
验证标题是否为“Introduction：Organization - Accessibility Learning Path”，屏幕阅读器是否为“Organization tab entered”。

注：如果您的屏幕阅读器未提及页面标题，请尝试在浏览器中跳转并返回到页面。
验证其余选项卡和“资源”页面的标题和通告。
停止您的屏幕阅读器。

使应用可访问的初始任务已完成。

后续步骤

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

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

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