Compartilhar via

Navegar por DevTools com tecnologia assistiva

  • Artigo

Este artigo ajuda você a usar o DevTools por meio do teclado e por meio de tecnologia assistiva, como leitores de tela. Este guia orienta você pelas ferramentas e guias que são as mais acessíveis e destaca os problemas que você pode encontrar.

Para recursos do DevTools relacionados à melhoria da acessibilidade de uma página da Web, consulte Recursos de teste de acessibilidade.

Painéis de ferramentas com guias e páginas

Para obter a terminologia de guias, ferramentas e painéis, confira Painéis de ferramentas com guias e páginas em Visão geral de DevTools.

Tecnicamente, as guias são uma tablist do ARIA.

Atalhos de teclado

Para obter os atalhos de teclado padrão para DevTools, consulte Atalhos de teclado. Certifique-se de marque-o e refira-o à medida que você explora as diferentes ferramentas.

Abrir DevTools

No Microsoft Edge, você pode abrir o DevTools usando o mouse ou o teclado, de qualquer uma das seguintes maneiras. Qual ferramenta é aberta depende de como você abre o DevTools.

Principais maneiras:

Ação Ferramenta resultante
Clique com o botão direito do mouse em qualquer item em uma página da Web e selecione Inspecionar. A ferramenta Elementos , com a árvore DOM expandida para mostrar o elemento de página com o botão direito do mouse.
Pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). A ferramenta usada anteriormente ou a ferramenta Welcome .
Pressione F12. A ferramenta usada anteriormente ou a ferramenta Welcome .

Maneiras adicionais:

Ação Ferramenta resultante
Na barra de ferramentas do Microsoft Edge, selecione Configurações e muito mais (ícone 'Configurações e muito mais') >Mais ferramentas>Ferramentas de desenvolvedor. A ferramenta usada anteriormente ou a ferramenta Welcome .
Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console .
Pressione Ctrl+Shift+C (Windows, Linux) ou Command+Option+C (macOS). A ferramenta Elementos , com a árvore DOM expandida para mostrar o <body> elemento.
Pressione Shift+F10 para abrir o menu com o botão direito do mouse. Para selecionar o comando Inspecionar , pressione Seta para Cima e , em seguida, Insira. A ferramenta Elementos , com a árvore DOM expandida para mostrar o <html> elemento.
Pressione Tab ou Shift+Tab para colocar o foco em um elemento de página. Em seguida, pressione Shift+F10 para abrir o menu com o botão direito do mouse. Para selecionar o comando Inspecionar , pressione Seta para Cima e , em seguida, Insira. A ferramenta Elementos , com a árvore DOM expandida para mostrar o elemento de página focado.

