Oracle JETコンポーネント表およびメッセージのアクセシビリティの確認

イントロダクション

Oracle JETアプリケーションでのスクリーン・リーダー検証の実行チュートリアルでは、「従業員」ページでいくつかのアクセシビリティの問題に対処しました。このチュートリアルでは、いくつかの問題に対処します。

目的

このチュートリアルでは、ACCLearningPathアプリケーションの「従業員」ページで残りのアクセシビリティの問題を識別および修正する方法を学習します。

前提条件

• JavaScriptランタイム、Node.jsおよびOracle JETリリース13.0 (以降)のコマンドライン・インタフェースがインストールされたOracle JETアプリケーションを作成するように設定された開発環境
• Oracle JET開発者クックブックへのアクセス
• Oracle JETキーボードおよびジェスチャー・ガイドへのアクセス
• この学習パスでの前のチュートリアルの完了、Oracle JETアプリケーションでのマスター詳細ビューのアクセシビリティの検証

タスク1: ページ構造の確認

レビューの最初のステップは、必要なすべてのHTMLヘッダーがページに表示されることを確認することです。

1. ターミナルでACCLearningPathディレクトリに移動し、アプリケーションを実行します。

   $ ojet serve
   

   ブラウザが開き、「概要」タブがロードされたアプリの「概要」ページが表示されます。タブ・バーの「従業員」タブをクリックし、「従業員」ページを確認します。

   

   図employees_page_before.pngの説明

   従業員ページは、2つのパネルで構成されます。HTML見出しは、ページ自体および各パネルにはありません。

2. ACCLearningPath/src/js/viewsフォルダに移動し、エディタでemployees.htmlファイルを開きます。

3. ファイル内で最初に開いている<div>タグを見つけます。

   <div class="oj-hybrid-padding">
      <oj-messages id="messagesId"
         messages="[[messagesDataprovider]]"
         display="notification"
         position="[[positionObject]]">
      </oj-messages>
   

4. 開始タグ<div>の直後に、従業員ページを識別するh3見出しを挿入します。

   <div class="oj-hybrid-padding">
      <h3>Employees</h3>
      <oj-messages id="messagesId"
         messages="[[messagesDataprovider]]"
         display="notification"
         position="[[positionObject]]">
      </oj-messages>
   

5. 表を含む左パネルを形成する開始<div>タグを見つけます。

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

6. 開いている<div>タグと<oj-table>タグの間に、このパネルに正しくラベルを付けるh4見出しを挿入します。

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

7. <oj-table>要素のaria-label属性を編集して、見出しテキストと2番目のパネルに表示される指示テキストの両方を含めます。

      
   <div class="oj-flex-item">
      <h4>Employees Table</h4>
      <oj-table id='table'
         class="table-size"
         first-selected-row="{{selectedRow}}"
         aria-label="Employees Table - Activate a row to see employee details"
         . . . >
      
   

   この表は、WCAG Success Criterion 2.5.3 Label in NameとWCAG Success Criterion 1.3.1 Info and Relationshipの両方に準拠しています。これらの基準を満たすには、右パネルの表示ラベルと指示テキストの両方をコントロールの話しラベルに含める必要があります。

8. 従業員の詳細を保持する「従業員」ページの右パネルを定義する開始<div>タグを見つけます。

   <div id="detailContainer"
      class="oj-flex-item"
      style="margin-left: 30px; min-width: 200px">
      <hr style="margin-top:12px;">
      <oj-bind-if test="[[!activeRow()]]">
   

9. <div>タグと<oj-bind-if>タグの間に、このパネルを識別する水平ルールの下にh4見出しを挿入します。

   <div id="detailContainer"
      class="oj-flex-item"
      style="margin-left: 30px; min-width: 200px">
      <hr style="margin-top:12px;">
      <h4>Employee Details</h4>
      <oj-bind-if test="[[!activeRow()]]">
   

10. ファイルを保存します。ファイルはemployees- page- html.txtのようになります。

11. 実行中のアプリケーションで適用された変更を確認します。

    

    図employees_page_after.pngの説明

タスク2: キーボード専用テストの実行

このチュートリアルのこのセクションおよび次の「スクリーン・リーダー・テストの実行」部分は、マウスを使用せずに実行する必要があります。このテストでは、フォーカス・ポイントが常に明確に識別され、タブ順序が予測可能であることを確認します。

1. 「従業員」ページで、<Ctrl+L>を押してアドレス・バーにフォーカスを設定します。

2. <Tab>を押します。フォーカスがスキップナビゲーションリンクに移動します。

3. <Tab>を押します。フォーカスがページの右上にあるユーザーメニューの [e-mail]に移動します。

4. <Tab>を押します。フォーカスがユーザー・メニューのすぐ下にあるメイン・ナビゲーション・メニューの「概要」に移動します。

5. <Tab>を押します。フォーカスがタブ・バーの「概要」に移動します。

6. <Tab>を押します。フォーカスが従業員テーブルの最初の列ヘッダーである従業員番号に移動します。

7. <down arrow>を押して、表の最初のデータ行にフォーカスを置きます。

   「従業員詳細」フォームがページの右側のパネルに表示されます。

8. <Space>を押して行を選択し、<F2>を押して最初のタブ可能な要素である「編集」ボタンにフォーカスを移動します。

9. <Space>を押して「編集」ボタンをアクティブ化します。「従業員の編集」ダイアログが開き、フォーカスが「従業員ID」フィールドに移動します。

10. <Tab>を押します。フォーカスが「従業員名」フィールドに移動します。

11. <Tab>を押します。フォーカスが「ジョブ・タイトル」フィールドに移動します。

