O objetivo deste guia é ajudar os usuários que dependem principalmente de tecnologias adaptativas, 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 você estiver procurando recursos do DevTools relacionados à melhoria da acessibilidade de uma página da Web.
A acessibilidade do DevTools está em desenvolvimento. Alguns painéis e guias funcionam melhor com a tecnologia auxiliar do que outros. Este guia orienta você pelos painéis mais acessíveis e destaca problemas específicos que você pode encontrar.
Visão geral
Antes de começar, é útil ter um modelo mental de como a interface do DevTools está estruturada. As DevTools são
divididas em uma série de painéis, que são organizados em um ARIA tablist. Exemplo:
- O painel Elementos permite visualizar e alterar nós do DOM ou CSS.
- O painel do console permite ler registros do 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 Elements 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ê encontrar 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 referência útil. Adicione-o aos favoritos e consulte-o enquanto explora 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
Navegar pelo teclado
- Com as Ferramentas para desenvolvedores abertas, 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 o
tablistde um painel e usar as teclas de seta para mudar de painel, embora seja 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 são ativados. Isso pode dificultar a navegação pelas teclas de seta.
- O nome do painel selecionado é anunciado, mas somente depois de ler o conteúdo em foco no painel. Isso pode fazer com que seja muito fácil perder.
Navegar pelo Command Menu
Para focar um painel específico, use o menu de comando:
- Com as Ferramentas do desenvolvedor abertas, pressione Control+Shift+P ou Command+Shift+P (Mac) para abrir o Menu de comando. O menu de comando é uma caixa de combinação de preenchimento automático de pesquisa aproximada.
- Digite o nome do painel que você quer abrir e use a tecla Seta para baixo para navegar até a opção correta.
- Pressione Enter para executar um comando.
Por exemplo, para abrir o painel Elementos:
- Abra o Command Menu.
- Digite E e L. A opção Painel > Mostrar elementos está selecionada.
- 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 Elements, o foco se move para a árvore DOM.
Painel "Elementos"
Inspecionar um elemento na página
- Navegue até o elemento que você quer inspecionar usando o cursor do leitor de tela.
- Simule um clique com o botão direito do mouse no elemento para abrir o menu de contexto.
- Selecione a opção Inspecionar. Isso abre o painel Elements e foca o elemento na árvore DOM.
A árvore do DOM é montada como um ARIA tree. Consulte Navegar pela árvore do DOM com um
teclado para conferir um exemplo.
Copiar o código de um elemento na árvore DOM
- Com o foco em um nó na árvore DOM, abra o menu de contexto com o botão direito do mouse.
- Abra a opção Copiar.
- Selecione Copiar outerHTML.
Problemas conhecidos
- Copiar outerHTML geralmente não seleciona o nó atual, mas sim o pai dele. No entanto, o conteúdo do elemento ainda precisa estar no outerHTML copiado.
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 "space", você estará em 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 caixa de texto, você não recebe feedback. Se você digitar errado e usar as teclas de seta para conferir a 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 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ê ouve o nome do elemento, por exemplo, "h2", você 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 Styles 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 com foco. Portanto, talvez seja necessário
pressionar Tab mais de uma vez para acessar o painel de estilos.
Problemas conhecidos
As guias DOM Breakpoints e Properties não são acessíveis pelo teclado.
Painel "Styles"
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 poderosa para explorar e modificar os estilos aplicados atualmente ao elemento
em foco na árvore do DOM.
O conceito principal do painel Styles é que ele mostra apenas os estilos do
nó selecionado 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 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 depois usar o teclado para navegar
até o nó exato de seu interesse.
Navegar pelo painel "Styles"
Como todas as ferramentas de estilo se conectam de uma forma ou de outra ao painel Styles, é importante se tornar um especialista nessa ferramenta primeiro.
- Com o foco no painel Styles, pressione Tab para mover o foco para dentro e conferir 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 a seta para baixo para navegar pela lista de estilos em ordem de especificidade. Um leitor de tela anuncia cada estilo começando pelo 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 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 pode ser usado para adicionar outras propriedades CSS.
- Continue pressionando Tab para navegar pela lista de estilos ou pressione Escape para sair desse modo e voltar a navegar pelas teclas de seta.
Leia a referência do teclado do painel de estilos para conferir 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 o estado do elemento
Para alternar o estado de um elemento, como :active ou :focus:
- Navegue até o painel Styles e pressione Tab até que o botão Toggle Element State tenha o foco.
- Pressione Enter para expandir a coleção de estados de elementos. Os estados do elemento são apresentados como um grupo de caixas de seleção.
- Pressione Tab até que o primeiro estado,
:active, tenha foco. - Pressione espaço para ativar. Se o elemento selecionado na árvore DOM tiver um estilo
:active, ele será aplicado. - Continue pressionando Tab para conferir 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 depois Enter. O foco vai para um campo de texto de edição com a indicação Add New Class.
O botão Classes de elemento é usado principalmente para adicionar classes a um elemento. Por
exemplo, se a folha de estilo contiver uma classe auxiliar chamada .clearfix, pressione . dentro
do campo de edição de texto 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 classe e pressione Enter para aplicar
a mudança.
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 pressione 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 neste campo e pressionar Tab para atribuir propriedades CSS a ele.
Guia "Computado"
Com o foco na guia Computed, pressione Tab para mover o foco para dentro e conferir o conteúdo. Na guia Computed, há controles para conferir 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 computados. Eles são apresentados como um
ARIA tree. A expansão de uma caixa de listagem revela quais seletores de CSS estão aplicando o estilo computado. Esses
seletores são organizados por especificidade. Um leitor de tela anuncia o valor computado, qual seletor
CSS está correspondendo, 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 será mais possível inspecionar estilos.
Guia "Listeners de eventos"
No painel Elements, é possível inspecionar os listeners de eventos aplicados a um elemento usando a guia Event Listeners. Com o foco no painel Styles, pressione a seta para a direita para navegar até a guia Event Listeners.
Conhecer os listeners de eventos
Os listeners de eventos são apresentados como um tree ARIA. Você pode usar as teclas de seta para navegar nelas. 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 de acessibilidade
Com o foco no painel Acessibilidade, pressione Tab para mover o foco para dentro e conferir 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 o papel computado para o nó selecionado. Elementos genéricos
como div e span são anunciados como "GenericContainer" na árvore. Use as teclas de seta para
navegar pela árvore e conferir as relações entre pais e filhos.
Problemas conhecidos
- O tipo de árvore ARIA usado pelo painel Acessibilidade pode não ser exposto corretamente no Chrome para leitores de tela do macOS, como o VoiceOver. Inscreva-se no Problema do Chromium #868480 para receber informações sobre o progresso desse problema.
- As seções Atributos ARIA e Propriedades computadas são marcadas como árvores ARIA, mas no momento não têm gerenciamento de foco, portanto, não podem ser operadas pelo teclado.
Painel de auditorias
O painel Audits permite executar uma série de testes em um site para verificar problemas comuns relacionados a desempenho, acessibilidade, SEO e várias outras categorias.
Configurar e executar uma auditoria
- Quando o painel Audits é aberto pela primeira vez, o foco é colocado no botão Run Audit 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.
- Use Shift+Tab ou volte ao modo de navegação para mudar as configurações de auditoria.
- Quando estiver tudo pronto para executar a auditoria, volte ao botão Run Audit e pressione Enter.
- O foco muda 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 atualiza a página várias vezes.
Problemas conhecidos
- No momento, as diferentes seções do formulário de configuração não são marcadas com um elemento
fieldset. Talvez seja mais fácil navegar neles no modo de navegação para descobrir quais controles estão associados a cada seção. - Não há aviso de região ativa ou de ícone de som quando a auditoria é concluída. Geralmente, leva cerca de 30 segundos. Depois disso, você pode navegar até os resultados. Usar o modo de navegação pode ser a maneira mais fácil de alcançar 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, apenas as auditorias com falhas 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 procurar o botão Realizar uma auditoria.