ARIA ラベル ID の欠落
Silktide は、他の要素から ID によってを取得する要素をチェックし、ページ上に存在しない ID への参照を報告します。壊れた参照があると、その要素は本来付けられるはずだった名前を失います。
属性 aria-labelledby は、ラベルを含む要素の id を指定することで要素に名前を付けます。たとえば、ダイアログに名前を付ける見出しや、コントロールに名前を付けるキャプションなどです。
<!-- 問題: 参照は「dialog-label」と指定していますが、見出しの id は「dialog-labell」です -->
<h2 id="dialog-labell">重要なメッセージ!</h2>
<div role="dialog" aria-labelledby="dialog-label">
重要な理由
アクセシブルな名前とは、訪問者が要素に到達したときにが読み上げる名前です。aria-labelledby の参照先が存在しない場合、その要素は名前なしで読み上げられる可能性があります。名前のないダイアログや名前のないボタンなどでは、訪問者がその目的を推測しなければなりません。このような問題は目に見えません。ページの見た目は変わらず、慎重なユーザーテストでも、名前がひそかに付与されなかったことに気づくのは困難です。ID は名前が変更されたり、コンテンツが再構成されたりするため、時間の経過とともに参照が壊れることがあります。
修正方法
- 名前を提供するはずだった要素を見つけ、
aria-labelledbyの値をそのidと完全に一致させます（ID では大文字と小文字が区別されます）。
<!-- 修正後: 参照が見出しの id と一致しています -->
<h2 id="dialog-label">重要なメッセージ!</h2>
<div role="dialog" aria-labelledby="dialog-label">
- ラベル付けに使用する要素が削除されている場合は、その要素を復元するか、名前をテキストとして含む
aria-label属性に切り替えます。 - 1 つの要素に複数の要素で名前を付ける場合は、すべての ID をスペースで区切って列挙し、それぞれをチェックします。
Silktide によるテスト方法
- 各ページで
aria-labelledby属性を持つすべての要素を見つけます。 - 属性値を個々の ID に分割します。
- ページ上のどこにも存在しない参照先 ID をそれぞれ報告します。