<ul> そして <ol> は、 <li>、 <script> または <template> 要素のみを直接含む必要があります

ルールID: list
ルールセット: axe-core 4.10
ユーザーへの影響:
ガイドライン: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), EN 301 549

Start building more accessible experiences

Axe DevTools Pro helps dev teams find and fix up to 80% of accessibility issues while coding. No experience required. Get started with your free trial today.

Compliance Data & Impact

User Impact


Minor
Critical

Disabilities Affected

  • 盲目
  • 盲ろう者

Standard(s)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)
  • WCAG 2.2 (A)
  • EN 301 549

WCAG 達成基準 [WCAG 2.1 (A)]

  • 1.3.1: Info and Relationships

WCAG 達成基準 [WCAG 2.0 (A)]

  • 1.3.1: Info and Relationships

WCAG 達成基準 [WCAG 2.2 (A)]

  • 1.3.1: Info and Relationships

    修正方法

    すべての順序付きリストと順序なしリスト ( 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 を含んではなりません。

    仕組みについて (簡単に言うと)

    リストが正しく構造化されていることを確認します。

    リソース

    その他のリソース

    その他リソースもあわせてご参照ください。

    axe 4.10 ルールの一覧 を参照する

    この情報は役に立ちましたか?

    すでにフィードバックをいただきました、ありがとうございます。.

    あなたの回答は次のとおりです。

    この情報は役に立ちましたか?
    フィードバックが提出された日付/時刻: