Pular para o conteúdo
murad.guide

A Web Aberta

Capítulo 18

Animação, leitores e testes

6 min de leitura 1.078 palavras 2 gravuras

Este capítulo ensina a animar sem prejudicar e a testar de verdade o site da Oficina Costeira. A Oficina Costeira é um coletivo fictício de design em João Pessoa. Nenhum vídeo do exemplo toca sozinho.

O exemplo está em exemplos/18-animacao-leitores-testes/. Este volume tem 52 capítulos.

Movimento pode ajudar. Também pode distrair, enjoar ou disparar crise. O ciclo: ler, copiar, mudar uma coisa, prever, recarregar, conferir.

O que você vai aprender

GIF animado e autoplay ficam de fora

GIF que gira sem parar não tem pause. Pisca, pesa e rouba atenção. Não use GIF animado na Oficina Costeira.

Se precisar de movimento, use video com controls. A pessoa pausa. O arquivo pode ser webm. O capítulo de mídia já mostrou a faixa de legendas.

<video controls width="640" poster="assets/imagens/marca.svg">
  <source src="assets/midia/demonstracao.webm" type="video/webm">
  <track kind="captions" src="assets/midia/orla.vtt" srclang="pt-BR" label="Português" default>
  Seu navegador não reproduz o vídeo de estudo.
</video>

Não coloque autoplay. Não coloque muted autoplay loop para imitar GIF. O cartaz fictício da orla não precisa se mexer sozinho.

Som que começa sozinho empurra quem usa leitor de tela. O NVDA fala por cima do áudio. Controles nativos evitam isso.

prefers-reduced-motion

O sistema operacional deixa a pessoa pedir menos movimento. No Windows, a opção aparece nas configurações de acessibilidade de animação. No CSS, você escuta esse pedido.

.marca-onda {
  animation: sobe 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .marca-onda {
    animation: none;
  }

  * {
    scroll-behavior: auto !important;
  }
}

A consulta não desliga o site. Desliga o trecho que gira. Transição curta de cor no foco ainda pode existir. O que some é o vai-e-vem infinito.

scroll-behavior: smooth também enjoa muita gente. No modo reduzido, volte ao salto seco.

Teste no DevTools: em Rendering (ou em Emular), ative “prefers-reduced-motion”. Recarregue. A onda da marca deve parar.

@media (prefers-reduced-motion: no-preference) {
  .marca-onda {
    animation: sobe 2s ease-in-out infinite;
  }
}

Os dois jeitos valem. O segundo só anima quem não pediu redução. Escolha um e seja consistente no main.css.

Resumo dos conceitos: prefers-reduced-motion, NVDA, Teclado

Cor do sistema e contraste extra

Algumas pessoas pedem tema escuro no sistema. prefers-color-scheme detecta isso.

body {
  color: #14222b;
  background: #f7f4ee;
}

@media (prefers-color-scheme: dark) {
  body {
    color: #f7f4ee;
    background: #14222b;
  }
}

Só mude o tema se os dois pares tiverem contraste. Tema escuro mal medido é pior do que areia clara estável. Neste volume, o padrão da Oficina Costeira permanece claro. O bloco acima é o mecanismo, não uma obrigação de paleta dupla.

Há também prefers-contrast. Quando o sistema pede mais contraste, engrosse borda e escureça texto. Trate como melhoria, não como único caminho.

Piscar acima de certos limites pode disparar crise. Evite animation que altera opacidade várias vezes por segundo. Evite fundo que pulsa.

NVDA no Windows, passo a passo

VoiceOver é o leitor da Apple. Útil se você tiver um Mac. Este volume testa no Windows com NVDA.

Instale o NVDA a partir do site do projeto. Não precisa de conta. Use fone se estiver em sala.

Roteiro na home da Oficina Costeira:

  1. Abra index.html pelo servidor em 127.0.0.1.
  2. Ligue o NVDA.
  3. Ouça o título da aba e o h1.
  4. Aperte H e percorra os títulos.
  5. Aperte Insert+F7 e abra a lista de links.
  6. Confira se existe região principal.
  7. Confira o alt da marca e das fotos.

