<ul> e <ol> devem conter apenas elementos <li>, <script> ou <template> diretamente

De acordo com a especificação HTML, o único conteúdo permitido diretamente dentro de elementos <ul> e <ol> são elementos <li>, além de elementos não-conteúdo como <script> e <template>. Quando você coloca outros elementos de conteúdo — como <div>, <span>, <p>, <a>, ou nós de texto simples — diretamente dentro de um contentor de lista, cria uma estrutura inválida que quebra a relação semântica entre a lista e os seus itens.

Por que isto importa

Os leitores de ecrã anunciam as listas de uma forma específica para ajudar os utilizadores a navegar e compreender conteúdo agrupado. Quando um utilizador encontra uma lista adequadamente estruturada, o seu leitor de ecrã normalmente anunciará algo como “lista, 5 itens” e depois permitirá que o utilizador se mova através de cada item individualmente. Este comportamento depende inteiramente da lista estar estruturada corretamente.

Quando elementos de conteúdo que não são <li> aparecem como filhos diretos de <ul> ou <ol>, os leitores de ecrã podem:

• Falhar em anunciar o número total de itens na lista
• Ignorar completamente conteúdo incorretamente aninhado
• Apresentar itens de lista e conteúdo não-lista de forma confusa e desarticulada

Isto afeta principalmente utilizadores cegos e surdocegos que dependem de leitores de ecrã, mas também impacta qualquer pessoa que use tecnologia assistiva que analisa a estrutura DOM para apresentar conteúdo.

Critérios de sucesso WCAG relacionados

Esta regra mapeia para o Critério de Sucesso 1.3.1 das WCAG 2.0, 2.1, e 2.2: Informação e Relações (Nível A). Este critério exige que informação, estrutura e relações transmitidas através da apresentação visual possam ser determinadas programaticamente. Quando uma lista é apresentada visualmente como um grupo de itens relacionados mas a sua estrutura HTML subjacente é inválida, a relação entre o contentor da lista e os seus itens não pode ser comunicada de forma fiável à tecnologia assistiva.

Como corrigir

1. Certifique-se de que todos os elementos de conteúdo dentro de um <ul> ou <ol> estão envolvidos num <li>. Se você tem <div>, <span>, <p>, <a>, ou qualquer outro elemento de conteúdo como filho direto da lista, mova-o para dentro de um <li>.
2. Mova conteúdo não-lista para fora da lista. Se você tem cabeçalhos, parágrafos, ou outro conteúdo que não é um item de lista, coloque-o antes ou depois do elemento de lista em vez de dentro dele.
3. Aninhe sub-listas dentro de elementos <li>. Se você precisa de um <ul> ou <ol> aninhado, deve ser colocado dentro de um <li> da lista pai, não diretamente como filho da lista pai.

Exemplos

Incorreto: elementos <div> diretamente dentro de um <ul>

<ul>
  <div>Maçãs</div>
  <div>Bananas</div>
  <div>Cerejas</div>
</ul>

Os leitores de ecrã não conseguem identificar estes elementos <div> como itens de lista.

Correto: elementos <li> como filhos diretos

<ul>
  <li>Maçãs</li>
  <li>Bananas</li>
  <li>Cerejas</li>
</ul>

Incorreto: cabeçalho colocado diretamente dentro de uma lista

<ul>
  <h3>Frutas</h3>
  <li>Maçãs</li>
  <li>Bananas</li>
  <li>Cerejas</li>
</ul>

Correto: cabeçalho movido para fora da lista

<h3>Frutas</h3>
<ul>
  <li>Maçãs</li>
  <li>Bananas</li>
  <li>Cerejas</li>
</ul>

Incorreto: lista aninhada colocada diretamente dentro de um <ul>

<ul>
  <li>Frutas</li>
  <ul>
    <li>Maçãs</li>
    <li>Bananas</li>
  </ul>
  <li>Vegetais</li>
</ul>

Correto: lista aninhada colocada dentro de um <li>

<ul>
  <li>
    Frutas
    <ul>
      <li>Maçãs</li>
      <li>Bananas</li>
    </ul>
  </li>
  <li>Vegetais</li>
</ul>

Incorreto: link diretamente dentro de um <ol>

<ol>
  <a href="/passo-1"><li>Passo um</li></a>
  <a href="/passo-2"><li>Passo dois</li></a>
</ol>

Correto: link colocado dentro do <li>

<ol>
  <li><a href="/passo-1">Passo um</a></li>
  <li><a href="/passo-2">Passo dois</a></li>
</ol>

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

WCAG 2.1 - Using ol, ul and dl for lists or groups of links

→