aria-owns ID の欠落

Silktide はページ上のすべての aria-owns 属性をチェックし、そこに記載された要素 ID が実際に存在することを確認します。この属性は、コード上では別の場所に配置されている要素を、ウィジェットの子要素として別の場所から取り込みます。

<!-- 問題: ページ上に id="menu-items" を持つ要素がない -->
<div role="menu" aria-owns="menu-items">…</div>

重要な理由

の aria-owns 属性はを再構成します。この属性が参照する要素は、コード上の位置に関係なく、所有元の要素の子要素として扱われます。参照が壊れていると、この組み込みは何も通知されずに失敗します。そのため、メニューやツリーが画面上では項目がはっきり表示されているにもかかわらず、には完全に空として認識されることがあります。見た目には何も問題がないため、こうした不具合は誰かがでテストするまで残りがちです。

修正方法

aria-owns に記載されている各 ID が、同じページ上にある実際の要素の id と一致するようにします。
所有されているコンテンツを移動または改名した場合は、同じ変更で参照も更新します。あるいは、コードを再構成して子要素を自然に親要素の内側に配置し、aria-owns が不要になるようにするのがより望ましい方法です。
1つの要素が2回所有されていないことを確認します。1つの id は、ページ上の1つの aria-owns にのみ記載できます。

Silktide によるテスト方法

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

トラブルシューティング

所有されている要素が後からスクリプトによって作成される

Silktide はページの読み込み時にテストします。所有されているコンテンツがユーザーの操作後にしか存在しない場合、それまではウィジェットが空として通知されます。最初からコンテンツを非表示の状態でレンダリングするか、コンテンツが存在してから aria-owns を設定してください。

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

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