Axe é um mecanismo de teste de acessibilidade para sites e outras interfaces de usuário baseadas em HTML. É rápido, seguro, leve e foi desenvolvido para se integrar perfeitamente a qualquer ambiente de teste existente, para que você possa automatizar os testes de acessibilidade junto com seus testes funcionais regulares.
Inscreva-se para receber notícias do axe para obter as últimas novidades sobre recursos, lançamentos futuros e eventos do axe.
Axe-core tem diferentes tipos de regras, para WCAG 2.0, 2.1, 2.2 nos níveis A, AA e AAA, bem como uma série de práticas recomendadas que ajudam a identificar práticas comuns de acessibilidade, como garantir que cada página tenha um título h1
, e para ajudar você evita "pegadinhas" no ARIA, como quando um atributo ARIA que você usou será ignorado. A lista completa de regras, nível WCAG agrupado e melhores práticas, pode ser encontrada em doc/rule-descrições.md.
Com o axe-core, você pode encontrar em média 57% dos problemas WCAG automaticamente . Além disso, axe-core retornará elementos como "incompletos" onde axe-core não pode ter certeza e é necessária uma revisão manual.
Para detectar bugs no início do ciclo de desenvolvimento, recomendamos o uso da extensão axe-linter vscode. Para melhorar ainda mais a cobertura dos testes, recomendamos os testes guiados inteligentes na extensão ax.
Primeiro baixe o pacote:
npm install axe-core --save-dev
Agora inclua o arquivo javascript em cada um dos seus iframes nos seus fixtures ou sistemas de teste:
< script src =" node_modules/axe-core/axe.min.js " > script >
Agora insira chamadas em cada ponto dos seus testes onde uma nova parte da IU se torna visível ou exposta:
axe
. run ( )
. then ( results => {
if ( results . violations . length ) {
throw new Error ( 'Accessibility issues found' ) ;
}
} )
. catch ( err => {
console . error ( 'Something bad happened:' , err . message ) ;
} ) ;
A web só poderá se tornar um espaço acessível e inclusivo se os desenvolvedores tiverem o poder de assumir a responsabilidade pelos testes de acessibilidade e pelas práticas de codificação acessíveis.
Os testes automatizados de acessibilidade economizam muito tempo, não exigem conhecimentos especiais e permitem que as equipes concentrem recursos especializados nas questões de acessibilidade que realmente precisam deles. Infelizmente, a maioria das ferramentas de acessibilidade são destinadas a serem executadas em sites e aplicativos que chegaram ao final do processo de desenvolvimento e muitas vezes não fornecem resultados claros ou consistentes, causando frustração e atrasos justamente quando você pensava que seu produto estava pronto para ser enviado.
Axe foi construído para refletir como o desenvolvimento web realmente funciona. Ele funciona com todos os navegadores, ferramentas e ambientes de teste modernos que uma equipe de desenvolvimento possa usar. Com o axe, os testes de acessibilidade podem ser realizados como parte de testes de unidade, testes de integração, testes de navegador e quaisquer outros testes funcionais que sua equipe já realiza no dia a dia. Incorporar testes de acessibilidade no processo inicial de desenvolvimento economiza tempo, recursos e todo tipo de frustração.
A API axe-core oferece suporte total aos seguintes navegadores:
Suporte significa que corrigiremos bugs e tentaremos testar cada navegador regularmente. Atualmente, apenas o Chrome e o Firefox são testados em todas as solicitações pull.
Há suporte limitado para JSDOM. Tentaremos tornar todas as regras compatíveis com JSDOM, mas quando isso não for possível, recomendamos desativar essas regras. Atualmente, sabe-se que a regra color-contrast
não funciona com JSDOM.
Só podemos oferecer suporte a ambientes onde os recursos são suportados nativamente ou preenchidos corretamente. Não oferecemos suporte à implementação obsoleta do Shadow DOM v0.
O pacote API axe-core consiste em:
axe.js
- o arquivo JavaScript que deve ser incluído no seu site em teste (API)axe.min.js
– uma versão reduzida do arquivo acima Axe pode ser construído usando seu idioma local. Para fazer isso, um arquivo de localização deve ser adicionado ao diretório ./locales
. Este arquivo deve ser nomeado da seguinte maneira:
. Para construir o ax usando este código de idioma, em vez do padrão, execute ax com o sinalizador --lang
, assim:
grunt build --lang=nl
ou equivalentemente:
npm run build -- --lang=nl
Isso criará uma nova compilação para axe, chamada axe.
e axe.
. Se você deseja compilar todas as versões localizadas, simplesmente passe --all-lang
. Se você deseja criar várias versões localizadas (mas não todas), você pode passar uma lista de idiomas separados por vírgula para o sinalizador --lang
, como --lang=nl,ja
.
Para criar uma nova tradução para axe, comece executando grunt translate --lang=
. Isso criará um arquivo json no diretório ./locales
, com o texto padrão em inglês para você traduzir. Alternativamente, você pode copiar ./locales/_template.json
. Aceitamos qualquer localização para axe-core. Para obter detalhes sobre como contribuir, consulte a seção Contribuição abaixo. Para obter detalhes sobre a sintaxe da mensagem, consulte Verificar modelo de mensagem.
Para atualizar um arquivo de tradução existente, execute novamente grunt translate --lang=
. Isso adicionará novas mensagens usadas em inglês e removerá mensagens que não foram usadas em inglês.
Além disso, locale pode ser aplicado em tempo de execução passando um objeto locale
para axe.configure()
. O objeto de localidade deve ter o mesmo formato das localidades existentes no diretório ./locales
. Por exemplo:
axe . configure ( {
locale : {
lang : 'de' ,
rules : {
accesskeys : {
help : 'Der Wert des accesskey-Attributes muss einzigartig sein.'
}
// ...
} ,
checks : {
abstractrole : {
fail : 'Abstrakte ARIA-Rollen dürfen nicht direkt verwendet werden.'
} ,
'aria-errormessage' : {
// Note: doT (https://github.com/olado/dot) templates are supported here.
fail : 'Der Wert der aria-errormessage ${data.values}` muss eine Technik verwenden, um die Message anzukündigen (z. B., aria-live, aria-describedby, role=alert, etc.).'
}
// ...
}
}
} ) ;
Axe-core suporta os seguintes locais. Observe que, como as localidades são contribuídas pela nossa comunidade, não há garantia de que elas incluam todas as traduções necessárias em um lançamento.
Axe-core tem um novo lançamento secundário a cada 3 a 5 meses, que geralmente introduz novas regras e recursos. Recomendamos agendar um horário para atualizar para essas versões. As atualizações de segurança serão disponibilizadas para linhas de versões secundárias com até 18 meses de idade .
DEQUE, DEQUELABS, AXE® e AXE-CORE® são marcas registradas da Deque Systems, Inc. O uso das marcas registradas Deque deve estar de acordo com a política de marcas registradas da Deque.
Consulte o suporte ARIA do axe-core para obter uma lista completa de funções e atributos suportados pelo ARIA por axe.
Leia o guia Propondo regras do núcleo do machado
Leia a documentação sobre a arquitetura
Leia a documentação sobre como contribuir
Lista de projetos usando axe-core
Obrigado a Marat Dulin por sua implementação do analisador de seletor css, que está incluída para suporte ao shadow DOM. Outro agradecimento aos implementadores do Slick Parser por sua contribuição, usamos alguns de seus algoritmos em nosso código de suporte shadow DOM. Obrigado a Lea Verou e Chris Lilley por sua biblioteca colorjs.io que usamos para converter entre formatos de cores.
Axe-core é distribuído sob a Licença Pública Mozilla, versão 2.0. Ele vem com várias dependências que são distribuídas sob seus próprios termos. (Consulte LICENSE-3RD-PARTY.txt)