キーボードのみのアクセシビリティについてOracle JETアプリケーションのテスト

イントロダクション

これは、「アクセシビリティの問題の識別」学習パスの2番目のチュートリアルです。

Web Content Accessibility Guidelines (WCAG) 2.1は、アクセス可能なWebアプリケーションを作成するための成功基準の多くの概要を示しています。このチュートリアルでは、キーボードのみの使用に関する基準に焦点を当てます。

キーボードのみでアクセス可能なアプリは、モビリティが限られている人やマウスを操作できない人向けに、代替入力デバイスで使用できます。人々がキーボードを使えると、インターネットは指先にいます。

目的

このチュートリアルでは、Webアプリケーションのキーボード専用テストの実行方法を学習します。

前提条件

タスク1: キーボードのみのアクセシビリティ・テストの準備

目視検査では、アクセス可能なページの構造と基本機能の概要が示されます。キーボードのみのテストは手動のアクセシビリティ・テストの中心にあります。これにより、開発者は障害のあるユーザーの視点からアプリと対話できます。このチュートリアルの対象となるWCAG 2.1の成功基準のサブセットには、いくつかの特定の概念が含まれます。

この項の最初に記載されている成功基準は、フォーカス可能な要素の概念に間接的に対処するため、2つの用語を定義する必要があります。

これらの適用可能な概念を定義して説明すると、Starterアプリケーションをテストする準備が整います。

「No Exception」というテキストが「Success Criterion 2.1.3」のカッコに含まれていることに注意してください。これは、キーボードのアクセシビリティーが必須であることを示します。

WCAGガイドライン2.1とそれに続く成功基準は、キーボードアクセシビリティの絶対的な必要性を強調しています。キーボードは、すべての人にテクノロジーをもたらす上で重要な役割を果たします。

タスク2: ビジュアル・フォーカスが存在するかどうかの確認

キーボードのみのアクセシビリティ・テストは、フォーカス・インジケータにのみ依存します。次の「フォーカス可視」成功基準への準拠は交渉できません。無効なユーザーは、アクティブなフォーカスがないか、フォーカス配置が不明の場合に、アプリケーションをナビゲートできません。

Webアプリでタブを移動すると、フォーカス位置を示す表示インジケータが常に表示されます。通常、インジケータは長方形です。フォーカス矩形を無効にすると、この条件が失敗します。

アプリ開発者は、自分が書いたアプリやプログラムに誇りを持っています。その目標は、機能を視覚的に魅力的なエクスペリエンスと統合することです。フォーカスの四角形は多くの場合、設計から引き離されます。そのため、開発者は多くの場合、それを非表示または無効にし、成功基準2.4.7に違反します。

フォーカス矩形1

フォーカス矩形1

図focus_rec1.pngの説明

フォーカス矩形2

フォーカス矩形2

図focus_rec2.pngの説明

上の2つのスクリーンショットでフォーカス・ポイントを見つけます。

最初のスクリーンショットFocus Rectangle 1は、フォーカスが正しいことを示すページを表しています。フォーカス・インジケータは、ページの左上にある「概要」タブを囲むため、非常に明白です。2つ目のスクリーンショットFocus Rectangle 2は、「概要」タブを中心としたフォーカスがないことを示しています。

「概要」ページでフォーカス可能な最初のいくつかのコンポーネントをナビゲートしながら、フォーカス四角形を確認します。

  1. アプリケーションがまだ実行されていない場合は、ACCLearningPathフォルダに移動して起動します。

    $ ojet serve

  2. ブラウザでアプリが開いたら、<Ctrl+L>を押してアドレス・バーにフォーカスを設定し、<Tab>を押してナビゲーションのスキップ・リンクにフォーカスを移動します。

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

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

  5. <down arrow>を押してナビゲーション・メニューの「リソース」にフォーカスを移動し、<Enter>を押して「リソース」ページをロードします。

    「リソース」ページ

    図resources_page.pngの説明

  6. <Tab>を押して、「Oracle JETメイン・サイト」リンクにフォーカスを移動します。

    フォーカス位置の明確な表示がないことに注意してください。「リソース」ページに成功基準2.4.7が失敗します。

    次の手順では、WCAG標準に準拠するために、不在のフォーカス矩形の問題を修正します。

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

  8. Oracle JETメイン・サイトのリンクを見つけます。

    <li><a style="outline-width:0"
   href="https://www.oracle.com/webfolder/technetwork/jet/index.html"
   target="_blank">Oracle JET Main Site</a>
</li>

    style属性の"outline-width:0"を"outline-width:3"に変更します。

    <li><a style="outline-width:3"
   href="https://www.oracle.com/webfolder/technetwork/jet/index.html"
   target="_blank">Oracle JET Main Site</a>
</li>

  9. resources.htmlを保存して閉じます。

    ファイルは resources-html.txtのようになります。

  10. 前述のステップ2から6を繰り返して、フォーカス矩形が表示されるようになったことを確認します。

