aria-allowed-attr

aria-*属性は要素のロールで許可されている必要があります

automaticWCAG 4.1.2 (A)確度:medium重大度:moderaterobust

明示的なロールを持つ要素に指定された、認識されるaria-*属性がすべて、グローバルにサポートされているか、そのロールでサポートされていることを確認します。

適用範囲:認識される、グローバルでないaria-*属性を少なくとも1つ持つ要素に適用されます。判定には要素が実際に持つロールを使います。有効な明示的ロールがあればそれ、なければタグの暗黙のロール、HTML-AAMでどのロールにも対応付けられない要素の場合はロールなしとして扱います。role属性でロールを示していないカスタム要素は、ElementInternalsが与えるロール(this.attachInternals().role)、つまりその要素の既定のロールに照らして判定します。ネイティブ要素がタグのロールに照らして判定されるのと同じです。

期待される結果:指定されているaria-*属性はすべて、(a) どの要素でもグローバルにサポートされる(「グローバル」なARIAのステートやプロパティ。例:aria-label/aria-hidden/aria-describedby)、または (b) 要素のロールで必須またはサポート対象のステートやプロパティとして明記されている、のいずれかです。ARIAがそのロールで禁止ではなく非推奨としている属性は引き続き許可されます。その場合は許可されていない属性としてのFAILではなく、CANTTELLとして報告され、判断は作成者に委ねられます。ロールを持たない要素でも同様です。ARIA 1.2でグローバルではなくなった属性(aria-disabled、aria-errormessage、aria-haspopup、aria-invalid)は、そこでもCANTTELLになります。

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

  • attr:要素で許可されていない、または非推奨のaria-*属性です。
  • role(ロールを持つ要素):判定の基準にしたロールで、明示的なものか暗黙のものかを問いません。要素にロールがまったくない場合は含まれません。

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

例

pass
<div role="checkbox" aria-checked="true"></div>

aria-checkedは、role="checkbox"がサポートするステートの1つです。

fail
<div role="checkbox" aria-valuenow="1"></div>

aria-valuenowは範囲ウィジェット用の属性で、role="checkbox"には属しません。

確認方法

このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。

ARIA_ATTR_DEPRECATED

  1. レポートに示された要素を調べ、非推奨のaria-*属性と要素のロールを控えてください。
  2. ブラウザーの開発者ツールでアクセシビリティペインを開き、その属性の状態(disabled、invalid、has popupなど)が要素に引き続き表示されているか確認してください。
  3. スクリーンリーダーで要素に移動し、その状態が読み上げられるか聞いて確認してください。
  4. 同じ内容を非推奨でない方法(disabledなどのネイティブ属性、またはその属性をサポートするロール)で伝えられるか、またページがすでにその方法を使っているかを確認してください。

満たす場合:状態が読み上げられるか、ネイティブ属性やサポートされるロールでも伝えられており、非推奨の属性だけに依存しているものはありません。

満たさない場合:状態が非推奨の属性だけで伝えられ、スクリーンリーダーも読み上げないため、要素の状態が公開されていません(WCAG 4.1.2)。

関連するルール

ソースコードを見る