Este guia tem como objetivo ajudar os usuários que dependem principalmente de tecnologia adaptativa, como leitores de tela, a acessar e usar o Chrome DevTools. O Chrome DevTools é um pacote de ferramentas para desenvolvedores da Web integrado 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 ainda está em desenvolvimento. Alguns painéis e guias funcionam melhor com tecnologia assistiva do que outros. Este guia orienta você pelos painéis que são os mais acessíveis e destaca problemas específicos que você pode encontrar ao longo do caminho.
Informações gerais
Antes de começar, é útil ter um modelo mental de como a IU do DevTools é estruturada. O DevTools é
dividido em uma série de painéis, que são organizados em um tablist ARIA (link em inglês). Exemplo:
- O painel Elementos permite visualizar e alterar os nós do DOM ou CSS.
- O painel Console permite ler registros JavaScript e objetos de edição em tempo real.
Dentro da á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. Um ou outro termo vai aparecer apenas para 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. Certifique-se de adicioná-lo aos favoritos e consulte-o novamente quando explorar os diferentes painéis.
Abrir DevTools
Para começar, leia Abrir o Chrome DevTools. Há várias maneiras de abrir o DevTools usando atalhos de teclado ou itens de menu.
Navegar entre painéis
Navegar usando o 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 o
tablistde um painel e usar as teclas de seta para mudar de painel, embora possa ser mais rápido usar os atalhos mencionados anteriormente.
Problemas conhecidos
- Alguns painéis, como Console e Desempenho, podem mover o foco para a área de conteúdo assim que são ativados. Isso pode dificultar a navegação usando as teclas de seta.
- O nome do painel selecionado é anunciado, mas somente depois de ler o conteúdo em foco no painel. Assim, é muito fácil não perceber.
Navegar pelo menu de comando
Para focar um painel específico, use o Menu de comando:
- Com o DevTools aberto, pressione Control+Shift+P ou Command+Shift+P (Mac) para abrir o Menu de comando. O Menu de comando é uma caixa de combinação difusa de preenchimento automático de pesquisa.
- Digite o nome do painel que você quer abrir e use o teclado com a 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 Menu de comando.
- Digite E e depois L. A opção Painel > Mostrar elementos está selecionada.
- 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 em si. No caso do painel Elements, o foco é movido para a árvore do 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.
- Escolha a opção Inspecionar. Isso abre o painel Elementos e foca o elemento na Árvore DOM.
A árvore DOM é apresentada como um ARIA tree. Consulte Navegar pela árvore DOM com um
teclado para ver um exemplo.
Copiar o código de um elemento na árvore do DOM
- Com o foco em um nó na Árvore DOM, abra o menu de contexto do clique com o botão direito.
- Expanda a opção Copiar.
- Selecione Copiar HTML externo.
Problemas conhecidos
- A função Copy externoHTML geralmente não seleciona o nó atual, mas seleciona o nó pai. No entanto, o conteúdo do elemento ainda deve estar no HTML externo copiado.
Modificar os atributos de um elemento na árvore do DOM
- Com o foco em um nó na Árvore DOM, pressione Enter para torná-lo editável.
- Pressione Tab para navegar entre os valores dos atributos. Quando ouvir a palavra "espaço", significa que você está em 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
- Quando você digita na entrada de texto, não recebe feedback. Se você cometer um erro de digitação e usar as teclas de seta para explorar a entrada, também não receberá feedback. A maneira mais fácil de verificar seu trabalho é aceitar a mudança e, em seguida, detectar todo o elemento a ser anunciado.
Editar o HTML de um elemento na árvore do DOM
- Com o foco em um nó na Árvore DOM, pressione Enter para torná-lo editável.
- Pressione Tab para navegar entre os valores dos atributos. Ao ouvir 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 alteração.
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é saber que o painel Styles está selecionado.
- Use a seta para a direita para explorar outras guias disponíveis.
A Árvore DOM transforma elementos com atributos href em links focalizáveis. Por isso, talvez seja necessário
pressionar Tab mais de uma vez para acessar o painel "Estilos".
Problemas conhecidos
As guias DOM Breakpoints e Properties não podem ser acessadas pelo teclado.
Painel "Styles"
No painel Styles, você encontra controles para estilos de filtragem, alternância de estados de elementos (como
:active e :focus), alternância de classes e adição de novas classes. Há também uma
ferramenta avançada de inspeção de estilo para explorar e modificar os estilos aplicados atualmente ao elemento em foco
na Árvore DOM.
O principal conceito a ser entendido sobre o painel Styles é que ele mostra apenas estilos para o nó selecionado na DOM Tree. 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 você precisa selecionar o nó <footer> na árvore DOM. Talvez seja mais rápido usar o fluxo de trabalho
Inspecionar para inspecionar um nó que está nas proximidades do nó footer (como
um link no rodapé), que foca a Árvore DOM, e usar o teclado para navegar
até o nó exato em que você tem interesse.
Navegar no painel "Estilos"
Como todas as ferramentas de estilo se conectam de uma forma ou de outra ao painel Styles, faz sentido ser especialista nessa ferramenta primeiro.
- Com o foco no painel Styles, pressione Tab para mover o foco para dentro e explorar o conteúdo.
- Pressione Tab até o primeiro estilo ficar 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 próprio 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 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 em branco editável que você pode usar para adicionar outras propriedades CSS.
- Continue pressionando Tab para navegar pela lista de estilos ou pressione Esc para sair desse modo e voltar a navegar pelas teclas de seta.
Leia a referência de teclado do painel Estilos para conferir outros atalhos.
Problemas conhecidos
- Se você usar o campo de texto editável Filtrar, não poderá mais navegar pela lista de estilos.
Alternar 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 fica em foco.
- Pressione Enter para expandir a coleção de estados do elemento. Os estados do elemento são apresentados como um grupo de caixas de seleção.
- Pressione Tab até que o primeiro estado,
:active, esteja em foco. - Pressione a barra de espaço para ativar. Se o elemento atualmente selecionado na árvore DOM tiver um
estilo
:active, ele será aplicado. - 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 depois Enter. O foco se move para um campo de texto de edição chamado Add New Class.
O botão Classes de elementos é usado principalmente para adicionar classes existentes a um elemento. Por
exemplo, se a folha de estilo contivesse 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 classe e pressione Enter para aplicá-lo.
Adicionar uma nova regra de estilo
Ao lado do botão Classes do elemento, está o botão Nova regra de estilo. Mova o foco até ele pressionando Tab e pressionando Enter. O foco se move 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. Digite o nome de classe que quiser nesse campo e pressione Tab para atribuir propriedades CSS a ele.
Guia "Calculada"
Com o foco na guia Calculado, pressione Tab para mover o foco para dentro e explorar o conteúdo dela. Na guia Calculado, há controles para explorar quais propriedades CSS são realmente aplicadas a um elemento em ordem de especificidade.
Explorar todos os estilos calculados
Pressione Tab até chegar à coleção de estilos calculados. Elas são apresentadas como um
tree ARIA. A expansão de uma caixa de listagem revela 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 CSS corresponde no momento, o nome do arquivo da folha de estilo que contém o seletor e o número da linha dele.
Problemas conhecidos
- Se você usar o campo de texto Filtro, não será mais possível inspecionar estilos.
Guia Listeners de eventos
No painel Elementos, é possível inspecionar os listeners de eventos aplicados a um elemento usando a guia Listeners de eventos. Com o foco no painel Styles, pressione a seta para a direita para navegar até a guia Event Listeners.
Explorar listeners de eventos
Os listeners de eventos são apresentados como um 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 é 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 Accessibility, 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 tree ARIA, 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 Accessibility pode não ser exposto corretamente no Chrome para leitores de tela macOS, como o VoiceOver. Inscreva-se no problema 868480 do Chromium para ser informado sobre o progresso.
- As seções Atributos ARIA e Propriedades computadas são marcadas como árvores ARIA, mas não têm gerenciamento de foco no momento. Portanto, não são operáveis pelo teclado.
Painel de auditorias
O painel Auditorias permite realizar 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 Auditorias é aberto pela primeira vez, o botão Executar auditoria é focado no final do formulário. Por padrão, o formulário é configurado para executar auditorias para cada categoria usando a emulação de dispositivos móveis em uma conexão 3G simulada.
- Use Shift+Tab ou volte para o modo de navegação para alterar as configurações de auditoria.
- Quando estiver tudo pronto para executar a auditoria, volte ao botão Executar auditoria e pressione Enter.
- O foco muda para uma janela modal com um botão Cancel, que permite sair da auditoria. Durante a auditoria, é possível que você ouça uma série de ícones auditivos e atualize a página várias vezes.
Problemas conhecidos
- No momento, as diferentes seções do formulário de configuração não estão marcadas com um elemento
fieldset. Pode ser mais fácil navegar por eles no modo de navegação para descobrir quais controles estão associados a cada seção. - Não haverá aviso auditivo ou aviso sobre a região ativa quando a auditoria for concluída. Geralmente, leva cerca de 30 segundos, após os quais 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 correspondentes 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 com falha. Por padrão, apenas as auditorias com falha são exibidas.
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.