フォーカス可能なコンテンツを含むフレームにはtabindex=-1を設定しないでください。
Accessibility testing for dev teams - No experience required
Compliance Data & Impact
Disabilities Affected
- 盲目
- 運動・器用さ
Standard(s)
- WCAG 2.1 (A)
- WCAG 2.0 (A)
- WCAG 2.2 (A)
- Trusted Tester
- EN 301 549
WCAG 達成基準 [WCAG 2.1 (A)]
- 2.1.1: Keyboard
WCAG 達成基準 [WCAG 2.0 (A)]
- 2.1.1: Keyboard
WCAG 達成基準 [WCAG 2.2 (A)]
- 2.1.1: Keyboard
Trusted Tester Guidelines
- 4.A: All functionality can be accessed and executed using only the keyboard.
修正方法
正しいマークアップソリューション
frame-focusable-content ルールは、tabindexのないフレーム、または負でないtabindexを持つフレームには適用されません。
<iframe
srcdoc="<button>Click me</button>"
tabindex="0"
title="My frame is an iframe"
></iframe>
フレームがキーボード ナビゲーションやキーボード スクロールを必要としない場合、iframeでtabindex="-1" を使用できます。
<iframe
srcdoc="<p>Hello world</p>"
tabindex="-1"
title="My frame is an iframe"
></iframe>
いくつかのシナリオでは、フレーム上の負のtabindexによってアクセシビリティの問題が発生しない場合もありますが、iframeのコンテンツを更新した後に、意図しないアクセシビリティの問題が発生する可能性が高くなります。したがって、フレーム上で負のtabindexを使用することは避けた方がよいでしょう。
誤ったマークアップソリューション
frame-focusable-content 次のマークアップ パターンはルールに違反します。
<iframe
srcdoc="<button>Click me</button>"
tabindex="-1"
title="My frame is an iframe"
></iframe>
なぜ重要なのか
フレームに負のtabindexがある場合、ブラウザはそのフレーム内のコンテンツにフォーカスをリダイレクトできなくなります。これにより、キーボード ナビゲーションですべてのコンテンツがスキップされ、フレームがスクロール可能な場合は、キーボードでフレームをスクロールできる要素にフォーカスが到達できなくなります。
ルールの説明
%lt;frame%gt; 要素および %lt;iframe%gt; フォーカス可能なコンテンツを持つ要素には tabindex="-1"禁止事項があってはなりません。
仕組みについて (簡単に言うと)
<frame> 全ての要素および <iframe> 負のtabindex番号を持つ要素（ tabindex="-1" など）をすべてチェックします。このようなフレームがある場合は、フォーカス可能な要素が含まれていないこと、またはフォーカス可能な要素を含むネストされたフレームがないことを確認します。
リソース
Deque University コースのページ (要登録)
関連するコース情報はありません。
axe 4.10 ルールの一覧 を参照する
この情報は役に立ちましたか?
あなたの回答は次のとおりです。
フィードバックが提出された日付/時刻: