ARIA 親ロールの欠落

Silktide は、特定の種類のコンテナー内でのみ意味を持つ ARIA ロールを持つ要素をチェックします。たとえば、タブストリップ内に配置する必要があるタブなどが該当します。そして、必要なコンテナーが存在することを確認します。

<!-- 問題: 周囲に tablist がないタブ -->
<button role="tab">Overview</button>

<!-- 修正: 必要なコンテナーでタブを囲む -->
<div role="tablist">
  <button role="tab">Overview</button>
</div>

重要な理由

の項目ロールは、そのコンテキストによって定義されます。tab は 5 つのタブの 3 番目、option はリスト内の 1 つの選択肢、row は表の一部です。は、親ウィジェットから位置、数、ナビゲーションの動作を判断します。

親ウィジェットがないと、項目が誤って識別されたり、コンテキストなしで読み上げられたり、完全にスキップされたりする可能性があります。作成者がウィジェットの半分だけを追加した状態になり、ユーザーはどちらの半分も確実に利用できません。

修正方法

必要なロールを持つコンテナーで要素を囲みます。たとえば、role="tab" 要素を role="tablist" の内側に配置します。
コード上、親要素で子要素を物理的に囲めない場合は、論理上の親要素に aria-owns を追加して子要素を関連付けます。
要素が実際にはその種類の項目でない場合は、ロールを削除するか修正します。

一般的な組み合わせ: tab には tablist、option には listbox、menuitem には menu または menubar、ARIA グループ内の radio には radiogroup、treeitem には tree、row には grid、table、treegrid、または rowgroup が必要です。セルとヘッダーには row が必要です。

Silktide によるテスト方法

特定の親ロールを必要とするすべての ARIA ロールを持つ要素を見つけます。
各要素の祖先を上にたどり、aria-owns による関連付けもたどって、必要な親ロールを持つ要素を探します。
そのような祖先が見つからない要素を報告します。

トラブルシューティング

親ロールが暗黙的なロールを持つ要素に設定されている

ネイティブ要素も対象になります。<select> 内の <option> には明示的なロールは必要ありません。どちらも正しいロールを暗黙的に持っているためです。明示的な項目ロールが、条件を満たす親要素（明示的または暗黙的）のない状態で使用されている場合に検出結果が表示されます。

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

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