aria-activedescendant ID の欠落

Silktide はページ上のすべての aria-activedescendant 属性をチェックし、その属性が参照する要素 ID が実際に存在することを確認します。この属性は、ドロップダウンリストなどのウィジェット内で、現在ハイライトされている項目をに伝えます。

<!-- 問題: ページ上に id="opt-2" を持つ要素がない -->
<ul role="listbox" aria-activedescendant="opt-2">
  <li role="option" id="opt-1">最初の選択肢</li>
</ul>

重要な理由

カスタムドロップダウンリスト、コンボボックス、グリッドなどのウィジェットは、をコンテナー上に保持し、の aria-activedescendant 属性を使って、内部のどの項目がアクティブなのかを示します。参照先の ID が存在しない場合、の利用者はオプション間を移動しても何も聞こえません。ウィジェットに選択項目がまったくないように見えるため、視覚なしでは利用できなくなります。

修正方法

属性が現在アクティブな項目の id を参照するようにし、ユーザーがウィジェット内を移動するたびに更新します。
ウィジェットが項目を再レンダリングする場合は、新しい項目が安定した ID を保持するようにするか、同じタイミングで aria-activedescendant を更新します。
ウィジェットが存在しなくなった場合、または代わりにフォーカスを直接管理する場合は、属性を削除します。

Silktide によるテスト方法

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

トラブルシューティング

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

Silktide はページの読み込み時にテストします。参照先の要素がユーザーの操作後にのみ存在する場合、その間は参照が壊れた状態です。ターゲットが存在してから aria-activedescendant を設定してください。

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

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