Definition List
Critical - WCAG Level A
The accessibility issue arises when a <dl> (definition list) element is not structured correctly with its associated <dt> (definition term) and <dd> (definition description) elements. Each <dt> must be followed by one or more <dd> elements that provide the definitions for that term. If this structure is violated, assistive technologies like screen readers may misinterpret the content, leading to confusion for users who rely on these tools.
For users with disabilities, particularly those using screen readers, the correct structure of definition lists is crucial. Screen readers announce the relationship between terms and their definitions, and if this relationship is not clearly defined, users may not understand the context or meaning of the terms presented. This can lead to a frustrating experience and hinder their ability to access information effectively.
To fix this issue:
Identify the definition terms: Ensure that each term you want to define is wrapped in a
<dt>tag.Pair with definitions: Immediately follow each
<dt>with one or more<dd>tags that contain the corresponding definitions.Check for nesting: Avoid nesting
<dl>elements within<dd>unless absolutely necessary, as this can complicate the structure.Use semantic HTML: Ensure that all elements are used according to their intended purpose to enhance accessibility.
Best practices:
Always use
<dl>for groups of terms and definitions to maintain semantic structure.Consider using headings
<h1>,<h2>, etc.) to provide context for the definition list if it is part of a larger content structure.Ensure that the content within
<dd>elements is concise and directly related to the preceding<dt>.
Common mistakes:
Not following the
<dt>with a<dd>: This breaks the relationship and confuses assistive technologies.Using
<dl>for non-definition content: Reserve<dl>for actual definitions to maintain semantic integrity.Forgetting to close tags properly: Always ensure that your HTML is well-formed to avoid rendering issues.