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

はじめに

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

Webコンテンツ・アクセシビリティ・ガイドライン(WCAG)2.2では、アクセス可能なWebアプリケーションを作成するための成功基準の多くについて概説しています。このチュートリアルでは、キーボードのみの使用法に対応する条件について説明します。

キーボードのみのアクセス可能なアプリは、移動が制限された人やマウスを操作できない人のための代替入力デバイスで使用できます。人がキーボードを使えるようになると、インターネットがすぐに使えます。

目的

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

前提条件

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

目視検査では、アクセス可能なページの構造および基本機能の概要が提供されます。キーボードのみのテストは、手動のアクセシビリティ・テストの中心にあります。これにより、開発者は、無効なユーザーの視点からアプリと対話できます。このチュートリアルで取り上げるWCAG 2.2達成基準のサブセットには、いくつかの具体的な概念が含まれています。

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

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

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

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

タスク2: ビジュアル・フォーカスの存在の確認

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

Webアプリケーションをタブ・スルーすると、フォーカス位置を識別する表示インジケータが常に表示されます。通常、インジケータは長方形です。フォーカス長方形を無効にすると、この基準が失敗します。

アプリ開発者は、自分が書いたアプリやプログラムに誇りを持っています。その目的は、機能を視覚的に魅力的なエクスペリエンスと統合することです。フォーカス長方形は、多くの場合、設計から妨げられます。したがって、開発者はそれを隠したり無効にしたり、達成基準2.4.7に違反したりすることがよくあります。

フォーカス長方形1

フォーカス長方形1

フォーカス長方形2

フォーカス長方形2

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

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

「はじめに」ページの最初の数個のフォーカス可能なコンポーネントをナビゲートする際のフォーカス長方形を確認します。

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

    $ ojet serve

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

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

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

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

    「リソース」ページ

  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://www.oracle.com/pls/topic/lookup?ctx=jetlatest&id=JETDG"
   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=JETDG"
   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>を押します。ユーザー・メニューのすぐ下にあるメイン・ナビゲーション・メニューの「概要」にフォーカスが移動します。

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

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

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

キーボードトラップは、キーボードのみのユーザーに対してページ全体を使用不可にします。キーボードトラップの一般的な解決策は、アプリを再起動することです。

実践しよう!

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

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

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

組織ページ

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

  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>を押して選択します。

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

    「従業員詳細」フォームを含む「組織」タブ

  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キーボードおよびジェスチャ・ガイドを参照してください。

キーボードのみのテスト・フェーズが完了しました。

次のステップ

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

このチュートリアルは、モジュール「アクセシビリティの問題の識別」の一部です。

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

その他の学習リソース

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

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