mouse-only-event-handlers

ポインター専用のイベントハンドラーには、キーボードで操作できる同等の手段を用意することを推奨します

manualWCAG 2.1.1, 2.1.3 (AAA)確度:low重大度:moderateoperable

ポインター専用のイベントハンドラー(onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onmousemove、onmouseenter、onmouseleave。インラインのもの、またはリスナーフックを使う場合はスクリプトから追加されたもの)を持ち、キーボードで操作できる同等の手段(onkeydown/onkeyup/onkeypress/onfocus/onblur)を持たない要素を検出し、手動レビューに回します。

適用範囲:空でない値を持つポインター専用のインラインイベントハンドラー属性(onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onmousemove、onmouseenter、onmouseleave)を1つ以上持つか、ページがリスナーフック(listenerHookScript)を実行している場合はそれらのいずれかのタイプのリスナーがスクリプトから(addEventListenerまたはon…プロパティで)追加されており、かつ対象となる到達可能な要素(非表示/aria-hidden/display:noneでないもの)です。

期待される結果:要素が、キーボードで到達できるインラインハンドラーも少なくとも1つ持っています。onkeydown、onkeyup、onkeypress(キーボードイベントの直接の相当物)、またはonfocus/onblur(ホバーで起動する動作の標準的な代替。WCAG達成方法G90によれば、focus/blurはmouseover/mouseoutに対応するキーボードで操作可能なものです)です。ハンドラーに到達できるのは、キーボードイベントがそこに届く場合だけです。onfocus/onblurは要素自身がフォーカスを受け取れる場合、キーのハンドラーは要素またはその子孫のいずれかがフォーカスを受け取れる場合です(キーイベントはバブリングし、フォーカスイベントはしません)。そうでなければ、要素のマウスで操作する動作(ホバーのツールチップ、カスタムのドロップダウン、ドラッグ操作)をキーボードだけのユーザーが起動する方法はなく、キーボードのハンドラーがないのか実行できないのかを示す理由とともに検出されます。リスナーフックを使う場合は、スクリプトから要素に追加されたkey、focus、blurのリスナーも、対応するインラインハンドラーと同じように数えます。focusin/focusoutのリスナーも同様です。これらはキーイベントと同じく、フォーカスされた子孫に対しても発生します。

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

  • mouseAttrs:要素が持つポインター専用のハンドラーです。各項目は属性名です(例:onmouseover)。スクリプトから追加されたリスナーは、そのタイプに対応する属性名で示します。
  • keyboardAttrs(実行できないハンドラー、MOUSE_ONLY_HANDLER_KEYBOARD_EQUIVALENT_NOT_FOCUSABLE):要素が持つキーボードのハンドラー属性で、キーボードイベントが届きません。各項目は属性名です(例:onfocus)。

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

例

can't tell
<div onmouseover="show()" onmouseout="hide()">Hover-only tooltip trigger</div>

onmouseover/onmouseoutに対応するonfocus/onblurがないため、キーボードのユーザーはこの動作を起動できない可能性があります。

can't tell
<div onmouseover="show()" onfocus="show()">Menu</div>

onfocusハンドラーは実行されることがありません。<div>はフォーカスを受け取れないためです。

n/a
<div onmouseover="show()" onmouseout="hide()" onfocus="show()" onblur="hide()" tabindex="0">Hover + focus pair</div>

各マウスハンドラーに、キーボード操作に相当するフォーカスハンドラーが対になっています。

確認方法

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

MOUSE_ONLY_HANDLER_KEYBOARD_EQUIVALENT_NOT_FOCUSABLE

  1. レポートに示された要素を見つけ、ホバーまたはクリックして、そのマウスのハンドラーが何をするかを控えてください。
  2. Tabキーでページのその部分を移動し、フォーカスが要素またはその内側のものに移ることがあるか観察してください。
  3. 移る場合は、Enter、Space、矢印キーを試し、マウスの操作と比べてください。
  4. ここでキーボードで操作できない場合は、マウスで行えることを、ページの別の場所にあるボタンやメニュー項目など、キーボードだけで使える別の方法で行えるか確認してください。マウスで行えることをすべて行える場合にだけ、それを認めます。

満たす場合:要素(またはその内部)がキーボードフォーカスを受け取り、キーやフォーカスのハンドラーでマウスと同じ結果になるか、マウスで行えることをキーボードだけで使える別の方法で行えるか、マウスの操作は見た目だけのものです。

満たさない場合:フォーカスが要素に届かず、マウスで行えることを別の方法でもキーボードで行えないため、WCAG 2.1.1を満たしません(F54)。

MOUSE_ONLY_HANDLER_NO_KEYBOARD_EQUIVALENT

  1. レポートに示された要素を見つけ、そのマウスのハンドラー(onmouseoverやondblclickなど)を控えてください。
  2. マウスで要素にホバー、クリック、またはダブルクリックし、何が起こるか(メニューが開く、ツールチップが表示される、項目が移動する)を控えてください。
  3. ページを再読み込みし、キーボードだけを使って、Tabキーで要素(またはそれを囲むコントロール)に移動し、Enter、Space、矢印キー、Escapeを試してください。
  4. 同じ結果になるか、またはキーボードで到達できる別のコントロールが同じ機能を提供しているか確認してください。

満たす場合:マウスの操作は視覚効果を加えるだけであるか、フォーカス時またはキー操作でキーボードでも同じ結果が得られます。

満たさない場合:マウスで行えること(メニューを開く、情報を表示する、項目を移動する)がキーボードでは行えないため、WCAG 2.1.1を満たしません(F54)。

ソースコードを見る