Você pode se mover entre as ferramentas usando as teclas de navegação do teclado ou usando o Menu de Comando.

  • Com o DevTools aberto, pressione Ctrl+] (Windows, Linux) ou Command+] (macOS) para mover o foco para a próxima ferramenta na Barra de Atividades.
  • Pressione Ctrl+[ (Windows, Linux) ou Command+[ (macOS) para mover o foco para a ferramenta anterior na Barra de Atividades.
  • Pressione Tab ou Shift+Tab repetidamente até que o foco se mova para as guias da Barra de Atividades ou barra de ferramentas de Exibição Rápida e use as teclas de seta para se mover entre as ferramentas.

Problemas conhecidos

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

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

Para selecionar uma ferramenta específica, use o Menu de Comando. No Menu de Comando, uma ferramenta é indicada como um item painel ou modo de exibição rápida .

  1. Com o DevTools aberto, pressione Ctrl+Shift+P (Windows, Linux) ou Command+Shift+P (macOS) para abrir o Menu de Comando.

    O Menu de Comando é uma caixa de combinação de preenchimento automático de pesquisa difusa.

  2. Digite o nome de uma ferramenta e use a Seta para baixo no teclado para navegar até a opção correta.

  3. Pressione Enter para executar um comando.

Para abrir a ferramenta Elementos :

  1. Abra o Menu de Comando.

  2. Comece a digitar elementos, selecione o comando Mostrar Elementos e pressione Enter.

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

A ferramenta Elementos

Inspecionar um elemento na página

  1. Acesse o elemento que você deseja inspecionar, usando o cursor no leitor de tela.

  2. Clique com o botão direito do mouse no elemento e selecione a opção Inspecionar . Isso abre a ferramenta Elementos e concentra o elemento na Árvore DOM.

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

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

  1. Clique com o botão direito do mouse em um nó na Árvore do 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ó pai. No entanto, o conteúdo do elemento ainda deve estar no copiado outerHTML.

Modificar os atributos de um elemento na Árvore DOM

  • Quando o foco estiver em um nó da Árvore DOM, pressione Enter para editar o nó.

  • Pressione Tab para mover entre valores de atributo. Quando você ouve "espaço", você está dentro de uma entrada de texto vazia e pode digitar um novo valor de atributo.

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

Problemas conhecidos

  • Ao digitar na entrada de texto, você não recebe comentários. Se você fizer um erro de digitação e usar as teclas de seta para explorar sua entrada, também não receberá comentários. A maneira mais fácil de marcar seu trabalho é aceitar a alteração e ouvir todo o elemento a ser anunciado.

Editar o HTML de um elemento na Árvore DOM

  • Quando o foco estiver em um nó da Árvore DOM, pressione Enter para editar o nó.

  • Pressione Tab para mover entre valores de atributo. Quando você ouve o nome do elemento, por exemplo, h2, você está dentro de uma entrada de texto e pode alterar o tipo do elemento.

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

Por exemplo, quando você digita h3 e pressiona Ctrl+Enter (Windows, Linux) ou Command+Enter (macOS), as marcas de início e de extremidade do h3 elemento mudam.

Guias na ferramenta Elementos

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

  • Quando o foco estiver na Árvore do DOM, pressione Tab até ouvir que o painel Estilos está selecionado.

  • Pressione Seta para a direita para explorar outras guias disponíveis.

A Árvore do DOM transforma elementos com href atributos em links focalizáveis, portanto, talvez seja necessário pressionar Tab mais de uma vez para alcançar o painel Estilos .

Problemas conhecidos

As guias Pontos de Interrupção e Propriedades do DOM não são acessíveis ao teclado.

Painel Estilos

O painel Estilos tem controles para filtrar estilos, alternar estados de elemento (como :active e :focus), alternar classes e adicionar novas classes. Há também uma poderosa ferramenta de inspeção de estilo para explorar e modificar estilos atualmente aplicados ao elemento que tem foco na Árvore do DOM.

O conceito chave para entender sobre o painel Estilos é que ele só mostra estilos para o nó selecionado no momento na Árvore do DOM. Por exemplo, suponha que você tenha terminado de inspecionar os estilos de um <header> nó e agora deseja examinar os estilos de um <footer> nó. Para fazer isso, primeiro você precisa selecionar o <footer> nó na Árvore do DOM.

Você pode achar mais rápido usar o fluxo de trabalho Inspecionar para inspecionar um nó que está nas proximidades gerais do footer nó (como um link dentro do rodapé), que concentra a Árvore DOM e, em seguida, usar o teclado para navegar até o nó exato no qual você está interessado.

Como todas as ferramentas de estilo se conectam de uma forma ou de outra de volta ao painel Estilos , faz sentido primeiro se tornar um especialista nessa ferramenta.

  • Com foco no painel Estilos , pressione Tab para mover o foco para dentro e explorar o conteúdo.

  • Pressione Tab até que o primeiro estilo fique ativo. Se você estiver usando um leitor de tela, esse primeiro estilo será anunciado como element.style {}.

  • Pressione Seta para baixo para navegar na lista de estilos por ordem de especificidade. Um leitor de tela anuncia cada estilo começando com o nome do arquivo CSS, o número de linha no qual o estilo é exibido e o nome do estilo. Por exemplo, main.css:233 .card__img {}.

  • Pressione Enter para inspecionar um estilo com mais detalhes. O foco começa em uma versão editável do nome do estilo.

  • Pressione Tab para mover entre versões editáveis de cada propriedade CSS e os valores correspondentes. No final de cada bloco de estilo está um campo de texto editável em branco que você pode usar para adicionar propriedades adicionais do CSS.

  • Você pode continuar pressionando Tab para passar pela lista de estilos ou pressionar Escape para sair do modo e voltar a navegar por teclas de seta.

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

Problemas conhecidos
  • Se você usar o campo Filtrar texto editável, não poderá navegar pela lista de estilos.

Estado do elemento de alternância

Para alternar o estado de um elemento, como :active ou :focus:

  1. Vá para o painel Estilos e pressione Tab até que o botão Estado do Elemento de Alternância tenha foco.

  2. Pressione Enter para exibir a seção Estado do elemento Force , que contém caixas de seleção.

  3. Pressione Tab até o primeiro estado, :active, tem foco.

  4. Pressione a barra de espaços para selecionar (habilitar) a caixa de seleção. Se o elemento selecionado atualmente na Árvore do DOM tiver um :active estilo, ele agora será aplicado.

  5. Pressione Tab para explorar todos os estados disponíveis.

Adicionar uma classe existente

O botão Classes de Elemento fica ao lado do botão Estado do Elemento de Alternância . Para mover o foco para o botão Classes de Elemento , pressione Tab e pressione Enter. O foco se move para um campo de texto de edição rotulado Adicionar nova classe.

O botão Classes de Elemento é usado principalmente para adicionar classes existentes a um elemento. Por exemplo, se sua planilha de estilos contiver uma classe auxiliar chamada .clearfix, você poderá pressionar . dentro do campo editar texto para exibir uma lista de sugestões de classes e usar a Seta para baixo para encontrar a .clearfix sugestão. Ou digite o nome da classe por conta própria e pressione Enter para aplicá-lo.

Adicionar uma nova regra de estilo

Adjacente ao botão Classes de Elemento é o botão Nova Regra de Estilo . Para mover o foco para ele, pressione Tab e pressione Enter. O foco se move para um campo de texto editável dentro do inspetor de estilos. O conteúdo de texto inicial do campo é o nome da marca do elemento selecionado na Árvore DOM. Você pode digitar qualquer nome de classe desejado neste campo e pressionar Tab para atribuir propriedades CSS a ele.

Guia computada

Com foco na guia Computação , pressione Tab para mover o foco para dentro e explorar o conteúdo. Na guia Computada , há controles para explorar quais propriedades CSS são realmente aplicadas a um elemento em ordem de especificidade.

Explorar todos os estilos computados

Pressione Tab até chegar à coleção de estilos computados. Os estilos computados são apresentados como uma árvore ARIA. A expansão de uma caixa de listagem revela quais seletores CSS estão aplicando o estilo computado. Esses seletores são organizados por especificidade. Um leitor de tela anuncia o valor computado, que o seletor CSS está correspondendo no momento, o nome do arquivo da planilha de estilos que contém o seletor e o número de linha do seletor.

Problemas conhecidos

  • Se você usar o campo Filtrar texto, não poderá mais inspecionar estilos.

Guia Ouvintes de Eventos

Para inspecionar os ouvintes de eventos aplicados a um elemento, selecione a ferramenta Elementos e selecione a guia Ouvintes de Eventos (agrupada com a guia Estilos ).

Quando o foco estiver na guia Estilos , pressione Seta para a direita para navegar até a guia Ouvintes de Eventos .

Explorar ouvintes de eventos

Os ouvintes de eventos são apresentados como uma árvore ARIA. Você pode usar as teclas de seta para navegá-las. Um leitor de tela anuncia o nome do objeto DOM ao qual o ouvinte de eventos está anexado, bem como o nome do arquivo ao qual o ouvinte de eventos é definido e o número da linha.

Guia acessibilidade

Selecione a tecla Tab para se mover na guia Acessibilidade na ferramenta Elementos .

A guia Acessibilidade está próxima à guia Estilos . Na guia Acessibilidade, há controles para explorar a árvore de acessibilidade, os atributos ARIA aplicados a um elemento e as propriedades de acessibilidade computadas. Consulte Testar acessibilidade usando a guia Acessibilidade.

Árvore de acessibilidade

A Árvore de Acessibilidade é apresentada como uma árvore ARIA em que cada treeitem uma corresponde a um elemento no DOM. A árvore anuncia a função computada para o nó selecionado. Elementos genéricos como div e span são anunciados como "GenericContainer" na árvore. Use as teclas de seta para atravessar a árvore e explorar relações pai-filho.

Problemas conhecidos

  • O tipo de árvore ARIA usada pela guia Acessibilidade pode não ser exposto corretamente no Microsoft Edge para leitores de tela macOS como o VoiceOver. Assine Chromium problema nº 868480 a ser informado sobre o progresso desta questão.
  • Cada uma das seções Atributos de ARIA e Propriedades Computadas são marcadas como uma árvore ARIA, mas cada seção atualmente não tem gerenciamento de foco e não é operável por teclado.

Persistindo a dica de ferramenta de inspeção e a sobreposição de cores da grade da ferramenta

Quando você clica no botão Inspecionar ferramenta e se movimenta na página da Web renderizada, a dica Inspecionar ferramentas muda. Para manter a sobreposição de cores da ferramenta e da grade atual exibida, pressione e segure Ctrl+Alt (Windows, Linux) ou Ctrl+Option (macOS) enquanto você se movimenta na página da Web renderizada.

Essa técnica pode ser útil ao usar uma lupa de tela ou outras tecnologias auxiliares. Se você não fizer a dica de ferramenta Inspecionar a ferramenta persistir, a sobreposição do mouse será alterada constantemente quando você usa a ferramenta Inspecionar (botão Inspecionar ferramentas).

Consulte Analisar páginas usando a ferramenta Inspecionar.

A ferramenta Lighthouse

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

Configurar e gerar um relatório

  1. Quando a ferramenta Lighthouse é aberta pela primeira vez no DevTools, o foco é colocado no botão Gerar relatório . Por padrão, o formulário é configurado para executar relatórios para cada categoria usando a emulação móvel em uma conexão 3G simulada.

  2. Para alterar as configurações do relatório, use Shift+Tab para colocar o foco nas configurações do Lighthouse ou navegar de volta no modo Procurar.

  3. Quando estiver pronto para executar o relatório, navegue até o botão Gerar relatório e pressione Enter.

  4. O foco se move para uma janela modal com um botão Cancelar que permite que você saia da auditoria. Você pode ouvir uma série de earcons à medida que a auditoria é executada e atualiza a página várias vezes.

Problemas conhecidos

  • As diferentes seções do formulário de configuração não estão marcadas atualmente com um fieldset elemento. Talvez seja mais fácil navegá-los no modo Procurar para descobrir quais controles estão associados a cada seção.
  • Não há nenhum comunicado de earcon ou região dinâmica quando a auditoria é concluída em execução. Geralmente, a auditoria leva cerca de 30 segundos, após o qual você deve ser capaz de navegar até os resultados. Usar o modo Procurar pode ser a maneira mais fácil de alcançar os resultados.

O relatório do Lighthouse é organizado em seções que correspondem a cada uma das categorias de auditoria. O relatório é aberto com uma lista de pontuações para cada categoria. Essas pontuações também são links que você pode usar para ignorar as seções relevantes. Em cada seção há elementos expansíveis details , que contêm informações relacionadas a auditorias passadas ou com falha. Por padrão, somente auditorias com falha são mostradas. Cada seção termina com um elemento final details que contém todas as auditorias passadas.

Para executar uma nova auditoria, use Shift+Tab 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 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 Rob Dodson (Colaborador, Google WebFundamentals).

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