Acessibilidade na Hierarquia de Informação — Estrutura de cabeçalhos

Um erro muito comum é confundir o tamanho da fonte com o nível de hierarquia do cabeçalho, os títulos devem ser definidos pensando na lógica e não no tamanho da fonte.

Pessoas que usam leitores de telas, como pessoas cegas ou com baixa visão, usam um atalho para navegar entre títulos. Isso permite que elas façam uma leitura dinâmica da página e encontrem o conteúdo desejado com menos esforço.

Nesse artigo, você vai encontrar as principais informações que vão te ajudar a definir a estrutura de cabeçalhos, com uma boa hierarquia da informação.

Como definir a hierarquia dos títulos

Dificilmente usaremos cabeçalhos de nível h4, h5 e h6, pois eles são mais comuns em sites com conteúdo denso, como documentações técnicas. A maioria dos sites só precisam dos níveis h1, h2 e h3.

Título de nível h1

O título h1 é como se fosse a capa de um livro, ele deve ser único e descrever claramente toda a página. Todas as páginas precisam ter um título h1, em alguns casos, é possível colocar esse título invisível, mas que será lido pelo leitor de telas.

WCAG, critério 2.4.2: Página com título — Nível de conformidade A

Título de nível h2

O título h2 é como se fosse o título de cada capítulo do livro, normalmente usado para marcar seções da página e colunas do footer. Toda seção precisa ter um título que o descreva claramente.

Ele deve estar diretamente ligado ao título h1, por exemplo, não pode existir um h2 dentro de outro h2 ou dentro de títulos com hierarquia inferior, como h3, h4, h5 e h6.

Título de nível h3

O título h3, é como se fosse os tópicos dentro do capítulo do livro, normalmente usado para marcar os títulos de blocos dentro de uma seção.

Ele deve estar diretamente ligado a um título h2, por exemplo, não pode existir um h3 sem um h2 relacionado, como também não pode existir um h3 dentro de outro h3 ou dentro de títulos com hierarquia inferior, como h4, h5 e h6.

Títulos de nível h4, h5 e h6

Raramente será necessário usar essas marcações, mas caso precise, seguir a mesma lógica do h3. Só pode existir um h4 dentro de um h3, o h5 dentro de um h4 e o h6 dentro de um h5. Não pode colocar um título dentro de outro com o mesmo nível de hierarquia. Deve ter cuidado para não inverter a ordem no nível dos títulos.

Não colocar títulos em imagens

Devemos permitir que todos os textos sejam customizáveis, por isso nunca coloque títulos em imagens, para estilizar, use o CSS. Quando colocamos o texto na imagem, impedimos, por exemplo, que:

• Pessoas com baixa visão ou pessoas idosas, aumentem o tamanho da fonte.
• Pessoas com dislexia customizem o estilo da fonte.
• Pessoas neurodiversas mudem a cor do fundo e a cor do texto.

Esses recursos de customização estão integrados ao navegador ou dispositivo, além de existir plugins gratuitos que oferecem várias ferramentas de customização como o WebHelp.

WCAG, critério 1.4.5: Imagens de texto

Outras recomendações da WCAG

WCAG, critério 2.4.6: Cabeçalhos e rótulos — Nível de conformidade AA

WCAG, critério 2.4.10: Cabeçalho de Seção — Nível de conformidade AAA

Preparando o Handoff de Acessibilidade

Essa etapa pode ser feita pela pessoa responsável pelo UX Writing, como muitas vezes os times não possuem pessoas dedicadas a escrita, ou as mesmas ainda estão em processo de aprendizado, caberá ao time trabalhar em conjunto para realizar essa tarefa.

No protótipo da aplicação, coloque uma anotação informando quais são os títulos e qual o nível de hierarquia. Conforme exemplo a seguir:

Exemplo de um wireframe com o Handoff da estrutura de cabeçalhos

Agora vamos analisar alguns aspectos importantes desse exemplo:

O primeiro título visível da página descreve apenas o bloco, e não a tela inteira, por isso ele não é o nosso h1. Nesse caso, colocamos o nome da empresa invisível, mas que será lido pelo leitor de telas e pelos rôbos de SEO da Google.

