Navegar em DevTools com tecnologia de apoio

  • Artigo

Este artigo ajuda-o a utilizar DevTools através do teclado e através de tecnologia de apoio, como leitores de ecrã. Este guia orienta-o pelas ferramentas e separadores que são os mais acessíveis e realça os problemas que poderá encontrar.

Para obter as funcionalidades de DevTools relacionadas com a melhoria da acessibilidade de uma página Web, veja Funcionalidades de teste de acessibilidade.

Painéis de ferramentas com separadores que contêm separadores e páginas

Para obter a terminologia de separadores, ferramentas e painéis, veja Painéis de ferramentas com separadores e páginas na Descrição Geral das DevTools.

Tecnicamente, os separadores são uma lista de separadores do ARIA.

Atalhos de teclado

Para obter os atalhos de teclado predefinidos para DevTools, consulte Atalhos de teclado. Certifique-se de que o marca e remete para o mesmo à medida que explora as diferentes ferramentas.

Abrir DevTools

No Microsoft Edge, pode abrir DevTools com o rato ou teclado, de qualquer uma das seguintes formas. A ferramenta aberta depende da forma como abre o DevTools.

Principais formas:

Ação Ferramenta resultante
Clique com o botão direito do rato em qualquer item numa página Web e, em seguida, selecione Inspecionar. A ferramenta Elementos , com a árvore DOM expandida para mostrar o elemento de página com o botão direito do rato.
Prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). A ferramenta utilizada anteriormente ou a ferramenta de Boas-vindas .
Prima F12. A ferramenta utilizada anteriormente ou a ferramenta de Boas-vindas .

Formas adicionais:

Ação Ferramenta resultante
Na barra de ferramentas do Microsoft Edge, selecione Definições e muito mais (o ícone ) >Mais ferramentas>Ferramentas de desenvolvedor. A ferramenta utilizada anteriormente ou a ferramenta de Boas-vindas .
Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). A ferramenta Consola .
Prima Ctrl+Shift+C (Windows, Linux) ou Comando+Opção+C (macOS). A ferramenta Elementos , com a árvore DOM expandida para mostrar o <body> elemento .
Prima Shift+F10 para abrir o menu de contexto. Para selecionar o comando Inspecionar , prima Seta Para Cima e, em seguida, Enter. A ferramenta Elementos , com a árvore DOM expandida para mostrar o <html> elemento .
Prima a Tecla de Tabulação ou Shift+Tecla de Tabulação para colocar o foco num elemento de página. Em seguida, prima Shift+F10 para abrir o menu de contexto. Para selecionar o comando Inspecionar , prima Seta Para Cima e, em seguida, Enter. A ferramenta Elementos , com a árvore DOM expandida para mostrar o elemento de página destaques.

