セマンティックなリスト
Silktide は、ページ上のリスト要素に、直接の子要素としてリスト項目だけが含まれているかをチェックします。リストの中に他の要素が直接配置されていると、 がリストに含まれる項目数を誤って報告することがあります。
<!-- 誤り: div がスクリーンリーダーから項目を隠してしまいます -->
<ul>
<div class="group">
<li>Example 1</li>
</div>
<div class="group">
<li>Example 2</li>
<li>Example 3</li>
</div>
</ul>
<!-- 修正後: リスト内に直接配置されているのはリスト項目だけです -->
<ul>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ul>
重要な理由
がリストに入ると、リストの項目数を「リスト、3 項目」のように読み上げます。これにより、ユーザーはどれだけのコンテンツがあるかを把握でき、安心してスキップできます。リスト内のラッパー要素はこの項目数を壊します。上の例では、実際には 3 項目あるのに、2 項目のリストとして読み上げられる可能性があります。ナビゲーションメニューは通常リストとして構築されるため、最も影響を受けやすい要素です。
修正方法
<ul>および<ol>要素の直下にある<div>や<span>などのラッパー要素を削除し、<li>項目だけが残るようにします。- スタイリングのためにラッパーが必要な場合は、
<li>の内側に移動するか、<li>要素を直接スタイル設定します。 - リストを別のリストに入れ子にするには、内側の
<ul>または<ol>を親の<li>内に配置します。
Silktide によるチェック方法
- ページ上のすべての
<ul>および<ol>要素を見つけます。 - 各リストの直接の子要素を調べます。
- リスト項目（
<li>）でも入れ子になったリストでもない子要素を報告します。項目間のコメントや空白は問題なく、無視されます。