Nota
O acesso a esta página requer autorização. Pode tentar iniciar sessão ou alterar os diretórios.
O acesso a esta página requer autorização. Pode tentar alterar os diretórios.
Este artigo ajuda você a usar o DevTools por meio do teclado e por meio de tecnologia adaptativa, como leitores de tela. Este guia o orienta pelas ferramentas e guias 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 contendo guias e páginas
Para obter a terminologia de guias, ferramentas e painéis, consulte Painéis de ferramentas com guias contendo guias e páginas em Visão geral do DevTools.
Tecnicamente, as guias são uma lista de guias ARIA.
Atalhos de teclado
Para obter os atalhos de teclado padrão do DevTools, consulte Atalhos de teclado. Certifique-se de marcá-lo e consultá-lo novamente ao explorar 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. A 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 clicado 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 Bem-vindo . |
| Pressione F12. | A ferramenta usada anteriormente ou a ferramenta Bem-vindo . |
Formas adicionais:
| Ação | Ferramenta resultante |
|---|---|
Na barra de ferramentas do Microsoft Edge, selecione Configurações e mais ( ) >Mais ferramentasFerramentas>de desenvolvedor. |
A ferramenta usada anteriormente ou a ferramenta Bem-vindo . |
| 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 de atalho. Para selecionar o comando Inspecionar , pressione Seta para Cima e Enter. | 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 da página. Em seguida, pressione Shift+F10 para abrir o menu de clique com o botão direito. Para selecionar o comando Inspecionar , pressione Seta para Cima e Enter. | A ferramenta Elementos , com a árvore DOM expandida para mostrar o elemento de página focado. |
Navegar entre ferramentas
Você pode se mover entre as ferramentas usando as teclas de navegação do teclado ou usando o Menu de Comando.
Navegar pelo teclado
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é o foco se mover para as guias da barra de atividades ou da barra de ferramentas de Exibição Rápida e use as teclas de direção para mover-se 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 pelas teclas de direção.
O nome da ferramenta selecionada é anunciado, mas somente depois de anunciar o conteúdo focado na ferramenta. Essa sequência de comunicados pode facilitar a perda do nome da ferramenta.
Navegar pelo Menu de Comando
Para selecionar uma ferramenta específica, use o Menu de Comando. No Menu de Comando, uma ferramenta é indicada como um item de Painel ou de Visualização Rápida .
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.
Digite o nome de uma ferramenta e, em seguida, use a seta para baixo no teclado para navegar até a opção correta.
Pressione Enter para executar um comando.
Para abrir a ferramenta Elementos :
Abra o menu de comando.
Comece a digitar elementos, selecione o comando Mostrar Elementos e pressione Enter.
Abrir uma ferramenta dessa maneira coloca o foco na área de conteúdo da ferramenta. No caso da ferramenta Elementos , o foco passa para a Árvore DOM.
A ferramenta Elementos
Inspecionar um elemento na página
Vá para o elemento que deseja inspecionar, usando o cursor no leitor de tela.
Clique com o botão direito do mouse no elemento e selecione a opção Inspecionar . Isso abre a ferramenta Elementos e focaliza o elemento na Árvore DOM.
A Árvore DOM é disposta como uma árvore ARIA. Por exemplo, consulte Navegar na Árvore DOM com um teclado.
Copiar o código de um elemento na Árvore DOM
Clique com o botão direito do mouse em um nó da Árvore DOM.
Expanda a opção Copiar .
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 arquivo .
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-se entre os valores de atributo. Ao ouvir "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ê cometer um erro de digitação e usar as teclas de direção 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-se 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 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 tags de início e término 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 local relevante na árvore de acessibilidade.
Quando o foco estiver na Árvore DOM, pressione Tab até ouvir que o painel Estilos está selecionado.
Pressione a Seta para a direita para explorar outras guias disponíveis.
A Árvore DOM transforma elementos com href atributos 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 e Propriedades do DOM não podem ser acessadas pelo 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 DOM.
O conceito-chave a ser entendido sobre o painel Estilos é que ele mostra apenas os estilos do nó selecionado no momento na Árvore DOM. Por exemplo, suponha que você tenha terminado de inspecionar os estilos de um <header> nó e agora queira examinar os estilos de um <footer> nó. Para fazer isso, primeiro você precisa selecionar o <footer> nó na Árvore DOM.
Talvez seja mais rápido usar o fluxo de trabalho Inspecionar para inspecionar um nó que esteja nas proximidades gerais do footer nó (como um link no rodapé), que focaliza a Árvore DOM e, em seguida, usar o teclado para navegar até o nó exato no qual 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 se torne ativo. Se você estiver usando um leitor de tela, esse primeiro estilo será anunciado como
element.style {}.Pressione 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 de linha em que o estilo aparece e o nome do estilo. Por exemplo,
main.css:233 .card__img {}.Pressione Enter para inspecionar um estilo mais detalhadamente. O foco começa em uma versão editável do nome do estilo.
Pressione Tab para se mover 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 CSS.
Você pode continuar pressionando Tab para percorrer a lista de estilos ou pressionar Escape para sair do modo e voltar a navegar pelas teclas de direção.
Para obter atalhos adicionais, consulte Referência do teclado do painel Estilos.
Problemas conhecidos:
- Se você usar o campo de texto editável Filtro , não poderá navegar pela lista de estilos.
Alternar estado do elemento
Para alternar o estado de um elemento, como :active ou :focus:
Vá para o painel Estilos e pressione Tab até que o botão Alternar estado do elemento tenha foco.
Pressione Enter para exibir a seção Forçar estado do elemento , que contém caixas de seleção.
Pressione Tab até que o primeiro estado,
:active, tenha foco.Pressione a Barra de espaços para marcar (ativar) a caixa de seleção. Se o elemento atualmente selecionado na Árvore DOM tiver um
:activeestilo, ele agora será aplicado.Pressione Tab para explorar todos os estados disponíveis.
Adicionar uma classe existente
O botão Classes de elemento está ao lado do botão Alternar estado do elemento . Para mover o foco para o botão Classes de elemento , pressione Tab e pressione Enter. O foco passa para um campo de edição de texto denominado Adicionar nova classe.
O botão Classes de elemento é usado principalmente para adicionar classes existentes a um elemento. Por exemplo, se sua folha de estilo contiver uma classe auxiliar chamada .clearfix, você pode pressionar . dentro do campo de edição de texto para exibir uma lista de sugestões de classes e usar a seta para baixo para localizar a .clearfix sugestão. Ou digite o nome da classe e pressione Enter para aplicá-lo.
Adicionar uma nova regra de estilo
Adjacente ao botão Classes de elemento está 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 estilo. 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 que desejar nesse campo e pressionar Tab para atribuir propriedades CSS a ele.
Guia Computado
Com o foco na guia Computado , pressione Tab para mover o foco para dentro e explorar o conteúdo. Na guia Computado , há controles para explorar quais propriedades CSS são realmente aplicadas a um elemento em ordem de especificidade.
Explore 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 calculado. Esses seletores são organizados por especificidade. Um leitor de tela anuncia o valor calculado, qual seletor CSS está combinando no momento, o nome do arquivo da folha de estilo que contém o seletor e o número de linha do seletor.
Problemas conhecidos:
- Se você usar o campo de texto Filtro , não será mais possível inspecionar estilos.
Guia Ouvintes de Eventos
Para inspecionar os ouvintes de eventos que são aplicados a um elemento, selecione a ferramenta Elementos e, em seguida, selecione a guia Ouvintes de eventos (agrupada com a guia Estilos ).
Quando o foco estiver na guia Estilos , pressione a 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 navegar por eles. Um leitor de tela anuncia o nome do objeto DOM ao qual o ouvinte de eventos está anexado, bem como o nome do arquivo em que o ouvinte de eventos é definido e o número da linha.
Guia de Acessibilidade
Selecione a tecla Tab para se mover na guia Acessibilidade na ferramenta Elementos .
A guia Acessibilidade fica 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 a acessibilidade usando a guia Acessibilidade.
Árvore de Acessibilidade
A Árvore de Acessibilidade é apresentada como uma árvore ARIA onde 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 direção para percorrer a árvore e explorar as relações pai-filho.
Problemas conhecidos:
- O tipo de árvore ARIA usado pela guia Acessibilidade pode não ser exposto corretamente em leitores de tela do Microsoft Edge para macOS como o VoiceOver. Assine o problema #868480 do Chromium para ser informado sobre o progresso desse problema.
- Cada uma das seções Atributos 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 pelo teclado.
Persistência da dica de ferramenta Inspecionar e sobreposição de cor de grade
Quando você clica no botão da ferramenta Inspecionar e se move na página da Web renderizada, a dica de ferramenta Inspecionar muda. Para manter a dica de ferramenta atual e a sobreposição de cor de grade exibidas, pressione e segure Ctrl+Alt (Windows, Linux) ou Ctrl+Option (macOS) enquanto se move na página da Web renderizada.
Essa técnica pode ser útil ao usar uma lupa de tela ou outras tecnologias adaptativas. Se você não fizer a dica de ferramenta da ferramenta Inspecionar persistir, a sobreposição de foco será alterada constantemente quando você usar a ferramenta Inspecionar (botão da 
).
Consulte Analisar páginas usando a ferramenta Inspecionar.
A ferramenta Farol
O Lighthouse executa uma série de testes em um site para marcar problemas comuns relacionados ao desempenho, acessibilidade, SEO e várias outras categorias.
Configurar e gerar um relatório
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 emulação móvel em uma conexão 3G simulada.
Para alterar as configurações do relatório, use Shift + Tab para colocar o foco nas configurações do Lighthouse ou navegue de volta no modo Procurar.
Quando estiver pronto para executar o relatório, navegue de volta até o botão Gerar relatório e pressione Enter.
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 fones de ouvido à 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 com um
fieldsetelemento no momento. 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 há nenhum anúncio de fone de ouvido ou região ativa quando a auditoria termina de ser executada. Geralmente, a auditoria leva cerca de 30 segundos, após os quais 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.
Navegar no relatório do Lighthouse
O relatório do Lighthouse é organizado em seções que correspondem a cada uma das categorias de auditoria. O relatório abre com uma lista de pontuações para cada categoria. Essas pontuações também são links que você pode usar para pular para as seções relevantes. Dentro de cada seção há elementos expansíveis details , 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 final details que contém todas as auditorias aprovadas.
Para executar uma nova auditoria, use Shift+Tab para sair do relatório e selecione o botão Gerar relatório .
Confira também
- Atalhos de teclado para o SharePoint
- Personalizar atalhos do teclado
- Executar comandos no Menu de Comando
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 Creative Commons Atribuição 4.0 Internacional. A página original é encontrada aqui e é de autoria de Rob Dodson.
Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.