Navegue pelo Chrome DevTools com tecnologia assistiva

Este guia tem como objetivo ajudar os usuários que dependem principalmente de tecnologias assistivas, como leitores de tela, a acessar e usar o Chrome DevTools. O Chrome DevTools é um conjunto de ferramentas para desenvolvedores da Web integrado ao navegador Google Chrome. Consulte a Referência de acessibilidade se você estiver procurando recursos do DevTools relacionados à melhoria da acessibilidade de uma página da Web.

A acessibilidade do DevTools ainda está em desenvolvimento. Alguns painéis e guias funcionam melhor com tecnologia assistiva do que outros. Este guia mostra os painéis mais acessíveis e destaca problemas específicos que você pode encontrar ao longo do caminho.

Visão geral

Antes de começar, é útil ter um modelo mental de como a interface do usuário do DevTools está estruturada. As DevTools são divididas em uma série de painéis organizados em um ARIA tablist. Exemplo:

• O painel Elementos permite visualizar e mudar nós do DOM ou CSS.
• O painel Console permite ler registros JavaScript e editar objetos em tempo real.

Na área de conteúdo de cada painel, há várias ferramentas diferentes, geralmente chamadas de guias ou painéis na documentação. Por exemplo, o painel Elementos contém outras guias para inspecionar listeners de eventos, a árvore de acessibilidade e muito mais. A distinção entre guias e painéis é um tanto arbitrária. O único motivo para você ver um termo ou outro é manter a consistência com o restante da documentação oficial do DevTools.

Atalhos do teclado

A referência de atalhos de teclado do DevTools é uma folha de dicas útil. Adicione aos favoritos e consulte novamente ao explorar os diferentes painéis.

Abrir DevTools

Para começar, leia Abrir o Chrome DevTools. Há várias maneiras de abrir o DevTools, seja por atalhos de teclado ou itens de menu.

Navegar entre painéis

Navegar pelo teclado

