Como criar sliders acessíveis em uma landing page feita por IA

Arrastar uma bolinha por uma linha parece simples até a pessoa precisar escolher exatamente 37, usar apenas o teclado ou descobrir o valor atual sem enxergar a tela. Sliders customizados costumam esconder limites, ignorar teclas e oferecer uma área de toque menor do que o desenho sugere.

O primeiro passo não é escrever ARIA. É confirmar se um slider combina com a tarefa. Depois, use o controle nativo quando possível e exponha uma alternativa precisa quando arrastar não for suficiente.

Este guia mostra como especificar intervalo, passo e unidade, implementar o comportamento esperado e testar a versão publicada.

Confirme que a tarefa aceita uma escolha aproximada

Sliders funcionam bem quando a pessoa entende a posição dentro de um intervalo e pode ajustar o valor em passos previsíveis. Exemplos comuns são volume, intensidade, zoom ou uma faixa simples de preço.

Eles funcionam mal quando o valor precisa ser digitado com precisão, comparado com muitos pontos ou escolhido entre opções sem relação numérica. Nesses casos, um campo numérico, select ou grupo de radio buttons costuma ser mais claro.

Antes do componente, defina o contrato:

Campo: orçamento mensal
Mínimo: R$ 100
Máximo: R$ 2.000
Passo: R$ 50
Valor inicial: R$ 500
Unidade anunciada: reais por mês
Entrada alternativa: campo numérico sincronizado

O intervalo e o passo pertencem à regra do produto. Não deixe o agente deduzi-los pelo comprimento do trilho.

Prefira input type="range"

O controle nativo já fornece semântica de slider, foco, limites e operação por teclado:

<label for="orcamento">Orçamento mensal</label>
<input id="orcamento" name="orcamento" type="range" min="100" max="2000" step="50" value="500" />
<output for="orcamento">R$ 500</output>

A documentação do MDN sobre input type="range" explica como min, max e step limitam os valores válidos. O padrão é de 0 a 100 com passo 1, mas esses valores quase nunca devem ficar implícitos num produto real.

Associe um <label> visível. Atualize o <output> quando o valor mudar e mantenha a formatação compatível com a localidade. O valor enviado pelo input continua numérico. A apresentação pode incluir moeda, porcentagem ou outra unidade.

Não recrie o controle com uma <div> apenas para mudar trilho e indicador. A personalização visual do range exige CSS, mas preservar o elemento nativo reduz a quantidade de comportamento que o projeto precisa reproduzir e manter.

Mostre valor, limites e unidade

Uma posição sem texto obriga a pessoa a estimar. Exiba o valor atual perto do controle e deixe os limites compreensíveis.

Orçamento mensal
R$ 100                           R$ 2.000
                R$ 500

Não dependa somente de marcas visuais no trilho. Os rótulos do datalist associado a um range não aparecem da mesma forma em todos os navegadores. Se pontos específicos importam para a tarefa, apresente-os em conteúdo normal e teste o suporte necessário.

Quando o número cru não comunica o significado, use uma representação humana. Num slider de satisfação, 3 pode significar “neutro”. Num controle de mídia, 95 pode significar “1 minuto e 35 segundos”.

O padrão de slider da W3C usa aria-valuetext em widgets customizados quando aria-valuenow não basta. Num input nativo, teste primeiro como os navegadores e leitores de tela anunciam o valor e a unidade. Não acrescente ARIA redundante por precaução.

Preserve a operação por teclado

Um slider horizontal segue convenções conhecidas:

• Seta para direita e Seta para cima aumentam um passo;
• Seta para esquerda e Seta para baixo diminuem um passo;
• Home vai ao mínimo;
• End vai ao máximo;
• Page Up e Page Down podem alterar uma quantidade maior, quando implementados.

O foco fica no indicador móvel. A página não deve rolar quando uma seta serve para alterar o controle. O valor visível precisa acompanhar cada mudança.

Se o slider for vertical, declare e teste a orientação. A direção precisa combinar com a expectativa da interface. Um controle de temperatura normalmente aumenta para cima. Uma regra invertida exige uma razão forte e instrução clara.

O guia sobre navegação por teclado ajuda a conferir a entrada e a saída do componente junto com o restante da página.

Ofereça um caminho preciso sem arrastar

Algumas pessoas não conseguem posicionar o indicador com precisão usando mouse ou toque. Outras sabem o valor que desejam e não querem percorrer dezenas de passos.

