focus-order-semantics
タブ順序に追加された要素は対話的なセマンティクスを持つことが推奨されます
tabindex >= 0を持ち、明示的なロールが対話的でない構造ロールや文書ロール(例:heading、list、note、presentation)である要素を、手動レビューの対象として報告します。
適用範囲:明示的なtabindexが0以上で(タブ順序に含まれる)、かつ明示的なrole属性が、明らかに対話的でない構造ロールや文書ロールを厳選した集合のいずれかに解決される要素。この属性はフォールバックのリストです。既知で抽象的でない最初のトークンを大文字と小文字を区別せずに読んだものがロールになります(role="foo HEADING"は見出し、role="foo"はロールなし)。
期待される結果:意図的にタブ順序に置かれた要素は、なぜフォーカス可能なのかを伝えるべきです。heading、list、note、presentationのようなロールでは、支援技術が読み上げる対話的なセマンティクスがありません。そこにたどり着いたキーボードユーザーは、それを操作すると(何かが起こるとして)何が起こるのか手がかりがなく、混乱します。
検出結果が報告する内容:
tabindex:要素のtabindexで、数値(0以上)です。role:要素が持つ、インタラクティブでないロールです。
これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。
例
<div role="heading" tabindex="0">Fake focusable heading</div>
見出しのロールには対話的な動作がないため、タブ移動可能にするのは一般的ではなく、確認する価値があります。
<div role="button" tabindex="0">Real custom button</div>
role="button"は対話的なロールなので、タブ移動可能なのは想定どおりです。
確認方法
このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。
TABBABLE_WITH_NON_INTERACTIVE_ROLE
- レポートに示された要素にフォーカスが届くまでTabキーを押してスクリーンリーダーで聞くか、アクセシビリティペインでそのロールを読んでください。
- なぜフォーカス可能なのかを調べてください。スクロールする(コンテンツがはみ出し、矢印キーでスクロールする)のか、それともクリックやEnter、Spaceで何かを行うのかを確認します。
- コントロールとして機能する場合は、読み上げられるロールと実際の動作を比べてください。
満たす場合:要素は、キーボードの利用者がスクロールする必要があるスクロール可能な領域など、ロールが裏付ける理由でフォーカス可能であり、コントロールとしては機能しません。
満たさない場合:要素はコントロールとして機能する(開く、切り替える、移動する)のに、headingやlistなどの操作できないロールで読み上げられるため、キーボードの利用者にその働きが伝わりません。これはWCAG 4.1.2に関連するベストプラクティスを満たしていません。何もせずスクロールもしない場合は、不要なタブストップです。