ARIA 子ロールの不足

Silktide は、タブストリップ、メニュー、リストボックスなど、ARIA ロールで構築されたコンテナウィジェットをチェックし、それぞれに含まれるべき種類の項目が含まれていることを確認します。タブのないタブストリップやメニュー項目のないメニューは、ウィジェットとして通知されますが、操作できるものがありません。

<!-- 問題: tablist には role="tab" を持つ要素が含まれていなければならない -->
<div role="tablist">
  <button>概要</button>
</div>

<!-- 修正: 子要素に必要なロールを付与する -->
<div role="tablist">
  <button role="tab">概要</button>
</div>

これが重要な理由

複合ロールは、ウィジェット全体を説明します。 tablist はタブを、listbox は選択肢を、menu はメニュー項目を含むことを示します。は、これらのウィジェットに対して専用のナビゲーションに切り替え、指定された子要素があることを前提とします。子要素にロールがない場合、ウィジェット自体は通知されても、その後は空の入れ物のように動作します。ユーザーはそこに到達できますが、中には何も見つけられません。一方、視覚的に確認できるユーザーには、完全に機能するコントロールとして表示されます。

修正方法

コンテナ内の各項目に必要なロールを追加します。たとえば、role="tablist" 内の各コントロールに role="tab" を付与します。
項目をコード内の別の場所に配置する必要がある場合は、コンテナの aria-owns で関連付けます。
コンテナが実際にはその種類のウィジェットではない場合は、ロールを削除するか、正しいものに修正します。

よくある組み合わせ: tablist には tab、listbox には option、menu と menubar には menuitem（またはそのチェックボックスおよびラジオのバリエーション）、radiogroup には radio、tree には treeitem、grid と table には row、row にはセルまたはヘッダーが必要です。

Silktide によるこのチェックの方法

特定の子ロールを必要とする ARIA ロールを持つすべての要素を見つけます。
aria-owns で関連付けられた要素も含め、その子孫要素から、必要な子ロールを持つ要素を少なくとも 1 つ検索します。
そのような要素が見つからないコンテナを報告します。

トラブルシューティング

項目がスクリプトによって後から読み込まれる

Silktide は、ページの読み込み時にページをチェックします。リストボックスやメニューが必要なときだけ読み込まれる場合、それまでは空として通知されます。可能であれば、ページとともに少なくとも初期項目をレンダリングしてください。

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

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