Usando Regras Personalizadas

Visão Geral das Regras Personalizadas na extensão do axe Expert

Quando você deseja que a ferramenta axe Expert analise páginas da web e aplicações com base em regras específicas para as necessidades únicas de sua organização, é possível fazer isso com a funcionalidade de Regras Personalizadas no painel Rules. Clicar no item de link de Regras no menu principal do axe Expert (menu suspenso próximo ao logotipo da Extensão axe Expert no topo do painel esquerdo) faz com que um painel Rules apareça, oferecendo um botão de Adicionar conjunto de regras personalizadas para exibir um formulário no painel direito para enviar um conjunto de regras personalizadas. O formulário simples consiste em dois campos de entrada de texto e um botão de ação que permitem configurar regras personalizadas que podem ser selecionadas para execução no mecanismo automatizado quando uma página carregada é analisada no painel Analisar.

Assim como ao analisar uma página com os conjuntos de regras do axe Expert, os resultados exibirão quaisquer violações de suas regras personalizadas que forem encontradas, juntamente com as informações especificadas no conjunto de regras personalizadas (Alvo, fonte HTML, Resumo de correção, link de Mais Informações, etc.). Todas as outras opções de ação disponíveis com regras padrão também se aplicam às violações das suas regras personalizadas (Inspecionar, Destacar, Exportar, Enviar, etc.). Há um limite de cinco conjuntos de regras personalizadas permitidas ao mesmo tempo.

1. Adicionar botão de conjunto de regras: Na seção Custom rulesets do painel esquerdo do painel Rules, um comando +Add a ruleset apresenta a você um formulário no painel direito para enviar um conjunto de regras personalizadas.
2. Nome para Regras Personalizadas (somente alfanumérico): Este será o nome do conjunto de regras que aparecerá na seção de Padrões da aba Configurações. É importante seguir as convenções (alfanumérico, sem espaços) e garantir que o nome seja significativo e facilmente reconhecível como uma opção de seleção.
3. Inserir JSON rules.textareaInstructions: JavaScript Object Notation (JSON) é o padrão baseado em texto ao qual o conteúdo deve obedecer para funcionar com a extensão do navegador HTML 2.0 do Firefox. Para mais informações, veja o Exemplo abaixo.
4. Botão SALVAR E USAR CONJUNTO DE REGRAS: Faz com que as regras personalizadas se tornem uma opção selecionável no menu do painel da barra lateral esquerda do painel Rules. Para mais informações, veja Selecionar um Conjunto de Regras.

Exemplo de Regra Personalizada

O código de exemplo a seguir pode servir como um exemplo funcional de um arquivo JSON de Regra Personalizada do axe Expert devidamente formatado.

{
  "checks": [
    {
      "id": "test",
      "options": ["test"],
      "evaluate": "function() { return false; }",
      "metadata": {
        "impact": "minor",
        "messages": {
          "pass": "how did you pass",
          "fail": "there is no way to pass"
        }
      }
    }
  ],
  "rules": [
    {
      "id": "test",
      "metadata": {
        "description": "Will always fail",
        "help": "There is no way to make this pass! It is for testing",
        "helpUrl": "https://foo.com/bar"
      },
      "selector": "html",
      "any": [],
      "all": ["test"],
      "none": [],
      "tags": ["wcag2aa"]
    }
  ]
}

Conjuntos de Regras Personalizadas de Projetos axe Monitor: Após efetuar login no axe Monitor e selecionar um projeto, qualquer conjunto de regras personalizadas associado a esse projeto será automaticamente carregado no painel Rules e disponibilizado para seleção.

Enviar regras personalizadas

Quando você quiser enviar regras personalizadas para uso futuro na Extensão axe Expert, siga estas etapas simples. O envio de regras personalizadas é feito especificando um nome para o conjunto de regras para fins de seleção futura e colando o conteúdo do arquivo de texto JSON devidamente formatado nos campos de entrada de texto, em seguida clicando em um botão para salvá-las e usá-las.

Para enviar regras personalizadas:

1. Abra o DevTools e selecione axe Expert. Selecione Regras no menu principal do axe Expert.

2. No painel esquerdo, selecione + Adicionar um conjunto de regras na seção Conjuntos de Regras Personalizadas do menu. O formulário de Conjunto de Regras é exibido no painel direito.

3. No campo Nome das Regras Personalizadas, insira o nome alfanumérico desejado sem espaços, conforme desejado.

   Isso aparecerá na seção Conjuntos de Regras Personalizadas do painel esquerdo do painel Rules, portanto o nome deve ser significativo e facilmente reconhecível para seleção.

