ARIA説明IDの欠落
Silktideは、他の要素をIDで参照することで追加の説明テキストを自身に関連付けている要素をチェックし、ページ上に存在しないIDへの参照を報告します。壊れた参照があると、説明は何も通知されないまま失われます。
属性のaria-describedbyは、ページ上の別の場所にある補足テキスト（フォームフィールドの下に表示されるヘルプテキストや、コントロールの説明など）に要素を関連付けます。
<!-- 問題: 参照先は「email-help」ですが、段落のidは「email-helpp」です -->
<input type="email" aria-describedby="email-help">
<p id="email-helpp">勤務先のメールアドレスを入力してください</p>
重要な理由
説明には、入力ミスを防ぐためのガイダンス（形式の要件、警告、結果の説明）が含まれています。は、参照先が正しく解決される場合に限り、要素の名前の後に説明を読み上げます。何もない場所を参照していると、訪問者にはガイダンスのないフィールドだけが提示され、何かが欠落していることを知る方法がありません。視覚的に確認できる訪問者には、フィールドの横にヘルプテキストが表示されているため、この問題はすべての目視レビューをすり抜けます。だからこそ、ここでは自動チェックが重要になります。
修正方法
- 説明テキストを含む要素を見つけ、
aria-describedbyの値をそのidと完全に一致させます（IDでは大文字と小文字が区別されます）。
<!-- 修正後: 参照先が段落のidと一致しています -->
<input type="email" aria-describedby="email-help">
<p id="email-help">勤務先のメールアドレスを入力してください</p>
- 説明要素が削除されている場合は、復元するか、古い
aria-describedby属性を削除します。 - 1つの要素が複数の要素によって説明される場合は、すべてのIDをスペースで区切って列挙し、それぞれをチェックします。
Silktideによるテスト方法
- 各ページで
aria-describedby属性を持つすべての要素を見つけます。 - 属性値を個々のIDに分割します。
- ページ上のどこにも存在しない参照先IDをそれぞれ報告します。