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

Filtros reduzem uma lista, mas também podem esconder o próprio estado da interface. A pessoa marca duas opções, a grade muda, o foco some e nenhum texto informa quantos itens sobraram. Em uma landing page feita por IA, isso aparece quando o agente trata o filtro como decoração lateral e não como um formulário que controla resultados.

O objetivo é simples de descrever: escolher critérios, saber quais estão ativos, perceber a atualização, remover uma escolha e recuperar o mesmo conjunto ao voltar ou compartilhar a URL. Cada decisão de marcação e JavaScript precisa apoiar esse percurso.

Defina os critérios e a combinação

Antes de escolher componentes, escreva o contrato:

Conjunto: modelos de landing page
Tipo: uma opção por vez
Setor: várias opções combinadas com OU
Recursos: várias opções combinadas com E
Ordenação: uma opção por vez
Aplicação: botão Aplicar no celular, imediata no desktop
URL: /modelos/?tipo=produto&setor=saude,educacao

“E” e “OU” mudam o resultado. Se a pessoa marca Saúde e Educação, o sistema mostra itens de qualquer um dos setores ou apenas itens que pertencem aos dois? A interface, a contagem e a URL precisam seguir a mesma regra.

Não crie um filtro que sempre retorna a lista inteira. Também não mostre opções que nunca produzem resultado sem explicar que estão indisponíveis. O agente pode montar os controles, mas o produto define categorias, combinações e ordem.

Escolha o controle pelo tipo de decisão

Use HTML nativo como ponto de partida:

• checkbox para zero, uma ou várias opções independentes;
• radio para uma opção obrigatória entre alternativas;
• select para uma escolha numa lista compacta;
• botão para ações como “Aplicar” e “Limpar filtros”.

Uma grade de cartões clicáveis não substitui esses controles sem trabalho extra. Seria necessário recriar nome, estado, foco, teclado e contraste. O padrão de checkbox da W3C descreve estados marcado, desmarcado e misto, mas um input type="checkbox" já expõe os dois estados comuns.

Não use botão com aria-pressed para toda escolha só porque ele é fácil de estilizar. Botões alternáveis podem funcionar, mas checkboxes comunicam melhor uma lista de critérios independentes e participam do formulário sem código adicional.

Agrupe opções com fieldset e legend

Quando várias opções respondem à mesma pergunta, dê nome ao conjunto:

<fieldset>
  <legend>Setor</legend>

  <label><input type="checkbox" name="setor" value="saude" /> Saúde</label>
  <label><input type="checkbox" name="setor" value="educacao" /> Educação</label>
  <label><input type="checkbox" name="setor" value="varejo" /> Varejo</label>
</fieldset>

O tutorial da W3C sobre agrupamento de controles usa fieldset e legend para associar opções relacionadas. Isso permite que o leitor de tela anuncie “Setor” junto de cada escolha, sem repetir essa palavra no texto visível de todos os itens.

Cada controle precisa de um rótulo associado. Deixe o texto e a área clicável juntos. Um checkbox minúsculo cercado por texto não clicável exige precisão desnecessária no toque.

Se houver uma explicação, associe-a ao grupo ou ao controle com aria-describedby. Não coloque regras importantes apenas num tooltip. O guia sobre tooltips acessíveis explica por que ajuda essencial precisa continuar disponível por foco, toque e leitura.

Mostre quais filtros estão ativos

A barra lateral não deve ser o único lugar onde o estado aparece. Em tela pequena, ela pode ficar recolhida. Mostre um resumo perto dos resultados:

<section aria-labelledby="filtros-ativos">
  <h2 id="filtros-ativos">Filtros ativos</h2>
  <ul>
    <li>Setor: Saúde <button type="button">Remover Saúde</button></li>
    <li>Tipo: Produto <button type="button">Remover Produto</button></li>
  </ul>
  <button type="button">Limpar filtros</button>
</section>

O botão visível pode dizer “Remover”, mas o nome precisa identificar o critério quando há várias ações iguais. Ao remover uma opção pelo resumo, atualize também o controle original.

Não use só cor para marcar um chip ativo. Texto, estado do controle e aparência precisam concordar. Se um filtro está na URL, mas o checkbox aparece desmarcado, a página tem dois estados concorrentes.

Preserve os filtros na URL

Uma URL estável permite recarregar e compartilhar o conjunto:

/modelos/?setor=saude,educacao&tipo=produto&ordem=recentes

Defina a ordem dos parâmetros para facilitar teste e comparação, mesmo que o servidor aceite qualquer ordem. Remova parâmetros com valor padrão quando eles não mudam o conjunto. Não guarde uma lista longa em um fragmento opaco que ninguém consegue inspecionar.

Ao abrir uma URL, reconstrua os controles antes de exibir a lista. Se um valor não existe mais, ignore-o de forma explícita e mantenha os critérios válidos. Não mostre “2 filtros ativos” quando apenas um foi aplicado.

