Rampsight

Todas as regras

Estrutura

Listas precisam de itens de lista como filhos

Por que isso importa

Uma <ul> com divs intermediárias deixa de ser uma lista na árvore de acessibilidade: “lista com 12 itens” nunca é anunciado e a contagem se perde.

Como corrigir

  1. Coloque diretamente em <ul> e <ol> apenas <li> (além de <script> e <template>).
  2. Mova os elementos de contêiner para dentro do <li>, não em volta dele.
  3. Se o conteúdo não é uma lista, use outro elemento em vez de remover a semântica.

Na marcação

Falha
<ul>
  <div><li>First</li></div>
</ul>
Passa
<ul>
  <li>First</li>
</ul>

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:

Para aprofundar

Deque University sobre 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.