Analisando com axe DevTools e Lighthouse
Execute auditorias rápidas diretamente no navegador.
Analisando com axe DevTools e Lighthouse é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Web Accessibility Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web Accessibility Academy inclui 4 aulas no total.
Duas ferramentas no seu navegador
Você não precisa de uma configuração especial para começar a auditar. Tanto o axe DevTools quanto o Lighthouse são executados diretamente no Chrome, analisando a página que você já está visualizando.
Conheça o axe DevTools
A extensão axe DevTools adiciona uma aba às ferramentas de desenvolvimento do navegador. Um clique executa o mecanismo axe-core e lista os problemas de acessibilidade da página.
Como ler um resultado do axe
Cada descoberta identifica a regra violada, mostra o elemento exato, avalia o impacto e fornece um link para um guia que explica como corrigi-la. Não é preciso adivinhar.
Destaque o elemento problemático
O axe DevTools pode destacar o elemento com falha diretamente na página. Assim, fica evidente qual botão ou imagem gerou o aviso.
Os níveis de impacto orientam a prioridade
O axe marca cada problema com um nível de impacto: menor, moderado, grave ou crítico. Comece pelos problemas críticos e graves para corrigir primeiro os maiores obstáculos.
Conheça o Lighthouse
O Lighthouse vem integrado ao Chrome DevTools. Sua categoria de acessibilidade também executa o axe-core internamente e fornece uma única pontuação de zero a cem.
Execute uma auditoria do Lighthouse
Abra o painel do Lighthouse, marque Acessibilidade e clique em Analisar carregamento da página. Em segundos, você obterá uma pontuação e uma lista agrupada das auditorias que falharam.
A pontuação não é o objetivo
Uma pontuação de cem no Lighthouse é animadora, mas reflete apenas as verificações que ele consegue automatizar. Considere-a um piso, nunca uma prova de acessibilidade completa.
Lighthouse pela linha de comando
Você também pode executar o Lighthouse fora do navegador. Instale-o com npm e indique qualquer URL para gerar um relatório que possa ser compartilhado.
npx lighthouse https://example.com --only-categories=accessibilityaxe versus Lighthouse
O axe DevTools oferece detalhes mais profundos e regras de boas práticas; o Lighthouse fornece uma pontuação rápida em várias categorias. Ambos compartilham o mecanismo axe-core, por isso frequentemente concordam.
Analise cedo e com frequência
Execute uma verificação rápida enquanto desenvolve, não apenas antes da publicação. Identificar agora uma etiqueta ausente é muito mais barato do que rastrear sua origem depois.
Verificação rápida
Recapitule o que essas duas ferramentas do navegador têm em comum.
Recapitulação: um clique até a descoberta
O axe DevTools fornece descobertas detalhadas e corrigíveis, enquanto o Lighthouse fornece uma pontuação rápida. Ambos funcionam no navegador e executam o axe-core, portanto fazer verificações antecipadas é simples. 🔍
Perguntas Frequentes
A aula “Analisando com axe DevTools e Lighthouse” é grátis?
Sim — o texto completo de “Analisando com axe DevTools e Lighthouse” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Web Accessibility Academy, atualize para CoddyKit PRO. O curso de Web Accessibility Academy inclui 4 aulas no total.
O que vou aprender em “Analisando com axe DevTools e Lighthouse”?
Execute auditorias rápidas diretamente no navegador. Você pratica Web Accessibility Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Web Accessibility Academy?
Nenhuma experiência prévia é necessária. Web Accessibility Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Analisando com axe DevTools e Lighthouse”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Web Accessibility Academy?
Sim. Cada aula de Web Accessibility Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- O que a automação consegue e não consegue detectar
- Analisando com axe DevTools e Lighthouse
- Integrando axe-core aos testes do Playwright
- Análise estática e bloqueios de CI para acessibilidade