Gerador de spinner CSS acessível

O que o CSS gerado cobre e o que não cobre

A ferramenta entrega a parte visual: um círculo com borda e uma rotação. Um loader apenas visual não tem significado para tecnologias assistivas, porque o elemento está vazio. A acessibilidade vem da marcação e de uma regra extra de CSS que você adiciona ao redor.

Marcação que anuncia o estado

<div class="loader" role="status" aria-label="Carregando resultados"></div>

role="status" marca o elemento como uma região dinâmica, então muitos leitores de tela anunciam o seu rótulo quando ele aparece. O aria-label deve dizer o que está carregando, como “Carregando resultados” ou “Salvando”, e não uma palavra genérica. Remova o elemento quando o trabalho terminar e mostre o novo conteúdo.

Você também pode colocar texto visível ao lado do anel. O texto visível ajuda todo mundo, inclusive quem não consegue perceber bem o movimento.

Respeite o movimento reduzido

Alguns visitantes ativam uma configuração do sistema que pede aos sites para limitar animações. Respeite-a com uma media query posicionada após o CSS gerado:

@media (prefers-reduced-motion: reduce) {
  .loader {
    animation-duration: 3s;
  }
}

Isso deixa a rotação mais lenta em vez de removê-la, então o loader continua parecendo ativo sem movimento rápido. Se preferir um sinal estático, use animation: none; e mostre o texto “Carregando” ao lado do anel.

Checklist de contraste e tamanho

Limites

• O gerador escolhe a cor da trilha (#eee) para você. Edite-a no CSS colado se o fundo da sua página for parecido.
• Um valor de velocidade muito alto faz o anel tremeluzir. Evite qualquer coisa abaixo de cerca de 0,5 segundo.
• Não confie só no spinner para esperas longas. Diga às pessoas o que está acontecendo, em texto.

Teste rápido

Ative a opção de movimento reduzido no seu sistema operacional e recarregue a página: o anel deve girar mais devagar. Depois, navegue pela página com o teclado para confirmar que o spinner nunca tira o foco do controle que o visitante estava usando. Por fim, ative um leitor de tela e dispare o estado de carregamento uma vez, para ouvir se o rótulo é anunciado quando o elemento aparece e se o novo conteúdo fica acessível depois.