Acessibilidade em HTML: hierarquia de cabeçalhos (h1–h6)
Gabarito: letra E. A boa prática recomendada pelo W3C para acessibilidade é utilizar um único h1 por página para representar o título principal e manter uma hierarquia lógica de níveis, sem pular de h1 para h3, por exemplo. Essa recomendação está alinhada às diretrizes de acessibilidade do W3C, que orientam que os cabeçalhos devem estruturar o conteúdo de forma semântica e sequencial, facilitando a navegação por leitores de tela e a compreensão da organização da informação.
Os elementos de cabeçalho h1 a h6 são tags HTML que definem títulos e subtítulos em uma página, criando uma hierarquia visual e semântica do conteúdo. O h1 representa o título principal, o h2 os subtítulos de seções, e assim sucessivamente até o h6, que é o nível mais baixo de hierarquia. Essa estrutura é fundamental para a acessibilidade, pois permite que usuários de tecnologias assistivas, como leitores de tela, naveguem pela página de forma organizada, saltando entre os títulos e compreendendo a relação entre as seções.
A recomendação do W3C, presente nas diretrizes de acessibilidade (WCAG), é que a hierarquia de cabeçalhos seja lógica e não pule níveis. Isso significa que, após um h1, o próximo cabeçalho deve ser um h2, e não um h3 ou h4. Pular níveis pode confundir os usuários de leitores de tela, que podem interpretar a estrutura do documento de forma incorreta. Além disso, o W3C recomenda que haja apenas um h1 por página, representando o título principal, para que a estrutura do documento seja clara e consistente.
Na prática, um desenvolvedor deve escolher a tag h com base na importância semântica do título, e não no tamanho da fonte desejado. O tamanho da fonte é uma questão de estilo, que deve ser controlada por CSS, enquanto a tag h define a estrutura e a hierarquia do conteúdo. Por exemplo, em uma página de notícias, o h1 seria o título da notícia principal, o h2 os títulos das seções, e o h3 os subtítulos dentro dessas seções. Essa estrutura permite que um leitor de tela anuncie os títulos e permita ao usuário navegar rapidamente entre as seções.
A distinção importante é entre a apresentação visual e a estrutura semântica. Enquanto o CSS controla a aparência (tamanho, cor, fonte), as tags h1–h6 definem a hierarquia lógica do conteúdo. A banca explora essa confusão, apresentando alternativas que tratam os cabeçalhos como meros elementos de estilo ou que permitem quebras na hierarquia. A pegadinha está em reconhecer que a acessibilidade depende da estrutura semântica correta, não da aparência visual.
Guarde a fronteira entre estrutura semântica e apresentação visual: é exatamente nela que as alternativas se dividem. A alternativa correta é a que respeita a hierarquia lógica e o uso de um único h1, enquanto as demais confundem esses conceitos.
Alternativa A — ❌ Incorreta
A escolha da tag h deve ser baseada na importância semântica do título, não no tamanho da fonte. O tamanho da fonte é controlado por CSS, e usar h1–h6 apenas para obter um tamanho de fonte específico é uma prática incorreta, pois quebra a hierarquia semântica e prejudica a acessibilidade.
Alternativa B — ❌ Incorreta
Pular níveis de cabeçalho (ex.: usar h3 após h1) é uma prática desencorajada pelo W3C. A hierarquia deve ser lógica e sequencial, sem pular níveis, para que leitores de tela e usuários compreendam corretamente a estrutura do documento. O layout não justifica a quebra da hierarquia.
Alternativa C — ❌ Incorreta
As tags h1 a h6 são elementos de bloco (block-level), não de linha (inline). Elas não devem ser inseridas dentro de parágrafos (<p>), pois isso viola a estrutura semântica do HTML. Cada cabeçalho deve ser um elemento independente, representando um título ou subtítulo.
Alternativa D — ❌ Incorreta
Não é obrigatório usar h1 dentro de cada <div>. A recomendação do W3C é que haja apenas um h1 por página, representando o título principal. O uso de múltiplos h1 em uma mesma página é desencorajado, pois pode confundir a estrutura do documento e prejudicar a acessibilidade.
Alternativa E — ✅ Correta ⟵ GABARITO
Esta alternativa reflete corretamente a recomendação do W3C: utilizar apenas um h1 por página para representar o título principal e seguir uma hierarquia lógica sem pular níveis. Essa prática garante que a estrutura do documento seja clara e acessível, permitindo que leitores de tela naveguem de forma eficiente pelo conteúdo.
A hierarquia de cabeçalhos é um pilar da acessibilidade web. Ao estruturar o conteúdo com h1–h6 de forma lógica e sequencial, você garante que todos os usuários, incluindo aqueles que dependem de tecnologias assistivas, possam compreender e navegar pela página com facilidade. Lembre-se: a tag h define a estrutura, não o estilo.
Gabarito: letra E