presentational-children-focusable-absent

子要素がプレゼンテーショナルになるロールに、フォーカス可能なコンテンツを含めてはいけません

automaticWCAG 4.1.2 (A)確度:high重大度:seriousrobust

ロールによって子要素がプレゼンテーショナルになる要素(button、checkbox、img、option、radio、slider、switch、tabなど)が、タブストップを持つ子孫要素を含んでいないことを確認します。

適用範囲:セマンティックなロールが、子要素がプレゼンテーショナルであると定義されているWAI-ARIAロール(button、checkbox、img、menuitemcheckbox、menuitemradio、meter、option、progressbar、radio、scrollbar、separator、slider、switch、tab、およびDPUB-ARIA/Graphics-ARIAモジュールで同じ特性を継承しているdoc-pagebreakとgraphics-symbol)のいずれかである要素に適用されます。ロールは明示的なもの(role="tab")でも、ネイティブのもの(<button>、<meter>、<progress>、<option>)でも構いません。ElementInternalsによってこれらのロールのいずれかを与えられたカスタム要素(this.attachInternals().role)も、別のロールを示すrole属性がなければ、そのロールを持つネイティブ要素と同じように扱われます。

期待される結果:要素のどの子孫要素も、順次フォーカスナビゲーションの対象になっていません。子要素をプレゼンテーショナルにする仕組みはすべての子孫要素をアクセシビリティツリーから取り除くため、タブストップを持ったままの子孫要素は、読み上げるロールも名前もない状態でフォーカスを受け取ります。

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

  • role:要素の子をプレゼンテーショナルにしているロールです。
  • focusableElements:要素の内側で見つかった各タブストップのタグ名で、タブストップごとに1項目、文書順です。

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

例

pass
<button>Save</button>

フォーカス可能でもあるプレゼンテーショナルなコンテンツはありません。

fail
<button>
Save
<span role="button" aria-label="save options" aria-expanded="false" tabindex="0">▼</span>
</button>

入れ子になった<span>が、ボタンのプレゼンテーショナルなコンテンツの中で、独自のインタラクティブなロールとタブストップを持っています。

ソースコードを見る