Rol Estructura del documento

`article`

Marca una composición autónoma que puede sostenerse por sí sola: una entrada de blog, una noticia, una respuesta en un foro o una tarjeta de producto. Se recomienda usar el elemento nativo <article>; solo se debe recurrir a role="article" cuando no sea posible utilizar el elemento HTML.

Cuándo utilizarlo

Se recomienda usar <article>. El elemento nativo incluye el rol de forma implícita y se integra con el algoritmo de estructura del documento.

role="article" sobre un <div> es apropiado cuando no es posible usar el elemento nativo, generalmente por limitaciones de la plantilla. Cada artículo debe contener su propio encabezado para que los usuarios de lectores de pantalla puedan identificarlo.

Cuando se presenta un conjunto de artículos (una línea de tiempo o un índice de blog), se deben envolver en role="feed" y establecer aria-posinset / aria-setsize en cada artículo. De lo contrario, se deben omitir ambos atributos.

Errores frecuentes

Usar <article> para cualquier bloque de contenido. El elemento implica «existe por sí solo». Un fragmento en una barra lateral rara vez es un artículo.
Aplicar role="article" a un <section> que forma parte de un documento mayor y no constituye una composición autónoma. En ese caso se debe usar role="region" o simplemente <section>.
Artículo sin encabezado. Los usuarios de lectores de pantalla que navegan por artículos no tienen ningún nombre para identificarlo.
Anidar <article> dentro de <article> en un hilo de comentarios sin usar aria-labelledby para asignar un nombre accesible distinto a cada artículo interior.

Ejemplo

<article aria-labelledby="post-title-42">
  <h2 id="post-title-42">Why one main landmark per page</h2>
  <p>The <code>&lt;main&gt;</code> landmark identifies…</p>
</article>