Controlar que elemento tem o foco

Para indicar sempre que elemento tem foco, utilize uma Expressão Dinâmica na ferramenta Consola . Isto é útil porque quando está a testar a acessibilidade de navegação do teclado de uma página, quando navega na página Web composta ao premir a Tecla de Tabulação ou Shift+Tecla de Tabulação, o indicador do anel de foco na página Web desaparece por vezes, porque o elemento que tem o foco está oculto ou está fora de vista.

Utilizar uma Expressão Dinâmica para determinar que elemento tem foco

Para controlar o elemento focado na Tabulação na Consola em DevTools com uma Expressão Dinâmica:

1. Abra a página Web de demonstração de teste de acessibilidade numa nova janela ou separador.

2. Para abrir o DevTools, clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.

3. Se a barra de ferramentas vista rápida não estiver visível em DevTools, prima Esc para mostrar o painel Vista Rápida .

4. Na barra de ferramentas Vista Rápida , selecione o separador Consola :

   

5. Clique no botão Criar expressão dinâmica (). É apresentada a secção Expressão Dinâmica:

   

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

7. Clique fora da caixa de texto Expressão para guardar a Expressão Dinâmica. A Expressão Dinâmica é avaliada e o resultado é apresentado abaixo da caixa de texto Expressão :

   

8. Clique na página Web composta para colocar o foco na mesma e, em seguida , prima a Tecla de Tabulação ou Shift+Tecla de Tabulação para mover o foco na página Web composta.

   O valor apresentado abaixo document.activeElement é o resultado da expressão. À medida que prime a Tecla de Tabulação para se deslocar entre os elementos da página Web, o document.activeElement valor muda:

   

O código JavaScript numa Expressão Dinâmica é avaliado em tempo real e o resultado apresentado abaixo do código representa sempre o valor de expressão atual.

O valor Da Expressão Dinâmica é apresentado na Consola apenas como uma pré-visualização de texto. Os nós do DOM são compostos com os respetivos nomes de etiquetas e atributos de classe ou ID opcionais. Por exemplo:

• É apresentado um a#alpacas elemento <a href="#alpacas">Alpacas</a> de âncora no resultado da Expressão Dinâmica.
• É apresentada uma input caixa <input> de texto no resultado da Expressão Dinâmica.

Para indicar que elemento tem foco na página Web composta, utilize a ferramenta Elementos , conforme descrito na secção seguinte.

Abrir o elemento com o foco na ferramenta Elementos

O resultado da document.activeElement Expressão Dinâmica é apenas uma pré-visualização do elemento DOM que tem o foco. Para saber exatamente qual o elemento que tem o foco na página Web composta, utilize a ferramenta Elementos :

1. Na ferramenta Consola , paire o cursor sobre o resultado da Expressão Dinâmica (abaixo da document.activeElement Expressão Dinâmica).

   O elemento focado está realçado na página Web composta:

   

2. Clique com o botão direito do rato no resultado da Expressão Dinâmica e, em seguida, selecione Revelar no painel Elementos.

   Na ferramenta Elementos , a árvore DOM expande-se automaticamente e seleciona o nó DOM que está atualmente focado:

   

   O elemento ativo é a representação da árvore DOM do item da página Web para o qual navegou ao premir a Tecla de Tabulação ou Shift+Tecla de Tabulação.

Criar uma referência para o elemento focado na ferramenta Consola

Para manipular o elemento focado na ferramenta Consola , crie uma referência para o mesmo:

1. Na ferramenta Consola , paire o cursor sobre o resultado da Expressão Dinâmica (abaixo da document.activeElement Expressão Dinâmica).

2. Clique com o botão direito do rato no resultado da Expressão Dinâmica e, em seguida, selecione Armazenar outerHTML como variável global.

   É apresentado um novo nome de variável, como temp1 na ferramenta Consola , e o respetivo valor é composto abaixo:

   

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

   

Confira também

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

Observação

Partes desta página são modificações baseadas no trabalho criado e partilhado pela Google e utilizado de acordo com os termos descritos na Licença Internacional Creative Commons Attribution 4.0. A página original é encontrada aqui e é da autoria de Kayce Bascos.

Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.