<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements

Rule ID: definition-list
Ruleset: axe-core 4.9
User Impact: Serious
Guidelines: 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

Serious
Minor
Critical

Disabilities Affected

  • Blind
  • Deafblind

Standard(s)

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

WCAG Success Criteria [WCAG 2.1 (A)]

  • 1.3.1: MUST: Info and Relationships

WCAG Success Criteria [WCAG 2.0 (A)]

  • 1.3.1: MUST: Info and Relationships

WCAG Success Criteria [WCAG 2.2 (A)]

  • 1.3.1: MUST: Info and Relationships

    How to Fix the Problem

    Check that your definition list has only dt and dd elements. Furthermore, make sure these are properly ordered, dt should precede dd elements.

    Definition list items require dl elements around the list, dt elements for each term, and dd elements for each definition. Each set of dt elements must be followed by one or more dd elements. Ensure that your definition lists follow these specifications and mimic the example below.

    Example

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

    Why it Matters

    Screen readers have a specific way of announcing definition lists. When such lists are not properly marked up, this creates the opportunity for confusing or inaccurate screen reader output.

    A definition list is used to provide the definitions of words or phrases. The Definition List is marked up using the dl element. Within the list, each term is put in a separate dt element, and its definition goes in the dd element directly following it.

    Rule Description

    Definition lists (dl) must contain only properly-ordered dt and dd groups, div, script, or template elements.

    The Algorithm (in simple terms)

    Ensures that all dl elements are structured correctly.

    Resources

    Other Resources

    You may also want to check out these other resources.

    Refer to the complete list of axe 4.9 rules.

    Was this information helpful?

    You have already given your feedback, thank you..

    Your response was as follows:

    Was this information helpful?
    Date/Time feedback was submitted: