Rastrear qual elemento tem foco
Para indicar em todos os momentos qual elemento tem foco, use uma Expressão Dinâmica na ferramenta Console . Isso é útil porque quando você está testando a acessibilidade de navegação do teclado de uma página, quando você navega pela página da Web renderizada pressionando Tab ou Shift+Tab, o indicador de anel de foco na página da Web às vezes desaparece, pois o elemento que tem foco está oculto ou fora de exibição.
Usar uma Expressão Dinâmica para determinar qual elemento tem foco
Para acompanhar o elemento focado em guia no Console em DevTools usando uma expressão ao vivo:
Abra a página da Web de demonstração de teste de acessibilidade em uma nova janela ou guia.
Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). DevTools é aberto.
Se a barra de ferramentas de Exibição Rápida não estiver visível em DevTools, pressione Esc para mostrar o painel Modo de Exibição Rápida .
Na barra de ferramentas Modo de Exibição Rápida , selecione a guia Console :
Clique no botão Criar expressão ao vivo (). A seção Expressão Dinâmica é exibida:
Na caixa de texto Expressão , digite o seguinte: document.activeElement
Clique fora da caixa de texto Expressão para salvar a Expressão Ao Vivo. A Expressão Ao Vivo é avaliada e o resultado é exibido abaixo da caixa de texto Expressão :
Clique na página da Web renderizada para colocar o foco nela e pressione Tab ou Shift+Tab para mover o foco na página da Web renderizada.
O valor exibido abaixo
document.activeElement
é o resultado da expressão. À medida que você pressiona Tab para mover entre elementos da página da Web, odocument.activeElement
valor muda:
O código JavaScript em uma Expressão Dinâmica é avaliado em tempo real e o resultado exibido abaixo do código sempre representa o valor de expressão atual.
O valor expressão ao vivo é exibido apenas no Console como uma visualização de texto. Os nós DOM são renderizados usando seus nomes de marca e atributos opcionais de classe ou ID. Por exemplo:
- Um elemento
<a href="#alpacas">Alpacas</a>
âncora é exibidoa#alpacas
no resultado da Expressão Dinâmica. - Uma caixa de
<input>
texto é exibidainput
no resultado da Expressão Dinâmica.
Para indicar qual elemento tem foco na página da Web renderizada, use a ferramenta Elementos , conforme descrito na próxima seção.
Abra o elemento com foco na ferramenta Elementos
O resultado da document.activeElement
Expressão Ao Vivo é apenas uma visualização do elemento DOM que tem foco. Para saber exatamente qual elemento tem foco na página da Web renderizada, use a ferramenta Elementos :
Na ferramenta Console , passe o mouse sobre o resultado da Expressão Ao Vivo (abaixo da
document.activeElement
Expressão Ao Vivo).O elemento focado é realçado na página da Web renderizada:
Clique com o botão direito do mouse no resultado da Expressão Dinâmica e selecione Revelar em Elementos.
Na ferramenta Elementos , a árvore DOM expande e seleciona automaticamente o nó DOM que está focado no momento:
O elemento ativo é a representação da árvore DOM do item da página da Web ao qual você navegou pressionando Tab ou Shift+Tab.
Criar uma referência ao elemento focado na ferramenta Console
Para manipular o elemento focado na ferramenta Console , crie uma referência a ele:
Na ferramenta Console , passe o mouse sobre o resultado da Expressão Ao Vivo (abaixo da
document.activeElement
Expressão Ao Vivo).Clique com o botão direito do mouse no resultado da Expressão Dinâmica e selecione Armazenar outerHTML como variável global.
Um novo nome de variável, como
temp1
aparece na ferramenta Console , e seu valor é renderizado abaixo:Use o elemento na ferramenta Console conforme necessário usando a
temp1
variável. Por exemplo, executetemp1.value = "cat"
para alterar o valor do elemento focado para "cat":
Confira também
Observação
Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Internacional de Atribuição do Creative Commons 4.0. A página original é encontrada aqui e é de autoria de Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).
Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.