aria-valid-attr-value

aria-*属性の値は宣言された型に一致する必要があります

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

認識されるすべてのaria-*属性の値が、WAI-ARIAで宣言された値の型(boolean、tristate、token、integer、number、ID参照)に適合していることを確認します。

適用範囲:認識されるaria-*属性を少なくとも1つ持つすべての要素に適用されます(認識されない属性名はaria-valid-attrが扱うため、ここでは評価しません)。

期待される結果:各属性の値が、WAI-ARIAで宣言された値の型に従っています。真偽値("true"/"false")、三状態("true"/"false"/"mixed")、固定の列挙セットのトークン、整数(WAI-ARIAが定める範囲内)、実数、または文書内の既存の要素に解決されるIDの参照(またはそのリスト)です。真偽値、三状態、トークンの値は、Chromiumと同じく大文字と小文字を区別せずに読み取ります(aria-checked="TRUE"はチェックされた状態です)。ACT 6a7281自身の適用範囲(「空でない任意の状態またはプロパティ」)に従い、明示的に空の値は、「=値」をまったく持たない真偽値形式の属性(例:aria-checkedだけ)も含め、すべての値の型で対象外となり、違反ではありません。テンプレートで生成されるマークアップではよくある意図的なパターンです(例:Reactがaria-describedby={hasError ? errorId : ''}を条件付きでレンダリングする場合)。一部の属性は互いに制約し合っており、それぞれが単独で有効であることを確認した後にチェックします。

  • ロールがslider、scrollbar、progressbar、meter、separator、spinbuttonのいずれかである要素では、aria-valueminがaria-valuemaxより大きい場合はfailになり(ARIA_VALUE_RANGE_INVERTED)、aria-valuenowが範囲外の場合もfailになります(ARIA_VALUENOW_OUT_OF_RANGE)。その場合、ブラウザーは代わりに範囲の近いほうの端を支援技術に伝えるためです(0〜10の範囲で50を指定すると、Chromiumは10と読み上げます)。範囲は指定されたものです。指定がなければ、HTML-AAMの対応付けに従い、ネイティブ要素自身の範囲(<progress>、<meter>、rangeまたはnumberのinputのminとmax)です。それもなければARIAの既定値の0と100ですが、spinbuttonには既定値がありません。aria-valuetextがある場合は、数値の代わりにそれが読み上げられるため、値を比較しません。
  • aria-posinsetがaria-setsizeより大きい場合はfailになります(ARIA_POSINSET_EXCEEDS_SETSIZE)。セットのサイズが-1(不明)の場合は対象にしません。
  • aria-haspopupで、そのポップアップ(aria-controlsが示す要素、またはその内部の要素)が別のロールを持つ場合はcantTellです(ARIA_HASPOPUP_ROLE_MISMATCH)。スクリプトが別のポップアップを表示する可能性があるためです。trueはmenuを意味します。比較するのは、示された要素がロールを持つ場合だけです。
  • aria-activedescendantが、要素の内部にも、要素がaria-ownsやaria-controlsで示す要素の内部にもない要素を示している場合はcantTellです(ARIA_ACTIVEDESCENDANT_OUTSIDE)。comboboxは対象外です。そのoptionは、comboboxが制御するポップアップ内にあるためです。

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

  • attr:値が有効でない属性です。
  • value:記述されたとおりの値です。
  • valueReason:値の何が問題かを示します。failの場合は、属性の型に合わないときはexpected-true-false、expected-true-false-undefined、expected-true-false-mixed、expected-integer、expected-number、invalid-token、ARIAが許す最小値を下回るときはinteger-out-of-range、idを1つ取る属性に複数のidがあるときはexpected-single-idref、aria-activedescendantのidがどの要素とも一致しないときはidref-not-foundです。cantTellの場合は、リスト内のどのidも要素と一致しないときはidref-list-none-found、aria-controlsで同じことが起きたときはidref-controls-not-foundです。
  • 属性間の制約については、比較した値です。role、valuenow、valuemin、valuemax(既定値を含め、使われた範囲)、posinset、setsize、haspopup、expectedRole、popupRole、activedescendantです。

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

例

pass
<div aria-hidden="true"></div>

"true"は、boolean型のaria-hiddenに有効な値です。

fail
<div aria-hidden="yes"></div>

aria-hiddenはboolean型であり、"yes"は有効なbooleanトークンではありません。

確認方法

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

ARIA_ACTIVEDESCENDANT_OUTSIDE

  1. レポートに示された要素を調べ、aria-activedescendantにあるidと、その要素がどこにあるかを控えてください。
  2. 要素にフォーカスを移し、矢印キーでアクティブな項目を移動してください。
  3. スクリーンリーダーを起動した状態で、移動するたびにアクティブな項目が読み上げられるか聞いて確認してください。
  4. 参照先の要素を要素の内側に移せるか、またはaria-ownsやaria-controlsで要素と関連付けられるか確認してください。

満たす場合:矢印キーで移動するたびに、アクティブな項目が読み上げられます。

満たさない場合:アクティブな項目が変わってもスクリーンリーダーが何も読み上げないか誤った項目を読み上げるため、キーボードの利用者が追従できず、WCAG 4.1.2を満たしません。

ARIA_ATTR_VALUE_TARGET_ABSENT

  1. レポートに示された要素を調べ、属性とそれが参照するidを控えてください。
  2. 利用者と同じようにページを使い(開く、展開する、送信する)、参照先の要素が存在するはずの状態にしてください。
  3. 開発者ツールのコンソールで各idについてdocument.getElementById('the-id')を実行し、マークアップに似たid(大文字と小文字の違い、誤字、別のシャドウルート内)がないか確認してください。
  4. ブラウザーの開発者ツールでアクセシビリティペインを開き、その属性が提供するはずの名前、説明、または関係が表示されているか確認してください。
  5. 表示されない場合は、アクセシビリティペインで、要素が自身のテキスト、<label>、aria-labelなど別の方法でその名前や説明を得ているか確認してください。

満たす場合:必要なときに参照先の要素が存在し、名前、説明、または関係がアクセシビリティツリーに現れるか、要素が別の方法で同じ名前や説明を得ています。

満たさない場合:idが解決されず(存在しない、綴りが違う、またはシャドウ境界をまたぐ)、他にラベル、説明、関係を与えるものもないため失われ、WCAG 4.1.2を満たしません(ACT 6a7281)。

ARIA_HASPOPUP_ROLE_MISMATCH

  1. レポートに示された要素を調べ、aria-haspopupの値(menu、listbox、tree、grid、dialog。trueはmenuを意味します)を控えてください。
  2. マウスとキーボード(Enter、Space、または下矢印キー)でポップアップを開いてください。
  3. 表示されたポップアップを調べ、ブラウザーの開発者ツールのアクセシビリティペインでそのロールを確認してください。
  4. ポップアップのロールを、aria-haspopupが伝える種類と比べてください。

満たす場合:開いたポップアップは、aria-haspopupが伝えるロールを持っています。

満たさない場合:開いたポップアップが伝えられたものと異なるロールを持っており(menuと伝えられたdialogなど)、スクリーンリーダーの利用者を誤解させるため、WCAG 4.1.2を満たしません。

ソースコードを見る