definition

When to use

For glossaries and term/definition pairs, use the native HTML description list: <dl> with <dt> (term) and <dd> (definition). Or, for an inline term being defined in running prose, use <dfn>. Both are exposed to screen readers without ARIA.

role="definition" is appropriate only when the surrounding element cannot be <dd> or <dfn> — for instance inside a CMS that renders glossary entries as <div>. Pair with role="term" on the matching term element.

The role tells screen readers that the element contains a definition (the explanation), distinct from the term being defined. Most assistive tech offers little extra navigation for definitions beyond announcing the role, so the practical value is modest — the native elements are almost always sufficient.

Common failures

• role="definition" without a paired role="term". The definition has no term to attach to.
• Marking the term as role="definition" (and vice versa). Mirror image of the correct mapping.
• Using role="definition" on a generic <p> element of body text that happens to define something. Better to use <dfn> on the term itself within the prose.
• Glossary built with role="list" of role="listitem" where each item smushes term and definition together. Use a <dl> so term/definition pairing is preserved.
• <dfn> with no id to anchor links to. Definitions are most useful when other pages can deep-link to them.

Example

<!-- Preferred -->
<dl>
  <dt>ARIA</dt>
  <dd>Accessible Rich Internet Applications, a set of attributes that add accessibility semantics to HTML.</dd>
  <dt>APG</dt>
  <dd>ARIA Authoring Practices Guide, the W3C reference of common widget patterns.</dd>
</dl>

<!-- When native elements are impossible -->
<div role="term" id="aria-term">ARIA</div>
<div role="definition" aria-labelledby="aria-term">
  A set of attributes that add accessibility semantics to HTML.
</div>