Desenvolvimento de software com acessibilidade: usando o WAVE
A verificação de acessibilidade preocupa-se com formas de que todas as pessoas tenham acesso ao conteúdo digital e pode ser feita de forma bem simples e prática com ferramentas como o WAVE.
A World Wide Web Consortium (W3C) disponibiliza a WCAG, que é uma documentação sólida e detalhada, que contêm diretrizes de acessibilidade para conteúdo web. Ela baseia-se em 4 princípios universais, de como o seu conteúdo deve ser: perceptível, operável, compreensível e robusto. Além disso, A WCAG traz 13 diretrizes e 87 critérios de sucesso, que são propriedades testáveis, bem como traz orientação técnica de como satisfazer cada critério.
O Wave é uma ferramenta online (plugin) que faz a identificação de problemas de acessibilidade em sites da web. Desenvolvido pela WebAim.org, ele pode ajudar os desenvolvedores e QAs, oferecendo um feedback instantâneo sobre a acessibilidade do seu conteúdo, destacando as áreas que não estão em conformidade com as diretrizes WCAG 2.1 e oferecendo instrução e suporte eficiente para correção.
Para usá-lo, basta instalar o plug-in no navegador e acioná-lo com um clique direito do mouse na opção “WAVE this page” ou pressionando o “aplicações” do teclado. Ele também pode ter um ícone incluído próximo a barra de endereços do navegador, bastando clicar neste ícone para realizar a verificação.
O Wave destaca as informações importante com ícones inline diretamente na página, bem como mostra um resumo e outras abas com mais detalhes em uma barra lateral ao lado esquerdo.
O resumo separa os apontamentos nas categorias de Erros, Erros de Contraste, Alertas, Propriedades, Elementos Estruturais e ARIA, e mostra a quantidade de cada uma. Ao clicar na aba de Detalhes, é possível ter acesso a informações específicas de cada apontamento, podendo inclusive desabilitar CSS da página ou esconder apontamentos para uma melhor visualização.
Ao clicar no ícone da aba esquerda, o ícone correspondente na página ganha destaque. É possível clicar nele, ou ir na aba de referência e clicar no ícone desejado. Então é revelado o que significa, porque é importante, como corrigir, e hiperlink de referência.
Na sessão Ordem, é mostrado a ordem de leitura dos componentes interativos da página, indicando o tipo de componente (link, botão, etc), seguido pelo nome acessível (que é lido por tecnologias assistivas como o leitor de telas).
Já na sessão Estrutura, ele evidencia a formatação estrutural da página (landmarks, headings, listas e outros), facilitando a validação manual do quão compreensível está a estrutura do conteúdo.
A última sessão é a de Contraste, em que destaca violações ao índice mínimo de contraste conforme tamanho da fonte e dispõe de uma função para validação de contraste.
Por fim, trazemos algumas das regras que o Wave consegue validar e destacar.
- Texto alternativo ausente
- Rótulo de formulário ausente
- Referência ARIA quebrada
- Menu ARIA quebrado
- Título de página ausente ou pouco informativo
- Idioma ausente ou inválido
- Atualizações ou redirecionamentos de página
- Heading vazio
- Botão vazio
- Link vazio
- Link para pular quebrado
- Cabeçalho da tabela vazio
- Conteúdo piscando
- Contraste muito baixo
- Texto alternativo inadequado
- Texto alternativo redundante
- Uma imagem próxima tem o mesmo texto alternativo
- Texto alternativo longo
- Descrição longa
- Rótulo de formulário órfão
- Controle de formulário sem rótulo com título
- Fieldset ausente
- Legenda ausente do conjunto de campos
- Sem estrutura de título
- Título de primeiro nível ausente
- Nenhuma região de página
- Heading ignorado
- Possível heading
- Manipulador de eventos dependente do dispositivo
- Texto muito pequeno
Se você chegou até aqui, esperamos que você tenha curtido essa ferramenta fantástica e que a torne sua melhor amiga na sua jornada de desenvolvimento de produto com acessibilidade digital.
Escrito por Luisa Cavalheiro, Quality Engineer de Acessibilidade no Sicredi.
