Valor inválido “list” para o atributo “role” no elemento “section”.

O elemento section tem semântica ARIA implícita — mapeia para role="region" quando recebe um nome acessível. De acordo com a especificação ARIA in HTML, cada elemento HTML tem um conjunto de roles que pode assumir, e list não está entre os roles permitidos para section. Quando o validador W3C encontra role="list" num section, sinaliza isto como um valor inválido porque o role entra em conflito com o propósito pretendido do elemento como um marco de secção.

Isto é importante por várias razões. Primeiro, tecnologias assistivas como leitores de ecrã dependem do emparelhamento correto de elementos e roles para transmitir a estrutura da página. Um section anunciado como uma lista cria uma experiência confusa e contraditória — o DOM subjacente diz “isto é uma secção de documento” enquanto o role ARIA diz “isto é uma lista.” Segundo, os browsers podem lidar com semânticas conflituantes de forma imprevisível, levando a comportamentos inconsistentes entre plataformas. Terceiro, a especificação HTML define explicitamente quais roles são válidos em cada elemento, e violar estas regras significa que a sua marcação não está em conformidade.

A melhor correção é quase sempre usar elementos de lista HTML nativos. Os elementos ul, ol e li fornecem semântica de lista incorporada que todos os browsers e tecnologias assistivas compreendem sem atributos ARIA adicionais. Os elementos nativos também lidam corretamente com a interação por teclado e gestão de foco de forma automática.

Se o seu design requer um componente personalizado onde a marcação de lista nativa não é viável — por exemplo, uma grelha de cartões complexa que funciona como uma lista — pode aplicar role="list" a um elemento semanticamente neutro como div ou span. Cada filho direto que atua como um item de lista deve então receber role="listitem". Esta abordagem satisfaz a especificação ARIA evitando o conflito elemento-role.

Se realmente precisa de um section para agrupar conteúdo dentro de uma região de página e a lista é apenas parte dessa secção, aninhe uma lista adequada dentro do section em vez de tentar fazer o próprio section comportar-se como uma lista.

Exemplos

❌ Incorreto: role="list" num elemento section

Isto desencadeia o erro de validação porque list não é um role permitido para section.

<section role="list">
  <div>Item A</div>
  <div>Item B</div>
</section>

✅ Corrigido: Usar elementos de lista nativos (recomendado)

As listas nativas fornecem o melhor suporte de acessibilidade sem necessidade de ARIA.

<ul>
  <li>Item A</li>
  <li>Item B</li>
</ul>

✅ Corrigido: Aninhar uma lista dentro do section

Se precisar da semântica de seccionamento de section juntamente com uma lista, aninhe a lista dentro dele.

<section aria-labelledby="resources-heading">
  <h2 id="resources-heading">Resources</h2>
  <ul>
    <li>Item A</li>
    <li>Item B</li>
  </ul>
</section>

✅ Corrigido: Roles ARIA num contentor neutro

Use isto apenas quando a marcação de lista nativa não for possível, como para componentes de UI altamente personalizados.

<div role="list">
  <div role="listitem">Item A</div>
  <div role="listitem">Item B</div>
</div>

✅ Corrigido: Remover o role completamente

Se o conteúdo não é realmente uma lista, simplesmente remova o atributo role e deixe o section carregar a sua semântica natural.

<section>
  <h2>Updates</h2>
  <div>Item A</div>
  <div>Item B</div>
</section>

Saiba mais:

MDN Reference

ARIA: list role (MDN)

→