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
   

   ブラウザが開き、アプリケーションの「概要」タブがロードされます。タブ・バーの「従業員」タブをクリックし、「従業員」ページを検査します。

   

   従業員ページは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 Relationshipsの両方に準拠するようになりました。これらの基準を満たすには、ビジュアル・ラベルと右側のパネルの指示テキストの両方をコントロールの音声ラベルに含める必要があります。

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. 実行中のアプリケーションで適用した変更を確認します。

    

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

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

    

    画面拡大ソフトウェアは従業員テーブルに焦点を当てるため、確認メッセージは拡大鏡のビューポートの外側に配置されます。

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を繰り返して、確認メッセージの場所が表に移動したことを確認します。

    

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

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

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

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

   $ ojet serve
   

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

3. タブバーの[従業員]タブをクリックします。このポイントの後にマウスを使用しないでください。

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

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

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

7. <Tab>を押します。JAWSでは、「ナビゲーション・リージョン」タブが表示されます。「紹介」タブが選択されました。1/2です。

8. <Tab>を押します。JAWSでは、「メイン・リージョン・タブ。「従業員」タブが選択されました。3/4です。

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

10. <down arrow>を押します。JAWSは、「行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」ボタン。アクティブ化するには、[Enter]を押します。

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

17. メッセージ・ボックスの内容を読み取るには、<F6>を押します。JAWSは、「メッセージは補完的な領域です。更新が保存されました。メッセージ・リージョンの入力フォーカスされていた前の要素に戻るには、[F6]を押してください。

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

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

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

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

これで、3番目のアクセシビリティ修正セットが完了しました。

次のステップ

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

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

• 接続されたライフサイクル・イベントのカスタマイズ
• Oracle JETアプリケーションのマスター・ディテール・ビューのアクセシビリティの検証
• Oracle JETコンポーネントの表およびメッセージのアクセシビリティの検証
• 複合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

F58368-02

Copyright ©2022,2025,

Oracle and/or its affiliates.