Regiões da página

Métodos de Interação

Mouse e toque

Ler e percorrer a página permite reconhecer os agrupamentos. Clicar ou tocar em links e botões executa as ações desses controles; o fundo de uma região estrutural não executa uma ação.

Teclado

Tab e Shift + Tab percorrem os links, botões e campos na ordem da página; não percorrem cada região estática como uma parada de foco.

Ao chegar ao link Pular para o conteúdo, Enter leva o foco ao destino principal. O próximo Tab permite continuar pelos controles a partir desse ponto, sem retornar ao cabeçalho repetido.

Navegar por controles internos mantém os comandos próprios de cada componente. Não existe um atalho universal de teclado do navegador para saltar entre todas as regiões.

Leitor de telas no computador

Usar a lista de regiões ou os comandos de navegação estrutural do leitor de telas permite localizar conteúdo principal, navegações e outras regiões disponíveis pelo tipo e nome. Os comandos dependem do leitor e de seu modo de navegação.

Escolher uma região nessa lista leva a leitura ao agrupamento correspondente. Em seguida, os comandos de leitura ou de controles permitem percorrer seu conteúdo; não é necessário focar o contêiner com Tab.

Leitor de telas no celular

No VoiceOver, selecionar regiões no rotor, quando a opção estiver disponível, permite navegar entre elas. No TalkBack, os controles de leitura e comandos estruturais dependem da versão e configuração; use o recurso de regiões quando disponível.

No modo padrão de exploração de controles, deslizar o dedo percorre o conteúdo e tocar duas vezes ativa o link ou botão focado. Ativar Pular para o conteúdo leva ao destino principal; percorrer uma região não a transforma em botão.

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 organizada em regiões

Navegação por teclado

1. QUANDO uso Tab a partir do início da página
2. VEJO o link para pular ao conteúdo com foco visível
3. ENTÃO, quando pressiono Enter, VEJO que o foco chega ao destino principal e o próximo Tab continua a navegação a partir desse ponto

Leitor de telas para desktop

1. QUANDO abro a lista de regiões ou uso os comandos estruturais do leitor de telas
2. OUÇO ou percebo conteúdo principal, navegações e outras regiões pelo tipo e nome quando necessário
3. ENTÃO, quando escolho uma região, OUÇO ou percebo seu conteúdo e consigo continuar a leitura sem uma parada de foco artificial em cada contêiner

Leitor de telas para dispositivos móveis

1. QUANDO exploro a página com leitor de telas no celular e uso os recursos estruturais disponíveis
2. OUÇO ou percebo as regiões em uma ordem compreensível e identifico o conteúdo principal
3. ENTÃO, quando uso tocar duas vezes para ativar o link Pular para o conteúdo no modo padrão, OUÇO ou percebo o destino e continuo a tarefa sem repetir toda a navegação

Regiões repetidas

1. DADAS duas navegações com finalidades diferentes
2. QUANDO consulto a lista de regiões do leitor de telas
3. ENTÃO identifico nomes que distinguem as finalidades; navegações de conteúdo e finalidade idênticos mantêm nomes consistentes

Pontos de atenção

Prefira elementos HTML correspondentes à finalidade: header, main, nav, aside e footer. Um agrupamento genérico só precisa ser uma região adicional quando isso ajuda a localizar conteúdo relevante.

O cabeçalho e o rodapé globais têm contexto diferente de header e footer internos a artigo ou seção. Nem todo cabeçalho ou rodapé interno é um marco global da página.

Mantenha um conteúdo principal ativo por documento. Documentos incorporados podem ter sua própria estrutura. Não crie vários marcos principais apenas para separar colunas visuais.

Navegações diferentes precisam de nomes que as distingam. Navegações com os mesmos links e finalidade podem compartilhar o nome. Evite repetir o tipo no rótulo, como Navegação principal navegação.

Uma section com nome acessível pode ser exposta como região. Use aria-labelledby para aproveitar um título visível quando apropriado; não nomeie cada bloco apenas para aumentar a quantidade de regiões.

O link de salto precisa de um destino existente e gerenciamento de foco verificado no navegador. Quando necessário, tabindex="-1" permite foco programático no destino sem adicioná-lo à sequência de Tab.

Regiões e cabeçalhos oferecem formas complementares de navegação. A ordem de leitura não deve contradizer a ordem visual, e conteúdo recolhido não deve deixar controles ocultos no percurso do foco.

Referências

Referências adicionais sobre componentes do tipo Regiões da página.

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.

W3C WAI — Page Regions (link externo, abre em uma nova aba) open_in_new

W3C APG — Landmark Regions (link externo, abre em uma nova aba) open_in_new

W3C — Technique G1: Skip to main content (link externo, abre em uma nova aba) open_in_new

Títulos (Cabeçalhos)

Menu