Recursos · 57
Diálogos e teclados: teste o fluxo de foco
Verifique a abertura, movimentação, fechamento e restauração de contexto em interfaces que interrompem uma tarefa.
Atualizado · 3 min
O que este guia ajuda a alcançar
- Escolha o componente correto
- Posicione o foco de forma compreensível
- Permita o fechamento
- Restaure o contexto
Verificação rápida
- Um modal é necessário?
- Onde o foco inicial é posicionado?
- O fundo é realmente inerte?
- O diálogo pode ser fechado pelo teclado?
- Para onde o foco retorna se o gatilho desaparecer?
Método passo a passo
- 1
Escolha a interrupção
Decida se as informações precisam de um modal ou podem permanecer na página. Separe diálogos modais, painéis e menus. Prefira elementos nativos apropriados e verifique o comportamento; uma função ARIA não cria interações automaticamente.
Entregável: escolha e justificativa dos componentes.
- 2
Nome e abertura
Conecte um nome acessível a um título visível. Posicione o foco adequadamente: no início do conteúdo estruturado, em um campo útil ou em uma ação segura, dependendo da tarefa. A abertura não deve rolar o início para fora da visualização.
Entregável: abertura testada.
- 3
Navegação por teclado
De acordo com o padrão de diálogo modal da W3C, as teclas Tab e Shift+Tab permanecem dentro do conteúdo, enquanto o conteúdo externo fica inerte. Verifique o foco visível, a ordem lógica e a ausência de armadilhas em controles aninhados.
Entregável: navegação para frente e para trás.
- 4
Fechar e restaurar
Forneça fechamento visível e o comportamento esperado de Escape. Retorne o foco para o gatilho ou para uma etapa lógica se o gatilho não existir mais. Após o envio, os usuários devem encontrar o que mudou e o que pode acontecer em seguida.
Entregável: foco e contexto restaurados.
- 5
Teste erros e espaço
Inclua mensagens longas, campos inválidos, teclados móveis e zoom. A rolagem não deve ocultar permanentemente ações ou títulos. Os erros devem ser compreensíveis e acessíveis sem perda dos valores inseridos.
Entregável: casos extremos em telas estreitas.
- 6
Verificar na página
Teste o componente integrado com teclado e tecnologia assistiva, não apenas em uma demonstração isolada. Verifique a abertura duplicada e o foco após fechamentos repetidos. A aceitação local por si só não estabelece a certificação WCAG.
Entregável: registro de aceitação e limites conhecidos.
Planilha reutilizável
Preencha com suas observações autorizadas. Estes campos são um modelo de trabalho, não resultados observados.
| Campo | Informações a serem registradas |
|---|---|
| Abertura | Gatilho, direção e foco inicial |
| Trajetória | Tab, Shift+Tab, fundo inerte e foco visível |
| Fechamento | Escape, botão e retorno lógico |
| Limites | Testei zoom, conteúdo longo, erros e assistência |
Exemplo prático fictício
Situação ilustrativa
Exemplo fictício: um diálogo confirma a exclusão de uma linha e o botão que o abre desaparece.
Decisão e evidências esperadas
Após a confirmação, o foco retorna para o próximo elemento lógico ou para o cabeçalho da lista, com um resultado anunciado e uma próxima etapa visível.
Distinguir os mecanismos
| Mecanismo | Finalidade | Verificação ou limitação |
|---|---|---|
| Diálogo modal | Interrupção para uma tarefa delimitada | Fundo inerte e foco contido |
| Painel não modal | Manter o contexto disponível | Movimento coerente do foco |
| Seção da página | Apresentar informações contínuas | Geralmente mais fácil de consultar |
Indicadores de gestão
| Indicador | O que mede | Primeira ação |
|---|---|---|
| Percursos de teclado concluídos | Tarefas executadas sem um ponteiro | Corrigir bloqueadores |
| Retornos de foco corretos | Fechamentos restaurando contexto útil | Lidar com gatilhos ausentes |
| Estados de borda testados | Zoom, erros e conteúdo longo | Omissões de documentos |
Erros comuns
- Adicionando aria-modal sem conteúdo inerte
- Perda de foco após o fechamento
- Bloqueio da tecla Escape sem uma saída clara
- Testando apenas a abertura do mouse
Perguntas frequentes
É nativo Diálogo suficiente?
Ele fornece um comportamento útil, mas a nomenclatura, o foco inicial, o conteúdo, os erros e a integração ainda precisam ser testados.
O primeiro botão deve receber o foco?
Nem sempre. O ponto apropriado depende do conteúdo e da tarefa, especialmente para decisões irreversíveis.
A automação pode validar o fluxo?
Ele detecta alguns defeitos, mas a compreensão, a ordem útil e o contexto restaurado precisam de validação manual.
Referências oficiais
As referências apoiam o método. Adapte as verificações ao seu contexto; elas não são uma certificação. Os títulos das referências originais e os documentos de origem podem estar em outro idioma.
Referências consultadas em .
