必須 ARIA 属性の欠落

Silktide は、ARIA ロールを宣言している要素をチェックし、そのロールで必須とされる属性も提供していることを確認します。属性がなければ使用できないロールもあります。たとえば、スライダーなのに設定値を示さない場合などです。

<!-- 問題: スライダーは現在の値を公開する必要があります -->
<div role="slider" tabindex="0"></div>

<!-- 修正: 必須の状態を提供します -->
<div role="slider" tabindex="0"
     aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"></div>

これが重要な理由

要素にロールを付けることは、「これはスライダーです」「これはチェックボックスです」と約束することです。このようなロールには状態属性が必要です。状態属性がなければ、その約束は意味を持ちません。のユーザーがチェックボックスに移動してもチェックされているかどうかが分からず、スライダーに移動しても値や範囲が分からないためです。コントロールは通知され、フォーカスも可能ですが、使用できません。

修正方法

ロールで必須とされる属性を追加し、コントロールの状態が変化したときにスクリプトで最新の状態に保ちます。動作するチェックボックスに静的な aria-checked="false" を設定するのは、属性をまったく設定しない場合と同じくらい誤解を招きます。
利用できる場合は、ネイティブの要素を優先します。<input type="checkbox"> と <input type="range"> は、維持すべき ARIA なしで状態を自動的に公開します。

Silktide によるテスト方法

ページ上で role 属性を宣言しているすべての要素を見つけます。
ARIA 1.2 でそのロールに必須とされる属性を調べます。たとえば、role="checkbox" には aria-checked が、role="slider" には aria-valuenow が必須です。
要素が状態をネイティブに公開している場合は除外します。実際のチェックボックスやラジオボタンにはチェック状態がすでにあり、ネイティブの <option> には選択状態がすでにあります。また、aria-valuetext を持つスライダーでは aria-valuenow を省略できます。
必須属性が欠落している各要素を報告します。

トラブルシューティング

ページの読み込み後にスクリプトで属性を設定している

Silktide はページの読み込み時にテストします。ウィジェットが最初の操作時にのみ状態属性を追加する場合、それまではユーザーに状態のないコントロールとして伝わります。代わりに、初期状態をページ内に直接出力してください。

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

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