タスク3: 意味のあるタブ順序の検証

キーボードのみのテストの次の部分には、ユーザーがタブを移動するページの構成が含まれます。

フォーカス順序は、図でよく理解できます。ユーザーがページ内を移動するとき、フォーカス位置はランダムではありません。ページの一方の側からもう一方の側に移動せず、再度戻ります。期待どおり論理的に移動します。

前の「ビジュアル・フォーカスの存在の確認」タスクで、ページのバナーを介してフォーカスが予想される順序でどのように移動したかを確認しましたが、「リソース」ページ自体は、よりランダムなタブ順序を示すようにコーディングされています。

  1. 実行中のアプリケーションで、<Ctrl+L>を押してアドレス・バーにフォーカスを設定します。

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

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

  4. <Tab>を押して、メイン・ナビゲーション・メニューの「概要」にフォーカスを移動します。

  5. <Tab>を押して、ページの本文にある「Oracle JETメイン・サイト」リンクにフォーカスを移動します。

  6. <Tab>を押します。Focusは、Oracle JET開発者ガイドに移動する必要がありますが、かわりにOracle JETクックブック・リンクに移動します。

    『Oracle JET開発者ガイド』リンクは、成功基準2.4.3に違反するタブ順序ではありません。

    ステップ7から11では、『Oracle JET開発者ガイド』リンクをタブ順序の正しい位置に戻すために必要な方法について説明します。ステップ12から16は、修正が機能したことを確認する方法を示しています。

  7. コード・エディタで、resources.htmlファイルの「Oracle JET開発者ガイド」リンクを見つけます。

    <li><a tabindex="-1"
   href="https://docs.oracle.com/en/middleware/developer-tools/jet/13/books.html"
   target="_blank">Oracle JET Developer's Guide</a>
</li>

    tabindex="-1"属性は、このリンクをページのタブ順序から完全に取り出します。

  8. tabindex属性の値を0に変更して、ページのタブ順序でリンクを適切な場所に戻します。

    <li><a tabindex="0"
   href="https://www.oracle.com/pls/topic/lookup?ctx=jetlatest&id=OJACC"
   target="_blank">Oracle JET Developer's Guide</a>
</li>

  9. ファイルを保存して閉じます。ブラウザの「リソース」ページが新しいコンテンツで自動的にリフレッシュされます。

  10. アドレスバーにフォーカスを設定するには、<Ctrl+L>キーを押します。

  11. <Tab>を3回押して、ナビゲーション・メニューの「概要」にフォーカスを移動します。

  12. <Tab>を押して、「Oracle JETメイン・サイト」リンクにフォーカスを移動します。

  13. <Tab>を押して、『Oracle JET開発者ガイド』リンクにフォーカスを移動します。

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

    ページ上のフォーカス可能なエレメントを全て移動したら、プロセスを元に戻します。ページのタブを後方にシフトすると、パスが予期せず変化したり、新しい要素が表示される、または一部の要素が消える場合があります。

  15. <Shift+Tab>を使用して、ページ内を逆方向にナビゲートする際に意味のある順序がtrueであることを確認するために、下位から上位に移動します。

タスク4: コントロールとの相互作用

このチュートリアルで使用するコントロールの多くは、Oracle JET固有のコントロールです。Oracle JETの機能は、コンポーネントがすでに組み込まれているキーボードのみのアクセシビリティで設計されていることです。Oracle JETを使用する開発者は、Oracle JETクックブックからコンポーネントを直接コピーして所定の場所にドロップでき、結果のコードにアクセスできます。

たとえば、標準HTMLコンポーネントと対話するための一般的なキーストロークの簡単なリストを次に示します。

ノート: ナビゲーション・メニュー、タブ・バー、ラジオ・グループ、類似のグループ・コントロールなどの一部のコントロールでは、コントロール内をタブ・インしてから、矢印キーを使用して移動する必要があります。

実行中のスタータ・アプリケーションを使用して、複数のOracle JETコンポーネントを操作します。

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

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

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

    <oj-menu-button>要素のキーボード・ドキュメントに従って、<Space>、<Enter>または<down arrow>を押すとメニューが開き、<Escape>を押すとメニューが閉じます。

  4. <Space>を押して、ユーザー・メニューを展開します。フォーカスが「プリファレンス」に移動します。

  5. <down arrow>を押して、メニュー・アイテムのリストを下に移動します。

  6. <Escape>を押してユーザー・メニューを閉じます。

  7. <Tab>を押します。Focusは、ユーザー・メニューのすぐ下にあるメイン・ナビゲーション・メニューの「概要」に移動します。

    各Oracle JETコンポーネントの特定のキーストロークの詳細は、Oracle JETキーボードおよびジェスチャ・ガイドを参照してください。

タスク5: キーボードトラップの特定