Para intervalos grandes ou decisões exatas, associe um campo numérico:

<label for="valor-faixa">Orçamento mensal</label>
<input id="valor-faixa" type="range" min="100" max="2000" step="50" value="500" />

<label for="valor-numero">Valor em reais</label>
<input
  id="valor-numero"
  name="orcamento"
  type="number"
  min="100"
  max="2000"
  step="50"
  value="500"
/>

Sincronize os dois controles sem criar um ciclo de eventos. A mesma regra deve validar ambos. Se a pessoa digitar um valor fora do intervalo ou fora do passo, explique a correção e preserve a entrada até ela decidir.

Não esconda o campo numérico apenas de quem enxerga. Uma alternativa útil deve estar disponível para todas as pessoas que preferem digitar.

O artigo sobre mensagens de erro e status acessíveis cobre associação da mensagem ao campo e anúncios que não interrompem cada ajuste.

Evite sliders com dois indicadores quando houver opção mais simples

Um filtro de preço mínimo e máximo costuma usar dois indicadores no mesmo trilho. Esse controle precisa manter a ordem dos valores, dar um nome distinto a cada indicador e permitir que ambos sejam operados sem colisão.

Dois campos numéricos, “Preço mínimo” e “Preço máximo”, podem resolver a tarefa com menos surpresa. Se o slider de intervalo for mantido, os campos sincronizados deixam a escolha precisa e a relação entre os limites explícita.

Para um widget ARIA customizado, cada indicador precisa de foco, nome, aria-valuemin, aria-valuemax e aria-valuenow. Os limites de um indicador podem depender do valor do outro. Atualize essas propriedades a cada mudança.

Não transforme todas as marcas do trilho em paradas de Tab. Cada indicador é uma parada. A navegação dentro do intervalo usa as teclas do slider.

Dê área suficiente ao indicador e ao trilho

Um círculo com 14 pixels pode ser bonito num mockup e impraticável num celular. A área interativa pode ser maior que a forma visível, desde que não se sobreponha a outros controles.

Garanta também:

• foco visível ao redor do indicador;
• contraste do indicador contra o trilho e a página;
• diferença perceptível entre a parte selecionada e a parte restante;
• valor legível sem cobrir o controle;
• espaço para zoom e textos maiores;
• resposta estável quando o dedo sai alguns pixels do centro.

Use os roteiros de alvos de toque e zoom e reflow para revisar o componente além do desktop.

Teste com toque e tecnologia assistiva

A W3C alerta que sliders customizados podem falhar com tecnologias assistivas baseadas em toque, pois a interação depende de gestos que precisam ser convertidos em eventos de aumento e redução. Um teste com mouse não cobre esse caminho.

Monte uma matriz:

Use o roteiro de teste com leitor de tela e registre o dispositivo. A combinação móvel importa aqui. Se o slider customizado falha com a tecnologia assistiva usada pelo público, o campo alternativo não é um detalhe. É parte do componente.

Peça ao agente evidências, não um acabamento visual

Um pedido útil define o dado e o comportamento esperado:

Revise o slider de orçamento desta landing page.

Intervalo: R$ 100 a R$ 2.000.
Passo: R$ 50.
Valor inicial: R$ 500.
Mostre o valor atual e ofereça um campo numérico sincronizado.

Prefira input type="range".
Teste setas, Home, End, foco, toque, leitor de tela móvel,
alto contraste, zoom, limites e valor enviado.
Não publique antes de apresentar os resultados por cenário.

O agente pode implementar e testar a interface. Ele não deve inventar limites, passo, unidade ou arredondamento.

Reteste depois da publicação

O build final pode mudar estilos, listeners e tamanho da área interativa. No Site no Ar, o agente mantém a saída em public/, chama deploy e acompanha deploy_status até um estado terminal, conforme o guia de Publicação.

Na URL publicada:

1. percorra o slider com teclado do mínimo ao máximo;
2. compare o valor visível, anunciado e enviado;
3. use o campo numérico e confirme a sincronização;
4. teste toque com e sem leitor de tela ativo;
5. aumente o zoom e verifique se valor e indicador continuam legíveis;
6. confirme mínimo, máximo, passo e arredondamento no destino do formulário.

Um slider acessível deixa o intervalo explícito e não obriga ninguém a arrastar. Comece pelo controle nativo, exponha o valor em texto, ofereça uma entrada precisa quando a tarefa pedir e prove o comportamento no dispositivo que as pessoas realmente usam.