Oracle JETアプリケーションでのマスター・ディテール・ビューのアクセシビリティの検証

はじめに

「キーボードのみのアクセシビリティのためのOracle JETアプリケーションのテスト」チュートリアルでは、「組織」タブ内のアクセシビリティに関するいくつかの問題に対処しました。このチュートリアルで対処するいくつかの問題があります

目的

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

前提条件

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

アプリを確認する最初のステップは、ページ構造を確認することです。アプリケーションを実行し、「組織」タブに必要なHTMLヘッダーがあることを確認します。

  1. アプリケーションがブラウザで実行されていない場合は、ターミナルを使用して、ACCLearningPathディレクトリからアプリケーションを起動します。

    $ ojet serve

  2. 概要ページのタブ・バーの「組織」タブをクリックします。

    スクリーンショットでは、「組織」ページに2つのパネルがあります。左側のパネルはツリー・ビューを保持し、右側のパネルはツリー・ビューの使用手順を示します。

    組織ページ

    次のWCAG成功基準に従って、ページの各セクションに識別するHTMLヘッダーがあるかどうかを判断します。

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

  4. 最上位の<div>タグを見つけて、その後に<h3>見出しタグを挿入します。

    <div class="oj-hybrid-padding">
   <h3>Organization</h3>

  5. ツリー・ビューで左パネルを形成する<div>タグを探し、その後に<h4>見出しタグを挿入します。

    <div class="oj-flex-item">
   <h4>Organization Tree View</h4>

  6. 「組織」ページの右パネルを形成する<div>タグを探し、その後に<h4>見出しタグを挿入します。

    <div class="oj-flex-item oj-sm-6">
   <h4>Employee Details</h4>

  7. 保存してファイルを閉じます。ファイルはorganization-page1-html.txtのようになります。

    ブラウザによってページがリフレッシュされ、「組織」ページへの変更が選択されます。

  8. ページ構造が正しいことを確認します。

    正しいHTMLヘッダーがある組織ページ

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

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

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

  3. <Tab>を押します。ページの右上にあるユーザー・メニューのjohn.hancock@oracle.comにフォーカスが移動します。

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

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

  6. <Tab>を押します。左側のパネルのツリー・ビューの「会計」アイテムにフォーカスが移動します。

  7. ツリー・ビューで<down arrow>を2回押して、従業員にフォーカスを設定します。

  8. <Enter>を押して従業員を選択し、ページの右パネルで「従業員詳細」フォームを表示します。

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

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

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

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

  13. <Tab>を押します。フォーカスが「給与」スピンボックスに移動します。

  14. <Tab>を押します。フォーカスが「マネージャID」フィールドに移動します。

  15. <Tab>を押します。フォーカスが「ジョブ」ラジオ・ボタンに移動します。

  16. <Tab>を押します。フォーカスがページのフッターの「Oracleについて」リンクに移動します。

    フォーカス長方形がこのテスト全体を通して表示され、フォーカスが予想される順序で移動する場合、「組織」ページはフォーカス・インジケータ基準を満たします。

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

アクセシビリティについて「組織」ページをテストする最終段階は、スクリーン・リーダー検証を実行して、スクリーン・リーダーが必要とするすべてを話せるようにすることです。

