Navegue pelo Chrome DevTools com tecnologia assistiva

Rob Dodson

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

A acessibilidade do DevTools é um trabalho em andamento. Alguns painéis e guias funcionam melhor com TA do que outros. Este guia orienta você pelos painéis mais acessíveis e destaca problemas específicos que podem surgir ao longo do caminho.

Visão geral

O DevTools é dividido em uma série de painéis organizados em uma ARIA tablist. Exemplo:

• O painel Elementos permite visualizar e alterar nós DOM ou CSS.
• O Console panel permite ler registros JavaScript e editar objetos ao vivo.

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 pouco 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 do teclado do DevTools é uma folha de consulta útil. Marque-a como favorita e consulte-a ao explorar os diferentes painéis.

Abrir o 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

Você pode navegar entre os painéis pelo teclado, pelo menu de comandos ou usando um mouse ou trackpad.

Navegar pelo teclado

• Com o DevTools aberto, pressione Control+] ou Command+] (Mac) para focar o próximo painel.
• Pressione Control+[ ou Command+[ (Mac) para focar o painel anterior.
• Também é possível usar Shift+Tab para mover o foco para uma do painel tablist e usar as teclas de seta para mudar os painéis, embora possa ser mais rápido usar os atalhos mencionados anteriormente.

Problemas conhecidos

• Alguns painéis, como os painéis Console e Performance, podem mover o foco para a área de conteúdo assim que forem ativados. Isso pode dificultar a navegação pelas teclas de seta.
• O nome do painel selecionado é anunciado, mas somente depois que um leitor de tela lê o conteúdo focado no painel. Isso pode facilitar a perda.

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 o teclado Down Arrow para navegar até a opção correta.
3. Pressione Enter para executar um comando.

Por exemplo, para abrir o painel Elementos:

1. Abra o menu de comandos.
2. Digite E e L. A opção Painel > Mostrar elementos é selecionada.
3. Pressione Enter para executar o comando que abre o painel.

A abertura de um painel dessa forma direciona o foco para o conteúdo do painel. No caso do painel Elementos, o foco é movido 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 pain}el Elementos e foca o elemento na árvore DOM.

A árvore DOM é apresentada como uma ARIA tree. Consulte um exemplo em Navegar na árvore DOM com um teclado.

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

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

Problemas conhecidos

• Copiar outerHTML geralmente seleciona o nó pai, em vez do nó pretendido nó. No entanto, o conteúdo do elemento ainda precisa estar no copiado em outerHTML.

Modificar os atributos de um elemento na árvore DOM

• Com o foco em um nó na árvore DOM, pressione Enter para torná-lo editável.
• Pressione Tab para alternar entre os valores de atributo. Quando você ouvir "espaço", estará dentro de uma entrada de texto vazia e poderá 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 receberá feedback. Se você cometer um erro de digitação e usar as teclas de seta para explorar a entrada, não receberá feedback. A maneira mais fácil de verificar seu trabalho é aceitar a mudança e ouvir o anúncio de todo o elemento.

Editar o HTML de um elemento na árvore DOM

• Com o foco em um nó na árvore DOM, pressione Enter para torná-lo editável.
• Pressione Tab para alternar entre os valores de atributo. Quando você ouvir o nome do elemento, por exemplo, h2, estará dentro de uma entrada de texto e poderá 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 Right Arrow para explorar outras guias disponíveis.

A árvore DOM transforma elementos com atributos href em links focá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 estilos aplicados ao elemento que está em foco na árvore DOM.

O conceito principal a entender sobre o painel Estilos é que ele mostra apenas estilos para o 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 conferir os estilos de um nó <footer>. Para fazer isso, selecione o <footer> nó na árvore 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é), que foca a árvore DOM e, em seguida, use o teclado para navegar até o nó exato em que você está interessado.

Navegar no 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 explorar 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 Down Arrow 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. 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 alternar entre 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 pode ser usado para adicionar outras propriedades CSS.
• Você pode continuar pressionando Tab para navegar pela lista de estilos, ou pressionar Escape para sair desse modo e voltar a navegar pelas teclas de seta.

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

Problemas conhecidos

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

Alternar o 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 em foco.
2. Pressione Enter para expandir 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 em foco.
4. Pressione Space para ativá-lo. Se o elemento selecionado no momento na árvore DOM tiver um estilo :active, ele será aplicado.
5. Continue pressionando Tab para explorar todos os estados disponíveis.

Adicionar uma classe de saída

Ao lado do botão Alternar estado do elemento , está o botão Classes de elementos. Mova o foco para ele pressionando Tab e Enter. O foco é movido para um campo de texto de edição rotulado como 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 você poderá pressionar . dentro do campo de texto de edição para conferir uma lista de sugestões de classes e usar a Down Arrow para encontrar a sugestão .clearfix. Ou digite o nome da classe e pressione Enter para aplicá-la.

Adicionar uma nova regra de estilo

Ao lado do botão Classes de elementos , está o botão Nova regra de estilo. Mova o foco para ele pressionando Tab e Enter. O foco é movido 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 então pressionar Tab para atribuir propriedades CSS a ele.

Guia Calculado

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 realmente aplicadas a um elemento em ordem de especificidade.

Conhecer todos os estilos calculados

Pressione Tab até chegar à coleção de estilos calculados. Eles são apresentados como uma tree ARIA. A expansão de uma caixa de listagem revela quais seletores 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, o nome de 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 será mais possível 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 Estilos painel, pressione a Right Arrow para navegar até a Listeners de eventos guia.

Conhecer listeners de eventos

Os listeners de eventos são apresentados como uma tree ARIA. Você pode usar as teclas de seta para navegar por eles. Um leitor de tela anuncia o nome do objeto DOM ao qual 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 Acessibilidade

Com o foco no Acessibilidade painel, 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 uma ARIA tree em que cada treeitem corresponde a um elemento no DOM. A árvore anuncia o papel calculado para o 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 pelo painel Acessibilidade pode não estar disponível no Chrome para leitores de tela do Mac OS, como o VoiceOver. Inscreva-se no problema do Chromium nº 868480 (link em inglês) para ser informado sobre o progresso desse problema.
• As seções Atributos ARIA e Propriedades calculadas são marcadas como árvores ARIA, mas não incluem o gerenciamento de foco. Isso significa que essas seções 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 navegue de volta no modo de navegação para mudar as configurações de auditoria.
3. Quando estiver tudo pronto para executar a auditoria, navegue de volta até o botão Executar auditoria e pressione Enter.
4. O foco é movido para uma janela modal com um botão Cancelar que permite sair da auditoria. Você pode ouvir uma série de earcons à medida que 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 são marcadas com um elemento fieldset. Pode ser mais fácil navegar por elas no modo de navegação para descobrir quais controles estão associados a cada seção.
• Não há anúncio de earcon ou região dinâmica quando a auditoria é concluída. Geralmente, leva cerca de 30 segundos, após os quais você poderá navegar até os resultados. Use o modo de navegação para acessar rapidamente os resultados.

Navegar no 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, apenas as auditorias reprovadas 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.