aria-controls ID の欠落

Silktide はページ上のすべての aria-controls 属性をチェックし、そこに指定された要素 ID が実際に存在することを確認します。この属性は、タブが表示するパネルやボタンが開くメニューなど、コントロールが操作するページの部分を示します。

<!-- 問題: ページ上に id="filter-panel" を持つ要素がない -->
<button aria-expanded="false" aria-controls="filter-panel">Filters</button>

重要な理由

の aria-controls 属性により、はコントロールとその影響を受けるコンテンツを関連付けられます。一部のでは、制御対象の要素に直接移動するショートカットを利用できます。参照先が無効だと、その関係が気付かないうちに失われます。無効な参照は、通常、ID の名前が変更されたか、コンポーネントが削除されたことを意味するため、ウィジェット自体が意図したとおりに動作しなくなっている可能性を示す早期警告にもなります。

修正方法

aria-controls に指定された各 ID が、同じページ上にある実際の要素の id と一致するようにします。属性にはスペースで区切って複数の ID を指定できます。指定されている ID をすべてチェックしてください。
制御対象の要素が動的に追加される場合は、最初から非表示の状態でレンダリングするか、要素が存在してから aria-controls を設定します。
制御対象の要素が完全に削除された場合は、属性を削除します。

Silktide によるテスト方法

ページ上で aria-controls 属性を持つすべての要素を見つけます。
参照されている各 ID を、ページ上に存在する要素の ID と照合してチェックします。
どの要素とも一致しない各参照を報告します。

トラブルシューティング

ターゲットがスクリプトによって後から作成される

Silktide はページの読み込み時にテストします。参照先のパネルがユーザーの操作後にのみ表示される場合、それまでは参照が無効です。参照が常に解決されるよう、ターゲットをページ内に非表示で保持することをおすすめします。

問題があるはずなのに、このチェックで何も報告されない

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