Acompanhar qual elemento tem o foco

Para indicar sempre qual elemento tem foco, use uma Expressão Dinâmica na ferramenta Console . Isso é útil porque, ao testar a acessibilidade da navegação pelo teclado de uma página, ao navegar pela página da Web renderizada pressionando Tab ou Shift+Tab, o indicador do anel de foco na página da Web às vezes desaparece, porque o elemento que tem foco está oculto ou fora da exibição.

Use uma Expressão Dinâmica para determinar qual elemento tem o foco

Para acompanhar o elemento focado na guia no Console no DevTools usando uma Expressão Dinâmica:

1. Abra a página da Web de demonstração do 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). O DevTools é aberto.

3. Se a barra de ferramentas de Visualização Rápida não estiver visível no DevTools, pressione Esc para mostrar o painel de Visualização Rápida .

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

   

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

   

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 Ativa. A Expressão Ativa é avaliada e o resultado é exibido abaixo da caixa de texto Expressão :

   

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. Conforme você pressiona Tab para se mover entre os elementos da página da Web, o document.activeElement valor muda:

   

O código JavaScript em uma expressão ativa é avaliado em tempo real e o resultado exibido abaixo do código sempre representa o valor da expressão atual.

O valor da Expressão Dinâmica é exibido no Console somente 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 Ativa.

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 Dinâmica é 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 Dinâmica (abaixo da document.activeElement Expressão Ativa).

   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 ativa e selecione Revelar no painel 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 em árvore DOM do item da página da Web para o qual você navegou pressionando Tab ou Shift+Tab.

Criar uma referência ao elemento focalizado na ferramenta Console

Para manipular o elemento focalizado na ferramenta Console , crie uma referência para ele:

1. Na ferramenta Console , passe o mouse sobre o resultado da Expressão Dinâmica (abaixo da document.activeElement Expressão Ativa).

2. Clique com o botão direito do mouse no resultado da Expressão Dinâmica e selecione Armazenar HTML externo como variável global.

   Um novo nome de variável, como aparece temp1 na ferramenta Console , e seu valor é renderizado abaixo:

   

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 focalizado para "cat":

   

Confira também

• Analise a falta de indicação do foco do teclado

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.