thedaviddias / dlitem
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Wrap definition items in a definition list. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
Wrap definition items in a definition list
Standalone <dt> or <dd> elements lose their semantic meaning and fail to provide the context needed for assistive technologies to link terms with definitions.
Quick Reference
- Place all <dt> (terms) and <dd> (descriptions) within a <dl>
- Avoid using description list items as standalone elements
- Ensure proper grouping of related metadata or glossary terms
Check
Locate any <dt> or <dd> elements that are not children of a <dl> element.
Fix
Wrap orphaned <dt> and <dd> elements in a parent <dl> container.
Explain
Explain why <dt> and <dd> must be contained within a <dl> for correct semantic association.
Code Review
Review the rendered markup and interactive states that affect Wrap definition items in a definition list. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/rules/accessibility/dlitem