role-img-text-alternative-present
[role="img"/"graphics-symbol"/"graphics-document"]にはアクセシブルなテキストによる代替がある必要があります
role="img"、"graphics-symbol"、"graphics-document"を持つ要素が、aria-label、aria-labelledby、title属性、または(SVG要素の場合)子要素の<title>を使って、アクセシブルなテキストによる代替を提供していることを確認します。
適用範囲:アクセシビリティツリーに含まれ、role属性がimg、graphics-symbol、graphics-documentのいずれかに解決される要素(フォールバックのリストのうち既知のロールを指す最初のトークンを、大文字と小文字を区別せずに照合)に適用されます(ACT 23a2a8の「プログラムによって隠されている」という除外:要素または祖先のdisplay:none/visibility:hidden/aria-hidden="true"。フォーカス可能な要素やIDREFで参照される要素の例外はなく、それらはaria-hidden-focusとduplicate-id-ariaが個別に扱います)。ACT 7d6734に従い、<svg>のルートだけでなく、これらのロールのいずれかを持つあらゆる要素が対象です。例えば、通常の<svg>内にネストされた<circle role="graphics-symbol">です。<svg>要素自体はすべて、svg-text-alternative-presentの(ACTに準拠済みの)title/ARIAによる名前の処理に任せるため、名前のない<svg role="img">はそちらで1回だけ報告します。<img>タグは専用のルールがあるため、ここでは除外します。ElementInternalsによってこれらのロールのいずれかを与えられたカスタム要素(this.attachInternals().role)も、別のロールを示すrole属性がなければ対象です。それがその要素の既定のロールであり、ほかにそれを確認するルールはないためです。
期待される結果:対象となる各要素が、アクセシブルなテキストによる代替を持っています。
- 空でない値を持つaria-label、または
- 空でないテキストに寄与する既存の要素を1つ以上参照するaria-labelledby、または
- 空でないtitle属性(HTML-AAMにおける最後の手段としてのアクセシブルな名前の提供元)、または
- SVG名前空間の要素の場合は、子要素の中での位置にかかわらず、空でない直接の子要素の<title>(SVG-AAM独自の名前付けの仕組みで、<svg>ルートに限りません)。数に入るのは最初の<title>です。
検出結果が報告する内容:
ariaLabel:前後の空白を除いた要素のaria-labelです。ない場合はnullです。ariaLabelledby:前後の空白を除いた要素のaria-labelledbyのidリストです。ない場合はnullです。accessibleNameInfo(nameNotResolved):要素が最終的に持つアクセシブルな名前で、present、value、mechanism(名前の元。例:aria-labelledby)、flags(何が問題だったかについての注記。例:存在しないidへの参照を示すidref-missing)です。その他の検出結果ではnullです。
これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。
例
<span role="img" aria-label="Notifications"></span>
aria-labelがテキストによる代替を提供しています。
<span role="img">notifications</span>
明示的なrole="img"を持つ要素では、テキスト内容は名前の有効な提供元になりません。
確認方法
このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。
name_internals
- レポートに示された画像を調べ、カスタム要素であることとそのロールを控えてください。
- ブラウザーの開発者ツールでアクセシビリティペインを開き、要素のアクセシブルな名前を読んでください。
- スクリーンリーダーで要素に移動し、読み上げられる名前を聞いてください。
満たす場合:アクセシビリティツリーに画像の名前が表示され(internalsで設定されたものでも、それ以外でもかまいません)、スクリーンリーダーがそれを読み上げます。
満たさない場合:画像にはアクセシビリティツリー上の名前がなく、スクリーンリーダーはロールしか読み上げないため、WCAG 1.1.1を満たしません。