Usando a Ação GitHub do Axe Developer Hub

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

Verifique automaticamente PRs e commits para defeitos de acessibilidade

Not for use with personal data

Requisitos:

note

Para outros pipelines CI/CD (como aqueles no GitLab, Bitbucket ou CircleCI) ou quando usar o Axe DevTools para Web APIs/CLI, você pode usar o serviço REST do Axe Developer Hub como base para a sua própria integração.

Visão Geral

A Ação GitHub do Axe Developer Hub permite configurar fluxos de trabalho no GitHub para projetos web que integram o Axe Watcher, a fim de bloquear commits e pull requests se contiverem erros de acessibilidade.

Quando seu conjunto de testes modificado é executado, ele associa os resultados de acessibilidade a um SHA de commit do Git e envia essa informação para os servidores da Deque. A ação do GitHub é executada após a execução do seu conjunto de testes, e consulta os servidores da Deque pelos resultados de acessibilidade associados ao SHA do último commit da branch atual.

Configuração

  1. Crie uma Variável de Ambiente para o ID do Seu Projeto - Recomendamos que você armazene seu ID de projeto em uma variável de ambiente ou outra variável do GitHub. Para este exemplo, vamos armazenar o ID do projeto como uma variável de ambiente chamada PROJECT_ID.

  2. Crie um Segredo para a Sua Chave API - Para este exemplo, o segredo criado é chamado AXE_DEV_HUB_API_KEY, com sua chave API pessoal como valor, mas você pode nomear o segredo como quiser. Ele deve ser referenciado pelo mesmo nome no trabalho do fluxo de trabalho.

  3. Adicione Verificações de Acessibilidade ao Seu Conjunto de Testes - Garanta que você completou as etapas na configuração do projeto para integrar verificações de acessibilidade no conjunto de testes usado no seu pipeline CI/CD (Axe Watcher).

  4. Modifique Seu Fluxo de Trabalho Atual - Você precisa modificar o fluxo de trabalho do executor de testes em .github/workflows e adicionar a ação do GitHub após o trabalho que executa seu conjunto de testes.

Exemplo de Trabalho

O trabalho seguinte à ação do seu conjunto de testes deve executar a ação do Axe Developer Hub GitHub. Consulte o exemplo a seguir:

jobs:

# ...
# your-CI-test
# ...

# Add the following new job:
# Be sure to replace <choose_latest_tag> with the appropriate version tag
  axe-dev-hub:
    runs-on: ubuntu-latest
    needs: your-CI-test
    steps:
      - uses: actions/checkout@v5
      - uses: dequelabs/axe-devhub-action@<choose_latest_tag>
        with:
          api_key: ${{ secrets.axe_DEV_HUB_API_KEY }}
          project_id: ${{ env.PROJECT_ID }}

O axe-dev-hub trabalho no exemplo depende do trabalho que executa seu conjunto de testes, especificado com a linha needs: your-CI-test . Certifique-se de atualizar esta linha para corresponder ao nome do trabalho que executa seu conjunto de testes.

Você pode usar múltiplos parâmetros de entrada para a Ação GitHub. Por exemplo, você pode habilitar o limite de acessibilidade usando enable_a11y_threshold: true. Uma lista completa de parâmetros de entrada pode ser encontrada no Axe Developer Hub GitHub Action README.

note

Você não precisa definir o server_url parâmetro se você criou seu projeto em axe.deque.com. Se sua organização usa uma instância regional, nuvem privada ou implantação local do Axe Developer Hub, você deve definir server_url para o URL base dessa instância (por exemplo, https://axe-eu.deque.com).

Resultados

A ação do GitHub define vários parâmetros de saída, incluindo uma contagem de problemas de acessibilidade que foram detectados, problemas que foram resolvidos e problemas que superam o limite de a11y.

Se você não ativou o limite de a11y, a ação do GitHub falhará sempre que houver mais de zero erros de acessibilidade. Se ativado, apenas as violações que superam o limite de a11y farão a ação do GitHub falhar. Saiba mais sobre como usar o limite de a11y para personalizar o Axe Developer Hub de acordo com o que sua organização deseja priorizar.

A falha da ação do GitHub anexará um comentário similar ao abaixo ao seu pull request e pode bloquear a mesclagem.

Uma mensagem de exemplo que a ação do GitHub anexa a um push request quando erros de acessibilidade foram encontrados.

Clique no link no comentário do pull request para revisar as informações dos defeitos de acessibilidade para esse commit no Axe Developer Hub.

Solucionando Problemas

Você pode receber um erro como o seguinte:

Error: Resource not accessible by integration

Verifique se você tem as permissões necessárias na página de configurações para ações. Você precisa de permissões de leitura e de escrita para permitir que a ação adicione comentários aos pull requests. Para mais granularidade, você pode optar por usar um GITHUB_TOKEN diferente para a ação do GitHub. Adicione este valor ao github_token parâmetro de entrada.

Exemplo de Workflow

Se você ainda não tem um workflow que execute seu conjunto de testes, pode usar o workflow de exemplo como ponto de partida para criar seu próprio executor de testes.

O workflow de exemplo é chamado de Testes (tests.yml) e é executado em qualquer commit ou pull request. O job que executa o conjunto de testes modificado, cypress, mostra como executar um conjunto de testes Cypress. O seguinte job no exemplo, axe-dev-hub, é uma invocação da ação do GitHub do Axe Developer Hub.

Seu job de conjunto de testes deve sempre ser executado antes da ação do GitHub do Axe Developer Hub.

tip

O diretório de exemplo contém um projeto de teste completo com o qual você pode experimentar.

Referências

Is this page helpful?

Help us improve this page

Still need help?