• Com as DevTools abertas, pressione Control+] ou Command+] (Mac) para focar o próximo painel.
• Pressione Control+[ ou Command+[ (Mac) para focar no painel anterior.
• Também é possível usar Shift+Tab para mover o foco para o tablist de um painel e usar as teclas de seta para mudar de painel. No entanto, pode ser mais rápido usar os atalhos mencionados anteriormente.

Problemas conhecidos

• Alguns painéis, como Console e Performance, podem mover o foco para a área de conteúdo assim que são ativados. Isso pode dificultar a navegação com as teclas de seta.
• O nome do painel selecionado é anunciado, mas somente depois que ele lê o conteúdo em foco no painel. Isso pode fazer com que seja muito fácil perder.

Navegar pelo menu de comandos

Para focar um painel específico, use o menu de comandos:

1. Com o DevTools aberto, pressione Control+Shift+P ou Command+Shift+P (Mac) para abrir o Menu de comandos. O menu de comandos é uma caixa de combinação de preenchimento automático de pesquisa difusa.
2. Digite o nome do painel que você quer abrir e use a seta para baixo do teclado para navegar até a opção correta.
3. Pressione Enter para executar um comando.

Por exemplo, para abrir o painel Elementos:

1. Abra o Command Menu (link em inglês).
2. Digite E e depois L. A opção Painel > Mostrar elementos está selecionada.
3. Pressione Enter para executar o comando que abre o painel.

Abrir um painel dessa forma direciona o foco para o conteúdo dele. No caso do painel Elementos, o foco se move para a Árvore DOM.

Painel "Elementos"

Inspecionar um elemento na página

1. Navegue até o elemento que você quer inspecionar usando o cursor do leitor de tela.
2. Simule um clique com o botão direito do mouse no elemento para abrir o menu de contexto.
3. Escolha a opção Inspecionar. Isso abre o painel Elementos e foca o elemento na árvore DOM.

A árvore do DOM é organizada como uma tree ARIA. Consulte Navegar na árvore do DOM com um teclado para ver um exemplo.

Copiar o código de um elemento na árvore do DOM

1. Com o foco em um nó na Árvore do DOM, abra o menu de contexto com o botão direito do mouse.
2. Expanda a opção Copiar.
3. Selecione Copiar HTML externo.

Problemas conhecidos

• A opção Copiar outerHTML geralmente não seleciona o nó atual, mas sim o nó pai. No entanto, o conteúdo do elemento ainda deve estar no outerHTML copiado.

Modificar os atributos de um elemento na árvore DOM

• Com o foco em um nó na Árvore do DOM, pressione Enter para torná-lo editável.
• Pressione Tab para navegar entre os valores de atributos. Quando você ouve "espaço", está dentro de uma entrada de texto vazia e pode digitar um novo valor de atributo.
• Pressione Control+Enter ou Command+Enter (Mac) para aceitar a mudança e ouvir todo o conteúdo do elemento.

Problemas conhecidos

• Ao digitar na entrada de texto, você não recebe feedback. Se você cometer um erro de digitação e usar as teclas de seta para explorar sua entrada, também não vai receber feedback. A maneira mais fácil de verificar seu trabalho é aceitar a mudança e ouvir o elemento inteiro ser anunciado.

Editar o HTML de um elemento na árvore do DOM

• Com o foco em um nó na Árvore do DOM, pressione Enter para torná-lo editável.
• Pressione Tab para navegar entre os valores de atributos. Quando você ouve o nome do elemento, por exemplo, "h2", significa que está dentro de uma entrada de texto e pode mudar o tipo do elemento.
• Pressione Control+Enter ou Command+Enter (Mac) para aceitar a mudança.

Por exemplo, digitar h3 e pressionar Control+Enter ou Command+Enter (Mac) muda as tags de início e fim do elemento para h3.

Guias do painel "Elementos"

O painel Elementos contém outras guias para inspecionar itens como o CSS aplicado a um elemento ou o lugar dele na árvore de acessibilidade.

• Com o foco em um nó na Árvore DOM, pressione Tab até ouvir que o painel Estilos está selecionado.
• Use a seta para a direita para conferir outras guias disponíveis.

A árvore do DOM transforma elementos com atributos href em links focalizáveis. Portanto, talvez seja necessário pressionar Tab mais de uma vez para acessar o painel "Estilos".

Problemas conhecidos

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

Painel "Estilos"

No painel Estilos, você encontra controles para filtrar estilos, alternar estados de elementos (como :active e :focus), alternar classes e adicionar novas classes. Há também uma ferramenta de inspeção de estilo avançada para explorar e modificar os estilos aplicados ao elemento em foco na árvore do DOM.

O principal conceito a entender sobre o painel Estilos é que ele só mostra os estilos do nó selecionado no momento na Árvore DOM. Por exemplo, suponha que você tenha terminado de inspecionar os estilos de um nó <header> e agora queira analisar os estilos de um nó <footer>. Para fazer isso, primeiro selecione o nó <footer> na árvore do DOM. Talvez seja mais rápido usar o fluxo de trabalho Inspecionar para inspecionar um nó que esteja na vizinhança geral do nó footer (como um link no rodapé), o que foca a árvore DOM. Depois, use o teclado para navegar até o nó exato que você quer.

Navegar pelo painel "Estilos"

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

• Com o foco no painel Estilos, pressione Tab para mover o foco para dentro e conferir o conteúdo.
• Pressione Tab até que o primeiro estilo seja ativado. Se você estiver usando um leitor de tela, esse primeiro estilo será anunciado como "element.style {}".
• Pressione a seta para baixo para navegar pela lista de estilos em ordem de especificidade. Um leitor de tela anuncia cada estilo começando com o nome do arquivo CSS, o número da linha em que o estilo aparece e o nome do estilo em si. 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 navegar entre as versões editáveis de cada propriedade CSS e os valores correspondentes. No final de cada bloco de estilo, há um campo de texto editável em branco que você pode usar para adicionar outras propriedades de CSS.
• Continue pressionando Tab para navegar pela lista de estilos ou pressione Escape para sair desse modo e voltar a navegar com as teclas de seta.

Leia a referência do teclado do painel "Estilos" para conhecer outros atalhos.

Problemas conhecidos

• Se você usar o campo de texto editável Filtro, não será mais possível navegar pela lista de estilos.

Alternar estado do elemento

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

1. Navegue até o painel Estilos e pressione Tab até que o botão Alternar estado do elemento esteja selecionado.
2. Pressione Enter para abrir a coleção de estados de elementos. Os estados dos elementos são apresentados como um grupo de caixas de seleção.
3. Pressione Tab até que o primeiro estado, :active, esteja selecionado.
4. Pressione Espaço para ativar. Se o elemento selecionado no momento na árvore do DOM tiver um estilo :active, ele será aplicado.
5. Continue pressionando Tab para conferir todos os estados disponíveis.

Adicionar uma turma que está saindo

Ao lado do botão Alternar estados do elemento, está o botão Classes de elementos. Mova o foco para ele pressionando Tab e depois Enter. O foco vai para um campo de edição de texto chamado Adicionar nova classe.

O botão Classes de elementos é usado principalmente para adicionar classes a um elemento. Por exemplo, se sua folha de estilo contiver uma classe auxiliar chamada .clearfix, pressione . dentro do campo de texto de edição para ver uma lista de sugestões de classes e use a seta para baixo para encontrar a sugestão .clearfix. Ou digite o nome da turma e pressione Enter para aplicar.

Adicionar uma nova regra de estilo

Ao lado do botão Classes de elemento, está o botão Nova regra de estilo. Mova o foco para ele pressionando Tab e Enter. O foco vai para um campo de texto editável dentro do inspetor de estilo. O conteúdo de texto inicial do campo é o nome da tag do elemento selecionado na Árvore DOM. Você pode digitar qualquer nome de classe nesse campo e pressionar Tab para atribuir propriedades CSS a ele.

Guia "Computado"

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

Conheça todos os estilos calculados

Pressione Tab até chegar à coleção de estilos calculados. Eles são apresentados como um ARIA tree. Ao expandir uma caixa de listagem, você vê quais seletores de CSS estão aplicando o estilo calculado. Esses seletores são organizados por especificidade. Um leitor de tela anuncia o valor calculado, qual seletor de CSS está correspondendo no momento, o nome do arquivo da folha de estilo que contém o seletor e o número da linha do seletor.

Problemas conhecidos

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

Guia "Listeners de eventos"

No painel Elementos, você pode inspecionar os listeners de eventos aplicados a um elemento usando a guia Listeners de eventos. Com o foco no painel Estilos, pressione a seta para a direita para navegar até a guia Listeners de eventos.

Conhecer listeners de eventos

Os listeners de eventos são apresentados como um tree ARIA. Use as teclas de seta para navegar. Um leitor de tela anuncia o nome do objeto DOM a que o listener de eventos está anexado, bem como o nome do arquivo em que o listener de eventos está definido e o número da linha.

Painel de acessibilidade

Com o foco no painel Acessibilidade, pressione Tab para mover o foco para dentro e explorar o conteúdo. No painel Acessibilidade, há controles para explorar a árvore de acessibilidade, os atributos ARIA aplicados a um elemento e as propriedades de acessibilidade calculadas.

Árvore de acessibilidade

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

Problemas conhecidos

• O tipo de árvore ARIA usado no painel Acessibilidade pode não ser exposto corretamente no Chrome para leitores de tela do macOS, como o VoiceOver. Inscreva-se no problema 868480 do Chromium para receber informações sobre o progresso desse problema.
• As seções Atributos ARIA e Propriedades calculadas são marcadas como árvores ARIA, mas não têm gerenciamento de foco no momento. Portanto, não podem ser operadas pelo teclado.

Painel "Auditorias"

O painel Auditorias permite executar uma série de testes em um site para verificar problemas comuns relacionados a performance, acessibilidade, SEO e várias outras categorias.

Configurar e executar uma auditoria

1. Quando o painel Auditorias é aberto pela primeira vez, o foco é colocado no botão Executar auditoria no final do formulário. Por padrão, o formulário é configurado para executar auditorias em todas as categorias usando a emulação de dispositivos móveis em uma conexão 3G simulada.
2. Use Shift+Tab ou volte no modo de navegação para mudar as configurações de auditoria.
3. Quando estiver tudo pronto para executar a auditoria, volte ao botão Executar auditoria e pressione Enter.
4. O foco se move para uma janela modal com um botão Cancelar, que permite sair da auditoria. Você pode ouvir uma série de ícones sonoros enquanto a auditoria é executada e a página é atualizada várias vezes.

Problemas conhecidos

• As diferentes seções do formulário de configuração não estão marcadas com um elemento fieldset. Talvez seja mais fácil navegar no modo de navegação para descobrir quais controles estão associados a cada seção.
• Não há um ícone sonoro ou anúncio de região ativa quando a auditoria termina de ser executada. Em geral, leva cerca de 30 segundos. Depois disso, você poderá acessar os resultados. Usar o modo de navegação pode ser a maneira mais fácil de acessar os resultados.

Navegar pelo relatório de auditoria

O relatório de auditoria é 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 podem ser usados para pular para as seções relevantes. Em cada seção, há elementos details expansíveis, que contêm informações relacionadas a auditorias aprovadas ou reprovadas. Por padrão, somente as auditorias com falha são mostradas. Cada seção termina com um elemento details final que contém todas as auditorias aprovadas.

Para executar uma nova auditoria, use Shift+Tab para sair do relatório e procure o botão Realizar uma auditoria.