Valor incorrecto “list” para el atributo “role” en el elemento “section”.

El elemento section conlleva semántica ARIA implícita: se mapea a role="region" cuando se le proporciona un nombre accesible. Según la especificación ARIA in HTML, cada elemento HTML tiene un conjunto de roles que se le permite asumir, y list no está entre los roles permitidos para section. Cuando el validador W3C encuentra role="list" en un section, marca esto como un valor incorrecto porque el rol entra en conflicto con el propósito previsto del elemento como un punto de referencia de sección.

Esto importa por varias razones. Primero, las tecnologías asistivas como los lectores de pantalla dependen del emparejamiento correcto de elementos y roles para transmitir la estructura de la página. Un section anunciado como una lista crea una experiencia confusa y contradictoria: el DOM subyacente dice “esto es una sección del documento” mientras que el rol ARIA dice “esto es una lista”. Segundo, los navegadores pueden manejar semánticas conflictivas de manera impredecible, llevando a comportamientos inconsistentes entre plataformas. Tercero, la especificación HTML define explícitamente qué roles son válidos en cada elemento, y violar estas reglas significa que tu marcado no es conforme.

La mejor solución es casi siempre usar elementos de lista HTML nativos. Los elementos ul, ol y li proporcionan semántica de lista incorporada que todos los navegadores y tecnologías asistivas entienden sin atributos ARIA adicionales. Los elementos nativos también manejan la interacción por teclado y la gestión del foco correctamente desde el inicio.

Si tu diseño requiere un componente personalizado donde el marcado de lista nativo no es factible — por ejemplo, una cuadrícula compleja de tarjetas que funciona como una lista — puedes aplicar role="list" a un elemento semánticamente neutral como div o span. Cada hijo directo que actúe como un elemento de lista debería entonces recibir role="listitem". Este enfoque satisface la especificación ARIA mientras evita el conflicto elemento-rol.

Si realmente necesitas un section para agrupar contenido dentro de una región de página y la lista es solo parte de esa sección, anida una lista apropiada dentro del section en lugar de intentar hacer que el section mismo se comporte como una lista.

Ejemplos

❌ Incorrecto: role="list" en un elemento section

Esto activa el error de validación porque list no es un rol permitido para section.

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

✅ Corregido: Usa elementos de lista nativos (recomendado)

Las listas nativas proporcionan el mejor soporte de accesibilidad sin necesidad de ARIA.

<ul>
  <li>Elemento A</li>
  <li>Elemento B</li>
</ul>

✅ Corregido: Anida una lista dentro del section

Si necesitas la semántica de sección de section junto con una lista, anida la lista dentro de él.

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

✅ Corregido: Roles ARIA en un contenedor neutral

Usa esto solo cuando el marcado de lista nativo no sea posible, como para componentes de interfaz altamente personalizados.

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

✅ Corregido: Elimina el rol completamente

Si el contenido no es realmente una lista, simplemente elimina el atributo role y deja que el section mantenga su semántica natural.

<section>
  <h2>Actualizaciones</h2>
  <div>Elemento A</div>
  <div>Elemento B</div>
</section>

Más información:

MDN Reference

ARIA: list role (MDN)

→