無効な ARIA 属性値

Silktide は、ページ上のすべての ARIA 属性の値を、その属性で標準が許可している値と照合してチェックします。「true」ではなく「yes」のように、属性に誤った値が設定されていると、ブラウザーはその属性を無視するため、属性が示す状態が一切通知されません。

<!-- 問題: 「yes」は有効な値ではないため、状態が破棄されます -->
<div role="checkbox" aria-checked="yes">Subscribe</div>

<!-- 修正: 定義されたトークンを使用します -->
<div role="checkbox" aria-checked="true">Subscribe</div>

重要な理由

すべての属性では、受け付ける値が厳密に定義されており、ブラウザーは推測することなく、それ以外の値を破棄します。よくある間違いは、aria-expanded="1"、aria-checked="yes"、aria-level="0" のように直感的に見える値です。こうした値は視覚的なテストにはすべて合格しますが、の利用者には状態が通知されないコントロールが提供されます。たとえば、メニューが開いているかどうかを一切読み上げない、チェックされているかどうかを一切読み上げないチェックボックスなどです。

修正方法

非公式な値を、属性で定義されているトークンに置き換えます。yes、no、1、0 ではなく、true と false を使用します。
数値属性をチェックします。aria-level や aria-rowindex などのカウント用属性は、0 ではなく 1 から始まります。
aria-checked="" のように空のままになっている属性を削除します。伝える状態がない場合、その属性は存在しないようにする必要があります。

各属性で許可される正確な値については、MDN ARIA 属性リファレンスに記載されています。

Silktide によるチェック方法

aria- 属性を少なくとも 1 つ持つページ上のすべての要素を検索します。
各属性の値を、ARIA 1.2 が定義する型と照合してチェックします。これには、true/false 属性、aria-checked（true、false、mixed）などの三状態属性、数値および整数、aria-live や aria-current などの固定された単語リストを持つ属性が含まれます。
適合しない各値を報告し、何が期待されているかを示します。

要素 ID を参照する属性は、aria-controls ID の欠落など、それぞれ専用のチェックでテストされます。また、aria-label のような自由記述属性は、任意のテキストを受け付けます。

トラブルシューティング

値がフレームワークによって設定される場合

コンポーネントライブラリによっては、状態が正しくシリアル化されないことがあります（たとえば、aria-expanded="undefined" として出力される場合）。検出結果は要素を指しますが、通常はコンポーネントの設定方法を変更するか、ライブラリを更新して修正します。

検出結果があるはずなのに、このチェックで何も報告されない場合

ARIA のテストは、ウェブサイトごとに無効にできます。ウェブサイトの詳細設定を確認してください。