What does this accessibility issue mean?
Issue summary: Incorrectly structured <dl> element
A definition list, or description list ( “<dl>” in HTML), is a list that includes terms and related descriptions/definitions.
To adhere to WCAG web accessibility guidelines, an HTML “description list” should contain one or more terms (<dt>) and one or more definitions (<dd>) for each term in the list.
Screen readers, which are assistive technologies used by individuals with visual impairments, rely on the proper structure of description lists to provide an organized and meaningful presentation of content to users.
By using <dt> elements for terms and <dd> elements for definitions, screen reader users can easily distinguish and comprehend the relationships between terms and their corresponding definitions.
Solution:
Ensure <dl> elements in description lists are structured correctly, including one or more terms and one or more definitions for each term in the list.
Example HTML violation: Incorrectly structured description or definition lists (WCAG Level A Issue)
<dl>
<dt>Product</dt>
</dl>
<div>Product Description</div> The problem with this code is that while dl elements are designed to contain dt (Definition Term) and dd (Definition Description) elements, here a div has been incorrectly placed directly under dl. For correctly structuring a dl, a dt should be followed by dd.
Invalid elements or poorly structured lists can make it difficult for assistive technologies (like screen readers) to interpret the list correctly, causing accessibility issues.
Here's the corrected HTML:
How to fix "Incorrectly structured description or definition lists (WCAG Level A Issue)" issue
<dl>
<dt>Product</dt>
<dd>Product Description</dd>
</dl> In this corrected code, we've replaced the div element with a dd element, ensuring the dl is correctly structured and will be interpreted correctly by assistive technologies.
