<dt>および<dd>要素は<dl>に含まれている必要があります

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

Learn Web Accessibility

Subscribe to our extensive curriculum of online self-paced courses

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

    修正方法

    リスト項目を親 dl 要素で囲み、リストが適切な階層に沿うようにします。さらに、 dt および dd 要素が正しい順序になっていることを確認します。

    このルールは、スクリーン・リーダーのユーザーが聞いている内容や、記述リストを聞く際に親および子項目の構成された関係性に関して何を想定するべきかを知ることを助けるために、記述リスト要素が正しい階層で使用されることを確認します。

    例えば、以下のコードの場合、エラーが発生します:

    <dt>Coffee</dt>
      <dd>Black hot drink</dd>
    <dt>Milk</dt>
      <dd>White cold drink</dd>

    <dl> 要素で囲みます:

    <dl>
      <dt>Coffee</dt>
        <dd>Black hot drink</dd>
      <dt>Milk</dt>
        <dd>White cold drink</dd>
    </dl>

    なぜ重要なのか

    記述リスト項目は親 dl 要素に囲われていなければなりません。そうでなければ、それは正しくない状態になります。

    記述リストは特定の階層に沿っている必要があります。リストは dl 要素を用いて定義されます。その後に dt 要素から開始する dt および dd 要素の組み合わせが交互に並びます。dt 要素は用語を定義し、dd 要素はその用語の説明を表します。各 dt 要素の組み合わせは、対応する dd 要素の組み合わせがなければなりません。dt および dd 要素のみが記述リスト内に記述可能です。この階層に沿っていない場合、そのリストは正しくない状態になります。

    ルールの説明

    正しい状態にするには、記述リストの項目 (dt および/または dd) は親 dl 要素に囲われていなければなりません。これにより、スクリーン・リーダーのユーザーがリスト内の情報の適切な階層を理解できるようになります。

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

    すべての子 dd および dt 要素に dl 要素が親として存在することを確認します。

    リソース

    その他のリソース

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

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

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

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

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

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