Passo 1 de 7
Preparar um percurso de teste sem mouse
Prepare duas páginas locais, registre o ambiente e estabeleça um ponto de partida conhecido para o teste.
Trilha de aprendizado · Nível 7 · Tutorial 7
Ao concluir, você será capaz de percorrer as páginas sem mouse e verificar se links, atalhos e controles nativos podem ser alcançados e utilizados em uma sequência compreensível.
Preparar um percurso de teste sem mouse
Prepare duas páginas locais, registre o ambiente e estabeleça um ponto de partida conhecido para o teste. 3 min
Observar a sequência e a visibilidade do foco
Percorra a página nos dois sentidos e identifique dificuldades para localizar o foco, alcançar controles ou continuar a navegação. 2 min
Acionar links e botões com a tecla adequada
Teste a ativação de links e botões nativos e confira o efeito produzido, além do foco visível. 2 min
Operar campos e opções de escolha
Altere textos e escolhas com o teclado e confira se consegue sair de cada controle e retornar a ele. 3 min
Confirmar a continuidade após o link de salto
Use o próximo Tab como evidência de que o salto permite continuar a navegação pelo conteúdo principal. 2 min
Testar preenchimento e validação sem mouse
Faça duas tentativas inválidas e confira se consegue localizar o problema, corrigir o valor e continuar pelo teclado. 3 min
Concluir uma verificação reproduzível
Aplique o roteiro nas duas páginas locais e registre evidências que permitam repetir o teste, localizar barreiras e delimitar a conclusão. 2 min
Passo 1 de 7
Prepare duas páginas locais, registre o ambiente e estabeleça um ponto de partida conhecido para o teste.
O percurso vai separar quatro ações: alcançar o elemento, identificar onde está o foco, operar o controle e continuar a navegação. Por enquanto, prepare a base e o ponto de partida.
No seu computador, salve o código abaixo como index.html. Na próxima tela, você criará o segundo arquivo na mesma pasta. São apenas duas páginas HTML, sem CSS, JavaScript, serviços externos ou outros arquivos.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Início — Teste de teclado</title>
</head>
<body>
<a href="#principal">Pular para o conteúdo principal</a>
<header>
<nav>
<ul>
<li><a href="index.html">Início</a></li>
<li><a href="formulario.html">Formulário</a></li>
</ul>
</nav>
</header>
<main id="principal" tabindex="-1">
<h1>Início do teste</h1>
<p>Esta é uma base local para verificar a navegação pelo teclado.</p>
<p><a href="formulario.html">Abrir formulário de teste</a></p>
<p>O formulário retorna a esta página após um envio válido.
Isso não representa cadastro nem processamento dos dados.</p>
</main>
</body>
</html>Salve este código como formulario.html, na mesma pasta de index.html.
A base reúne links entre páginas, um link de salto em cada página, campos, opções de escolha e botões nativos. O botão de restauração existe somente para a prática; o envio aponta para o arquivo local index.html, sem serviço externo. Use apenas dados fictícios e não aceite sugestões de preenchimento com seus dados pessoais.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Formulário — Teste de teclado</title>
</head>
<body>
<a href="#principal">Pular para o conteúdo principal</a>
<header>
<nav>
<ul>
<li><a href="index.html">Início</a></li>
<li><a href="formulario.html">Formulário</a></li>
</ul>
</nav>
</header>
<main id="principal" tabindex="-1">
<h1>Formulário de teste</h1>
<p>Use somente dados fictícios. Não há cadastro nem serviço de envio.</p>
<form action="index.html" method="get" autocomplete="off">
<p>
<label for="nome">Nome fictício (obrigatório)</label>
<input type="text" id="nome" name="nome" value="Ana Teste" required>
</p>
<p>
<label for="email">E-mail fictício (obrigatório)</label>
<input type="email" id="email" name="email" value="ana@example.com" required>
</p>
<p>
<label><input type="checkbox" name="lembrete" value="sim"> Incluir lembrete (simulação)</label>
</p>
<fieldset>
<legend>Período de preferência</legend>
<label><input type="radio" name="periodo" value="manha" checked> Manhã</label>
<label><input type="radio" name="periodo" value="tarde"> Tarde</label>
</fieldset>
<p>
<label for="tema">Tema</label>
<select id="tema" name="tema">
<option value="estudos" selected>Estudos</option>
<option value="trabalho">Trabalho</option>
<option value="lazer">Lazer</option>
</select>
</p>
<p>
<button type="reset">Restaurar valores iniciais</button>
<button type="submit">Enviar teste local</button>
</p>
</form>
<p><a href="index.html">Voltar ao início</a></p>
</main>
</body>
</html>Exemplo
Página inicial: index.html
Navegador e versão: [consulte a seção Sobre do navegador]
Sistema operacional e versão: [seu ambiente]
Configurações de navegação por teclado: [opções ativas e eventuais ajustes]
Ponto de partida: foco no link “Pular para o conteúdo principal”, antes de ativá-lo.
Abra index.html em uma nova aba, sem fragmento (#...) no endereço, e feche menus ou painéis. Você pode usar o mouse nessa preparação.
Use Tab para posicionar o foco no link “Pular para o conteúdo principal”, sem ativá-lo. Se o foco estiver na barra de endereços ou em um botão do navegador, ele ainda está na interface do navegador, não no documento.
Ao identificar o indicador de foco nesse link, você terá o ponto de partida registrado. Deixe o mouse de lado para iniciar o percurso.
Dica
O navegador e o sistema podem limitar quais links e controles entram no percurso. Se não conseguir alcançar o link inicial, confira as opções de navegação por teclado entre todos os controles. No Safari, por exemplo, há uma opção para destacar os itens da página com Tab. Registre qualquer ajuste e repita a preparação, em vez de começar com o foco em um lugar desconhecido.
Ordene o roteiro proposto para começar um teste que outra pessoa consiga repetir.
Passo 2 de 7
Percorra a página nos dois sentidos e identifique dificuldades para localizar o foco, alcançar controles ou continuar a navegação.
Use Tab para avançar na sequência de foco e Shift+Tab para retornar. Neste primeiro percurso, não pressione Enter, Espaço ou setas: observe o foco sem ativar links nem alterar controles.
Tab passou de um link para um campo, sem parar em um título e em um parágrafo não interativos entre eles. Isso, por si só, comprova uma barreira de teclado.
Na página com formulário da base local, retome o ponto de partida preparado.
Não ative o link de salto nem outros controles nesta rodada.
Dica
Ao terminar a página, o foco pode passar para a barra de endereço ou outros controles do navegador. Isso é normal. Observe se Shift+Tab permite voltar ao documento. Se você apenas perdeu o foco de vista, registre que não conseguiu localizá-lo, sem concluir automaticamente que houve bloqueio.
Informe a página e o ponto de partida. Descreva pelo menos três paradas com Tab e o retorno com Shift+Tab. O foco ficou perceptível? A sequência fez sentido? Foi possível continuar e voltar?
Se houve dificuldade, indique o último elemento com foco visível, as teclas seguintes e o resultado observado.
Escreva pelo menos 40 caracteres (0/40).
Passo 3 de 7
Teste a ativação de links e botões nativos e confira o efeito produzido, além do foco visível.
Com o elemento em foco:
O foco visível confirma que você alcançou o elemento, não que ele funciona. Depois de ativar, confira o efeito esperado: o link abriu o destino correto? O botão executou sua ação?
Associe cada situação ao comportamento nativo correspondente.
Toque em um item e depois no par correspondente.
Nas páginas da base local, sem mouse:
Na página com o formulário:
Dica
Use a restauração somente na base local, com dados fictícios. Pressione Enter apenas depois de alcançar o botão: dentro do campo, ele pode enviar o formulário. Aqui, a restauração é uma ação nativa observável, sem JavaScript.
Relate o destino aberto pelo link e o elemento alcançado com Tab depois da navegação. Para cada teste do botão, registre o valor inicial, a alteração feita, a tecla usada e o valor após a restauração. Se algo não funcionou, indique onde.
Escreva pelo menos 30 caracteres (0/30).
Passo 4 de 7
Altere textos e escolhas com o teclado e confira se consegue sair de cada controle e retornar a ele.
Com o campo de texto em foco, use Ctrl+A no Windows/Linux ou Command+A no macOS para selecionar seu conteúdo. Digitar em seguida substitui o texto selecionado, em vez de acrescentar caracteres. Use Tab para sair e Shift+Tab para voltar.
Com o checkbox em foco, pressione Espaço para marcar ou desmarcar. Observe a mudança da marcação: alcançar o controle não comprova que você conseguiu alterá-lo.
Tab e Shift+Tab permitem entrar e sair do grupo. Dentro dele, as setas normalmente movem o foco e a seleção entre as opções. Não haver uma parada de Tab em cada radio pode ser comportamento nativo, não uma falha.
Tab chega ao radio selecionado. As setas permitem selecionar as outras opções, e outro Tab sai do grupo. Isso indica necessariamente uma barreira?
Com o select em foco, experimente ↑ e ↓ para mudar a opção. A abertura, a confirmação e o fechamento da lista variam conforme navegador e sistema.
Espaço ou Alt+↓ podem abrir a lista. Com ela aberta, Enter costuma confirmar, e Esc costuma fechar. Essas teclas não são uma receita universal: confira qual opção permanece após fechar a lista e sair do controle.
Dica
Verifique duas coisas: conseguiu mudar a escolha e conseguiu sair pelo teclado? Se não, registre o ponto exato, as teclas usadas e o ambiente, sem presumir a causa.
Na página com formulário da base local, use somente o teclado, sem enviar o formulário:
Após cada alteração, use Tab para sair e Shift+Tab para retornar. Confira se o novo texto ou a nova escolha permanece.
Registre a página, o navegador e sua versão e o sistema. Informe os valores anterior e posterior do campo de texto e o resultado nos três controles de escolha. Inclua as teclas usadas e se conseguiu sair e retornar. Se algo impediu a operação, descreva onde aconteceu.
Escreva pelo menos 40 caracteres (0/40).
Passo 5 de 7
Use o próximo Tab como evidência de que o salto permite continuar a navegação pelo conteúdo principal.
O teste não termina ao ativar o link de salto com Enter. O próximo Tab deve alcançar o primeiro link ou controle pertinente dentro do conteúdo principal, sem obrigar você a percorrer o menu anterior.
Em cada página da base local, identifique no HTML o primeiro elemento interativo dentro de main. Ele será o destino esperado para essa comparação.
Dica
A página rolar ou o fragmento após # mudar na URL não confirma, por si só, a continuidade. Em uma página curta, um salto funcional pode nem produzir rolagem perceptível.
Em um teste, o primeiro elemento interativo de main é um campo. Após Enter no link de salto, a página rola e a URL muda. Porém, o próximo Tab alcança um link do menu anterior a main. Qual conclusão corresponde à evidência?
Dica
Depois da verificação, experimente retornar com Shift+Tab. Alcançar novamente elementos anteriores pode ser normal: o salto contorna a navegação repetida, mas não a remove da sequência.
Para cada página, registre o elemento esperado e onde o foco ficou após Enter no atalho seguido de Tab. A continuidade foi confirmada? Use os nomes dos arquivos e dos elementos. Se não conseguiu perceber o foco, registre essa dúvida.
Escreva pelo menos 20 caracteres (0/20).
Passo 6 de 7
Faça duas tentativas inválidas e confira se consegue localizar o problema, corrigir o valor e continuar pelo teclado.
Ao tentar enviar dados inválidos, observe três coisas: qual campo recebe foco, qual mensagem aparece e se você consegue corrigir o valor e continuar sem mouse.
O navegador pode apresentar um problema por vez. Depois de uma correção, outra tentativa pode revelar o próximo. A redação, o idioma e a aparência do aviso variam conforme o navegador e o sistema: não exija uma mensagem idêntica em todos os ambientes.
Atenção
Use o formulário dos arquivos preparados no início do tutorial, no seu computador, sem encaminhar dados a serviços reais. Durante o preenchimento, avance com Tab: Enter pode provocar envio implícito. Neste teste, não é necessário concluir um envio válido.
Na página com o formulário local, faça tudo pelo teclado:
Anote as teclas usadas e qualquer impedimento. Não acione o envio novamente ainda.
Dica
Confira se ele ainda tem uma restrição não atendida. Corrija esse problema e repita a tentativa mantendo o e-mail inválido. Isso pode ser apenas a apresentação de um erro por vez, não uma falha de navegação.
Identifique a página testada. Para cada tentativa, relate o campo de partida, os valores antes e depois da correção, as teclas usadas, o campo que recebeu foco e a mensagem observada.
Diga também se conseguiu corrigir e continuar sem mouse, indicando o próximo controle alcançado. Se houve impedimento, descreva exatamente em qual ação ele ocorreu. Se não conseguiu observar o foco ou o aviso, registre isso.
Escreva pelo menos 80 caracteres (0/80).
Passo 7 de 7
Aplique o roteiro nas duas páginas locais e registre evidências que permitam repetir o teste, localizar barreiras e delimitar a conclusão.
No seu computador, retome as duas páginas locais e execute o roteiro sem mouse, a partir do ponto de partida já definido. Teste os controles presentes em cada página e use somente dados fictícios. Aproveite suas anotações anteriores para comparar os resultados.
Resumo
Classifique cada comportamento observado:
Não atribua o problema ao HTML, ao navegador ou a outra causa sem confirmação.
Exemplo
Exemplo hipotético: “Após Enter no link de salto e mais um Tab, o foco chegou ao primeiro link do menu, não ao conteúdo principal. Isso se repetiu em duas tentativas e impediu contornar o menu pelo atalho.”
Esse relato é mais útil que “o salto está quebrado”. No registro completo, identifique também a página, o ambiente e os elementos envolvidos.
Registre abaixo o resultado do roteiro nas duas páginas. Se encontrar uma barreira, repita o trecho antes de classificá-la. Se não encontrar, declare a ausência de barreiras apenas no percurso testado.
Use este modelo:
Ambiente: navegador e versão; sistema operacional; configurações de teclado relevantes.
Para cada página:
Detalhe também outras barreiras encontradas. Evite resumir tudo a “funcionou”.
Escreva pelo menos 100 caracteres (0/100).
Resumo
Parabéns! Você concluiu: Verificar a navegação e os controles pelo teclado
Use seu registro para repetir a verificação após alterações. No próximo tutorial, você vai conferir títulos e nomes acessíveis no navegador.
Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks
