Compartilhar via

Rastrear qual elemento tem foco

  • Artigo

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:

  1. Abra a página da Web de demonstração de teste de acessibilidade em uma nova janela ou guia.

  2. 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.

  3. 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 .

  4. Na barra de ferramentas Modo de Exibição Rápida , selecione a guia Console :

    A ferramenta Console, no painel Modo de Exibição Rápida

  5. Clique no botão Criar expressão ao vivo (Criar expressão ao vivo). A seção Expressão Dinâmica é exibida:

    Criar uma expressão ao vivo

  6. Na caixa de texto Expressão , digite o seguinte: document.activeElement

  7. 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 :

    O resultado da Expressão Ao Vivo

  8. 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, o document.activeElement valor muda:

    O resultado da Expressão Dinâmica, quando uma caixa de texto é focada na página da Web

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 é exibido a#alpacas no resultado da Expressão Dinâmica.
  • Uma caixa de <input> texto é exibida input 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 :

  1. 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:

    O elemento focado, realçado na página da Web renderizada

  2. 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 focado, selecionado na ferramenta Elementos

    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:

  1. Na ferramenta Console , passe o mouse sobre o resultado da Expressão Ao Vivo (abaixo da document.activeElement Expressão Ao Vivo).

  2. 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:

    O elemento focado como uma nova variável na ferramenta Console

  3. Use o elemento na ferramenta Console conforme necessário usando a temp1 variável. Por exemplo, execute temp1.value = "cat" para alterar o valor do elemento focado para "cat":

    O valor do elemento focado é alterado para

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).

Licença Creative Commons Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.