← Todas as regras

Estrutura

Listas de definição precisam dos filhos corretos

• Regra: definition-list
• Gravidade: Grave
• Nível WCAG A

Por que isso importa

Uma <dl> cujos filhos não são pares <dt>/<dd> perde a relação entre termo e definição: o leitor de tela lê uma sequência de textos sem rótulo em vez de um glossário.

Como corrigir

1. Coloque dentro da <dl> apenas <dt>, <dd>, <div>, <script> e <template>.
2. Agrupe um termo e suas definições em uma <div> simples quando precisar de um gancho de estilo.
3. Use uma <ul> quando o conteúdo não for de fato termo e definição.

Na marcação

<dl>
  <div>Term</div>
  <p>Definition</p>
</dl>

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>

A exigência por trás disso

Esta regra é uma das formas de falhar nos seguintes critérios de sucesso das WCAG 2.2. O W3C, que publica a norma, explica cada um deles:

• 1.3.1 Informação e relações (abre em nova aba) — Nível WCAG A

Para aprofundar

Deque University sobre definition-list (abre em nova aba)

A Deque mantém o axe-core, o motor de código aberto que o nosso scanner executa. A página deles documenta a regra como o motor a implementa.

Verificações automáticas encontram falhas que o navegador consegue comprovar. Elas não julgam se uma legenda está correta, se um texto alternativo é útil, nem se a página pode ser operada de ponta a ponta pelo teclado — isso exige uma pessoa.