<ul>および<ol>には、<li>、
修正方法
すべての (ul
あるいは ol
要素によって定義された) 順序付きおよび順序なしリストが li
コンテンツ 要素のみを含むようにします。
適切でセマンティックなマークアップを使用したリストは次の通りです:
<p> These are a few of my favorite things</p>
<ul>
<li>Raindrops on roses</li>
<li>Whiskers on kittens</li>
<li>Bright copper kettles</li>
<li>Warm woolen mittens</li>
<li>Brown paper packages tied up with strings</li>
<li>Cream colored ponies</li>
<li>Crisp apple streudels</li>
<li>Doorbells and sleigh bells</li>
<li>Schnitzel with noodles</li>
<li>Wild geese that fly with the moon on their wings</li>
<li>Girls in white dresses with blue satin sashes</li>
<li>Snowflakes that stay on my nose and eyelashes</li>
<li>Silver white winters that melt into springs</li>
</ul>
なぜ重要なのか
スクリーン・リーダーは特定の方法でリストを読み上げます。この機能はリストを理解しやすくしますが、これはリストの構造が適切な場合にのみ有効です。
リスト要素の組み合わせ内にリスト項目以外のコンテンツ要素が含まれていた場合、スクリーン・リーダーは聞き手がリスト内の項目を聞いていることを通知できません。
リストを有効にするには、親要素 (ul
要素の組み合わせもしくは ol
要素の組み合わせ) と、(これらのタグ内に li
要素を使用して定義された) 子要素の両方が必要で、それ以外のコンテンツ要素は無効です。
script、template、style、meta、link、map、area、そして datalist などのいくつかの非コンテンツ要素はリスト内で使用できますが、li
以外の コンテンツ要素は許可されていません。
ルールの説明
リストは正確にマークアップされなければなりません。それは、li
要素以外のコンテンツ要素を含んではならないということです。
仕組みについて (簡単に言うと)
リストが正しく構造化されていることを確認します。