O movimento acessível num site começa com um acordo simples: as pessoas devem conseguir compreender a página e concluir a sua tarefa sem depender de movimento decorativo. Mantenha as animações que explicam uma mudança útil, ofereça uma apresentação mais tranquila quando alguém pede movimento reduzido e, sempre que necessário, permita controlar o movimento contínuo.
Para uma empresa que encomenda um site, a questão prática é saber o que incluir no briefing e como avaliar a entrega. Este guia apresenta um inventário de movimento, uma tabela de decisões e uma lista de verificação para a aceitação do trabalho. Pode utilizá-los num novo design ou num site existente, sem ter de decidir pessoalmente todos os detalhes de implementação.
1. Dê um propósito a cada elemento em movimento
Comece por listar o que se move durante um percurso habitual de um cliente. Abra a página inicial, leia a descrição de um serviço, expanda uma pergunta e chegue ao formulário de contacto. Inclua a animação de abertura, os efeitos de deslocamento da página, os diapositivos automáticos, os vídeos de fundo, as transições dos menus, os indicadores de carregamento e as mensagens de sucesso. Vá além da secção de destaque mais visível: pequenos efeitos podem acumular-se ao longo de uma página.
Para cada elemento, descreva o que o visitante percebe através do movimento. A abertura de um painel pode mostrar onde se enquadra informação adicional. Um indicador de progresso pode explicar que um pedido ainda está a ser processado. Um objeto decorativo em rotação pode reforçar a identidade visual, mas não deve ser a única forma de descobrir o serviço ou encontrar o botão seguinte.
Escreva o resultado pretendido antes de discutir a duração ou o estilo. «O cliente consegue perceber qual é a pergunta aberta» dá ao designer liberdade para escolher uma solução clara. «Todas as secções têm de entrar a voar» compromete o projeto com um efeito antes de alguém verificar se ele é útil. Peça à equipa que mostre uma versão estática ao lado do conceito animado.
Use um inventário de movimento simples
Um inventário útil regista a página, o elemento, o evento que o desencadeia, o propósito, se o movimento se repete, o comportamento proposto para movimento reduzido e a pessoa responsável pela revisão. Acrescente uma coluna para evidências: um endereço de pré-visualização, uma gravação ou uma nota de teste. Assim terá um pequeno documento de aceitação que pode voltar a consultar quando uma nova campanha introduzir outro carrossel ou vídeo.
2. Defina o comportamento da versão mais tranquila
A MDN documenta prefers-reduced-motion como uma forma de um site detetar a preferência por reduzir o movimento não essencial. É um sinal ao qual a implementação precisa de responder. Ativar a definição no dispositivo não reformula automaticamente todas as animações de um site.
Peça uma decisão sobre o comportamento de cada efeito. Uma grande ampliação pode tornar-se uma mudança de estado imediata; um fundo decorativo em movimento pode tornar-se uma imagem estática. Uma resposta expandida pode aparecer sem atravessar o ecrã. Evite aceitar «vamos abrandar tudo» como plano completo: um movimento amplo, mesmo mais lento, pode continuar a ser desnecessário para a experiência.
| Elemento e propósito | Apresentação mais tranquila a discutir | Pergunta para aceitação |
|---|---|---|
| O movimento decorativo na secção de destaque estabelece o estilo visual | Usar uma composição estática cuidada | O visitante consegue ler imediatamente a oferta e utilizar a ligação principal? |
| As secções entram à medida que o visitante percorre a página | Mostrar o conteúdo sem grandes deslocações nem esperas | Todas as secções estão disponíveis ao percorrer rapidamente a página e ao navegar com o teclado? |
| Um menu revela as opções de navegação | Abrir e fechar no mesmo lugar, com um estado claro | O visitante consegue aceder às ligações e regressar ao elemento que abre o menu? |
| Um carrossel apresenta várias ofertas | Disponibilizar controlos explícitos e um estado estático ou em pausa previamente acordado | É possível aceder a todas as ofertas sem ter de acompanhar a velocidade das mudanças automáticas? |
| Um formulário indica o processamento e a conclusão | Manter texto de estado compreensível e uma confirmação estável | O visitante sabe se deve esperar, tentar novamente ou continuar? |
Esta tabela é um exemplo de planeamento, não uma prova de que um determinado site cumpre uma norma de acessibilidade. Substitua as linhas pelos componentes reais do seu projeto. Registe o que acontece no primeiro carregamento e o que deve acontecer se a preferência mudar enquanto a página está aberta. Peça ao programador que identifique quaisquer componentes de terceiros cujo comportamento exija uma verificação separada.
3. Distinga preferências, controlos e critérios de acessibilidade
O suporte a movimento reduzido e um botão de pausa resolvem problemas relacionados, mas diferentes. Uma preferência pode selecionar uma experiência mais tranquila desde o início. Um controlo visível pode permitir parar o movimento contínuo durante a leitura. O briefing deve explicar ambos nos casos em que são relevantes, em vez de tratar um deles como substituto universal do outro.
O critério 2.3.3 das WCAG 2.2, Animação a partir de interações, é de nível AAA. Trata da possibilidade de desativar animações de movimento desencadeadas pela interação, salvo quando essa animação é essencial à funcionalidade ou à informação. Não apresente este critério específico como um requisito de nível AA.
O critério 2.2.2, Pausar, parar, ocultar, é de nível A. A disposição relativa a conteúdo em movimento aplica-se quando o movimento começa automaticamente, dura mais de cinco segundos e aparece juntamente com outro conteúdo, com uma exceção para atividades essenciais. Existe também uma disposição separada para informação atualizada automaticamente, sem essa exceção dos cinco segundos. Estas distinções são importantes ao avaliar um carrossel, uma faixa de texto em movimento ou um fundo animado.
Pergunte ao fornecedor quais os critérios e o nível de conformidade usados para avaliar o projeto, quem realiza essa avaliação e que evidências serão entregues. Passar uma lista de verificação de movimento reduzido não demonstra conformidade integral com as WCAG. A análise do movimento é uma parte de uma revisão mais ampla, que também considera a estrutura, os métodos de interação, o contraste, as alternativas e outros requisitos.
Verifique se os controlos dão realmente controlo
Um controlo de pausa deve ser fácil de encontrar, compreender e utilizar com os métodos de interação acordados. Verifique o que acontece depois de deslocar o foco para outro local ou abrir outro componente. Um carrossel que retoma imediatamente o movimento quando o visitante sai do botão de pausa não proporciona uma pausa útil para a leitura. Acorde se uma preferência ou opção de pausa se mantém ao navegar entre páginas e teste esse comportamento.
4. Preserve a tarefa quando o movimento muda
A versão mais tranquila tem de continuar a funcionar como uma página completa. Remover uma animação não deve deixar texto transparente, navegação fora da área visível ou um botão à espera de a animação terminar. Peça ao programador que demonstre que o conteúdo chega ao seu estado final utilizável mesmo quando a sequência decorativa não é executada.
Acompanhe o foco do teclado através de menus, caixas de diálogo e secções expansíveis. Consegue perceber onde está? A abertura de um componente coloca-o num contexto adequado e o seu fecho devolve-o ao local esperado? Evite um design em que o movimento visual seja o único indício de que algo mudou. As designações claras, os estados selecionados e uma disposição estável também devem transmitir o significado.
Dê especial atenção aos formulários. Uma forma a rodar, por si só, não explica se um pedido está a ser processado, falhou ou foi concluído com sucesso. Peça mensagens de estado claras e a comunicação adequada de atualizações importantes às tecnologias de apoio. Se a equipa remover o indicador rotativo na versão mais tranquila, o estado subjacente e a ação seguinte têm de continuar disponíveis.
Para conteúdos que se movem com o deslocamento da página, compare o deslocamento lento, o rápido e a navegação por teclado. Verifique se os títulos, preços ou controlos desaparecem antes de poderem ser lidos. A informação essencial não deve exigir um gesto executado num momento exato. Se uma narrativa visual precisar de uma sequência, acorde uma forma acessível de chegar à mesma informação sem executar essa sequência.
Uma revisão hipotética de uma página de serviços
Imagine uma consultora com uma animação decorativa na secção de destaque e um formulário de contacto. Na versão mais tranquila, a secção de destaque passa a ter uma imagem estática, os detalhes dos serviços aparecem imediatamente e o formulário mantém a mensagem de processamento e a confirmação. A pessoa responsável pela revisão verifica o mesmo percurso de contacto em ambas as versões. Isto ilustra um método de aceitação; não é um resultado observado num cliente nem uma promessa de mais conversões.
5. Reveja as páginas concluídas em ambos os modos
Peça a versão exata de pré-visualização destinada à publicação. Reveja-a com a definição habitual de movimento e, depois, com a preferência de movimento reduzido do dispositivo ou navegador ativada. Um ficheiro de design pode comunicar a intenção, mas não comprova a forma como a página implementada responde. Registe o navegador, o dispositivo, a definição e o endereço da página junto de cada observação.
Use um conjunto pequeno e repetível de tarefas: ler a oferta, abrir a navegação, expandir detalhes complementares e chegar ao formulário de contacto. Num ambiente de teste, inclua os estados de sucesso e de erro do formulário que foram acordados. Não envie pedidos reais de clientes apenas para testar animações. A equipa do projeto deve disponibilizar uma forma segura de inspecionar estes estados sem desencadear mensagens operacionais.
Verifique num telemóvel e num computador e use um teclado, além do toque ou de um dispositivo apontador, quando aplicável. Aumente o tamanho do texto para verificar se as sobreposições em movimento ocultam conteúdo. Se um efeito depender da passagem do ponteiro, pergunte como a mesma informação fica disponível em dispositivos táteis. Inclua ferramentas de marcação incorporadas, vídeos e outros componentes externos que façam parte do percurso do cliente.
Descreva os problemas através de exemplos observáveis. «Com o movimento reduzido ativado, abrir o menu móvel deixa a ligação de contacto invisível» permite agir. «A animação parece errada» precisa de mais explicação. Inclua os passos, o comportamento esperado e uma gravação curta quando o problema envolver movimento. Depois de uma correção, repita a tarefa afetada na pré-visualização corrigida.
6. Peça evidências adequadas às afirmações
Mantenha o inventário de movimento junto dos resultados. Cada linha deve indicar o que foi testado, o que passou, o que continua por resolver e quem é responsável pela próxima ação. Peça as páginas e os estados efetivamente abrangidos, em vez de um selo que diga «acessível». Um relatório automatizado pode ajudar a identificar alguns problemas, enquanto a revisão manual das tarefas revela comportamentos que exigem observação direta.
A documentação do Lighthouse do Chrome explica que as verificações manuais de acessibilidade não contribuem para a sua pontuação de acessibilidade. Uma pontuação de 100 não demonstra, por isso, que todos os requisitos de acessibilidade foram avaliados. Peça para ver as conclusões da revisão manual, além do relatório automatizado, em especial para os controlos de movimento e para o percurso completo de contacto.
Avalie o desempenho separadamente. Pergunte que versão, perfil de dispositivo e condições produziram um resultado de laboratório e se as interações importantes foram verificadas após o carregamento inicial. Um efeito decorativo que parece fluido no computador do designer continua a precisar de avaliação nos dispositivos de destino acordados. Uma preferência por movimento reduzido não é um indicador fiável de um dispositivo mais lento, e a apresentação habitual também precisa de uma avaliação de desempenho adequada.
Mantenha as afirmações precisas na entrega. «Testámos estes cinco componentes com movimento reduzido ativado nestes navegadores» é uma evidência útil. «Totalmente acessível porque as animações estão desativadas» não é uma conclusão sustentada por esta lista. Se o projeto incluir uma avaliação de acessibilidade mais ampla, registe separadamente o seu âmbito e as questões pendentes.
7. Inclua o movimento no briefing e na entrega
Antes de aceitar o trabalho, acorde estas decisões por escrito. Tornam uma preferência visual verificável e ajudam os futuros editores a evitar a reintrodução de um problema por resolver.
- Propósito: cada componente em movimento tem uma função definida e um responsável pelo conteúdo.
- Alternativa: o comportamento com movimento reduzido está definido, implementado e verificado nas páginas reais.
- Controlo: o movimento contínuo e as atualizações automáticas têm os controlos e o comportamento acordados.
- Continuidade: o conteúdo, o foco do teclado, as mensagens de estado e a tarefa principal do cliente continuam utilizáveis.
- Evidências: as notas da revisão identificam a versão, os ambientes, os resultados e as questões por resolver.
- Manutenção: alguém sabe como rever novos vídeos, conteúdos incorporados e componentes de campanhas após a publicação.
Envie o seu inventário, as páginas de referência e o percurso prioritário do cliente com o pedido de projeto. O nosso guia de briefing para projetos de sites ajuda a organizar o âmbito mais alargado, e a lista de verificação para a renovação de sites ajuda a decidir o que manter e voltar a testar num site existente.
O pacote atual de sites da Digital Studio tem um preço a partir de 2.190 EUR e inclui até cinco páginas responsivas, bases de SEO, um formulário de captação de contactos e publicação no seu domínio. Consulte os serviços e o âmbito atuais e descreva os seus requisitos de movimento e acessibilidade no briefing do site. Acorde explicitamente qualquer avaliação especializada e trabalho adicional; não pressuponha que o preço de um pacote promete uma determinada certificação de acessibilidade.
