Verificação HTML: O role "list" é desnecessário para o elemento "ul".

Sobre este problema HTML

A especificação HTML atribui roles ARIA implícitos a muitos elementos, o que significa que os navegadores e tecnologias de apoio já compreendem o seu propósito sem quaisquer atributos extra. O elemento ul tem um role incorporado de list, o elemento nav tem um role de navigation, o elemento button tem um role de button, e por aí fora. Quando você adiciona explicitamente um role que corresponde ao role implícito do elemento, cria redundância que o validador avisa.

Este princípio está formalizado como a primeira regra do uso de ARIA: não use ARIA se um elemento HTML nativo já fornecer a semântica de que você precisa. Adicionar roles ARIA redundantes confunde a sua marcação, pode confundir os desenvolvedores que mantêm o código, e em casos raros pode fazer com que as tecnologias de apoio anunciem informação duas vezes ou se comportem de forma inesperada.

Este mesmo aviso aplica-se a outros elementos com roles implícitos, tal como adicionar role="navigation" a um elemento nav, role="banner" a um elemento header, ou role="contentinfo" a um elemento footer.

Uma nota sobre Safari e `list-style: none`

Há uma exceção bem conhecida que vale a pena mencionar. O Safari remove intencionalmente a semântica de lista dos elementos ul e ol quando list-style: none é aplicado via CSS. Isto significa que o VoiceOver no macOS e iOS não anunciará o elemento como uma lista. Neste caso específico, alguns desenvolvedores adicionam deliberadamente role="list" para restaurar a semântica de lista. Embora o validador W3C continue a assinalá-lo como redundante (visto que avalia HTML isoladamente, sem considerar CSS), este é um padrão de acessibilidade legítimo onde o role redundante serve um propósito real. Se você se encontra nesta situação, pode escolher manter role="list" e aceitar o aviso do validador.

Exemplos

Incorreto: `role="list"` redundante em `ul`

<ul role="list">
  <li>Maçãs</li>
  <li>Bananas</li>
  <li>Cerejas</li>
</ul>

Correto: confiar na semântica implícita

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

Incorreto: outros roles redundantes comuns

<nav role="navigation">
  <a href="/">Início</a>
  <a href="/sobre">Sobre</a>
</nav>

<main role="main">
  <h1>Bem-vindo</h1>
</main>

<footer role="contentinfo">
  <p>© 2024 Example Inc.</p>
</footer>

Correto: elementos nativos sem roles redundantes

<nav>
  <a href="/">Início</a>
  <a href="/sobre">Sobre</a>
</nav>

<main>
  <h1>Bem-vindo</h1>
</main>

<footer>
  <p>© 2024 Example Inc.</p>
</footer>

Exceção aceitável: restaurar semântica removida por CSS

Se a sua folha de estilos remove marcadores de lista e você precisa preservar a semântica de lista para leitores de ecrã, o role redundante é uma escolha pragmática:

<!-- list-style: none é aplicado via CSS, o que remove semântica no Safari -->

<ul role="list" class="unstyled-list">
  <li>Passo um</li>
  <li>Passo dois</li>
  <li>Passo três</li>
</ul>

Neste caso, você pode suprimir ou ignorar o aviso do validador, compreendendo que serve uma necessidade de acessibilidade que o validador não consegue detetar apenas a partir do HTML.