Skip to content

Esta tradução ainda não foi revista editorialmente. A versão alemã é vinculativa. Deutsche Fassung →

Barrierefreiheit

Por que os títulos e tabelas têm de estar bem marcados no código?

Os títulos e tabelas têm de estar bem marcados no código, porque programas de leitura e motores de busca reconhecem a estrutura de uma página apenas assim. Um visitante que vê vê num relance o que é título e o que é cabeçalho de tabela — um visitante cego e o Google sabem-no apenas se está assim nomeado no código. Texto em negrito não é um título.

Estrutura no código: o índice da página

Um programa de leitura oferece uma atalho para utilizadores cegos: de título a título, como folhear um índice. Isto funciona apenas se os títulos estão marcados no código — com níveis de H1 a H6, como capítulos e subcapítulos. Se o marcação salta de H1 direto para H4, parece um livro em que após o capítulo 1 vem a secção 1.1.1.1: o visitante pergunta-se o que perdeu. Em tabelas é igual: apenas se a linha de cabeçalho está marcada, o programa de leitura consegue dizer a cada número a que coluna pertence. Google usa também esta estrutura para compreender os seus conteúdos.

Assim o nosso núcleo mede a estrutura da página

A verificação automática combina duas ferramentas. A ferramenta axe-core examina listas, listas de descrição e as ligações técnicas entre elementos. Além disso, passos de verificação próprios testam dois pontos que axe-core não cobre na execução padrão: títulos com níveis pulados — como H1 seguido direto de H4 — e tabelas de dados sem uma única célula de cabeçalho marcada. Ambos são violações comprovadas e entram assim no relatório. Importante para a classificação: este critério é tão abrangente que uma execução automática discreta nunca vale como «cumpre» em nosso caso — o relatório mostra-o então como «verificar manualmente», e no padrão Gold uma pessoa avalia a estrutura.

Estrutura limpa desemboca diretamente no Google

A mesma marcação que permite aos cegos saltar possibilita o seu achabilidade: Google valoriza títulos ao classificar uma página e mostra conteúdos bem estruturados com preferência como resposta destacada nos resultados. Uma página com exatamente um título principal, títulos intermédios sensatos e listas reais lê-se para a máquina de busca como um documento bem organizado. Inversamente, uma página cujos «títulos» são apenas texto formatado em negrito perde este sinal completamente — para a máquina é texto comum sem peso.

Beispiele

Überschrift als fetter Text

Verstoß
<p><strong style="font-size:24px">Öffnungszeiten</strong></p>
<p>Montag bis Freitag 8–16 Uhr</p>
Erfüllt
<h2>Öffnungszeiten</h2>
<p>Montag bis Freitag 8–16 Uhr</p>

Nur ein echtes h-Element erscheint in der Überschriftenliste des Vorleseprogramms.

Datentabelle ohne Kopfzellen

Verstoß
<table>
  <tr><td>Tarif</td><td>Preis</td></tr>
  <tr><td>Basis</td><td>9 €</td></tr>
</table>
Erfüllt
<table>
  <caption>Tarife</caption>
  <thead><tr><th scope="col">Tarif</th><th scope="col">Preis</th></tr></thead>
  <tbody><tr><td>Basis</td><td>9 €</td></tr></tbody>
</table>

Mit th und scope sagt das Vorleseprogramm zu jeder Zelle, zu welcher Spalte sie gehört.

  • Peça à sua agência uma visão geral dos níveis de título das suas páginas principais — os degraus devem ser sem lacunas como um índice.
  • Verifique as suas tabelas: cada tabela de dados precisa de uma primeira linha ou coluna marcada como linha de cabeçalho.
  • Substitua texto formatado em negrito que serve como título por títulos reais no sistema redatorial.
  • Use a função de lista no sistema redatorial em vez de digitar hífens manualmente.
  • Atribua exatamente um título principal por página que nomeie o tema da página.

Deutsche Fassung dieser Seite