<li>要素は<ul>または<ol>に含まれている必要があります

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

Need accessibility training?

Deque University offers an extensive curriculum of self-guided online courses for every skillset and experience level.

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

    修正方法

    すべてのリスト項目 li 要素が ul または ol 親要素内に含まれていることを確認します。

    リスト項目は順序のない (黒丸) リストまたは順序付き (順番に数字をつけた) リストのいずれかに含めることができます。

    スクリーン・リーダーはユーザーがリストに到達した際、通知し、リスト内にいくつ項目があるかを伝えます。リスト項目の数と現在のリスト項目を読み上げると、聞き手が何を聞いているのか、聞いたときに何が起こるかを把握するのに役に立ちます。スクリーン・リーダーが聞き手にリストを聞いていることを伝えるようにするには、子リスト項目要素は適切な親リスト要素に含まれていなければなりません。

    悪い例

    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>

    良い例

    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>

    なぜ重要なのか

    リストが有効であるためには、親と子要素の両方がなければなりません。親要素は ul タグの組み合わせまたは ol タグの組み合わせのいずれかです。子要素は li タグを使用し、これらの要素の中に定義されなければなりません。

    スクリーン・リーダーはリストに到達した際、ユーザーに通知し、リスト内の項目数を伝えます。リスト内の項目数と現在のリスト項目を読み上げると、聞き手が何を聞いていて、聞いたときに何を期待すべきかを把握するのに役に立ちます。

    階層の中で、適切でセマンティックなマークアップを用いてリストをマークアップしないと、リストの存在とリストの種類を示す親がない場合、リスト項目は聞き手にリストの内容を聞いていることを伝えられません。

    ルールの説明

    すべてのリスト項目 (li) は ul または ol 親要素内に含まれていなければなりません。

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

    li 要素がセマンティックに使用されていることを確認します。

    リソース

    その他のリソース

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

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

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

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

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

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