presentation-role-conflict
プレゼンテーショナルなロールを、グローバルなARIA属性やフォーカス可能性と矛盾させてはいけません
role="presentation"/"none"(<img alt="">の暗黙のpresentationロールを含む)が、グローバルなARIA属性(aria-label、aria-hidden、aria-describedbyなど)やフォーカス可能性(tabindex/ネイティブ)と組み合わされていないことを確認します。
適用範囲:role属性がpresentationまたはnoneに解決される要素(既知のロールを指す最初のトークンを大文字と小文字を区別せずに照合するため、role="foo none"やrole="NONE"も該当します)、または自身の明示的なロールを持たない<img alt="">に適用されます(HTML-AAMでは、明示的なrole属性がまったくなくても、空のaltによって<img>は暗黙のpresentationロールを持ちます:img[alt=''], [role~="none" i], [role~="presentation" i])。
期待される結果:要素がWAI-ARIAのグローバルなステートやプロパティ(aria-label、aria-hidden、aria-describedby、aria-live、aria-currentなど。名前付けに関するものだけでなく、グローバル属性の全体)を持っておらず、かつフォーカス可能でもありません。WAI-ARIA仕様の「Presentational Roles Conflict Resolution」の節によれば、どちらかの条件が当てはまると、プレゼンテーショナルなロールは要素の暗黙のセマンティックなロールに「復元」されます。つまりpresentation/noneロールは何の知らせもなく機能しなくなり、要素をアクセシビリティツリーから隠すという作成者の明らかな意図に反する結果になります。
検出結果が報告する内容:
role:有効になっているプレゼンテーショナルなロールで、presentationまたはnoneです。独自のロールを持たない<img alt="">はpresentationを報告します。conflictingAttrs:要素が持つグローバルなARIA属性で、値は問いません。各項目は属性名です(例:aria-label)。要素がaria-hidden="true"を持つ場合や、競合しているのがフォーカス可能であることだけの場合は空です。focusable:要素がフォーカスを受け取れる場合にtrueです。フォーカスを受け取れることでも、ロールは元に戻ります。
これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。
例
<div role="presentation">Decorative</div>
presentationロールと一緒に使われている、矛盾する名前付けの属性はありません。
<div role="presentation" aria-label="Conflicting">Content</div>
role="presentation"は支援技術にこの要素を飛ばすよう求めていますが、aria-labelが名前を与えています。WAI-ARIAの矛盾解決の規則ではグローバル属性が優先されてpresentationロールは無視されるため、要素(とその名前)が予期せずツリーに戻ってきます。
確認方法
このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。
PRESENTATION_ROLE_CONFLICT
- レポートに示された要素を見つけてください。role="presentation"または"none"を持つか、alt=""のimgです。
- レポートに示された競合するaria-*属性と、要素がフォーカスを受け取れるとされているかを控えてください。
- 開発者ツールのアクセシビリティペインを開き、要素が実際に公開しているロールと名前を確認してください。
- 何が意図されていたかを判断してください。装飾的であればaria-*属性とフォーカス可能性を削除し、意味を持つのであればpresentationのロールを削除してください(または画像に実際の代替テキストを付けてください)。
満たす場合:要素は、グローバルなaria-*属性もフォーカスもない純粋に装飾的なものであるか、意図的に本来のロールを保っています。
満たさない場合:要素は隠すことが意図されていますが、aria-*属性やフォーカス可能性によってロールが戻るため、支援技術にはいずれにせよ公開されます(ベストプラクティス、WAI-ARIAのpresentationロールの競合解決)。