widget-keyboard-focusable

ウィジェットにはキーボードで到達できることが推奨されます

manualWCAG 2.1.1 (A)確度:medium重大度:seriousoperable

フォーカスを受け取れないか、タブ順序の外にあるウィジェットのロールを持つ要素と、タブストップのない複合ウィジェットを検出し、手動レビューに回します。

適用範囲:ページが表示している要素のうち、aria-activedescendantを持つものと、role属性またはカスタム要素のElementInternalsによるロールが、ユーザーが操作するウィジェットであるものです。

  • 単一のウィジェット:button、link、checkbox、switch、radio、slider、spinbutton、textbox、searchbox、combobox。
  • 複合ウィジェット:grid、treegrid、listbox、menu、menubar、tree、tablist、toolbar、radiogroup。

次のものは対象外です。

  • アクセシビリティツリーの外にある要素(aria-hidden="true")、または無効な要素(disabled、または要素自身か祖先のaria-disabled="true")。操作する対象を提供しません。
  • 複合ウィジェットの中にあるウィジェット、またはフォーカスを受け取れ、aria-activedescendantが項目を指している要素の中にあるウィジェット(idで、またはスクリプトからariaActiveDescendantElementとして設定したもの。空の属性は何も指しません)。複合ウィジェットは項目の間でフォーカスを移す(ロービングtabindex)か、フォーカスを保ったままアクティブな項目を指すため、代わりに外側の要素を判定します(サブメニューではそのmenubar)。
  • インラインのonclick、またはリスナーフック(listenerHookScript)が確認したclickのリスナーを持つ要素。これはclick-handler-keyboard-operableが判定します。

期待される結果:キーボードのユーザーがTabキーでウィジェットに到達できます(WCAG 2.1.1)。読み取るのはマークアップ上のフォーカス可能性だけです。スクリプトは、マークアップに現れない方法でフォーカスを移したりキーを処理したりする可能性があるため、検出結果は確認の依頼であり、failになることはありません。

  • タブ順序に含まれるか、タブ順序に含まれる要素を含む単一のウィジェットはpassです。
  • フォーカスを受け取れず、受け取れるものも含まない単一のウィジェット:cantTell(WIDGET_NOT_FOCUSABLE)。キーボードのユーザーが、別の方法でそれ、またはその機能に到達できるかを確認してください。
  • スクリプトからだけフォーカスを受け取る単一のウィジェット(tabindex="-1"):cantTell(WIDGET_NOT_IN_TAB_ORDER)。Tabキーでは到達しません。スクリプトがフォーカスをそこへ移すか、その機能がほかで提供されているかを確認してください。
  • 複合ウィジェットは、タブ順序に含まれる(aria-activedescendantがアクティブな項目を指していてもいなくても)か、タブ順序に含まれる要素を含んでいればpassです。ほかのどの要素もaria-controlsやaria-ownsで示しておらず(ボタンやcomboboxが開くポップアップは、それらからフォーカスを受け取ります)、そのどちらにも当てはまらないもの:cantTell(COMPOSITE_NO_TAB_STOP)。
  • aria-activedescendantを持つ、どのロールの要素でも、フォーカスを受け取れない場合:cantTell(ACTIVEDESCENDANT_HOST_NOT_FOCUSABLE)。アクティブな項目が読み上げられるのは、その要素がフォーカスを持っている間だけです。そうした要素は中のウィジェットのフォーカスを管理しないため、中のウィジェットはそれぞれ単独で判定します。

検出結果が報告する内容:

  • role:要素のロールです。
  • focusable:要素自体がフォーカスを受け取れるかどうかです。
  • scriptFocusable:複合ウィジェットの場合、その中にスクリプトからフォーカスを受け取る要素(tabindex="-1")があるかどうかです。

これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。

例

pass
<div role="button" tabindex="0">Save</div>

カスタムのボタンはタブ順序に含まれています。

can't tell
<div role="button">Save</div>

要素はボタンであると示していますが、Tabキーでは到達しません。キーボードのユーザーが、別の方法でそれ、またはその機能に到達できるかを、人が確認します。

