Verificação HTML: Artigo não possui título. Considere usar elementos "h2"-"h6" para adicionar títulos identificadores a todos os artigos.

Sobre este problema HTML

O elemento <article> destina-se a envolver conteúdo independente e autossuficiente, como publicações de blog, notícias, publicações em fóruns, cartões de produtos ou comentários de utilizadores. O validador W3C gera este aviso porque um <article> sem título não possui um rótulo programático, tornando mais difícil para os utilizadores—especialmente aqueles que dependem de leitores de ecrã—compreender sobre o que trata o artigo e navegar entre múltiplos artigos numa página.

Os leitores de ecrã frequentemente apresentam uma lista de marcos e títulos para ajudar os utilizadores a saltar através da estrutura de uma página. Quando um <article> não possui título, aparece como uma região sem rótulo, o que é confuso e anula o propósito de usar HTML semântico. Um título dentro do <article> atua como o seu título identificador, dando tanto aos utilizadores videntes como às tecnologias assistivas um resumo claro do conteúdo que se segue.

Este é um aviso em vez de um erro de validação rigoroso, mas sinaliza uma preocupação real de acessibilidade e usabilidade. Em quase todos os casos, cada <article> deve conter um título. O nível de título que escolher deve encaixar logicamente dentro da hierarquia de títulos do documento—tipicamente <h2> se o <article> fica diretamente sob o <h1> principal da página, ou <h3> se estiver aninhado dentro de uma secção que já usa <h2>.

Como corrigir

Adicione um elemento de título (<h2>–<h6>) como um dos primeiros filhos dentro de cada <article>.
Escolha o nível de título correto com base no esboço do documento. Não salte níveis (por exemplo, saltar de <h1> para <h4>).
Torne o título descritivo. Deve resumir claramente o conteúdo do artigo.

Se o seu design não exibe visualmente um título, pode usar CSS para o ocultar visualmente mantendo-o acessível aos leitores de ecrã (veja os exemplos abaixo).

Exemplos

❌ Artigo sem título (gera o aviso)

<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> aqui não possui título, portanto as tecnologias assistivas não os conseguem identificar, e o validador gera um aviso.

✅ Artigos com títulos adequados

<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>

✅ Artigos aninhados com hierarquia de títulos correta

<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>

Quando os artigos são aninhados (por exemplo, comentários dentro de uma publicação de blog), cada nível recebe o próximo nível de título para manter um esboço lógico.

✅ Título visualmente oculto para flexibilidade de design

Se o seu design não prevê um título visível mas ainda precisa de um para acessibilidade, use uma classe utilitária CSS para o ocultar visualmente mantendo-o na árvore de acessibilidade:

<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>

Esta abordagem satisfaz tanto o validador como as tecnologias assistivas sem afetar o seu layout visual. Evite usar display: none ou visibility: hidden, pois essas propriedades também ocultam o título dos leitores de ecrã.