Manter a acessibilidade de um website grande e garantir que todas as suas páginas permanecem acessíveis em diferentes resoluções de dispositivo pode ser uma tarefa desafiante. Uma mudança no layout de um site grande afeta centenas de páginas, e verificar manualmente a acessibilidade de cada página seria uma tarefa tediosa e propensa a erros.
Usar testes automatizados numa configuração de integração contínua é uma excelente abordagem para poupar tempo e esforço. Vamos aprender como, combinando a emulação de viewport de dispositivo e os recursos de hooks de despliegue do Rocket Validator, podemos ter uma configuração poderosa e flexível para manter a acessibilidade dos nossos websites sob controlo, cobrindo diferentes resoluções de dispositivo.
O que vamos construir
Neste artigo vamos configurar um pipeline simples de integração contínua para o nosso site.
Vamos aproveitar os recursos de emulação de viewport de dispositivo e hooks de despliegue do Rocket Validator para validar a acessibilidade do nosso website em diferentes resoluções de dispositivo (800x600, 320x568, e 1440x900), e preparar alguns hooks de despliegue para integrar o nosso alojamento de escolha, o Netlify, para que acionem os relatórios de acessibilidade do Rocket Validator logo após cada implementação.
Que verificações vamos incluir
O Rocket Validator é uma ferramenta de validação de todo o site que pode verificar milhares de páginas dos seus sites, procurando problemas comuns de acessibilidade e HTML.
Os relatórios de validação são bastante simples de configurar, pois você só precisa indicar o URL inicial, que verificações incluir: verificação de conformidade HTML (usando o validador HTML do W3C), e/ou verificações de acessibilidade (usando o conjunto de regras mais recente do Axe Core), e quantas páginas web incluir no relatório de validação (até 5.000 por relatório).
Aqui está a lista de verificações que vamos incluir nos nossos relatórios do Rocket Validator:
- Conformidade HTML. Garantir que o HTML do nosso site está em conformidade com o validador HTML do W3C.
- Verificações Axe Core numa resolução padrão de 800x600. Verificar a acessibilidade do nosso site, procurando problemas comuns como etiquetas de formulário em falta, contraste de cor insuficiente, e mais.
- Verificações Axe Core numa resolução de 320x568. As mesmas verificações Axe Core, mas desta vez numa resolução que simula o tamanho de ecrã de um iPhone SE.
- Verificações Axe Core numa resolução de 1440x900. As mesmas verificações de acessibilidade, numa resolução que simula o tamanho de ecrã de um ecrã HiDPI, por exemplo um MacBook Pro.
Para cada um destes relatórios de validação, vamos incluir até 100 páginas do nosso site de teste. Portanto, no total, estaremos a executar 400 testes de validação em cada implementação, pois faremos 4 verificações em 100 páginas: uma verificação HTML, e 3 verificações Axe Core em 3 resoluções de ecrã diferentes.
Os planos Agency do Rocket Validator incluem 100.000 créditos de validação por mês, portanto com uma subscrição Agency conseguiremos executar 250 implementações por mês - isso é como 8 implementações diárias!
Configurar o relatório de validação HTML + Axe Core 800x600
OK, vamos começar!
Primeiro, vamos configurar um hook de implementação que, quando acionado, executará um relatório de validação do Rocket Validator. Este primeiro relatório de validação incluirá tanto a verificação de conformidade HTML, como as verificações de acessibilidade Axe Core 800x600.
Para fazer isto, vamos criar um novo Schedule. No Rocket Validator, um Schedule é um relatório de validação recorrente que pode ser configurado para executar num intervalo de tempo específico, ou sob demanda após receber uma chamada webhook através do seu fornecedor de alojamento ou serviço de CI/CD.
No formulário New Schedule, só precisaremos preencher os seguintes campos:
- When should we run this validation? Escolha "Only on deploys".
- Starting URL. Introduza a homepage do seu site, ou qualquer URL de onde queira começar. No nosso caso vamos usar o URL do nosso site de teste fictício, https://dummy.rocketvalidator.com/.
- How many pages to validate? Vamos usar 100 páginas para este primeiro relatório de validação.
Vamos deixar os outros campos com os seus valores padrão. Isso incluirá verificações HTML e A11Y numa resolução padrão de 800x600, e outras opções como Deep Crawling que permitirá ao Rocket Validator descobrir ligações internas enquanto rastreia o site. Além disso, a velocidade de validação mais baixa de 1 pedido por segundo é um bom padrão para validação automatizada, para evitar ser bloqueado pelos limites de taxa do site.
Assim que clicarmos em Save schedule, veremos os detalhes do schedule que acabámos de criar. Esta página inclui o URL do Deploy hook, que precisaremos configurar nas nossas definições de construção do Netlify (ou em qualquer outro serviço de CI/CD que suporte webhooks).
Configurar o relatório de validação Axe Core 320x568
Vamos repetir o mesmo processo para criar um novo schedule para o relatório de validação de acessibilidade Axe Core 320x568.
Desta vez, vamos desmarcar a opção HTML, pois a marcação HTML não muda entre resoluções.
Para validar o site numa resolução que simula o tamanho de ecrã de um iPhone SE, vamos marcar iPhone SE (320x568) na secção Device Viewport Emulation. Também podemos usar as tags opcionais para categorizar estes relatórios, no nosso exemplo usaremos a tag "narrow".
É tudo o que precisamos! Clique em Save schedule e seremos redirecionados para a página do schedule, onde podemos ver o URL do Deploy hook.
Configurar o relatório de validação Axe Core 1440x900
Vamos repetir o mesmo processo para criar um novo schedule para o relatório de validação de acessibilidade Axe Core 1440x900.
Desta vez, vamos marcar Laptop HiDPI screen (1440x900) na secção Device Viewport Emulation, e usaremos a tag "wide".
Estamos quase prontos! Grave o schedule e obterá o terceiro URL do Deploy hook.
Configurar a integração com Netlify
Agora que temos os três URLs de Deploy hook configurados no Rocket Validator, os relatórios relacionados serão acionados quando um pedido POST for recebido no URL correspondente. Esse é o comportamento padrão para webhooks, e o Netlify torna muito fácil configurar.
Na página de configuração do Site para o seu site no Netlify, vá para a secção Notifications. Lá, dentro de Emails and webhooks, clique em Add notification e escolha HTTP POST request.
Introduza o primeiro URL de hook de implementação, e depois repita o processo para os outros dois URLs.
É isso! Configurámos a integração do Rocket Validator no Netlify! Agora, cada vez que implementarmos uma nova versão do nosso site, o Netlify notificará o Rocket Validator da implementação através de 3 webhooks diferentes, e o Rocket Validator executará os relatórios de validação relacionados com a emulação de viewport de dispositivo configurada para cada schedule.
O que construímos
Neste artigo vimos como configurar um pipeline de integração contínua para o nosso site, e como usar os recursos de emulação de viewport de dispositivo e hooks de implementação do Rocket Validator para validar a acessibilidade do nosso website em três resoluções de dispositivo diferentes (800x600, 320x568, e 1440x900). Além disso, a conformidade HTML também será verificada em cada implementação.
Ter esta configuração significa que cada vez que uma nova versão do nosso site for implementada, o Rocket Validator executará um relatório de validação para cada schedule, verificando a acessibilidade do nosso site nas diferentes resoluções de dispositivo e enviando-nos um relatório detalhado dos resultados por email.
Se forem encontrados problemas de acessibilidade, podemos corrigi-los e reimplementar o nosso site, e o Rocket Validator executará os relatórios de validação novamente na nova versão do nosso site.