aria-hidden-focus
ARIAで隠された要素をフォーカス可能にしてはいけません
aria-hidden="true"の要素がフォーカス可能でなく、フォーカス可能な子孫も含まないことを確認します。
適用範囲：aria-hidden="true"を持つ要素に適用されます。値は大文字と小文字を区別せず、前後の空白を無視して読み取ります（ブラウザーでもaria-hidden="TRUE"はコンテンツを隠します）。
期待される結果：aria-hidden="true"を持つ要素自体がフォーカス可能であってはならず、aria-hidden="true"のサブツリー内にフォーカス可能な要素が存在してはなりません。
検出結果が報告する内容：
metrics.focusableTotal：隠された要素が含むフォーカス可能な要素の数です。要素自体がフォーカス可能であれば、それも数えます。metrics.focusableDescendants：そのうち、要素の内側にあるものの数です。metrics.rootIsFocusable：隠された要素自体がフォーカスを受け取れるかどうかです。offenders：フォーカス可能な要素を最大5つ挙げたものです。各項目には、そのtag、tabindex、href（リンクの場合）、type（inputの場合）、visibilityHintsが入ります。metrics.offendersCapturedは挙げられた数です。metrics.visibilityHints：フォーカス可能な要素が、フォーカスを受け取れるまま見えなくされている方法で、opacityZero、offscreen、clipped、zeroSizeOverflowHiddenです。このような要素は、目の見えるキーボードユーザーには見えないフォーカスの停止位置になります。metrics.modalOpen：ページの別の場所でモーダルダイアログが開いていたかどうかです。開いていた場合、検出結果はレビュー対象になります。runtimeProbe：唯一のフォーカス可能な要素にフォーカスを当てたときに、フォーカスが隠された要素の外へ直接移った場合を除いてnullです。移った場合は、redirected: true、フォーカスの移動先の要素のタグとid（redirectedToTag、redirectedToId）、フォーカスが通過した要素を示すfocusTraceが入ります。このようにフォーカスを先へ渡す隠れたフォーカス用の番兵要素は、レビュー対象として報告されます。
これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。
例
<div aria-hidden="true"><p>Decorative text</p></div>
隠されたサブツリー内にフォーカス可能な要素がないため、支援技術から隠しても、何も伝わらないフォーカス位置は生じません。
<div aria-hidden="true"><a href="/x">Link</a></div>
aria-hiddenでアクセシビリティツリーから除外されているのに、リンクがタブ順序に残っています。
確認方法
このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。
ariaHiddenFocusable_modalOpen_needsReview
- ページで開いているモーダルダイアログの背後にある、レポートに示された要素を見つけ、その中でフォーカスを受け取れるものを控えてください。
- ダイアログを開いたままTabキーを何度か押し、次にShift+Tabを押して、フォーカスがどこへ移るかを見てください。
- フォーカスがダイアログの外に出たように見えたら、開発者ツールのコンソールでdocument.activeElementを確認してください。
満たす場合：フォーカスは開いているダイアログの中にとどまり、背後の隠れた内容に届くことはありません。
満たさない場合：フォーカスがダイアログの背後のaria-hidden="true"の中の内容に届き、そこではスクリーンリーダーが何も読み上げないため、WCAG 4.1.2を満たしません。
ariaHiddenFocusable_runtimeRedirect_needsReview
- レポートに示された要素のすぐ手前をクリックし、フォーカスが届くはずのところまでTabキーを押してください。
- フォーカスがどこに移るかを見て、開発者ツールのコンソールでdocument.activeElementを確認してください。
- 後ろのコントロールからShift+Tabを押し、フォーカスが隠れた要素で止まるか、そのまま通り過ぎるかを確認してください。
満たす場合：フォーカスが隠れた要素にとどまることはなく、フォーカストラップの番兵要素と同じように、表示されているコントロールへそのまま移ります。
満たさない場合：フォーカスがaria-hidden="true"の中の要素にとどまることがあり、そこではスクリーンリーダーが何も読み上げないため、WCAG 4.1.2を満たしません。