Foco, estados, movimento e preferências

O foco precisa de permanecer localizável

O foco indica onde uma ativação de teclado terá efeito. Retirar outline sem alternativa pode deixar o foco funcionalmente presente, mas impossível de localizar visualmente. Um indicador de um segundo não resolve a situação depois de desaparecer.

No exemplo, :focus-visible desenha um contorno quando o browser determina que o foco precisa de indicação. A regra deve funcionar nos temas usados e sem ser cortada por contentores, sobreposições ou limites do componente.

Hover não representa todos os acessos

A media feature hover descreve se o mecanismo principal de entrada consegue pairar convenientemente. Não identifica todos os dispositivos nem comprova acesso por teclado. Mostrar uma ação só quando o rato está sobre um cartão exclui quem não consegue produzir esse estado.

O exemplo usa hover apenas para uma deslocação decorativa e mantém o botão disponível. Ao escolher estados, separa melhoramentos de apresentação das condições necessárias para executar a tarefa.

Reduzir movimento sem retirar informação

Prefers-reduced-motion: reduce comunica uma preferência; não reescreve automaticamente as animações do autor. No exemplo, retirar transition e a transformação deixa o conteúdo e a ação disponíveis no seu estado estável. Num indicador de progresso, é preciso preservar a informação mesmo que a apresentação deixe de animar.

Evita substituir uma deslocação ampla por outra mais rápida sem avaliar o efeito. A adaptação também tem de vencer a cascata: uma regra posterior pode voltar a ativar a animação.

Cores forçadas mudam os sinais visuais

Em forced-colors, o browser adapta várias cores no momento de desenhar a página e pode remover box-shadow. Um botão cujo único limite é uma sombra pode perder esse sinal. A borda do exemplo oferece outro mecanismo e usa uma cor do sistema no modo ativo.

Estas decisões devem respeitar a preferência, em vez de desligar globalmente a adaptação. A escolha de cores pode depender da semântica nativa: acrescentar role="button" a um div não o transforma num button nativo para todos os efeitos.

Aparência e estado funcional

Uma classe com o nome disabled ou opacity: .4 pode sugerir indisponibilidade sem impedir qualquer ação. Num button nativo, o atributo disabled define um estado funcional que :disabled pode selecionar. A apresentação deve acompanhar esse estado, sem ser a sua única implementação.

Ao diagnosticar uma ação que parece bloqueada mas continua a executar, verifica atributos e comportamento. O estilo não valida regras de negócio nem substitui a decisão do servidor sobre uma operação autorizada.

Foco escondido por conteúdo

Um rodapé fixo pode tapar inteiramente o botão focado mesmo quando o indicador está corretamente definido. O critério Focus Not Obscured (Minimum) trata a ocultação total do componente por conteúdo criado pelo autor, com exceções delimitadas.

Não deve ser confundido com uma exigência universal de visibilidade integral. No caso da aula, não há exceção: é necessário rever o espaço reservado, o scroll e a sobreposição, e confirmar que o componente deixa de ficar totalmente escondido.

Contraste ao longo dos estados

Para texto normal ativo sem exceções, o requisito de contraste mínimo é 4,5:1. Um estado normal de 5:1 não compensa um hover de 4,4:1; a média dos dois não é a avaliação relevante. Texto grande, logótipos e conteúdo incidental têm condições diferentes, que não devem ser inventadas para justificar uma ação comum.

Os valores das perguntas são fornecidos como observações do cenário, sem cálculo por código. A revisão do componente completo ainda deve considerar foco, limites, informação e funcionalidade.

Armadilhas comuns

Remover outline sem substituição; mostrar ações apenas em hover; ocultar informação para reduzir movimento; confiar só em sombras em forced-colors; confundir uma classe disabled com o atributo; avaliar contraste apenas no estado normal.