Pode deslocar-se entre as ferramentas utilizando as teclas de navegação do teclado ou utilizando o Menu de Comandos.

  • Com as DevTools abertas, prima Ctrl+] (Windows, Linux) ou Comando+] (macOS) para mover o foco para a ferramenta seguinte na Barra de Atividade.

  • Prima Ctrl+[ (Windows, Linux) ou Comando+[ (macOS) para mover o foco para a ferramenta anterior na Barra de Atividade.

  • Prima a Tecla de Tabulação ou Shift+Tecla de Tabulação repetidamente até o foco se mover para os separadores da Barra de Atividade ou da Barra de Ferramentas de Vista Rápida e, em seguida, utilize as teclas de seta para se deslocar entre as ferramentas.

Problemas conhecidos:

  • Algumas ferramentas, como as ferramentas Consola e Desempenho , podem mover o foco para a área de conteúdo da ferramenta assim que a ferramenta estiver selecionada. Isto pode dificultar a navegação por teclas de seta.

  • O nome da ferramenta selecionada é anunciado, mas apenas depois de anunciar o conteúdo focado na ferramenta. Esta sequência de anúncios pode facilitar a falta do nome da ferramenta.

Para selecionar uma ferramenta específica, utilize o Menu de Comandos. No Menu de Comandos, uma ferramenta é indicada como um item de Painel ou Vista Rápida .

  1. Com As DevTools abertas, prima Ctrl+Shift+P (Windows, Linux) ou Comando+Shift+P (macOS) para abrir o Menu de Comandos.

    O Menu de Comandos é uma caixa de combinação de conclusão automática de pesquisa difusa.

  2. Escreva o nome de uma ferramenta e, em seguida, utilize a Seta Para Baixo no teclado para navegar para a opção correta.

  3. Prima Enter para executar um comando.

Para abrir a ferramenta Elementos :

  1. Abra o Menu de Comandos.

  2. Comece a escrever elementos, selecione o comando Mostrar Elementos e, em seguida, prima Enter.

Abrir uma ferramenta desta forma coloca o foco na área de conteúdo da ferramenta. No caso da ferramenta Elementos , o foco move-se para a Árvore DOM.

A ferramenta Elementos

Inspecionar um elemento na página

  1. Aceda ao elemento que pretende inspecionar com o cursor no leitor de ecrã.

  2. Clique com o botão direito do rato no elemento e, em seguida, selecione a opção Inspecionar . Esta ação abre a ferramenta Elementos e concentra o elemento na Árvore DOM.

A Árvore DOM é definida como uma árvore ARIA. Por exemplo, consulte Navegar na Árvore DOM com um teclado.

Copiar o código de um elemento na Árvore DOM

  1. Clique com o botão direito do rato num nó na Árvore DOM.

  2. Expanda a opção Copiar .

  3. Selecione Copiar outerHTML.

Problemas conhecidos:

  • Copiar outerHTML geralmente não seleciona o nó atual, mas seleciona o nó principal. No entanto, o conteúdo do elemento ainda deve estar no .outerHTML

Modificar os atributos de um elemento na Árvore DOM

  • Quando o foco estiver num nó da Árvore DOM, prima Enter para editar o nó.

  • Prima a Tecla de Tabulação para alternar entre valores de atributo. Quando ouvir "espaço", está dentro de uma entrada de texto vazia e pode escrever um novo valor de atributo.

  • Prima Ctrl+Enter (Windows, Linux) ou Comando+Enter (macOS) para aceitar a alteração e ouvir todo o conteúdo do elemento.

Problemas conhecidos:

  • Quando escreve na entrada de texto, não recebe comentários. Se escrever e utilizar as teclas de seta para explorar as suas entradas, também não receberá comentários. A forma mais fácil de marcar o seu trabalho é aceitar a alteração e, em seguida, escutar o anúncio de todo o elemento.

Editar o HTML de um elemento na Árvore DOM

  • Quando o foco estiver num nó da Árvore DOM, prima Enter para editar o nó.

  • Prima a Tecla de Tabulação para alternar entre valores de atributo. Quando ouvir o nome do elemento, por exemplo, h2, está dentro de uma entrada de texto e pode alterar o tipo do elemento.

  • Prima Ctrl+Enter (Windows, Linux) ou Comando+Enter (macOS) para aceitar a alteração.

Por exemplo, quando escreve h3 e, em seguida, prime Ctrl+Enter (Windows, Linux) ou Comando+Enter (macOS), as etiquetas de início e de fim do h3 elemento mudam.

Separadores na ferramenta Elementos

A ferramenta Elementos contém separadores adicionais para inspecionar itens como o CSS aplicado a um elemento ou o local relevante na árvore de acessibilidade.

  • Quando o foco estiver na Árvore DOM, prima a Tecla de Tabulação até ouvir que o painel Estilos está selecionado.

  • Prima Seta Para a Direita para explorar outros separadores disponíveis.

A Árvore DOM transforma elementos com href atributos em ligações focusáveis, pelo que poderá ter de premir a Tecla de Tabulação mais do que uma vez para aceder ao painel Estilos .

Problemas conhecidos:

Os separadores Pontos de Interrupção e Propriedades do DOM não são acessíveis por teclado.

Painel Estilos

O painel Estilos tem controlos para filtrar estilos, ativar/desativar estados de elementos (como :ativo e :focus), ativar/desativar classes e adicionar novas classes. Existe também uma poderosa ferramenta de inspeção de estilos para explorar e modificar estilos atualmente aplicados ao elemento que tem o foco na Árvore DOM.

O principal conceito a compreender sobre o painel Estilos é que apenas mostra estilos para o nó atualmente selecionado na Árvore do DOM. Por exemplo, suponha que acabou de inspecionar os estilos de um <header> nó e agora quer ver os estilos de um <footer> nó. Para tal, primeiro tem de selecionar o <footer> nó na Árvore DOM.

Poderá ser mais rápido utilizar o fluxo de trabalho Inspecionar para inspecionar um nó que se encontra nas proximidades gerais do footer nó (como uma ligação no rodapé), que foca a Árvore DOM e, em seguida, utilizar o teclado para navegar para o nó exato no qual está interessado.

Uma vez que todas as ferramentas de estilo se ligam de uma forma ou de outra ao painel Estilos , faz sentido tornar-se primeiro um especialista nesta ferramenta.

  • Com o foco no painel Estilos , prima a Tecla de Tabulação para mover o foco para dentro e explorar os conteúdos.

  • Prima a Tecla de Tabulação até o primeiro estilo ficar ativo. Se estiver a utilizar um leitor de ecrã, este primeiro estilo é anunciado como element.style {}.

  • Prima Seta Para Baixo para navegar na lista de estilos por ordem de especificidade. Um leitor de ecrã anuncia cada estilo começando com o nome do ficheiro CSS, o número de linha no qual o estilo é apresentado e o nome do estilo. Por exemplo, main.css:233 .card__img {}.

  • Prima Enter para inspecionar um estilo mais detalhadamente. O foco começa numa versão editável do nome do estilo.

  • Prima a Tecla de Tabulação para alternar entre as versões editáveis de cada propriedade CSS e os valores correspondentes. No final de cada bloco de estilo encontra-se um campo de texto editável em branco que pode utilizar para adicionar propriedades CSS adicionais.

  • Pode continuar a premir a Tecla de Tabulação para percorrer a lista de estilos ou premir Escape para sair do modo e voltar a navegar por teclas de seta.

Para obter atalhos adicionais, consulte Referência do teclado do painel Estilos.

Problemas conhecidos:

  • Se utilizar o campo de texto editável Filtro , não poderá navegar na lista de estilos.
Ativar/desativar estado do elemento

Para ativar/desativar o estado de um elemento, como :active ou :focus:

  1. Aceda ao painel Estilos e, em seguida, prima a Tecla de Tabulação até o botão Ativar/Desativar Estado do Elemento ter o foco.

  2. Prima Enter para apresentar a secção Forçar estado do elemento , que contém caixas de verificação.

  3. Prima a Tecla de Tabulação até o primeiro estado, :active, ter o foco.

  4. Prima a Barra de Espaço para selecionar (ativar) a caixa de verificação. Se o elemento atualmente selecionado na Árvore DOM tiver um :active estilo, é agora aplicado.

  5. Prima a Tecla de Tabulação para explorar todos os estados disponíveis.

Adicionar uma classe existente

O botão Classes de Elementos está junto ao botão Ativar/ Desativar Estado do Elemento . Para mover o foco para o botão Classes de Elementos , prima a Tecla de Tabulação e, em seguida, prima Enter. O foco muda para um campo de texto de edição com o nome Adicionar nova classe.

O botão Classes de Elementos é utilizado principalmente para adicionar classes existentes a um elemento. Por exemplo, se a sua folha de estilos contiver uma classe auxiliar chamada .clearfix, pode premir . dentro do campo de texto editar para apresentar uma lista de sugestões de classes e utilizar a Seta Para Baixo para encontrar a .clearfix sugestão. Em alternativa, escreva o nome da classe e prima Enter para aplicá-la.

Adicionar uma nova regra de estilo

Adjacente ao botão Classes de Elementos encontra-se o botão Nova Regra de Estilo . Para mover o foco para o mesmo, prima a Tecla de Tabulação e, em seguida, prima Enter. O foco muda para um campo de texto editável dentro do inspetor de estilos. O conteúdo de texto inicial do campo é o nome da etiqueta do elemento que está selecionado na Árvore DOM. Pode escrever qualquer nome de classe que pretenda neste campo e, em seguida, premir a Tecla de Tabulação para lhe atribuir propriedades CSS.

Separador Calculado

Com o foco no separador Calculado , prima a Tecla de Tabulação para mover o foco para dentro e explorar os conteúdos. No separador Calculado , existem controlos para explorar quais as propriedades CSS que são realmente aplicadas a um elemento por ordem de especificidade.

Explorar todos os estilos calculados

Prima a Tecla de Tabulação até chegar à coleção de estilos calculados. Os estilos calculados são apresentados como uma árvore ARIA. A expansão de uma caixa de listagem revela quais os seletores CSS que estão a aplicar o estilo calculado. Estes seletores estão organizados por especificidade. Um leitor de ecrã anuncia o valor calculado, que o seletor CSS está atualmente a corresponder, o nome de ficheiro da folha de estilos que contém o seletor e o número de linha do seletor.

Problemas conhecidos:

  • Se utilizar o campo de texto Filtro , deixará de poder inspecionar os estilos.

Separador Serviços de Escuta de Eventos

Para inspecionar os serviços de escuta de eventos aplicados a um elemento, selecione a ferramenta Elementos e, em seguida, selecione o separador Serviços de Escuta de Eventos (agrupado com o separador Estilos ).

Quando o foco estiver no separador Estilos , prima Seta Para a Direita para navegar para o separador Serviços de Escuta de Eventos .

Explorar serviços de escuta de eventos

Os serviços de escuta de eventos são apresentados como uma árvore ARIA. Pode utilizar as teclas de seta para navegar nas mesmas. Um leitor de ecrã anuncia o nome do objeto DOM ao qual o serviço de escuta de eventos está anexado, bem como o nome do ficheiro onde o serviço de escuta de eventos está definido e o número da linha.

Separador Acessibilidade

Selecione a Tecla de Tabulação para se deslocar no separador Acessibilidade na ferramenta Elementos .

O separador Acessibilidade encontra-se junto ao separador Estilos . No separador Acessibilidade, existem controlos para explorar a árvore de acessibilidade, os atributos ARIA aplicados a um elemento e as propriedades de acessibilidade calculadas. Veja Testar a acessibilidade com o separador Acessibilidade.

Árvore de Acessibilidade

A Árvore de Acessibilidade é apresentada como uma árvore ARIA onde cada um treeitem corresponde a um elemento no DOM. A árvore anuncia a função calculada para o nó selecionado. Elementos genéricos como div e span são anunciados como "GenericContainer" na árvore. Utilize as teclas de seta para percorrer a árvore e explorar as relações principal-subordinado.

Problemas conhecidos:

  • O tipo de árvore ARIA utilizada pelo separador Acessibilidade pode não estar corretamente exposto no Microsoft Edge para leitores de ecrã macOS, como o VoiceOver. Subscreva Chromium problema #868480 para ser informado sobre o progresso deste problema.
  • Cada uma das secções Atributos ARIA e Propriedades Calculadas são marcadas como uma árvore ARIA, mas cada secção não tem atualmente a gestão do foco e não é operável por teclado.

Manter a descrição da ferramenta Inspecionar e a sobreposição da cor da grelha

Quando clica no botão Inspecionar ferramenta e se desloca na página Web composta, a descrição Inspecionar é alterada. Para manter a descrição atual e a sobreposição da cor da grelha apresentadas, prima continuamente Ctrl+Alt (Windows, Linux) ou Ctrl+Option (macOS) enquanto se desloca na página Web composta.

Esta técnica pode ser útil ao utilizar uma lupa de ecrã ou outras tecnologias de apoio. Se não fizer com que a descrição da ferramenta Inspecionar persista, a sobreposição do cursor muda constantemente quando utiliza a ferramenta Inspecionar (botão Inspecionar ferramenta).

Veja Analisar páginas com a ferramenta Inspecionar.

A ferramenta Lighthouse

O Lighthouse executa uma série de testes num site para marcar problemas comuns relacionados com o desempenho, acessibilidade, SEO e várias outras categorias.

Configurar e gerar um relatório

  1. Quando a ferramenta Lighthouse é aberta pela primeira vez em DevTools, o foco é colocado no botão Gerar relatório . Por predefinição, o formulário está configurado para executar relatórios para cada categoria através da emulação móvel numa ligação 3G simulada.

  2. Para alterar as definições do relatório, utilize Shift+Tecla de Tabulação para colocar o foco nas definições do Lighthouse ou navegue novamente no Modo de procura.

  3. Quando estiver pronto para executar o relatório, navegue novamente para o botão Gerar relatório e prima Enter.

  4. O foco muda para uma janela modal com um botão Cancelar que lhe permite sair da auditoria. Poderá ouvir uma série de earcons à medida que a auditoria é executada e atualiza a página várias vezes.

Problemas conhecidos:

  • As diferentes secções do formulário de configuração não estão atualmente marcadas com um fieldset elemento. Pode ser mais fácil navegar nos mesmos no modo de Navegação para descobrir que controlos estão associados a cada secção.
  • Não existe nenhum anúncio de earcon ou região dinâmica quando a auditoria terminar de ser executada. Geralmente, a auditoria demora cerca de 30 segundos, após o qual deverá conseguir navegar para os resultados. Utilizar o Modo de procura pode ser a forma mais fácil de alcançar os resultados.

O relatório do Lighthouse está organizado em secções que correspondem a cada uma das categorias de auditoria. O relatório é aberto com uma lista de classificações para cada categoria. Estas classificações também são ligações que pode utilizar para avançar para as secções relevantes. Em cada secção encontram-se elementos expansíveis details , que contêm informações relacionadas com auditorias aprovadas ou falhadas. Por predefinição, são apresentadas apenas as auditorias com falhas. Cada secção termina com um elemento final details que contém todas as auditorias aprovadas.

Para executar uma nova auditoria, utilize Shift+Tecla de Tabulação para sair do relatório e selecione o botão Gerar relatório .

Confira também

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 encontra-se aqui e é criada por Rob Dodson (Contribuidor, Google WebFundamentals).

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