Acrescentar movimento sem atrapalhar

Neste capítulo você vai oferecer uma interação discreta que respeita movimento reduzido. O objetivo é terminar uma tarefa pequena e conferir seu resultado no Mirante do Mucuripe.

Seu ponto de partida

Estude depois do capítulo 09. Retome a referência se uma experiência anterior ficou alterada. Use o exemplo 10-movimento-reduzido 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.

A mudança deve ajudar a reconhecer a ação

Transition suaviza a troca entre valores de uma propriedade. Transform pode deslocar visualmente uma caixa sem mudar a posição dos elementos seguintes no fluxo. O botão usa um deslocamento curto quando recebe hover. A palavra do botão, o foco e a ação existem independentemente desse efeito. Não esconda uma instrução esperando que a pessoa perceba uma animação. Movimento contínuo pode distrair e não é necessário para uma pergunta fictícia. Aqui a experiência serve para reconhecer uma opção pequena e seu limite.

Faça na sua cópia

Confira transition e hover nos botões. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

button { transition: transform .15s ease; }
button:hover { transform: translateY(-2px); }

Mude uma coisa e preveja

Troque somente -2px por -1px.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O deslocamento fica menor. A ação e o espaço dos controles continuam reconhecíveis.

Se não acontecer

Confira se o navegador está em movimento reduzido. Nesse estado, a referência remove o deslocamento de propósito.

A preferência da pessoa participa do CSS

Prefers-reduced-motion consulta uma preferência de movimento reduzido. O navegador pode recebê-la do sistema; ferramentas de desenvolvimento também permitem emular o estado. Na regra reduce, a referência retira transition e transform, inclusive no hover. Esse detalhe importa: retirar apenas a transição ainda deixaria uma troca brusca de posição. Não transforme a preferência numa exigência de instalar JavaScript. A página pode respeitá-la com CSS e continuar com foco visível e texto dos controles.

Faça na sua cópia

Confira a media query de movimento no fim da folha. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

@media (prefers-reduced-motion: reduce) {
  button { transition: none; transform: none; }
  button:hover { transform: none; }
}

Mude uma coisa e preveja

Ative somente a preferência de movimento reduzido no sistema ou na emulação do navegador.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O botão deixa de se deslocar e a simulação continua funcionando. Restaure a configuração depois.

Se não acontecer

Confira as duas regras de transform. Se o hover ainda mover, uma regra mais específica pode ter prevalecido.

Hover não é a única forma de interação

Um dedo numa tela ou o teclado não produz exatamente o mesmo percurso de um ponteiro. Por isso a ação do botão não depende de mouseenter ou de um efeito visual de hover. Submit e click são eventos apropriados aos controles nativos e recebem ativação por teclado. A regra de foco permanece mesmo quando movimento é reduzido. Conferir só a aparência sob o mouse não mostra se um aluno consegue finalizar a pergunta. Teste o resultado da ação com o teclado e mantenha a orientação em texto.

Faça na sua cópia

Faça a simulação com teclado e movimento reduzido. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

Tab → campos → Simular pergunta → Enter

Mude uma coisa e preveja

Preencha dados fictícios e ative somente pelo teclado, sem usar o mouse.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

A confirmação local aparece. O efeito de deslocamento não é necessário para executar a tarefa.

Se não acontecer

Confira foco e elemento button. Uma div com estilo de botão não recebe automaticamente a mesma interação nativa.

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. Compare o deslocamento curto e o estado de movimento reduzido.

2. Explique por que remover apenas transition não basta neste exemplo.

3. Conclua uma simulação com teclado.

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. A preferência reduce remove a troca de posição; o controle continua com nome, foco e ação. O recurso é opcional.

2. Transform no hover ainda deslocaria o botão instantaneamente. A referência retira tanto transição quanto deslocamento nesse estado.

3. Use Tab para alcançar o controle e Enter para ativar. Confira o retorno, não apenas a presença de um contorno.

Quando seguir

Você oferece movimento opcional e mantém a tarefa disponível por teclado. Se ainda houver dúvida, repita somente a experiência que precisa esclarecer.

O arquivo completo

Referência do exemplo 10-movimento-reduzido, 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 = ''; });
}