Voltar e Avançar devem restaurar filtros, resultados, paginação e ordenação. O artigo sobre paginação acessível mostra como preservar o conjunto completo na navegação.

Escolha entre aplicação imediata e botão

Aplicar a cada mudança reduz um passo, mas pode causar recarregamentos, atrasos e anúncios repetidos. Um botão “Aplicar filtros” permite escolher várias opções antes da consulta. Nenhuma abordagem é universal.

Prefira um botão quando:

• a consulta é lenta ou custa processamento;
• vários critérios costumam ser combinados;
• a lista de filtros é longa;
• cada atualização reorganiza muito conteúdo;
• a versão móvel usa um painel sobreposto.

Se a aplicação for imediata, não mova o foco a cada checkbox. Cancele requisições antigas e mantenha os controles disponíveis. A pessoa pode querer marcar outra opção antes de explorar a lista.

No celular, um botão pode fechar o painel depois da resposta. Devolva o foco para o botão que abriu os filtros ou para um resumo estável. O padrão de diálogos modais acessíveis ajuda quando o painel realmente bloqueia o restante da página. Não chame de modal uma gaveta que deixa o conteúdo de fundo interativo.

Anuncie a atualização sem ler a grade inteira

Depois de aplicar ou remover um filtro, mostre uma frase curta:

<p role="status" aria-atomic="true">18 modelos encontrados com 2 filtros ativos.</p>

A WCAG 2.2 sobre mensagens de status orienta mudanças que precisam ser percebidas sem receber foco. A contagem e o estado de carregamento entram nesse caso quando a lista muda na mesma página.

Não coloque todos os resultados numa região viva. Isso transforma cada filtro em uma leitura longa e difícil de interromper. Anuncie quantidade, carregamento, falha ou estado vazio. A pessoa navega pela lista no próprio ritmo.

Se a atualização falhar, não desmarque os controles silenciosamente. Mantenha as escolhas, informe que os resultados não foram atualizados e ofereça nova tentativa.

Trate o estado vazio como combinação de critérios

Quando nenhum item corresponde, diga quais filtros produziram o conjunto vazio:

Nenhum modelo encontrado para Tipo: Produto e Setor: Saúde.
Remova um filtro ou limpe todos para ver o catálogo completo.

Ofereça ações reais. “Tente novamente” não ajuda se a mesma combinação continuará vazia. Um botão “Remover Setor: Saúde” ou “Limpar filtros” deixa a saída explícita.

Não desative todas as opções restantes sem explicar por quê. Se o sistema conhece a contagem por opção, pode mostrá-la no rótulo, mas a contagem precisa acompanhar a mesma consulta e não pode substituir o nome do filtro.

Mantenha filtros recolhíveis operáveis

Listas longas costumam usar acordeões. O título de cada grupo deve ser um botão que informa expandido ou recolhido. Não esconda um grupo ativo sem deixar sinal no título, como “Setor, 2 selecionados”.

Ao recolher, os controles internos saem da ordem de foco. Ao reabrir, continuam com o estado anterior. O guia de acordeões acessíveis cobre botão, aria-expanded, região associada e navegação.

Não coloque checkbox dentro do mesmo botão que abre o grupo. São duas ações diferentes. Separe o controle de expansão das opções.

Teste mudanças, remoção e retorno

Uma matriz curta encontra os defeitos que uma captura de tela esconde:

Teste também com um único filtro, todos os filtros, valores inválidos na URL e uma opção que deixa de existir. Repita com zoom e texto ampliado para verificar se rótulos e contagens não cobrem os controles.

Dê ao agente um pedido que possa ser testado

Em vez de “melhore os filtros”, use critérios concretos:

Revise os filtros do catálogo desta landing page.

Use checkbox para Setor e radio para Tipo.
Agrupe cada conjunto com fieldset e legend.
Mostre os filtros ativos e permita remover um ou limpar todos.
Preserve critérios, ordenação e página na URL.
Anuncie carregamento, quantidade, falha e estado vazio sem mover o foco.

Teste teclado, leitor de tela, celular, histórico e falha de rede.
Não publique antes de apresentar URLs e evidências dos testes.

O agente pode implementar os controles e automatizar parte da verificação. A equipe decide a lógica de combinação, as opções válidas e quando uma mudança deve consultar o serviço.

Reteste no endereço final

No Site no Ar, o agente mantém os arquivos em public/, executa deploy e acompanha deploy_status até o fim, conforme o guia de Publicação.

Na versão pública:

1. aplique filtros apenas com teclado;
2. confira grupos e estados com leitor de tela;
3. remova critérios pelo resumo;
4. compartilhe uma URL filtrada em outra sessão;
5. use Voltar e Avançar depois de várias mudanças;
6. simule carregamento lento e falha;
7. repita com zoom, toque e largura pequena.

Filtros acessíveis mantêm quatro partes em acordo: controles, resumo, URL e resultados. Se uma delas fica para trás, a pessoa não sabe qual conjunto está vendo nem como recuperá-lo.