Selecionando Elementos
Vários recursos do axe DevTools pedem que você aponte para elementos específicos na página. Você pode selecionar elementos com o mouse, clicando neles na página, ou com o teclado e tecnologia assistiva usando o „Seletor de Elementos“. Ambos os métodos podem ser usados de forma intercambiável dentro do mesmo passo.
- Onde você seleciona elementos
- Selecionando com o mouse
- Selecionando com o Seletor de Elementos
- Alternando entre elementos destacados
- Removendo uma seleção
Onde você seleciona elementos
| Recurso | O que você seleciona |
|---|---|
| Varredura Parcial da Página | Um elemento ao qual a varredura é limitada |
| Levantando Problemas Manuais | Um elemento contra o qual o problema é levantado, além de qualquer número de elementos relacionados |
| Testes Guiados Inteligentes | Depende da questão. Algumas questões pedem um elemento (por exemplo, uma tabela ou o gatilho de um modal), outras pedem qualquer número de elementos (por exemplo, cabeçalhos ou tabulações que não foram destacados anteriormente) |
Quando um passo aceita apenas um elemento, você não pode selecionar outro até remover a seleção atual.
Selecionando com o mouse
A seleção por mouse é controlada pelo interruptor „Seleção por Mouse“, que indica se está atualmente „LIGADO“ ou „DESLIGADO“. Na maioria dos passos, a seleção por mouse é ativada automaticamente.
Enquanto a seleção por mouse estiver ativada:
- Passe o mouse sobre a página. O elemento sob o seu ponteiro será contornado.
- Clique no elemento contornado para selecioná-lo. O elemento permanecerá destacado na página, e o Seletor de Elementos se expandirá para mostrá-lo.
Os cliques são capturados pelo axe DevTools enquanto a seleção por mouse está ativada, portanto, links e botões na página não serão ativados. Para interagir normalmente com a página (por exemplo, para abrir um modal antes de selecioná-lo), desligue o interruptor „Seleção por Mouse“ e ligue-o novamente quando estiver pronto para selecionar.
Em alguns passos dos Testes Guiados Inteligentes, como selecionar um modal após lançá-lo, a seleção por mouse começa desativada para que você possa interagir com a página primeiro. Ative o interruptor „Seleção por Mouse“ quando estiver pronto para selecionar.
Selecionando com o Seletor de Elementos
O Seletor de Elementos é uma maneira acessível por teclado e amigável a leitores de tela para selecionar elementos sem o uso do mouse. Ele aparece na parte inferior do painel, abaixo do cabeçalho „Seletor de Elementos“, e mostra o DOM da página como uma árvore expansível. Cada item mostra o nome da tag do elemento junto com seus atributos id, class e role, quando presentes.
Na maioria dos recursos, o Seletor de Elementos começa colapsado. Ative o botão „Ver seletor de elementos“ ao lado do cabeçalho para expandi-lo.
Navegação por teclado
| Tecla | Ação |
|---|---|
| Seta para Baixo | Mover para o próximo elemento visível |
| Seta para Cima | Mover para o elemento visível anterior |
| Seta para Direita | Expandir um elemento colapsado, ou mover para seu primeiro filho se já estiver expandido |
| Seta para Esquerda | Colapsar um elemento expandido, ou mover para seu pai se já estiver colapsado |
| Barra de Espaço | Selecionar o elemento focalizado, ou desselecioná-lo se já estiver selecionado |
À medida que você se move pela árvore, o elemento focalizado é destacado na página e rolado para a visualização, para que você possa confirmar que está no elemento correto antes de selecioná-lo.
Você também pode usar os botões abaixo da árvore:
- „Selecionar“ seleciona o elemento focalizado
- „Remover“ remove o elemento focalizado da sua seleção
Clicar em um item na árvore expande ou colapsa-o; não o seleciona. Para selecionar um elemento da árvore com o mouse, clique no item e depois em „Selecionar“.
Suporte para leitor de tela
Quando um item na árvore recebe foco, os leitores de tela anunciam detalhes sobre o elemento, como seu nome acessível e papel calculado. Os itens também anunciam „Selecionado“ quando fazem parte da sua seleção e „Destacado“ (com sua posição, como „Destacado 2 de 5“) quando o axe DevTools os destacou.
Para a lista completa de propriedades e atributos do elemento focalizado, ative seu botão „Mais Informações“.
Alternando entre elementos destacados
Em algumas etapas, o axe DevTools destaca elementos na página para revisar, como cabeçalhos ou tabulações encontradas durante um Teste Guiado Inteligente, ou os problemas destacados ao levantar um problema manual. Em vez de navegar na árvore para encontrar cada um, você pode pular diretamente entre eles.
Quando há dois ou mais elementos destacados, use os botões „Ir para o Destaque Anterior“ e „Ir para o Próximo Destaque“ no Seletor de Elementos. Enquanto um elemento destacado está focalizado, um contador (por exemplo, „2 / 5“) mostra sua posição entre todos os elementos destacados.
Você também pode usar atalhos de teclado enquanto o foco está em qualquer lugar no Seletor de Elementos, incluindo em um item da árvore:
| Atalho | Ação |
|---|---|
| Alt+Shift+N (Option+Shift+N no macOS) | Ir para o próximo elemento destacado |
| Alt+Shift+P (Option+Shift+P no macOS) | Ir para o elemento destacado anterior |
A navegação envolve um ciclo, então, ao passar pelo último elemento destacado, retorna-se ao primeiro, e vice-versa. Se houver apenas um elemento destacado e você tiver se afastado dele, qualquer um dos atalhos leva você de volta a ele.
Removendo uma seleção
Para remover um elemento selecionado, faça um dos seguintes:
- No Seletor de Elementos, foque no elemento e pressione Espaço ou ative „Remover“
- Ative o botão de remoção (lixeira) ao lado do elemento na lista de elementos selecionados
- Nos Testes Guiados Inteligentes, ative „Remover todas as seleções“ para limpar todas as seleções na etapa atual
Ao relatar um problema manualmente, o primeiro elemento que você seleciona é o „Elemento Selecionado“ contra o qual o problema é levantado, e cada elemento após isso é listado em „Elementos Relacionados“.