Validación HTML: Valor incorrecto "listitem" para el atributo "role" en el elemento "article".

Acerca de este problema HTML

El elemento article es un elemento de contenido de sección que representa una composición autocontenida — una entrada de blog, una noticia, una entrada de foro, o contenido independiente similar. Porque lleva el rol ARIA implícito de article, funciona como un elemento de referencia que las tecnologías asistivas reconocen y exponen a los usuarios para navegación. Anular este rol de referencia con listitem crea un conflicto: el elemento pierde su semántica de article para los usuarios de tecnología asistiva, y el rol listitem en sí mismo se vuelve inválido porque las reglas de mapeo de roles de ARIA no lo permiten en article.

Según la especificación ARIA in HTML, cada elemento HTML tiene un conjunto de roles ARIA permitidos. El elemento article solo permite un conjunto limitado de roles (como application, document, feed, main, none, presentation, y region). El rol listitem no está entre ellos. Esta restricción existe para prevenir que los autores creen semánticas confusas o contradictorias que degradarían la experiencia de accesibilidad.

Más allá de la validación, esto importa para usuarios reales. Los lectores de pantalla dependen de la información de roles para transmitir estructura. Un article anunciado como listitem es engañoso — el usuario pierde la capacidad de navegar por elementos de referencia de artículo, y el listitem puede no funcionar correctamente sin un contexto de list padre apropiado. Los navegadores y tecnologías asistivas esperan que los roles listitem aparezcan como hijos directos de un elemento con role="list" (o dentro de elementos nativos ul/ol).

Cómo solucionarlo

La solución depende de tu intención:

Si quieres una lista de artículos, usa marcado de lista HTML nativo (ul o ol con li) y coloca cada article dentro de un elemento de lista. Esto te da tanto semánticas de lista como elementos de referencia de artículo sin ninguna anulación de ARIA.
Si no puedes usar elementos de lista nativos, usa elementos div neutros con role="list" y role="listitem", y anida el article dentro de cada contenedor listitem.
Si el contenido no es realmente una lista, simplemente elimina el atributo role="listitem" y deja que el elemento article use sus semánticas nativas.

Ejemplos

Inválido: `role="listitem"` en un elemento `article`

Esto provoca el error del validador porque listitem no es un rol permitido para article.

<article role="listitem">
  <h2>News item</h2>
  <p>Details about this story.</p>
</article>

Válido: lista nativa con elementos `article` dentro

Usar ul y li proporciona semánticas de lista apropiadas mientras preserva el rol de referencia article.

<ul>
  <li>
    <article>
      <h2>News item</h2>
      <p>Details about this story.</p>
    </article>
  </li>
  <li>
    <article>
      <h2>Another item</h2>
      <p>More details here.</p>
    </article>
  </li>
</ul>

Válido: roles de lista ARIA en contenedores neutros con elementos `article` anidados

Cuando los elementos de lista nativos no son adecuados para tu diseño, usa elementos div para la estructura de lista y anida cada article dentro.

<div role="list">
  <div role="listitem">
    <article>
      <h2>News item</h2>
      <p>Details about this story.</p>
    </article>
  </div>
  <div role="listitem">
    <article>
      <h2>Another item</h2>
      <p>More details here.</p>
    </article>
  </div>
</div>

Válido: `article` independiente sin un rol de lista

Si el contenido no pertenece en una lista, simplemente elimina el rol inválido.

<article>
  <h2>News item</h2>
  <p>Details about this story.</p>
</article>

En cada caso, el principio clave es el mismo: deja que el elemento article mantenga sus semánticas nativas, y usa la estructura de lista apropiada a su alrededor en lugar de forzar un rol conflictivo en él.