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.
- ‘<dt>’ term tags list a term that will be defined in the list.
- ‘<dd>’ description tags are used for text that describes the term.
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>).
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.
