Títulos (Cabeçalhos)

GUIA DO COMPONENTE

Explore os comportamentos antes de definir a interface.

Design de Interação

Questionamentos que devem ser feitos ao se projetar componentes do tipo Títulos (Cabeçalhos).

Importante:
Dependendo do contexto de construção de seus respectivos componentes, é possível que haja mais questionamentos, bem como alguns dos apresentados aqui não ser necessários. A avaliação precisa ser feita caso a caso.

Projetando para a "não interação"

Antes de navegar pelo conteúdo é possível perceber a hierarquia visual da página?
O título principal descreve claramente a página ou seção?
Subtítulos agrupam conteúdos relacionados de forma previsível?

Projetando para uso com mouse (qualquer dispositivo de apontamento)

Quando títulos contêm links ou ações, há feedback visual nos componentes acionáveis?
A área clicável não transforma todo o título em ação sem clareza?
A interação não prejudica a leitura da hierarquia?

Projetando para uso com gestos

Títulos permanecem legíveis em telas pequenas?
Quebras de linha preservam sentido e hierarquia?
Títulos com ação possuem área tocável suficiente?

Projetando para uso com teclado (qualquer dispositivo que não seja de apontamento)

Componentes interativos dentro de títulos têm foco visível?
A ordem de foco não pula a hierarquia de conteúdo?
Títulos estáticos não recebem foco desnecessariamente?

Projetando para uso com leitor de telas

É possível navegar por cabeçalhos com atalhos de leitor de telas?
A ordem dos níveis de cabeçalho é coerente?
O texto do título comunica o tópico da seção sem depender apenas de estilo visual?

Métodos de Interação

Possíveis métodos de interação em componentes do tipo Títulos (Cabeçalhos).

Importante:
Apenas os principais métodos estão listados aqui. Componentes customizados devem ter estudos aprofundados.

Interação com mouse (qualquer dispositivo de apontamento)

Títulos estáticos não exigem interação.
Links dentro de títulos devem se comportar como links.
Botões próximos a títulos devem ter nome acessível claro.

Interação com teclado (qualquer dispositivo que não seja de apontamento)

Títulos estáticos não entram na ordem de foco.
Links ou botões associados ao título devem receber foco visível.
A ordem de navegação deve preservar a sequência lógica do conteúdo.

Interação com teclado (ou gestos) + leitor de telas

Use níveis h1 a h6 conforme hierarquia real.
Evite pular níveis sem motivo estrutural.
Não use título apenas por aparência visual.

Gherkin

Metodologia BDD (Behavior-Driven Development ou Desenvolvimento Orientado ao Comportamento) com foco em 3 pilares: Histórias de Usuário, Critérios de Aceite e Sintaxes Gherkin (Dado (Given), Quando (When), Então (Then)).

Cenário: Considerando que estou em uma página que contém títulos e cabeçalhos

Navegação por teclado

QUANDO navego por uma página usando teclado
VEJO que componentes interativos próximos aos títulos seguem a ordem lógica
ENTÃO, quando aciono um link ou botão associado a um título
VEJO que a ação correspondente acontece

Leitor de telas para desktop

Quando uso um leitor de tela no computador (NVDA, JAWS, VoiceOver) e navego pelo componente
- OUÇO os títulos com seus níveis estruturais.
- Consigo navegar pelos cabeçalhos usando atalhos do leitor de telas.
- OUÇO uma ordem coerente de seções e subseções.
ENTÃO, quando interajo com o componente quando aplicável
OUÇO ou percebo que a informação, estado, conteúdo ou ação correspondente está disponível.

Leitor de telas para dispositivos móveis

QUANDO uso um leitor de tela no celular (Talkback, VoiceOver) e deslizo o dedo para navegar pelo componente, acontece o seguinte:
- OUÇO os títulos com seus níveis estruturais.
- Consigo navegar por cabeçalhos usando recursos do leitor de telas.
- OUÇO uma ordem coerente de seções e subseções.
ENTÃO, quando interajo com o componente quando aplicável
OUÇO ou percebo que a informação, estado, conteúdo ou ação correspondente está disponível.

Pontos de Atenção

Pontos de atenção para se preocupar em componentes do tipo Títulos (Cabeçalhos).

Não escolha o nível do título pelo tamanho visual, mas pela hierarquia do conteúdo.
Evite usar múltiplos h1 sem uma estrutura de página bem definida.
Não substitua cabeçalhos por textos em negrito quando eles estruturam conteúdo.

Referências

Referências adicionais sobre componentes do tipo Títulos (Cabeçalhos).

Importante:
A maior parte das referências estão na plataforma do curso junto com as aulas citadas neste material.

Isenção de responsabilidade:
Os links indicados aqui não são recomendações, mas apenas uma curadoria de referências onde você pode encontrar componentes construídos. É importante ressaltar que não há uma unificação nos formatos de construção e não há garantias de que os links mencionados aqui cumpram todos os padrões de design. Dúvidas devem ser direcionadas para as respectivas equipes envolvidas nas construções dos materiais indicados. Antes de "copiar" algum modelo apresentado, leve em consideração que todos os materiais são atualizados constantemente e que os padrões (principalmente proprietários) podem sofrer alterações.