自訂互連生命週期事件

簡介

Oracle JavaScript Extension Toolkit (JET) 應用程式包含週期事件，會在每次將頁面或頁籤載入瀏覽器時觸發。this.connected() 函數提供自訂新顯示頁面或頁籤特定頁面標題的機會。此功能也提供將自訂訊息寫入至即時區域的機會，讓螢幕助讀程式宣告頁面或頁籤已載入。

目標

在本教學課程中，您將瞭解如何設定可存取的頁面標題，並為 ACCLearningPath 應用程式中顯示的每個頁面和頁籤，提供正確的載入訊息給 Aria-live 區域。

必備條件

任務 1：定義需求

根據 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() 方法的第一個參數是要朗讀的文字。第二個參數決定要立即朗讀文字，或等到螢幕助讀程式完成朗讀其緩衝區中的其他項目。

  1. 瀏覽至 ACCLearningPath/src/js/viewModels 資料夾，然後在程式碼編輯器中開啟 intro.js 檔案。

  2. 尋找並修改 this.connected() 函數。然後儲存並關閉檔案。

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

  3. 在編輯器中開啟 resources.js，然後修改其 this.connected() 函數。然後儲存並關閉檔案。

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

  4. 在編輯器中開啟 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
   };

  5. 在編輯器中開啟 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
   };

  6. 在編輯器中開啟 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
   };

  7. 在編輯器中開啟 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
   };

  8. 啟動螢幕助讀程式。

  9. 執行應用程式。

       $ ojet serve

    瀏覽器會開啟應用程式的「簡介」頁面，並載入「概觀」頁籤。

  10. 確認標題為「簡介：概觀 – 輔助功能學習路徑」，且螢幕助讀程式說：「已載入簡介頁面」與「已載入概要頁籤」。

  11. 按一下頁標列中的「組織」頁標。

  12. 驗證標題為「簡介：組織 - 輔助功能學習路徑」，且螢幕助讀程式說：「已載入組織頁籤」。

    注意：如果螢幕助讀程式未提到頁面標題，請嘗試將 Tab 鍵跳出並返回瀏覽器中的頁面。

  13. 驗證其餘頁籤和「資源」頁面的標題和口語公告。

  14. 停止您的螢幕助讀程式。

讓應用程式可供存取的初始任務已完成。

下一步

繼續本模組的下一個教學課程。

此教學課程是驗證並修正應用程式輔助功能模組的一部分。

您可以返回輔助功能學習路徑的主頁面，以存取所有輔助功能模組。

其他學習資源

在 docs.oracle.com/learn 上探索其他實驗室，或在 Oracle Learning YouTube 頻道上存取更多免費學習內容。此外，請造訪 education.oracle.com/learning-explorer 以成為 Oracle Learning Explorer。

如需產品文件，請造訪 Oracle Help Center 。