WCAG達成基準4.1.2の名前、ロール、値および達成基準2.4.4リンク目的(コンテキスト内)に従って、検証する必要がある主な項目は次のとおりです。

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

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

    $ ojet serve

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

  3. タブ・バーから「組織」タブを選択し、残りのステップにのみキーボードを使用します。

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

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

  6. <Tab>を押します。JAWSでは、「バナー・リージョン」と表示されます。ツールバー。john.hancock@oracle.comボタン・メニュー。[Space]を押してメニューをアクティブ化し、矢印キーで移動します。

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

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

  9. <Tab>を押します。フォーカスがツリー・ビューの最初のアイテムである「会計」に移動し、JAWSが「ノードのデータを受信: research」と表示します。会計です。研究: ジョーンズ、スコット、フォード、アダムズ。販売。操作プレビュー。会計がクローズされました。1/4。項目間の移動や項目の展開には、矢印キーを使用します。

    スクリーン・リーダーがツリー・ビューの説明ラベルを示していないことに注意してください。ツリー・ビューに適切なラベルを提供するために必要な修正が2つあります。

  10. ツリー・ビュー・ラベルを修正するには、ACCLearningPath/src/js/viewsフォルダに移動し、エディタでorganization.htmlファイルを開きます。

  11. <oj-tree-view>タグを見つけます。

      <oj-tree-view id="treeview"
     data="[[dataProvider]]"
     selection-mode="single"
     . . .

  12. <oj-tree-view>タグに次のaria-label属性を追加します。h4 HTML見出しは、ツリー・ビューのビジュアル・ラベルとして機能します。

      <oj-tree-view id="treeview"
     data="[[dataProvider]]"
     selection-mode="single"
     aria-label="Organization Tree View - select an employee to display details."
     . . .

    ツリー・ビューは、「WCAG達成基準2.5.3名前ラベル」と「WCAG達成基準1.3.1情報および関係」の両方に準拠するようになりました。これらの基準を満たすには、ビジュアル・ラベルとインストラクション・テキストの両方をコントロールの音声ラベルに含める必要があります。

  13. ブラウザ・ウィンドウに戻り、前述のステップ1から7を繰り返して、ツリー・ビューの「会計」に焦点を当てます。JAWSでは、「組織ツリー・ビュー- 詳細を表示する従業員を選択します。ツリー・ビュー会計がクローズされました。1/4。項目間の移動や項目の展開には、矢印キーを使用します。

  14. <right arrow>を押します。スクリーンリーダーは、「ノード: アカウンティングのデータを取得しています。会計オープン。1/4。会計はオープンしています。ノードのデータを受信: accounting"

  15. <right arrow>を押します。スクリーンリーダーは「レベル1」と言います。ワンギン1/3項目間の移動や項目の展開には、矢印キーを使用します。

  16. <down arrow>を押します。スクリーンリーダーは「クラーク」と言います。

  17. <Enter>を押して、Clarkを選択します。スクリーンリーダーは「Clark. 2 of 3」と言います。

  18. <Tab>を押します。スクリーン・リーダーには、「Employee Id read-only edit 7,782」と表示されています。

  19. <Tab>を押します。スクリーン・リーダーは、「従業員名はClarkを編集します。テキストを入力します。

  20. <Tab>を押します。スクリーン・リーダーは、「ジョブ・タイトル編集コンボ」と言います。管理者。値を設定するには、矢印キーを使用するか、値を入力します。

  21. <Tab>を押します。スクリーン・リーダーには、「Hire Date edit combo」と表示され、その後に要素内に存在する日付「06/08/1981」が続きます。次に、カレンダーに表示される情報の読み取りと、データの移動とアクセスの手順を示します。

  22. <Tab>を押します。スクリーンリーダーは「給与編集スピンボックス。2,450。0以上の数値を入力してください。値を設定するには、矢印キーを使用するか、値を入力します。

  23. <Tab>を押します。スクリーンリーダーに「Manager Id、 read-only edit. 7839」と書かれている。

  24. <Tab>を押します。スクリーンリーダーは「Accounting radio button checked. 1 of 4」と表示しています。

    スクリーン・リーダーは、ラジオ・ボタンのセットのラベルを発表していないことに注意してください。

  25. ラジオ・ボタン・セット・ラベルを修正するには、organization.htmlファイルで<oj-radioset>タグを見つけます。

      <oj-radioset id="dept-id"
     options="[[depsDataProvider]]"
     value="[[empDetails().deptno]]">
  </oj-radioset>

  26. <oj-radioset>タグにlabel-hint="Departments"属性を追加して、ラジオ・ボタンのセットの表示ラベルと使用ラベルを指定します。

      <oj-radioset id="dept-id"
     label-hint="Departments"
     options="[[depsDataProvider]]"
     value="[[empDetails().deptno]]">
  </oj-radioset>

  27. 保存してファイルを閉じます。ファイルはorganization-page2-html.txtのようになります。

  28. ブラウザによって実行中のアプリケーションがリフレッシュされ、「組織」ページへの変更が反映されます。

  29. スクリーンリーダー検証を再実行して、新しいラベルが話されていることを確認します。

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

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

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

次のステップ

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

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

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

その他の学習リソース

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

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