Dlitem

---
name: dlitem
description: "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."
metadata:
  category: accessibility
  priority: medium
  difficulty: beginner
  estimatedTime: "5"
  source: frontendchecklist.io
  url: https://frontendchecklist.io/rules/accessibility/dlitem
---

# 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