複合Oracle JETコンポーネントでのキーボード・ナビゲーションのテスト

はじめに

これは、ACCLearningPathアプリケーションの「Departments」タブを最初に確認します。このアクセシビリティ・シリーズの前の学習パスで概説したレビュー・プロセスに従って、アクセシビリティの問題を特定します。

目的

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

前提条件

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

タスク1: ページ構造のレビュー

1. ターミナル・ウィンドウで、ACCLearningPathフォルダに移動し、アプリケーションを実行します。

   $ ojet serve
   

   ブラウザのアプリケーションが「概要」タブがロードされた「概要」ページに開きます。

2. タブ バーの[部門]タブをクリックし、ページ構造を評価します。「部門」ページは3つのパネルで構成され、各パネルには様々なOracle JETコンポーネントを使用して部門データが表示されます。

   

3. ACCLearningPath/src/js/viewsフォルダに移動し、コード・エディタでdepartments.htmlファイルを開きます。

4. ファイルでメインの<div>タグを見つけます。

   <div class="oj-hybrid-padding">
      <div id="mainContainer" class="oj-flex" style="width:100%;">
   

5. 2つの<div>タグの間にh3ヘッダーを挿入して、Departmentsページを識別します。

   <div class="oj-hybrid-padding">
      <h3>Departments</h3>
      <div id="mainContainer" class="oj-flex" style="width:100%;">
   

6. フィルムストリップを含む中間パネルを定義する<div>タグを見つけます。

   <div class="oj-flex-item fs-container">
      <oj-film-strip id="deptFilmstrip" max-items-per-page="1"
         . . . >
   

7. 開いている<div>タグと<oj-filmstrip>タグの間にh4ヘッダーを挿入して、パネルを識別し、フィルムストリップの可視ラベルを指定します。

   <div class="oj-flex-item fs-container">
      <h4>Departments Film Strip</h4>
      <oj-film-strip id=“deptFilmstrip” max-items-per-page=“1”
         . . . >
   

8. データ・グリッドを含む左側のパネルを形成する<div>タグを見つけます。

   <div class="oj-flex-item">
      <oj-data-grid id="datagrid"
         style="width:100%; min-width:400px; height:200px; margin-bottom:5px"
         . . . >
   

9. <div>タグと<oj-data-grid>タグの間にh4ヘッダーを挿入して、パネルを識別し、データ・グリッドの可視ラベルを指定します。

   <div class="oj-flex-item">
      <h4>Departments Data Grid</h4>
      <oj-data-grid id="datagrid"
         style="width:100%; min-width:400px; height:200px; margin-bottom:5px"
         . . . >
   

10. チャートを含む3番目のパネルを形成する開始<div>タグを見つけます。

      <div class="oj-flex-item oj-sm-margin-4x-horizontal">
         <oj-chart id="pieChart" type="bar" data="[[chartDataProvider]]" animation-on-display="auto" animation-on-data-change="auto"
            . . . >
    

11. 開いている<div>タグと<oj-chart>タグの間にh4ヘッダーを挿入します。この見出しはパネルを識別し、チャートのビジュアル・ラベルとして機能します。

      <div class="oj-flex-item oj-sm-margin-4x-horizontal">
         <h4>Salaries by Department</h4>
         <oj-chart id="pieChart"
            type="bar"
            data="[[chartDataProvider]]"
            animation-on-display="auto"
            animation-on-data-change="auto"
            . . . >
    

12. ファイルを保存します。ブラウザで、アプリケーションの「Departments」タブに対する変更を確認します。

    

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

アクセシビリティ・レビューの2番目の部分は、アプリの「部門」タブのキーボードのみのテストを実行することです。

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

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

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

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

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

6. <Tab>を押します。フォーカスがフィルムストリップの「会計」に移動します。

7. <right arrow>を押して、フィルムストリップの次のエントリ「Research」に移動します。

8. <left arrow>を押して、フィルムストリップの「会計」に戻ります。

9. <right arrow>を3回押します。フォーカスがフィルムストリップの最後のエントリである「操作」に移動します。

10. <Tab>を押します。フォーカスがデータ・グリッドの最初のデータボディ・セル(「ID」列の下)に移動します。フォーカスされたセルの値は10です。

11. <right arrow>を押します。データ・グリッドの2番目の列「名前」の下にある「会計」にフォーカスが移動します。

12. <right arrow>を押します。データ・グリッドの最後の列「場所」で、フォーカスが「ニューヨーク」に移動します。

    フォーカス・アウトラインは、市区町村名を含むセルの周囲に表示されます。

13. <F2>を押します。フォーカス・アウトラインは、セル内のテキストNew Yorkのみを囲むように締め付けられます。

    <oj-data-grid>要素のキーボード・ドキュメントに従って、<F2>を使用してセルのコンテンツをアクション可能にします。<F2>ファンクション・キーを使用すると、アクティブ・コンポーネントでサポートされているアクションを開始できます。この場合、セルには、アクティブ化するGoogleマップへのリンクが含まれています。

14. <Enter>を押して、「ニューヨーク」リンクをアクティブ化します。新しいブラウザ・ウィンドウが開き、ニューヨークのGoogleマップ・ページが表示されます。

