Deepcrawl is now Lumar. Read more.
DeepcrawlはLumarになりました。 詳細はこちら

Definition list item is missing or invalid (WCAG Level A Issue)

How to fix the web accessibility issue of definition lists with missing or invalid items. — Lumar Web Accessibility Wiki

Structure - Lumar Website Accessibility Issues Thumbnail
NULL NULL
 

What does this accessibility issue mean?

Issue summary: Definition list (‘<dl>’) item is missing or invalid

A description list or definition list (<dl> in HTML) is a list that includes terms and related descriptions. 

To adhere to WCAG web accessibility guidelines, an HTML “description list” should contain one or more terms (using the <dt> tag) and one or more definitions (using the <dd> tag) for each term in the list.

This is important for ensuring the semantic structure of a webpage, making it easier for assistive technologies like screen readers to understand and communicate the list’s content to users. Missing or invalid <dl> items can lead to confusion and incorrect interpretations by screen readers, making it difficult for users with disabilities to understand the structure and relationships between terms and definitions.

Solution:

Ensure each definition list (<dl>) element has at least one term (<dt>) and one corresponding definition (<dd>).

Issue details

Lumar can help you find & resolve this website accessibility issue — & many others — on your own site. Speak to our team to get started with the platform.

Get a Lumar demo

 

Example HTML violation: Definition list item is missing or invalid (WCAG Level A Issue)

<!DOCTYPE html>
<html lang='en' class='no-js'>
  <head>
    <title>Ecommerce Website</title>
  </head>
  <body>
    <h1>Product Categories</h1>
    <dt>Electronics</dt>
    <dd>- Mobiles</dd>
    <dd>- Televisions</dd>
    <dt>Clothing</dt>
    <dd>- Men's Clothing</dd>
    <dd>- Women's Clothing</dd>
  </body>
</html>

The above example violates the dlitem rule, which requires that all <dt> and <dd> elements be contained within a parent <dl> element.

Here, the <dt> and <dd> elements are being used without a parent <dl> element.

This would make it difficult for screen readers to read out the hierarchy correctly and thus violates the accessibility rule.

Correction for Violation:

 

How to fix "Definition list item is missing or invalid (WCAG Level A Issue)" issue

<!DOCTYPE html>
<html lang='en' class='no-js'>
  <head>
    <title>Ecommerce Website</title>
  </head>
  <body>
    <h1>Product Categories</h1>
    <dl>
      <dt>Electronics</dt>
      <dd>- Mobiles</dd>
      <dd>- Televisions</dd>
      <dt>Clothing</dt>
      <dd>- Men's Clothing</dd>
      <dd>- Women's Clothing</dd>
    </dl>
  </body>
</html>

In this corrected example, all <dt> and <dd> elements are wrapped within a <dl> element, satisfying the dlitem accessibility rule.

This makes the list hierarchy clear and understandable for screen readers, improving accessibility for users.

 
Digital Accessibility + SEO + Website Health

Build better online experiences — explore the full Lumar platform