Sobre o Axe DevTools Linter
Visão geral do Axe DevTools Linter e deste site de documentação
O Que é Linting?
Linting é o processo automatizado de analisar o código-fonte para encontrar problemas antes de executá-lo. Um linter é uma ferramenta que lê o seu código e sinaliza problemas, que vão desde erros de sintaxe e digitação até inconsistências estilísticas e possíveis falhas.
O termo vem de uma ferramenta Unix chamada lint, que originalmente verificava programas C em busca de construções suspeitas. Hoje, linters existem para praticamente todas as linguagens de programação e servem como uma primeira linha de defesa na qualidade do código.
Pense em um linter como um verificador ortográfico para código, exceto que, em vez de apenas detectar erros de digitação, ele também detecta erros lógicos, impõe regras de estilo e o alerta sobre padrões que podem causar falhas.
O Que é um Linter de Acessibilidade?
Um linter de acessibilidade verifica práticas de acessibilidade potencialmente ruins, fornecendo feedback enquanto você desenvolve, em vez de depois que seu site ou aplicativo está construído e funcionando.
O Que o Axe DevTools Linter Faz
O Axe DevTools Linter realiza uma análise estática dos seus arquivos de origem. Ele lê seu código e o verifica contra as regras Deque para identificar padrões que provavelmente causarão problemas de acessibilidade. Por exemplo, ele pode detectar:
- Imagens sem texto alternativo
- Entradas de formulário sem rótulos
- Atributos ARIA incorretos ou ausentes
- Problemas na estrutura de cabeçalhos
Como analisa o código-fonte em vez de um aplicativo em execução, o Axe DevTools Linter pode detectar esses problemas antecipadamente, antes que o código seja mesclado, implantado ou até mesmo compilado.
Essas verificações não se limitam aos elementos nativos do HTML. A maioria das equipes constrói interfaces a partir de um sistema de design ou de sua própria biblioteca de componentes, e o Axe DevTools Linter pode verificar esses componentes também. Veja Verificação dos Seus Próprios Componentes abaixo.
O Que o Axe DevTools Linter Não Pode Fazer
Como o Axe DevTools Linter é uma ferramenta de análise estática, ele não pode:
- Testar o comportamento em tempo de execução do seu aplicativo, como conteúdo carregado dinamicamente ou alterações na interface de usuário impulsionadas por JavaScript.
- Capturar todos os problemas de acessibilidade; a análise estática cobre um subconjunto de defeitos detectáveis, e alguns problemas requerem testes baseados em navegador ou revisão manual.
- Substituir testes manuais de acessibilidade ou ferramentas baseadas em navegador.
Tecnologias Suportadas
O Axe DevTools Linter pode verificar os seguintes tipos de arquivos:
| Tecnologia | Extensões de Arquivo |
|---|---|
| React | .js, .jsx, .tsx |
| Vue | .vue |
| Angular | .component.html |
| HTML | .html, .htm, .xhtml |
| LiquidJS | .liquid |
| HTL (Adobe Experience Manager) | .htl |
| Markdown | .md, .markdown |
| React Native | Ver Axe DevTools Linter para React Native |
Verificação dos Seus Próprios Componentes
Os arquivos de origem em uma base de código moderna raramente contêm muito HTML puro. A marcação é escrita em termos de um sistema de design ou uma biblioteca de componentes própria, então um arquivo fonte contém <DqButton> ou <custom-image> onde o navegador eventualmente recebe um <button> ou um <img>. Um linter que só entendesse elementos nativos teria muito pouco a analisar.
O Axe DevTools Linter verifica esses componentes assim que você informa como cada um é mapeado para um elemento nativo do HTML. Um mapeamento é composto por algumas linhas de configuração, e pode:
- Mapear seu componente para um elemento nativo.
- Mapear os atributos do seu componente para os atributos desse elemento, incluindo renomeá-los.
- Transformar um dos atributos do seu componente no conteúdo de texto do elemento.
- Passar todos os atributos ARIA com um único curinga, em vez de listar cada um.
- Escolher qual elemento é emitido com base no valor de um atributo, para componentes que são renderizados de maneira diferente em diferentes situações.
Uma vez que um mapeamento exista, as regras de acessibilidade que se aplicam ao elemento nativo se aplicam ao seu componente. Um <DqButton> mapeado para <button> deve ter um nome acessível; um <custom-image> mapeado para <img> deve ter texto alternativo.
A Deque fornece mapeamentos pré-configurados para algumas bibliotecas de componentes amplamente utilizadas, portanto, dependendo do que você utiliza, talvez não precise criar mapeamentos você mesmo.
Para começar, leia Linting de Componentes Personalizados para uma visão geral, depois siga o passo a passo para VS Code e JetBrains ou o endpoint REST. Bibliotecas de Componentes Pré-configuradas lista as bibliotecas que o Axe DevTools Linter já conhece.
Maneiras de Usar o Axe DevTools Linter
O Axe DevTools Linter pode ser usado de várias maneiras, dependendo do seu fluxo de trabalho:
Extensões de IDE fornece feedback em tempo real enquanto você escreve código. O extensão VS Code (também disponível para IDEs AI compatíveis com VS Code, como Cursor e Windsurf) e plugin JetBrains (WebStorm e IntelliJ IDEA Ultimate) indicam problemas de acessibilidade diretamente no seu editor enquanto você digita.
O Conector é uma ferramenta de linha de comando para linting de arquivos em lote, em scripts ou como parte de um pipeline de CI/CD. Veja Usando o Conector Axe DevTools Linter.
A GitHub Action verifica arquivos que foram alterados em um pull request e relata problemas de acessibilidade. Veja A GitHub Action do Axe DevTools Linter.
Outras integrações de CI/CD inclui Jenkins, SonarQube e hooks Git pre-commit.
Onde a Análise é Executada
Linting local: A extensão VS Code, o plugin JetBrains e o Conector (com a opção --local) executam a análise de acessibilidade na sua própria máquina. O conteúdo dos arquivos nunca sai do seu computador.
Linting baseado em servidor: O Conector também pode enviar seus arquivos para um servidor Axe DevTools Linter para análise. Esta é a abordagem usada pela Ação do GitHub. Existem duas opções de servidor:
- SaaS hospedado pela Deque: Servidor em nuvem da Deque. Requer uma chave API; nenhuma configuração de servidor necessária.
- On-premises: Um servidor que você executa dentro da sua própria infraestrutura. Veja Instalação e Segurança.
Para orientações sobre como escolher entre linting local e baseado em servidor com o Conector, veja Linting Local.
Visão Geral da Documentação
Escolher a configuração correta do Axe DevTools Linter ajuda você a decidir qual modelo de implantação, integrações e configuração se adequam ao fluxo de trabalho da sua equipe.
Obtendo uma Chave da API SaaS do Axe DevTools Linter mostra como obter uma chave para acessar o serviço de linting baseado na nuvem da Deque.
Regras de Acessibilidade lista todas as regras que o Axe DevTools Linter verifica, com links para informações detalhadas em Deque University.
Configurando o Axe DevTools Linter cobre as opções de configuração disponíveis na extensão VS Code, no plugin JetBrains, no Conector do Axe DevTools Linter e no endpoint da API REST /lint-source.
Instalação e Segurança contém artigos sobre a instalação do servidor local e sua segurança com o NGINX como um proxy reverso.
Usando o Axe DevTools Linter cobre as várias integrações: o plugin JetBrains, extensão VS Code, CLI do Conector, GitHub Action, hook de pré-commit, Jenkins e SonarQube.
Linting de Componentes Personalizados discute o suporte do Axe DevTools Linter para componentes personalizados, com tutoriais para usuários do VS Code e JetBrains e usuários de endpoints REST, além de um artigo sobre bibliotecas de componentes pré-configuradas.
Desenvolvendo com as APIs REST descreve como acessar programaticamente o Axe DevTools Linter usando sua interface REST.
Créditos fornece informações de atribuição e licença para softwares de terceiros usados pelo Axe DevTools Linter.
Note: It is never necessary to use Deque's software or services in a way that collects, stores, or shares personal data. Do not use the software or services in a manner that collects, stores, or shares personal data.