15. <Ctrl+F4>を押して、Googleマップ・ウィンドウを閉じます。

16. <Esc>を押します。フォーカス・アウトラインは、3番目の列にNew Yorkが含まれるセルを囲むように拡大されます。

    <oj-data-grid>要素のキーボード・ドキュメントに従って、<Esc>を使用してアクション可能モードを終了し、他のコンポーネントへの移動を続行できるようにします。

17. <Tab>を押します。フォーカスが棒グラフの最初の棒に移動します。

タスク3: スクリーン・リーダー検証の実行

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

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

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

   $ ojet serve
   

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

3. タブ・バーの「Departments(部門)」タブをクリックします。このポイントの後にマウスを使用しないでください。

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

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

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

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

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

9. <Tab>を押して、フィルム・ストリップにフォーカスを移動します。JAWSは「会計。ニューヨーク3名ページ1/4を表示しています。

10. <Tab>を押して、データ・グリッドにフォーカスを移動します。JAWSによると、「これは4行3列のデータ・グリッドです。ID。名前事業所」。列ヘッダーを読み取った後、スクリーン・リーダーは表のデータボディ・セルを左から右に読み取ります。次に、現在のフォーカス「Row 1」を読み取ります。列 1ID: 10。

11. <right arrow>を押します。JAWSは、「列2。名前: 会計」。

12. <right arrow>を押します。JAWSは、「列3。場所: ニューヨークコントロールが含まれます。最後の列に到達しました。」

13. <Tab>を押します。JAWSによると、「データの視覚化: チャート。グラフシリーズ: 会計、グループ: 部門、値: USD 3,750.00。グラフィック"

    パネル間でフォーカスが移動しても、JAWSではパネル見出しが表示されないことに注意してください。フィルムストリップをページごとにスクロールする方法もありません。

14. コード・エディタでdepartments.htmlファイルを開きます。

    • 成功基準4.1.2の名前、ロール、値では、3つのパネルの各コンポーネントにラベルが関連付けられている必要があります。レベル4の見出しは、表示可能なラベルとして機能します。
    • 「成功基準2.5.3の名前のラベル」では、見出しのテキスト全体をラベルに含める必要があります。次のステップ18から23で追加したaria-label属性には、パネルの見出しテキストが組み込まれます。

15. 開始<oj-film-strip>タグを見つけて、aria-label属性を追加します。

      <oj-film-strip id="deptFilmstrip"
         max-items-per-page="1"
         aria-label="Departments Film Strip - Use the paging controls in the next region to change pages."
         arrow-visibility="hidden"
         class="demo-stretch-items"
         . . . >
    

16. 開始<oj-data-grid>タグを見つけて、aria-label属性を追加します。

      <oj-data-grid id="datagrid"
         style="width:100%; min-width: 400px; height:200px;margin-bottom:5px"
         aria-label="Departments Data Grid -- Press enter on the city name to open a google map of the city."
         data="[[dgDataProvider]]"
         header.column.style="[[getCellWidth]]"
         . . . >
    

17. 開始<oj-chart>タグを見つけて、aria-label属性を追加します。

      <oj-chart id="pieChart"
         type="bar"
         aria-label="Salaries by Department bar chart"
         data="[[chartDataProvider]]"
         animation-on-display="auto"
         animation-on-data-change="auto"
         . . . >
    

    最終的な変更には、中央のパネルのフィルムストリップのページ区切りコントロールが含まれます。

18. 閉じている</oj-film-strip>タグと</oj-bind-if>タグを見つけます。

            </oj-film-strip>
         </div>
      </div>
      </oj-bind-if>
    

19. ページ区切りコントロールと周囲のdiv要素を、終了する</div>タグと</oj-bind-if>タグの間に追加します。

            </oj-film-strip>
         </div>
      </div>
      <div class="oj-flex oj-sm-flex-items-initial oj-sm-justify-content-center">
         <div class="oj-flex-item">
            <div style="text-align: center;">
            <div style="display: inline-block;margin-top: 4px;">
               <oj-paging-control id="pagingControl"
                  aria-controls="deptFilmstrip"
                  data="[[pagingModel]]"
                  page-size="0"
                  page-options='{"type": "dots"}'>
               </oj-paging-control>
            </div>
            </div>
         </div>
      </div>
      </oj-bind-if>
    

20. ファイルを保存します。ファイルは departments-html.txtに似ているはずです。

21. スクリーンリーダー検証を再実行します。ラベルがフィルムストリップ、データグリッド、およびチャートに使用されていること、およびページ区切りコントロールがフィルムストリップの下に存在していることを確認します。

次のステップ

このチュートリアルでは、Webアプリケーションのアクセシビリティに関するこの学習パスのモジュール「アプリケーションのアクセシビリティの検証および修正」を終了します。

• 接続されたライフサイクル・イベントのカスタマイズ
• Oracle JETアプリケーションのマスター・ディテール・ビューのアクセシビリティの検証
• Oracle JETコンポーネントの表およびメッセージのアクセシビリティの検証
• 複合Oracle JETコンポーネントでのキーボード・ナビゲーションのテスト

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

その他の学習リソース

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

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

---

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

Test keyboard navigation in complex Oracle JET components

F58359-02

Copyright ©2022,2025,

Oracle and/or its affiliates.