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.
72
88%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Passed
No findings from the security scan
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/en/rules/accessibility/dlitem
- Repository
- thedaviddias/Front-End-Checklist
- Commit
48405aa
- Last updated
- First committed
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.