<ul> そして <ol> は、 <li>、 <script> または <template> 要素のみを直接含む必要があります
修正方法
すべての順序付きリストと順序なしリスト ( 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
要素を使用した宣言) の両方が含まれている必要があり、その他のコンテンツ要素は無効です。
リスト内では、スクリプト、テンプレート、スタイル、メタ、リンク、マップ、エリア、データリストなどの一部の 非コンテンツ 要素が許可されますが、 コンテンツ 要素で li
以外は許可されません。
ルールの説明
リストは正しくマークアップされている必要があります。つまり、要素以外の コンテンツ 要素 li
を含んではなりません。
仕組みについて (簡単に言うと)
リストが正しく構造化されていることを確認します。