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

Acerca de este problema HTML

Cada elemento semántico HTML lleva un rol ARIA implícito que las tecnologías de asistencia ya reconocen. El elemento <article> tiene un rol integrado de article, que señala que el contenido representa una composición autocontenida — como una entrada de blog, una noticia, un comentario de foro, o cualquier sección que podría distribuirse o reutilizarse de forma independiente. Cuando añades explícitamente role="article" a un elemento <article>, estás diciéndole al navegador y a los lectores de pantalla algo que ya saben.

Aunque esta redundancia no romperá nada funcionalmente, crea ruido innecesario en tu marcado y va en contra de la orientación del W3C sobre el uso de ARIA. La primera regla del uso de ARIA establece: “Si puedes usar un elemento o atributo HTML nativo con la semántica y el comportamiento que necesitas ya incorporados, en lugar de reutilizar un elemento y añadir un rol, estado o propiedad ARIA para hacerlo accesible, entonces hazlo.” Los roles redundantes hacen que el código sea más difícil de mantener y pueden señalar a otros desarrolladores que algo no estándar está sucediendo cuando no es así.

El atributo role="article" es útil cuando se aplica a elementos no semánticos como <div> o <span> que necesitan transmitir semántica de artículo — por ejemplo, en bases de código heredadas donde cambiar el elemento no es factible. Pero en el elemento <article> en sí mismo, simplemente debería eliminarse.

Ejemplos

❌ Rol redundante en `<article>`

Esto activa la advertencia del validador porque role="article" duplica el rol implícito del elemento:

<article role="article">
  <h2>Breaking News</h2>
  <p>A rare bird was spotted in the city park this morning.</p>
</article>

✅ Corregido: no se necesita rol explícito

Simplemente elimina el atributo role. El elemento <article> ya comunica el rol article a las tecnologías de asistencia:

<article>
  <h2>Breaking News</h2>
  <p>A rare bird was spotted in the city park this morning.</p>
</article>

✅ Uso apropiado de `role="article"` en un elemento no semántico

Si no puedes usar el elemento <article> por alguna razón, aplicar el rol a un elemento genérico como <div> es válido y útil:

<div role="article">
  <h2>Breaking News</h2>
  <p>A rare bird was spotted in the city park this morning.</p>
</div>

✅ Múltiples artículos dentro de un feed

Un patrón común es anidar varios elementos <article> dentro de un feed. No se necesitan roles explícitos en los artículos en sí mismos:

<section role="feed" aria-label="Latest posts">
  <article>
    <h2>First Post</h2>
    <p>Content of the first post.</p>
  </article>
  <article>
    <h2>Second Post</h2>
    <p>Content of the second post.</p>
  </article>
</section>

Este mismo principio se aplica a otros elementos semánticos con roles implícitos — por ejemplo, <nav> ya tiene role="navigation", <main> tiene role="main", y <header> tiene role="banner". Evita añadir roles redundantes a cualquiera de estos elementos para mantener tu HTML limpio y conforme a los estándares.