確認方法

このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。

ACTIVEDESCENDANT_HOST_NOT_FOCUSABLE

  1. レポートに示された要素を見つけてください。aria-activedescendantを使ってアクティブな項目を指しています。
  2. キーボードだけを使ってウィジェットを開くか到達し(たとえば検索ボックスに入力し)、ほかのものではなくその要素がフォーカスを受け取るかを観察してください。
  3. スクリーンリーダーを起動した状態で矢印キーを押し、アクティブな項目がそれぞれ読み上げられるか聞いてください。
  4. この方法で項目に到達できない場合は、テキスト欄に値を入力するなど、同じ選択をキーボードだけで使える別の方法で行えるか確認してください。すべての選択肢をその方法で選べ、スクリーンリーダーが読み上げる場合にだけ、それを認めます。

満たす場合:要素がフォーカスを受け取り、矢印キーで移動するとスクリーンリーダーがアクティブな項目を読み上げるか、同じ選択をキーボードだけで使える別の方法で行え、スクリーンリーダーがそれを読み上げます。

満たさない場合:要素がフォーカスを受け取れないため、項目間を移動しても何も読み上げられないか項目に到達できず、別の方法でもキーボードで選択できないため、WCAG 2.1.1を満たしません。

COMPOSITE_NO_TAB_STOP

  1. レポートに示されたウィジェット(menu、listbox、tablist、toolbar、grid、またはtree)を見つけてください。
  2. そのすぐ手前をクリックしてTabキーを押し、フォーカスがウィジェットまたはその項目のいずれかに入るか観察してください。
  3. ポップアップであれば、それを開くボタンからキーボードで開き、フォーカスがその中に移るか確認してください。
  4. 中に入ったら、矢印キーで項目間を移動できることを確認してください。
  5. フォーカスが入らない場合は、ページの別の場所に同じ選択肢がリンクやボタンとしてあるなど、ウィジェットで行えることをキーボードだけで使える別の方法で行えるか確認してください。ウィジェットのすべての選択肢をその方法で使える場合にだけ、それを認めます。

満たす場合:Tabキー(または開くボタン)でウィジェットにフォーカスが入り、矢印キーで項目間を移動できるか、項目で行えることをすべてキーボードだけで使える別の方法で行えます。

満たさない場合:キーボードではウィジェットやその項目にフォーカスが入らず、項目で行えることを別の方法でもキーボードで行えないため、WCAG 2.1.1を満たしません。

WIDGET_NOT_FOCUSABLE

  1. レポートに示されたウィジェットを見つけ、クリックまたはタッチしたときに何をするかを控えてください。
  2. そのすぐ手前をクリックしてからTabキーを押し、フォーカスがそこに移ることがあるか観察してください。
  3. フォーカスが移らない場合は、同じことを行う、キーボードで到達できる別のコントロールを探してください。
  4. 要素が何もしない場合は、ロールが誤っている可能性があります。その場合はそのことを控えてください。

満たす場合:ウィジェットはキーボードフォーカスを受け取ってキーボードで機能するか、キーボードで到達できる別のコントロールが同じ機能を提供しています。

満たさない場合:ウィジェットにキーボードで到達または使用できず、その機能がほかで提供されていないため、WCAG 2.1.1を満たしません(F42)。

WIDGET_NOT_IN_TAB_ORDER

  1. レポートに示されたウィジェットを見つけ、それがいつ現れるか(たとえばメニューやダイアログが開いたとき)を控えてください。
  2. キーボードだけを使ってページのその部分を開くか到達し、スクリプトがウィジェットにフォーカスを移すか、矢印キーでそこに到達できるかを観察してください。
  3. フォーカスが届かない場合は、同じことを行う、キーボードで到達できる別のコントロールを探してください。

満たす場合:必要なときにスクリプトまたは矢印キーによってフォーカスがウィジェットに移るか、その機能がほかで提供されています。

満たさない場合:Tabキーでも矢印キーでもウィジェットに到達できず、ほかにその機能を提供するものもないため、WCAG 2.1.1を満たしません。

ソースコードを見る