Na segunda seção, o texto “Espalhando a palavra da acessibilidade”, apesar de ter a fonte maior é apenas uma frase de efeito, ela não descreve claramente a seção. Nesse caso, o texto menor “Nossas mentorias”, é o título h2, pois semanticamente é o que faz mais sentido.

Ainda na segunda seção, a frase de efeito parece um título porque a fonte é maior e tem um grande destaque visual. Para evitar confusão durante o desenvolvimento, precisamos marcar esse texto como p de parágrafo.

No rodapé, ou footer, cada coluna tem um título, como o tamanho da fonte desses títulos normalmente é menor, as pessoas que desenvolvem ficam confusas e usam a marcação de h6, isso quando não usam p , div ou span. Por isso, é tão importante marcar que eles são do nível de hierarquia h2.

Como fazer o handoff de designs acessíveis para as pessoas desenvolvedoras…

Como testar

Para testar, você pode usar o próprio leitor de telas. A maioria dos leitores, fornece um atalho para navegar entre os cabeçalhos da página, verifique qual é o comando para o seu programa e sistema operacional.

Além disso, é possível realizar a análise da estrutura de cabeçalhos de forma visual, usando o plugin do Google Chrome, HeadingsMap.

HeadingsMap

Ao ativar o plugin, vai abrir uma caixa de diálogo lateral mostrando todos os cabeçalhos e o nível de hierarquia, conforme imagem a seguir:

Faça uma análise verificando se a hierarquia está correta, se todos os títulos da página aparecem na lista, se existem frases marcadas como título incorretamente e se a leitura apenas dos títulos está compreensível.

Problemas comuns de implementação

• Usar tags p, span ou div para marcar os títulos.
• Colocar o atributo role para alterar a semântica.

Nota para dev: os cabeçalhos devem ser definidos usando as tags do HTML: h1, h2, h3, h4, h5e h6, sem alteração da semântica. Caso, você coloque um atributo role no cabeçalho, ele perderá a função de cabeçalho, nesse caso, o leitor de telas vai excluir esse elemento da navegação entre títulos/cabeçalhos.

Implementação em aplicativos mobile

Diferente do HTML que possui 6 níveis de hierarquia, nos aplicativos mobile que geralmente possuem telas mais otimizadas e com menos informações, as principais tecnologias fornecem apenas 1 opção para a semântica dos títulos.

A pessoa que desenvolve para mobile, ao receber o Handoff com h1, h2 , h3 , h4 , h5 e h6 pode usar o código exemplificado a seguir, conforme a tecnologia utilizada:

Exemplos de código para mobile

• No Kotlin, defina o atributo android:accessibilityHeading do elemento como true.
• No Swift, defina o accessibilityTraits como .header.
• No React Native, adicione o atributo accessibilityRole com a propriedade header.
• No Flutter, envolva o texto com o Widget Semantics e adicione o atributo header com o valor true.

Estudo de caso

Para exemplificar a importância das recomendações abordadas nesse artigo, para fins educativos, vamos analisar um site que não possui uma hierarquia da informação bem definida.

Pense na seguinte tarefa: Você é uma pessoa cega e quer comprar um Cropped no site da Enjoei, o site tem muitas peças, você não tem tempo e nem paciência para escutar cada item da tela. Para encontrar o produto mais rápido, você usa um atalho do teclado que navega entre os títulos.

Agora análise a imagem a seguir, leia todos os títulos listados na caixa de diálogo preta que está do lado esquerdo e responda a seguinte pergunta: Qual é o título da seção onde estão os Croppeds?

Estrutura de cabeçalhos do site Enjoei

Como você pode ter percebido, é impossível identificar as seções apenas lendo ou navegando pelos títulos, pois tem muitas frases de efeito que não fazem nenhum sentido para títulos. Como no caso dos Croppeds que o título é “qual a diferença”.

Para quem prefere assistir vídeos, confira o resumão desse artigo no YouTube:

Ainda estamos produzindo o vídeo, disponibilizaremos em breve.

Obrigada por ler. Espero que esse conteúdo seja útil para você e seu time☺