接続されたライフサイクル・イベントのカスタマイズ

はじめに

Oracle JavaScript Extension Toolkit (JET)アプリケーションには、ページまたはタブがブラウザにロードされるたびにトリガーされるライフサイクル・イベントが含まれています。this.connected()ファンクションでは、ページ・タイトルを、新しく表示されたページまたはタブに固有になるようにカスタマイズできます。また、この関数は、aria-liveリージョンにカスタム・メッセージを書き込む機会も提供します。これにより、ページまたはタブがロードされたことをスクリーン・リーダーが通知します。

目的

このチュートリアルでは、アクセス可能なページ・タイトルを設定し、ACCLearningPathアプリケーションに表示される各ページおよびタブについて、aria-liveリージョンに正しいロード・メッセージを提供する方法を学習します。

前提条件

タスク1: 要件の定義

WCAG Success Criterion 2.4.2 Page Titledによると、Webアプリケーションの各ページには説明的で一意のタイトルが必要です。タイトルには、ページ、タブおよびアプリケーション名を含める必要があります。タイトルの形式に固有の要件はありませんが、業界標準では、ページ名とタブ名を最初に含め、その後にアプリケーション名を追加します。タイトルをこの順序に整理すると、スクリーン・リーダーが最も重要で制限的な情報を最初に話します。

新しいページのロード時にタイトルが変更されても、スクリーンリーダーはページが変更されたことを常に通知するわけではありません。特に、Oracle JETアプリケーションなどの単一ページ・アプリケーションでは、ページおよびタブのロードがスクリーン・リーダーに通知されずに実行されます。Oracle JETをよりアクセスしやすくするために、Oracle JETスタータ・テンプレート(リリース・バージョン8.0.0以降)を使用して作成されたすべてのアプリケーションには、ファンクションaccUtils.announce()が含まれます。この関数は、ドキュメント・オブジェクト・モデル(DOM)に常に存在するaria-liveリージョンにテキストを書き込みます。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()メソッドの最初のパラメータは、話すテキストです。2番目のパラメータは、テキストをすぐに話すか、スクリーン・リーダーがバッファ内の他の項目を話すのを待つかを決定します。

  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. タイトルが「Introduction : Overview–Accessibility Learning Path」であり、スクリーン・リーダーに「Introduction page loaded」および「Overview tab loaded」と表示されていることを確認します。

  11. タブ・バーの「組織」タブをクリックします。

  12. タイトルが「Introduction : Organization–Accessibility Learning Path」で、スクリーン・リーダーに「Organization tab loaded」と表示されていることを確認します。

    ノート:スクリーン・リーダーにページ・タイトルが指定されていない場合は、タブ・アウトしてブラウザのページに戻してください。

  13. 残りのタブおよび「リソース」ページのタイトルと話されているお知らせを確認します。

  14. スクリーンリーダーを停止します。

アプリケーションにアクセスできるようにするための最初のタスクが完了しました。

次のステップ

このモジュールの次のチュートリアルに進みます。

このチュートリアルは、「アプリケーションのアクセシビリティの検証および修正」モジュールの一部です。

アクセシビリティ学習パスのメイン・ページに戻ると、アクセシビリティのすべてのモジュールにアクセスできます。

その他の学習リソース

docs.oracle.com/learnで他のラボを確認するか、Oracle Learning YouTubeチャネルで無料のラーニング・コンテンツにアクセスしてください。また、education.oracle.com/learning-explorerにアクセスして、Oracle Learning Explorerになります。

製品ドキュメントについては、Oracle Help Centerを参照してください。