Conferir acessibilidade e registrar falhas

Neste capítulo você vai combinar testes automáticos e manuais e registrar uma correção concreta. O objetivo é terminar uma tarefa pequena e conferir seu resultado no Mirante do Mucuripe.

Seu ponto de partida

Estude depois do capítulo 10. Retome a referência se uma experiência anterior ficou alterada. Use o exemplo 11-conferencia-a11y do pacote anexo e copie inicio/ para uma pasta de prática fora do original. A raiz do exemplo é a referência completa desta etapa. Você não precisa copiar arquivos da etapa anterior.

Abra index.html da sua cópia no navegador e o mesmo arquivo num editor de texto simples. Para mídia, ferramenta de conferência e JSON, use o teste HTTP local explicado no README. Abrir ou testar não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Anote sua previsão antes de salvar e recarregar. Compare o resultado e investigue o erro antes de avançar. Ao terminar cada experiência, restaure somente a mudança indicada, para que a próxima parta dos valores da referência. Você pode parar depois de uma lição.

Uma conferência precisa de uma tarefa

Antes da ferramenta, escreva o que a pessoa precisa fazer: ler a agenda, alcançar orientações e conferir a simulação. Percorra com Tab, Shift+Tab e Enter; amplie a 200% e estreite a janela. Registre onde o foco foi, se houve corte e qual resultado apareceu. Depois compare estrutura e textos. Uma lista de atributos no arquivo não prova o percurso. Se tiver acesso a um leitor de tela, complemente com leitura de títulos, regiões e rótulos. Esse teste tem habilidades próprias e não é substituído por usar só teclado.

Faça na sua cópia

Abra a página e registre o percurso. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

Tarefa: ler a agenda e simular uma pergunta.
Condições: teclado, tela estreita e zoom 200%.
Registro: elemento, problema, correção e nova conferência.

Mude uma coisa e preveja

Faça somente uma rodada de teclado, anotando um resultado concreto.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O registro descreve ações e elementos observados, em vez de afirmar genericamente que a página é acessível.

Se não acontecer

Se estiver difícil reproduzir, anote largura, zoom, navegador e a sequência. Não invente um problema para preencher a lista.

A ferramenta local encontra uma parte dos problemas

Conferir.html carrega o Mirante num iframe, uma região com outra página. Axe-core 4.10.3 acompanha a pasta e executa verificações automáticas. Abra por HTTP em 127.0.0.1 e pressione Conferir a página local. Nenhum cadastro ou serviço remoto recebe o HTML. A ferramenta pode encontrar problemas de rótulo, alternativa e contraste, mas não entende toda a intenção do texto ou a qualidade da experiência. Zero problemas automáticos não é um selo. Leia o resultado como uma lista de hipóteses a verificar e combine-o com testes manuais.

Faça na sua cópia

Abra conferir.html por HTTP local. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

http://127.0.0.1:8772/conferir.html

Mude uma coisa e preveja

Execute somente a conferência da referência e registre a quantidade de tipos de problema.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O resultado aparece na ferramenta. Uma quantidade zero ainda pede conferência manual do conteúdo e dos fluxos.

Se não acontecer

Se não executar, confira HTTP, o iframe e assets/axe.min.js. Não envie a página para um serviço externo como único caminho.

Uma falha controlada ensina a recuperar

Faça a experiência apenas na cópia. Retirar o alt de uma imagem cria uma falha que uma ferramenta consegue identificar. Depois restaure a alternativa que descreve o desenho e repita o mesmo teste. Compare elemento e regra, não apenas a quantidade total. Uma ferramenta pode classificar diferentes ocorrências como um tipo de problema. A qualidade da alternativa ainda exige leitura humana: um alt genérico pode passar por uma verificação de presença e continuar pouco útil. Concluir a experiência inclui restaurar o arquivo de referência.

Faça na sua cópia

Na cópia de index.html, encontre a imagem percurso.png. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

alt="Diagrama de três passos: ler a agenda, escolher uma atividade e conferir as orientações."

Mude uma coisa e preveja

Retire somente o atributo alt, rode a ferramenta e depois reponha o valor original.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

A falta de alternativa é detectável. Depois da recuperação, esse problema desaparece; leia também se o alt corresponde ao diagrama.

Se não acontecer

Recarregue a página dentro da ferramenta para ler o arquivo atualizado. Confira se alterou a cópia servida, não outra pasta.

A captura mostra uma parte da referência. Abra o exemplo para conferir a página inteira. Uma experiência temporária pode produzir outra aparência; restaure os valores antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia da base. Tente primeiro; depois compare seus resultados com os comentários.

1. Registre um percurso manual com ações e resultados.

2. Rode a ferramenta local e interprete o resultado sem atribuir um selo.

3. Provoque a ausência de alt, corrija e confira novamente.

Respostas comentadas

Compare o que você previu com o que observou. Uma solução diferente pode funcionar se mantiver o conteúdo e a tarefa acessíveis.

1. Um registro útil indica condição, elemento e resultado. Ele permite repetir a tarefa e distinguir perda de conteúdo de reorganização.

2. O relatório cobre o conjunto de regras automáticas executadas. Texto, uso real e tecnologias assistivas precisam de conferência complementar.

3. A presença do atributo pode ser verificada automaticamente. A adequação da frase ao diagrama exige comparar significado e contexto.

Quando seguir

Você registra um teste, recupera uma falha e distingue resultado automático de acessibilidade completa. Se ainda houver dúvida, repita somente a experiência que precisa esclarecer.

O arquivo completo

Referência do exemplo 11-conferencia-a11y, reproduzida aqui para que você possa conferir sem sair da página.

assets/simulacao.js

const form = document.querySelector('#visita');
const send = document.querySelector('#simular');
const status = document.querySelector('#retorno');
if (form && send && status) {
  send.disabled = false;
  form.addEventListener('submit', event => {
    event.preventDefault();
    status.textContent = 'Simulação concluída. Nada foi enviado ou guardado.';
    status.focus();
  });
  form.addEventListener('reset', () => { status.textContent = ''; });
}