12. <Tab>を押します。フォーカスが「採用日」フィールドに移動します。

13. <Tab>を押します。フォーカスが「給与」フィールドに移動します。

14. <Tab>を押します。フォーカスが「保存」ボタンに移動します。

15. <Space>を押して「保存」ボタンをアクティブ化し、ダイアログを閉じます。フォーカスが従業員テーブルの選択した最初のデータ行に戻ります。

    ページの左上隅のメッセージ・ボックスを確認します。メッセージ・ボックスには、更新が保存されたことを示す確認が表示されます。

    

    図message_box_before.pngの説明

    画面拡大ソフトウェアでは、従業員テーブルにフォーカスが置かれているため、確認メッセージが拡大鏡のビューポートの外に配置されることがあります。

16. ACCLearningPath/src/js/viewModelsフォルダに移動し、employees.jsを編集します。

17. this.positionObjectの定義を見つけます。

    this.positionObject = {
       my: { vertical: "top", horizontal: "start" },
       at: { vertical: "top", horizontal: "start" },
       of: "window",
    };
    

18. オブジェクトの場所がウィンドウではなく表に基づいているように、positionObject定義を変更します。

    this.positionObject = {
       my: { vertical: "top", horizontal: "start" },
       at: { vertical: "top", horizontal: "start" },
       of: "#table",
    };
    

    ファイルを保存します。次に、キーボードのみのテストのステップ1から15を繰り返して、確認メッセージの場所が表に移動したことを確認します。

    

    図message_box_after.pngの説明

タスク3: スクリーン・リーダー・テストの実行

アクセシビリティ・レビューの最後の部分は、スクリーン・リーダーによる検証です。次の検証ステップはJAWSスクリーン・リーダーの使用に基づいていますが、NVDAスクリーン・リーダーを使用している場合の結果は似ています。

1. ターミナル・ウィンドウで、<Ctrl+C>を押して実行中のアプリケーションを終了し、プロンプトが表示されたらyと入力します。

2. スクリーン・リーダーを起動し、Webアプリケーションを再起動します。

   $ ojet serve
   

   アプリはブラウザー内で自動的に開かれます。ページの読み込みが完了すると、スクリーンリーダーは読み込みを開始します。

3. タブ・バーの「Employees」タブをクリックします。このポイントのあとにマウスを使用しないでください。

4. <Ctrl+L>を押してアドレスバーにフォーカスを設定します。

5. <Tab>を押します。JAWSは、「メイン・コンテンツにスキップします。同じページ・リンク」。

6. <Tab>を押します。JAWSは「バナー・リージョン」と言います。ツールバー。[e-mail]ボタンメニュー。[Space]を押してメニューをアクティブにし、矢印キーで移動します。

7. <Tab>を押します。JAWSから「ナビゲーション・リージョン」タブが表示されます。「はじめに」タブが選択されています。1/2」

8. <Tab>を押します。JAWSは、「Main region」タブと言います。「従業員」タブが選択されました。3/4」

9. <Tab>を押します。JAWSには、「6列、13行を超える表」と表示されます。従業員テーブル- 行をアクティブにして従業員の詳細を表示します。列ヘッダー1、従業員番号」。フォーカスが表の列ヘッダーの行の最初のセルに移動します。

10. <down arrow>を押します。JAWSは「Row 1: 7839」と言います。選択解除済列1、従業員番号: 7839"フォーカスは、表の最初のデータ行にあります。

11. <right arrow>を押します。JAWSは、列番号と従業員ユーザー名を示します。

12. <Space>を押します。行が選択され、JAWSで「Space」と表示されます。選択されました。"

13. <F2>を押して、最初のタブ可能な要素に移動します。JAWSは「編集」ボタンです。アクティブ化するには、[Enter]を押します。

14. <Enter>を押します。JAWSは、「従業員の編集」と言います。従業員の編集従業員ID 7,839..."スクリーン・リーダーは「従業員の編集」ダイアログを開き、キーが押されるまで読取りを続行します。

15. <Tab>を5回押して、編集可能フィールドと読取り専用フィールドを「保存」ボタンに移動します。JAWSは「Save button」と言います。アクティブ化するには、[Enter]を押します。

16. <Enter>を押します。JAWSは、「メッセージ・カテゴリ: 確認。更新が保存されました。従業員Oneginの変更が保存されました。"以前のチュートリアルでの編集のため、アプリケーションの従業員ユーザー名はここで異なる場合があります。

17. <F6>を押して、メッセージ・ボックスの内容を読み取ります。JAWSは「メッセージ補完リージョン」と言います。更新が保存されました。メッセージ・リージョンの入力。F6を押して、フォーカスされていた前の要素に戻ります。」

18. <Tab>を押します。JAWSは「閉じる」ボタンです。アクティブ化するには、[Enter]を押します。

19. <Enter>を押して、メッセージ・ボックスを閉じます。フォーカスが表および前に選択したセルに戻ります。

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

21. ターミナル・ウィンドウで、<Ctrl+C>を押してアプリケーションを終了し、プロンプトが表示されたらyと入力します。

これで、3つ目のアクセシビリティ修正が完了します。この学習パス内の最後のチュートリアルは、複雑なOracle JETコンポーネントでのキーボード・ナビゲーションのテストです。

その他の学習リソース

他のラボをdocs.oracle.com/learnで探すか、Oracle Learning YouTubeチャネルでより無料の学習コンテンツにアクセスします。また、education.oracle.com/learning-explorerにアクセスしてOracle Learning Explorerになります。

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

---

タイトルおよび著作権情報

Verify the accessibility of Oracle JET components table and message

F34164-02

October 2022

Copyright © 2022, Oracle and/or its affiliates.