Elementos `<p>` estilizados não devem ser usados como cabeçalhos

Quando um desenvolvedor usa CSS para fazer um elemento <p> parecer um cabeçalho — aumentando o tamanho da fonte, adicionando peso em negrito ou aplicando outro estilo visual — os utilizadores que vêem podem percebê-lo como um cabeçalho, mas as tecnologias assistivas não conseguem. Os leitores de ecrã identificam cabeçalhos pela sua marcação semântica, não pela sua aparência visual. Um elemento <p> estilizado para parecer um cabeçalho continua a ser anunciado como um parágrafo comum, o que significa que a estrutura do documento é invisível para quem depende da navegação programática por cabeçalhos.

Este problema afeta principalmente utilizadores cegos e surdos-cegos que dependem de leitores de ecrã, bem como utilizadores com deficiências motoras que navegam através de atalhos de teclado. Os utilizadores de leitores de ecrã frequentemente saltam entre cabeçalhos para examinar o conteúdo de uma página — de forma similar a como os utilizadores que vêem procuram visualmente por texto maior e em negrito. Quando os cabeçalhos não estão devidamente marcados, estes utilizadores devem ouvir todo o conteúdo linearmente, desperdiçando tempo e esforço significativos.

Esta regra relaciona-se com o Critério de Sucesso 1.3.1 do WCAG 2.1: Informação e Relacionamentos, que exige que informação, estrutura e relacionamentos transmitidos através da apresentação sejam programaticamente determináveis ou disponíveis em texto. Quando um parágrafo é estilizado para parecer um cabeçalho, o relacionamento estrutural que implica (um rótulo de secção) é apenas transmitido visualmente e falha este critério.

Como corrigir

1. Identifique parágrafos estilizados que funcionam como cabeçalhos. Procure elementos <p> com CSS que aumenta font-size, aplica font-weight: bold, ou os torna visualmente distintos de uma forma que sugira um cabeçalho.
2. Substitua-os por elementos de cabeçalho semânticos. Use <h1> a <h6> com base na posição do elemento na hierarquia do documento.
3. Mantenha uma ordem lógica de cabeçalhos. Comece o conteúdo principal com um <h1>, use <h2> para secções principais, <h3> para subsecções dentro dessas, e assim por diante. Evite saltar níveis (por exemplo, saltar de <h2> para <h4>).
4. Mova o estilo visual para o elemento de cabeçalho. Aplique quaisquer estilos CSS desejados ao elemento de cabeçalho em vez do parágrafo.

Como boa prática, o <h1> deve aparecer no início do conteúdo principal para que os utilizadores de leitores de ecrã possam saltar diretamente para ele usando atalhos de teclado. As subsecções devem usar <h2>, com aninhamento mais profundo usando <h3> a <h6> conforme necessário. Os cabeçalhos devem ser breves, claros e únicos para maximizar a sua utilidade como marcos de navegação.

Além da acessibilidade, a estrutura adequada de cabeçalhos também beneficia o SEO, uma vez que os motores de busca usam cabeçalhos para compreender e classificar o conteúdo da página.

Exemplos

Incorreto: parágrafo estilizado usado como cabeçalho

Neste exemplo, um elemento <p> é visualmente estilizado para parecer um cabeçalho, mas não fornece informação semântica de cabeçalho às tecnologias assistivas.

<style>
  .fake-heading {
    font-size: 24px;
    font-weight: bold;
    margin-top: 1em;
  }
</style>

<p class="fake-heading">Our Services</p>
<p>We offer a wide range of consulting services.</p>

Correto: elemento de cabeçalho apropriado com estilo

Substitua o <p> estilizado por um elemento de cabeçalho apropriado. Os mesmos estilos visuais podem ser aplicados ao cabeçalho se necessário.

<style>
  h2 {
    font-size: 24px;
    font-weight: bold;
    margin-top: 1em;
  }
</style>

<h2>Our Services</h2>
<p>We offer a wide range of consulting services.</p>

Incorreto: múltiplos parágrafos estilizados imitando uma hierarquia de cabeçalhos

<p style="font-size: 32px; font-weight: bold;">Welcome to Our Site</p>
<p>Some introductory content here.</p>

<p style="font-size: 24px; font-weight: bold;">About Us</p>
<p>Learn more about our team.</p>

<p style="font-size: 18px; font-weight: bold;">Our Mission</p>
<p>We strive to make the web accessible.</p>

Correto: hierarquia semântica de cabeçalhos

<h1>Welcome to Our Site</h1>
<p>Some introductory content here.</p>

<h2>About Us</h2>
<p>Learn more about our team.</p>

<h3>Our Mission</h3>
<p>We strive to make the web accessible.</p>

O que esta regra verifica

Esta regra examina elementos <p> e sinaliza qualquer um que tenha sido estilizado para visualmente se assemelhar a cabeçalhos através de propriedades CSS como font-size aumentado, font-weight: bold, ou font-style: italic. Se o estilo de um parágrafo o faz parecer um cabeçalho, deve ser convertido para um elemento de cabeçalho apropriado.

Learn more:

Deque Reference

Deque University - How To Fix

→

accessibility.psu.edu

PennState Accessibility - Heading Tags

→