aria-required-attr
必須のARIAステートやプロパティがあるロールには、それを指定する必要があります
明示的なロールを持つ要素に、そのロールで必須とされている、曖昧さがなく文脈に依存しないaria-*ステートやプロパティがすべて指定されていることを確認します(例:role="checkbox"にはaria-checkedが必要)。
適用範囲:明示的で有効な、抽象的でないロールのうち、文脈に依存しない必須のステートやプロパティが定められた少数のロール(checkbox、combobox、heading、menuitemcheckbox、menuitemradio、meter、radio、scrollbar、separator、slider、switch)を持つ要素に適用されます。ただし、その明示的なロールが要素自身のネイティブまたは暗黙のロールと同一の場合は除きます(ACT 4e8ab6。例:<input type="checkbox" role="checkbox">はネイティブコントロール自身の状態公開で足りるため対象外で、aria-checkedは必要ありません。この判定はhelpers.aria.getNativeRoleForElementが行います)。別のチェック可能なロール(switch、menuitemcheckbox、menuitemradio、またはradioに付けたcheckboxとその逆)を持つネイティブの<input type="checkbox">や<input type="radio">は対象に含まれますが、そのaria-checkedは指定済みとみなします。ブラウザーがinput自身のchecked状態を公開する(HTML-AAM)ため、属性がなくても合格します。
期待される結果:そのロールで必須のステートやプロパティがすべて存在し、空ではありません。欠けている属性の代わりになるものをARIAが定めているかどうかで判定します。
- 代わりがない場合はFAIL。その状態がまったく公開されないためです(checkbox/radio/switch/menuitemcheckbox/menuitemradioのaria-checked、slider/scrollbar/meterとフォーカス可能なseparatorのaria-valuenow)。
- ARIAがロールの既定値となる暗黙の値を定めている場合はCANTTELL(comboboxのaria-expanded、headingのaria-level)。ロールは引き続き値を公開しており、それが正しい値かどうかは作成者にしか分からないためです。
検出結果が報告する内容:
attr:欠けている、または空の必須属性です。role:要素のロールです。implicitValue(cantTellの場合):ARIAがフォールバックとして使う値です。comboboxのaria-expandedではfalse、headingのaria-levelでは2です。
これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。
例
<div role="checkbox" aria-checked="true"></div>
role="checkbox"にはaria-checkedが必須で、指定されています。
<div role="checkbox"></div>
role="checkbox"にはaria-checkedが必須ですが、まったく指定されていません。
確認方法
このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。
ARIA_ATTR_REQUIRED_MISSING_IMPLICIT
- レポートに示された要素を調べ、そのロールと不足している属性(comboboxのaria-expanded、headingのaria-levelなど)を控えてください。
- comboboxの場合は、キーボード(Alt+下矢印キー、Escape)とマウスでポップアップを開閉し、aria-expandedが追加され更新されるか確認してください。
- 見出しの場合は、ページのアウトライン上の位置を既定値であるレベル2と比べ、別のレベルが意図されていないか確認してください。
- スクリーンリーダーで要素に移動し、読み上げられる状態またはレベルを聞いて確認してください。
満たす場合:既定値が実際と一致しています。comboboxはポップアップが閉じているときだけ折りたたみ状態を伝えるか、見出しは実際にレベル2です。
満たさない場合:読み上げられる値が誤っています。たとえば、リストが開いているのにcomboboxが折りたたみ状態と読み上げられる、または別のレベルであるべき見出しがレベル2になっており、WCAG 4.1.2(見出しについては1.3.1)を満たしません。
state_internals
- レポートに示されたカスタム要素を調べ、そのロールと不足している状態(checkedやvalueなど)を控えてください。
- ブラウザーの開発者ツールでアクセシビリティペインを開き、その状態が要素に表示されているか確認してください。
- 要素を操作し(クリック、Spaceキー、矢印キー)、ペインに表示される状態が変わるか確認してください。
- スクリーンリーダーで要素に移動し、状態が読み上げられるか聞いて確認してください。
満たす場合:状態が公開され、要素の使用に応じて更新されており、要素のinternalsを通じて設定されています。
満たさない場合:必要な状態がアクセシビリティツリーにないか、要素を使っても変わらないため、WCAG 4.1.2を満たしません。