このチュートリアルの最初に導入された最後のトピックは、キーボードトラップと呼ばれる概念です。キーボード・トラップは、ユーザーが<Tab>、<Shift+Tab>またはいずれかの矢印キーを使用してページの要素からフォーカスを移動できない場合に発生します。

キーボードトラップによって、ページ全体がキーボード専用ユーザーに対して使用できなくなります。キーボードトラップの一般的な解決策は、アプリケーションを再起動することです。

実用化しましょう!

このチュートリアルのこのセクションでは、キーボードのみのテスト方法の詳細な例を示します。

アプリケーションの「組織」ページをテストするときに、フォーカス位置が常に表示され、フォーカスが予測可能なパターンで移動することを確認します。

テストするページには、「概要」ページの「組織」タブからアクセスします。

「組織」ページ

図org_page.pngの説明

Starterアプリを使用して、「組織」ページのキーボード・テストを実行します。

  1. アプリケーションの「リソース」ページで、<Ctrl+L>を押してアドレス・バーにフォーカスを設定します。

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

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

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

    <oj-navigation-list>要素のキーボード・ドキュメントに従って、<up arrow>および<down arrow>キーを使用して、メイン・ナビゲーション・メニューの項目をナビゲートします。

  5. <Enter>を押して「概要」を選択します。

  6. <Tab>を押してから<right arrow>を押して、タブ・バーの「組織」タブにフォーカスを移動します。<Enter>を押して「組織」ページをロードします。

    <oj-tab-bar>要素のキーボード・ドキュメントに従って、矢印キーを使用してタブ・バー内を移動します。

  7. <Tab>を押して、フォーカスをツリー・ビューに移動します。最初のフォーカス可能なアイテムである「会計」ノードにフォーカスします。

    <oj-tree-view>要素のキーボード・ドキュメントに従って、<up arrow>および<down arrow>キーを使用してツリー・ビューのノード間を移動します。

  8. <right arrow>を押してツリーの「会計」グループ・ノードを展開し、<left arrow>を押してグループ・ノードを縮小します。

  9. <down arrow>を2回押して、RESEARCHグループ・ノードの従業員JONESにフォーカスを移動します。その後、<Enter>を押して選択します。

    従業員の詳細を示すフォームがページの右側に表示されます。

    従業員詳細フォームのある「組織」タブ

    図org_page_form.pngの説明

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

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

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

  13. <Tab>を押して「入社日」フィールドにフォーカスを移動し、展開されたカレンダ・グリッドを表示します。

    <oj-date-picker>要素のキーボード・ドキュメントに従って、矢印キーを押してカレンダ・グリッド内の日付フォーカスを変更します。

  14. <down arrow>を押し、矢印キーを使用して、展開された日付ピッカーの日付にフォーカスを移動します。その後、<Enter>を押して日付を選択します。

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

    <oj-input-number>要素のキーボード・ドキュメントに従って、<up arrow>を使用して給与値を増やし、<down arrow>を使用して給与値を減らします。

  16. <Tab>を押して、「マネージャID」フィールドにフォーカスを移動してみてください。

    フォーカスが「給与」フィールドに移動した後、<Tab>または<Shift+Tab>を押してもフィールドからフォーカスが移動しなかったことに気付きましたか。このフィールドにはキーボードトラップがあります。コードを修正しないと、トラップを終了する唯一の方法はページをリフレッシュすることです。

タスク6: トラップの取り外し

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

  2. id="salary"の<oj-input-number>要素を見つけます。

       
<oj-input-number id="salary"
   label-hint="Salary"
   value="{{empDetails().sal}}"
   min="0"
   step="1"
   on-blur="[[setKeyTrap]]">
</oj-input-number>

    キーボード・トラップの原因となるon-blur属性を削除します。

       
<oj-input-number id="salary"
   label-hint="Salary"
   value="{{empDetails().sal}}"
   min="0"
   step="1">
</oj-input-number>

  3. ファイルを保存します。次に、前の Identify a Keyboard Trapタスクの手順を繰り返して、キーボードトラップが削除されていることを確認します。

  4. 「マネージャID」フィールドに到達したら、<Tab>を押して「ジョブ」ラジオ・ボタンにフォーカスを移動します。

    <oj-radioset>要素のキーボード・ドキュメントに従って、<up arrow>を使用してグループ内の前のボタンを選択します。<down arrow>を使用して、グループ内の次のボタンを選択します。

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

  6. プロセスを元に戻します。<Shift+Tab>を押して「ジョブ」ラジオ・ボタンに戻ります。引き続き<Shift+Tab>を押して、ユーザー・メニューのjohn.hancock@oracle.comのページに戻ります。

Oracle JETコンポーネント内で使用またはナビゲートするために必要なキーストロークに関する質問がある場合は、Oracle JETキーボードおよびジェスチャー・ガイドを参照してください。

キーボードのみのテスト・フェーズが完了しました。この学習パス内の最後のチュートリアルであるOracle JETアプリケーションでのスクリーン・リーダー検証の実行に進みます。

その他の学習リソース

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

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