Validación HTML: El article carece de encabezado. Considera usar elementos "h2"-"h6" para añadir encabezados identificativos a todos los articles.

Acerca de este problema HTML

El elemento <article> está diseñado para envolver contenido independiente y autónomo como artículos de blog, noticias, publicaciones de foro, tarjetas de productos o comentarios de usuarios. El validador W3C muestra esta advertencia porque un <article> sin encabezado no tiene una etiqueta programática, lo que dificulta que los usuarios—especialmente aquellos que dependen de lectores de pantalla—entiendan de qué trata el artículo y naveguen entre múltiples artículos en una página.

Los lectores de pantalla a menudo presentan una lista de landmarks y encabezados para ayudar a los usuarios a navegar por la estructura de una página. Cuando un <article> no tiene encabezado, aparece como una región sin etiqueta, lo cual es confuso y anula el propósito de usar HTML semántico. Un encabezado dentro del <article> actúa como su título identificativo, dando tanto a usuarios videntes como a tecnologías asistivas un resumen claro del contenido que sigue.

Esta es una advertencia en lugar de un error de validación estricto, pero señala una preocupación real de accesibilidad y usabilidad. En casi todos los casos, cada <article> debería contener un encabezado. El nivel de encabezado que elijas debe encajar lógicamente dentro de la jerarquía de encabezados del documento—típicamente <h2> si el <article> se sitúa directamente bajo el <h1> principal de la página, o <h3> si está anidado dentro de una sección que ya usa <h2>.

Cómo solucionarlo

Añade un elemento de encabezado (<h2>–<h6>) como uno de los primeros hijos dentro de cada <article>.
Elige el nivel de encabezado correcto basado en el esquema del documento. No te saltes niveles (p. ej., saltar de <h1> a <h4>).
Haz el encabezado descriptivo. Debe resumir claramente el contenido del artículo.

Si tu diseño no muestra visualmente un encabezado, puedes usar CSS para ocultarlo visualmente mientras lo mantienes accesible para lectores de pantalla (ver los ejemplos a continuación).

Ejemplos

❌ Article sin encabezado (provoca la advertencia)

<h1>Latest news</h1>
<article>
  <p>Our new product launched today with great success.</p>
</article>
<article>
  <p>We are hiring frontend developers. Apply now!</p>
</article>

Cada <article> aquí no tiene encabezado, por lo que las tecnologías asistivas no pueden identificarlos, y el validador muestra una advertencia.

✅ Articles con encabezados apropiados

<h1>Latest news</h1>
<article>
  <h2>Product launch a success</h2>
  <p>Our new product launched today with great success.</p>
</article>
<article>
  <h2>We're hiring frontend developers</h2>
  <p>We are hiring frontend developers. Apply now!</p>
</article>

✅ Articles anidados con jerarquía de encabezados correcta

<h1>Our blog</h1>
<article>
  <h2>How to validate accessibility</h2>
  <p>Use automated tools for an in-depth scan of your site.</p>
  <section>
    <h3>Comments</h3>
    <article>
      <h4>Comment by Alex</h4>
      <p>Great article, very helpful!</p>
    </article>
  </section>
</article>

Cuando los articles están anidados (p. ej., comentarios dentro de un artículo de blog), cada nivel obtiene el siguiente nivel de encabezado para mantener un esquema lógico.

✅ Encabezado visualmente oculto para flexibilidad de diseño

Si tu diseño no requiere un encabezado visible pero aún necesitas uno para accesibilidad, usa una clase de utilidad CSS para ocultarlo visualmente mientras lo mantienes en el árbol de accesibilidad:

<style>
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
</style>

<article>
  <h2 class="visually-hidden">Featured promotion</h2>
  <p>Save 20% on all items this weekend only!</p>
</article>

Este enfoque satisface tanto al validador como a las tecnologías asistivas sin afectar tu diseño visual. Evita usar display: none o visibility: hidden, ya que esos también ocultan el encabezado de los lectores de pantalla.