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

Acerca de este problema HTML

El validador HTML del W3C aplica reglas sobre qué roles ARIA se pueden aplicar a elementos HTML específicos. El elemento <section> conlleva semánticas implícitas: se mapea al rol ARIA region cuando tiene un nombre accesible (por ejemplo, mediante aria-label o aria-labelledby). Aunque article es efectivamente un rol ARIA válido definido en la especificación WAI-ARIA, la especificación HTML restringe qué roles pueden sobreescribir la semántica nativa de un elemento <section>. Los roles permitidos para <section> incluyen alert, alertdialog, application, contentinfo, dialog, document, feed, log, main, marquee, navigation, none, note, presentation, search, status, tabpanel, y region, pero no article.

Esta restricción existe porque HTML ya proporciona el elemento <article>, que lleva el rol ARIA article implícito de forma nativa. Usar role="article" en un <section> crea una discordancia confusa: el nombre de la etiqueta del elemento sugiere un significado semántico mientras el atributo role declara otro. Esto puede confundir a las tecnologías de asistencia como los lectores de pantalla, que pueden anunciar el elemento de manera inconsistente dependiendo de si priorizan el nombre de la etiqueta o el rol explícito.

La mejor solución depende de tu intención:

Si el contenido es autónomo e independientemente significativo (como una entrada de blog, comentario, o noticia), reemplaza el <section> con un elemento <article>. El elemento <article> ya tiene el rol article implícito, por lo que no se necesita el atributo role.
Si el contenido es una agrupación temática dentro de una página, mantén el elemento <section> y elimina el atributo role. Dale un encabezado o un aria-label para que funcione como un punto de referencia significativo.
Si específicamente necesitas el rol article en un elemento no semántico, usa un <div> con role="article" en su lugar, ya que <div> no tiene rol implícito y permite que se aplique cualquier rol ARIA.

Ejemplos

Incorrecto: `role="article"` en un `<section>`

Esto desencadena el error de validación porque article no es un rol permitido para <section>.

<section role="article">
  <h2>Noticias de última hora</h2>
  <p>Detalles sobre el evento.</p>
</section>

Correcto: usa `<article>` para contenido autónomo

El elemento <article> tiene el rol article implícito, haciendo innecesario el atributo role explícito.

<article>
  <h2>Noticias de última hora</h2>
  <p>Detalles sobre el evento.</p>
</article>

Correcto: usa `<section>` sin un rol conflictivo

Si el contenido es una agrupación temática en lugar de una pieza independiente, mantén <section> y elimina el atributo role. Agregar un nombre accesible mediante aria-labelledby lo convierte en un punto de referencia region.

<section aria-labelledby="news-heading">
  <h2 id="news-heading">Últimas noticias</h2>
  <p>Detalles sobre el evento.</p>
</section>

Correcto: usa un `<div>` cuando necesites un rol `article` explícito

En casos raros donde no puedes usar el elemento <article> pero necesitas el rol article, un <div> acepta cualquier rol ARIA válido.

<div role="article">
  <h2>Noticias de última hora</h2>
  <p>Detalles sobre el evento.</p>
</div>

Correcto: anida `<article>` dentro de `<section>` para artículos agrupados

Si necesitas tanto una agrupación temática como elementos individuales autónomos, anida elementos <article> dentro de un <section>.

<section aria-labelledby="stories-heading">
  <h2 id="stories-heading">Historias principales</h2>
  <article>
    <h3>Primera historia</h3>
    <p>Contenido de la historia.</p>
  </article>
  <article>
    <h3>Segunda historia</h3>
    <p>Contenido de la historia.</p>
  </article>
</section>

Como regla general, prefiere los elementos HTML nativos sobre los roles ARIA siempre que sea posible. El elemento <article> comunica el rol article de manera más confiable que cualquier sobreescritura ARIA, y funciona de manera consistente en todos los navegadores y tecnologías de asistencia sin atributos adicionales.