Validación HTML: El rol "list" es innecesario para el elemento "ul".

Acerca de este problema HTML

La especificación HTML asigna roles ARIA implícitos a muchos elementos, lo que significa que los navegadores y las tecnologías asistivas ya entienden su propósito sin necesidad de atributos adicionales. El elemento ul tiene un rol integrado de list, el elemento nav tiene un rol de navigation, el elemento button tiene un rol de button, y así sucesivamente. Cuando añades explícitamente un rol que coincide con el rol implícito del elemento, creas redundancia que el validador advierte.

Este principio se formaliza como la primera regla del uso de ARIA: no uses ARIA si un elemento HTML nativo ya proporciona la semántica que necesitas. Añadir roles ARIA redundantes desordena tu marcado, puede confundir a los desarrolladores que mantienen el código, y en casos extremos raros puede hacer que las tecnologías asistivas anuncien información dos veces o se comporten de manera inesperada.

Esta misma advertencia se aplica a otros elementos con roles implícitos, como añadir role="navigation" a un elemento nav, role="banner" a un elemento header, o role="contentinfo" a un elemento footer.

Una nota sobre Safari y `list-style: none`

Hay una excepción bien conocida que vale la pena mencionar. Safari intencionalmente elimina la semántica de lista de los elementos ul y ol cuando se aplica list-style: none mediante CSS. Esto significa que VoiceOver en macOS e iOS no anunciará el elemento como una lista. En este caso específico, algunos desarrolladores añaden deliberadamente role="list" para restaurar la semántica de lista. Aunque el validador del W3C seguirá marcándolo como redundante (ya que evalúa HTML de forma aislada, sin considerar el CSS), este es un patrón de accesibilidad legítimo donde el rol redundante sirve a un propósito real. Si te encuentras en esta situación, puedes elegir mantener role="list" y aceptar la advertencia del validador.

Ejemplos

Incorrecto: `role="list"` redundante en `ul`

<ul role="list">
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

Correcto: confiando en la semántica implícita

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

Incorrecto: otros roles redundantes comunes

<nav role="navigation">
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

<main role="main">
  <h1>Welcome</h1>
</main>

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

Correcto: elementos nativos sin roles redundantes

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

<main>
  <h1>Welcome</h1>
</main>

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

Excepción aceptable: restaurando semántica eliminada por CSS

Si tu hoja de estilos elimina los marcadores de lista y necesitas preservar la semántica de lista para lectores de pantalla, el rol redundante es una elección pragmática:

<!-- list-style: none se aplica mediante CSS, lo que elimina la semántica en Safari -->

<ul role="list" class="unstyled-list">
  <li>Step one</li>
  <li>Step two</li>
  <li>Step three</li>
</ul>

En este caso, puedes suprimir o ignorar la advertencia del validador, entendiendo que sirve a una necesidad de accesibilidad que el validador no puede detectar solo desde el HTML.