O que deve acontecer: “Oficina Costeira” como título, skip-link no começo, menu como lista, main depois do cabeçalho.

O que não deve acontecer: “clique aqui” repetido, imagem lida como nome de arquivo, foco preso, som do vídeo por cima da voz.

JAWS é outro leitor pago. Narrator já vem no Windows. Se o NVDA não estiver disponível na máquina da escola, o Narrator cobre o roteiro mínimo. Anote isso no caderno. Não finja que testou VoiceOver num PC.

Teclado do começo ao fim

Feche o mouse. Só teclado.

Tab até o skip-link. Enter. O foco deve ir para o main. Tab pelos projetos. Shift+Tab volta. Enter segue um link. Esc fecha um diálogo, se houver (neste exemplo não há).

Links precisam do anel de 3 px do capítulo 17. Botões também. Um div com clique de mouse e sem tabindex honesto não entra neste volume. Use a ou button.

<a class="botao" href="agenda.html">Ver a agenda fictícia</a>

Se a “animação” do botão for um transform no hover, repita no foco e desligue no prefers-reduced-motion.

.botao:hover,
.botao:focus {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .botao:hover,
  .botao:focus {
    transform: none;
  }
}

Pare e experimente. No main.css, acrescente só animation: pisca 0.2s infinite num h1. Preveja: o título treme e o NVDA ainda lê, mas a vista cansa. Recarregue e confira. Envolva a animação em prefers-reduced-motion ou apague. Confira de novo.

Erro comum: testar acessibilidade só com o olho e o mouse. Sem NVDA e sem Tab, você não viu a página que muita gente usa.

Roteiro de conferência desta série

Antes de passar à série de CSS, feche este pacote na Oficina Costeira:

  1. lang="pt-BR" em todo HTML.
  2. Skip-link visível no foco, href casado com o id do main.
  3. Um h1, títulos em ordem, listas de verdade.
  4. alt em toda img.
  5. Contraste medido; foco de 3 px; alvos com padding.
  6. Nada de autoplay; movimento respeita prefers-reduced-motion.
  7. Tab completo; NVDA na home e numa interna.

Servidor só em 127.0.0.1. Não publique. Não grave sessão de analytics. Não peça conta paga para validar.

Resumo dos conceitos: Teclado, NVDA, prefers-reduced-motion

Ferramentas do navegador (Lighthouse, painel de acessibilidade) apontam falhas. Elas não ouvem o NVDA por você. Use as duas camadas: máquina e ouvido.

A próxima série liga o CSS de propósito: arquivo assets/stylesheets/main.css, cascata e seletores. A acessibilidade que você marcou no HTML continua valendo. CSS nenhum deve apagar o foco nem esconder o skip-link.

Atividades

  1. Por que o volume proíbe GIF animado e permite video com controls?
  2. O que prefers-reduced-motion: reduce deve fazer com .marca-onda?
  3. Cite dois atalhos do NVDA úteis para conferir a Oficina Costeira.
  4. Um div clicável com onclick e sem teclado passa neste roteiro? Por quê?
  5. Onde você emula prefers-reduced-motion sem mudar o Windows inteiro?

Respostas comentadas

  1. GIF não pausa e costuma piscar. video com controles deixa a pessoa parar e lê legendas.
  2. Zerar animation (e, se houver, o scroll suave). A marca fica estática.
  3. H para o próximo título; Insert+F7 para a lista de links. Tab também conta.
  4. Não. Sem foco e sem Enter, quem só tem teclado não aciona. Use a ou button.
  5. Nas ferramentas do desenvolvedor, opção de emular CSS media feature prefers-reduced-motion.

Referências

O arquivo completo

Referência do exemplo 18-animacao-leitores-testes, reproduzida aqui para que você possa conferir sem sair da página.

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}