4. No campo Inserir JSON, cole o conteúdo do seu arquivo de texto .json de regras personalizadas a partir da área de transferência virtual. Agarre e arraste o canto inferior direito do campo para aumentar a área visível, se desejar.

5. Selecione SAVE AND USE RULESET.

   

   O nome que você inseriu aparece na seção conjuntos de regras personalizadas no painel esquerdo, e ele aparece no topo do painel direito, no campo Conjunto de Regras:. Além disso, botões para deletar ou usar o conjunto de regras aparecem na parte inferior do formulário no painel direito.

   No painel direito, selecione Analyze now.

   

   O nome do conjunto de regras personalizadas aparece no menu de Regras da barra lateral esquerda precedido por uma marca de seleção para indicar que é o conjunto de regras atualmente selecionado que será usado ao realizar a análise.

Analisar uma página para Violações de Regras de Acessibilidade

Iniciar uma análise de acessibilidade na Extensão axe Expert é feito navegando até o painel Analisar e então clicando no botão Analisar. O processo de análise produz uma mensagem indicando o número total de violações de regras de acessibilidade encontradas na página, bem como uma seção de resultados exibindo as violações de regras identificadas e o número total de violações identificadas. Ativar uma linha no painel de resultados à esquerda exibe detalhes no painel de conteúdo principal à direita. Esta ação também inicializa os botões de seta de violações Anterior e Próximo para aparecer no topo do painel de conteúdo, permitindo que você navegue de uma violação para a próxima para qualquer regra selecionada.

Analisar uma página para violações de regras:

1. Com a aba axe Expert selecionada, selecione Analisar no menu principal no painel à esquerda, à direita do logotipo da Extensão axe Expert. O painel Analisar aparece.

2. No painel de conteúdo, ative ANALYZE. Dependendo de como você encaixou as ferramentas de desenvolvedor ou redimensionou a janela do seu navegador, isso geralmente está no centro do painel esquerdo do painel Analisar.

   O painel Analisar pode temporariamente exibir uma mensagem de status que diz Analyzing...please wait até que a análise da página em relação ao conjunto de regras selecionado seja concluída.

   Sob o logotipo da Extensão axe Expert, o número total de violações encontradas é exibido, juntamente com o número de problemas que requerem revisão manual. Além disso, um menu de contexto suspenso e o link Run again são exibidos à direita das contagens totais. Uma tabela de duas colunas exibindo o nome curto de cada regra com a coluna direita exibindo o número de violações encontradas de cada uma é exibida sob o menu de contexto suspenso.

   

3. Na seção rules violated (painel esquerdo), clique em uma linha rule.

   

   O painel de conteúdo à direita é atualizado para exibir a primeira violação daquela regra. Incluído na exibição de conteúdo estão as seções Target, HTML e Summary (How to Fix the Problem) de informações, juntamente com os links Inspect e Highlight, um menu de contexto (que inclui opções para Export, Scope, Upload e Download) e, na parte inferior, à direita um botão de seta expansível à esquerda para mostrar os Padrões aplicáveis (conjuntos de regras) para a regra selecionada. Para obter informações mais detalhadas sobre cada componente exibido no painel de conteúdo de violação de regras, consulte as descrições na visão geral fornecida no tópico Analisar. Botões de navegação de violação anterior < e próximo > aparecem no topo do painel, permitindo que você navegue entre as violações da regra selecionada. Além disso, o HTML relevante contendo a violação é automaticamente destacado na página testada.

4. Clique em Próximo (>) para navegar para a próxima violação da regra atualmente selecionada ou selecione uma regra diferente no painel de resultados de regras violadas à esquerda, conforme desejado.

   

Remover um conjunto de regras personalizado

Remova um Conjunto de Regras Personalizado do painel Rules quando você não precisar mais de um conjunto de regras personalizadas. Selecione a regra a ser excluída no painel Rules e clique em um botão para excluir.

Se você quiser re-utilizar parte do conteúdo em um futuro conjunto de regras personalizado, certifique-se de salvar o conteúdo do arquivo JSON antes da exclusão, pois este procedimento resulta em uma remoção permanente e irreversível.

Para remover um conjunto de regras personalizado:

1. Na parte inferior da lista de opções na seção Custom rulesets no painel esquerdo do painel Rules, certifique-se de que o conjunto que você deseja remover esteja marcado (selecionado).
2. Clique em DELETE RULESET.

O conjunto é removido do menu do painel esquerdo e não está mais disponível para seleção.