Cardápio digital acessível no celular: 12 testes práticos para saber se o cliente consegue ler, navegar e escolher

Um cardápio pode abrir rapidamente pelo QR Code e ainda assim dificultar a escolha. Texto pequeno, contraste fraco, categorias confusas, botões difíceis de tocar ou informações colocadas apenas dentro de imagens são barreiras que aparecem justamente quando o cliente precisa decidir o que pedir.

A boa notícia é que boa parte desses problemas pode ser identificada com testes simples. As verificações abaixo foram traduzidas de critérios da WCAG 2.2 e de orientações de acessibilidade digital para uma rotina que o próprio estabelecimento consegue executar. Elas servem para encontrar problemas e orientar correções, mas não equivalem a uma certificação de conformidade: a W3C afirma que ferramentas automáticas não conseguem determinar sozinhas se um site atende aos padrões de acessibilidade e que a avaliação humana continua necessária.

Antes dos testes, use o cardápio que o cliente realmente recebe

Não faça a avaliação apenas dentro do painel administrativo ou na tela de pré-visualização. Abra o endereço público usando o mesmo caminho do cliente: QR Code ou link, navegador do celular e, de preferência, mais de um aparelho.

Essa lógica combina bem com soluções em que o menu é uma página pública. O , disponível em menu.biomi.space, oferece cardápio consultado pelo navegador, sem exigir conta do cliente, e permite organizar categorias, produtos, fotos, preços e descrições. O estabelecimento pode ainda escolher entre somente consulta, montagem da lista para WhatsApp ou um painel simples de comandas.

O próprio Biomi informa que sua página pública e seu painel foram ajustados para telas menores. Isso é um bom ponto de partida, mas responsividade e acessibilidade não são exatamente a mesma coisa. Depois de cadastrar o cardápio real, ainda é importante verificar como textos, imagens, categorias e ações se comportam na prática.

1. Aumente o texto para 200%

Abra o cardápio no navegador e aumente o zoom ou o tamanho do texto até chegar a aproximadamente 200%.

Depois percorra categorias, nomes dos pratos, descrições, preços e botões. O conteúdo deve continuar disponível e utilizável, sem textos cortados, elementos sobrepostos ou funções que desaparecem.

O critério 1.4.4 da WCAG 2.2 estabelece que, com as exceções previstas na norma, o texto deve poder ser redimensionado até 200% sem perda de conteúdo ou funcionalidade.

Aprovado: tudo continua legível e utilizável.

Revisar: preço desaparece, descrição fica cortada, botão é encoberto ou parte do cardápio deixa de funcionar.

2. Veja se a página continua funcionando em uma área estreita

Faça o teste em uma tela pequena ou aumente bastante o conteúdo até reduzir a área útil da página. Observe se é necessário mover a tela para a esquerda e para a direita para terminar de ler um produto.

A WCAG 2.2 trata esse comportamento no critério de reflow: em conteúdo de rolagem vertical, a referência é uma largura equivalente a 320 pixels CSS, sem perda de informação ou funcionalidade e, em condições normais, sem exigir rolagem em duas dimensões.

Em um cardápio, isso é especialmente importante porque nomes, descrições, preços e controles costumam aparecer juntos.

Aprovado: a página se reorganiza verticalmente.

Revisar: o cliente precisa arrastar lateralmente para ler preços, descrições ou acessar comandos.

3. Confira o contraste entre texto e fundo

Observe nome do produto, descrição, preço, categorias, avisos e textos dentro dos botões.

A WCAG 2.2 adota, no nível AA, relação mínima de contraste de 4,5:1 para texto comum e 3:1 para texto considerado grande, com as exceções previstas no critério.

Não tente decidir apenas “a olho”. Uma combinação pode parecer legível para quem criou o layout e continuar insuficiente para outra pessoa. Use um verificador de contraste para medir as combinações principais.

Aprovado: as combinações atingem os valores aplicáveis.

Revisar: textos claros ficam sobre fundos claros, ou textos escuros perdem definição sobre imagens e áreas escuras.

4. Desligue mentalmente as cores: a informação ainda faz sentido?

Imagine que o cliente não consiga distinguir a cor usada para indicar “disponível”, “selecionado”, “destaque” ou determinada categoria.

A WCAG determina que a cor não seja o único recurso visual utilizado para transmitir informação, indicar uma ação ou diferenciar um elemento.

Se um item indisponível for indicado apenas ficando cinza, por exemplo, acrescente uma indicação textual. Se uma categoria ativa depender apenas de outra cor, avalie também forma, marcação ou texto.

Aprovado: a informação continua compreensível sem depender somente da cor.

Revisar: retirar a diferença de cor faz o cliente perder o significado.

5. Verifique se preços e informações importantes estão em texto de verdade

Fotos tornam o cardápio mais visual, mas não devem carregar sozinhas o nome, o preço, ingredientes ou outra informação necessária para escolher.

A WCAG recomenda evitar imagens de texto quando a mesma apresentação pode ser produzida com texto real, justamente porque o usuário pode precisar alterar tamanho, cores, fonte, espaçamento ou outras características de apresentação.

Por isso, um banner com “combo R$ 29,90” não deveria ser a única fonte dessa informação. O valor e as condições relevantes também precisam aparecer como conteúdo textual.

Aprovado: o cliente entende produto e preço mesmo sem interpretar o texto embutido nas imagens.

Revisar: promoções, preços ou condições existem somente dentro de banners e fotografias.

6. Navegue pelas categorias como alguém que ainda não conhece o cardápio

Leia apenas os nomes das categorias e tente localizar rapidamente um tipo de produto: bebida, sobremesa, hambúrguer, prato principal ou acompanhamento.

Os títulos e rótulos devem descrever seu assunto ou finalidade, de acordo com o critério 2.4.6 da WCAG.

“Bebidas” orienta melhor do que uma categoria chamada apenas “Outros”. “Combos” funciona quando realmente agrupa combinações. A organização deve refletir a forma como o cliente procura, não apenas a estrutura interna do estabelecimento.

No Biomi Menu, a página pública prevê organização por categorias e exibição de produtos com nome, preço e descrição, o que permite aplicar esse tipo de estrutura diretamente no cardápio.

Aprovado: uma pessoa que nunca viu o menu entende onde procurar.

Revisar: categorias se sobrepõem, usam nomes internos ou obrigam o cliente a abrir várias opções por tentativa.

7. Tente tocar nos controles sem precisão

Use apenas uma mão e toque normalmente nas categorias, botões de adicionar, controles de quantidade ou outros elementos interativos.

Na WCAG 2.2, o critério 2.5.8 estabelece, no nível AA, referência mínima de 24 por 24 pixels CSS para alvos de ponteiro, com exceções previstas pela própria norma, inclusive situações relacionadas ao espaçamento.

Para o dono do restaurante, a avaliação mais simples é prática: os botões precisam ser fáceis de acertar e suficientemente separados para não provocar toques no comando vizinho.

Aprovado: os controles podem ser acionados sem esforço ou toques acidentais frequentes.

Revisar: links e botões pequenos ficam amontoados, especialmente nas laterais da tela.

8. Faça o pedido sem usar o mouse

Abra o cardápio também em um computador e tente navegar usando somente o teclado: Tab, Shift+Tab, Enter, barra de espaço e setas quando apropriado.

O eMAG orienta que a validação manual inclua a navegação pela página apenas com teclado e, quando possível, com tecnologias assistivas. A WCAG também contém critérios específicos para operação por teclado.

Observe duas coisas: se é possível alcançar os elementos e se fica claro visualmente onde o foco está.

Aprovado: categorias, links e ações importantes podem ser alcançados e acionados.

Revisar: o foco some, pula controles importantes ou fica preso em algum componente.

9. Use o celular em retrato e paisagem

Gire o aparelho e confira novamente o cardápio.

O objetivo não é exigir que todos usem as duas posições, mas identificar layouts que funcionam apenas em uma orientação e escondem informações quando o dispositivo é girado. A WCAG 2.2 inclui a orientação da tela entre seus critérios de adaptabilidade.

Preste atenção principalmente a categorias horizontais, modais, carrinhos e botões fixos.

Aprovado: o conteúdo continua utilizável nas orientações suportadas sem perda injustificada.

Revisar: preços, controles ou partes do produto desaparecem depois da rotação.

10. Confira o que acontece quando as fotos não ajudam

Analise cada imagem de produto perguntando: “Se esta foto não puder ser vista, o cliente ainda recebe a informação necessária?”

A WCAG exige alternativa textual para conteúdo não textual quando ela precisa cumprir finalidade equivalente.

Em um cardápio, o nome e a descrição do prato já podem fornecer boa parte do contexto. O texto alternativo da imagem deve ter função real, e não repetir mecanicamente tudo o que já está ao redor.

Aprovado: retirar a fotografia não impede identificar o item ou entender informações necessárias.

Revisar: a imagem contém informação indispensável que não aparece de nenhuma outra maneira acessível.

11. Faça uma passagem com leitor de tela

Ative um leitor de tela disponível no aparelho e percorra pelo menos um fluxo completo: identificar o estabelecimento, encontrar uma categoria, ouvir um produto, conferir seu preço e chegar à ação correspondente.

O Governo Digital recomenda testes com tecnologias assistivas porque eles ajudam a revelar problemas de semântica que uma inspeção visual não mostra. O eMAG também inclui leitor de tela e validação manual em seu processo de avaliação.

Não basta o leitor “falar alguma coisa”. A sequência precisa fazer sentido e os controles precisam ser anunciados de forma compatível com sua finalidade.

Aprovado: nomes, preços, categorias e controles são compreensíveis e aparecem em uma ordem lógica.

Revisar: o leitor anuncia apenas “botão”, “imagem” ou textos desconectados, ou pula informação necessária para a escolha.

12. Execute a tarefa mais importante do começo ao fim

Por último, deixe de testar componentes isolados e simule a situação real.

Abra o QR Code, encontre uma categoria, escolha um item, leia descrição e preço e conclua a ação disponível no estabelecimento. Se o cardápio for somente para consulta, a tarefa termina quando a informação necessária para fazer o pedido estiver clara. Se houver seleção, WhatsApp ou comanda, siga até o último passo antes do envio.

No Biomi Menu, esses fluxos podem variar conforme a configuração: o negócio pode usar somente consulta, abrir a lista montada pelo cliente no WhatsApp ou trabalhar com o painel simples de comandas. Por isso, o teste deve refletir o modo realmente adotado pelo estabelecimento.

Aprovado: uma pessoa consegue concluir a tarefa sem descobrir regras escondidas, voltar várias vezes ou depender de tentativa e erro.

Revisar: existe algum ponto em que o cliente não sabe o que fazer em seguida.

Checklist rápido: aprovado ou revisar

Depois dos testes, marque o resultado do seu próprio cardápio:

• Texto continua utilizável com zoom de 200%.

• A página se reorganiza sem exigir rolagem lateral para leitura comum.

• Texto e fundo têm contraste adequado.

• Nenhuma informação depende apenas de cor.

• Preços e informações essenciais não existem somente dentro de imagens.

• Categorias e rótulos explicam claramente o que contêm.

• Botões e links são fáceis de tocar e não ficam amontoados.

• O fluxo principal funciona com teclado e mostra o foco.

• A mudança de orientação não elimina conteúdo necessário.

• Fotos possuem tratamento textual adequado ao contexto.

• O fluxo é compreensível com leitor de tela.

• A tarefa principal pode ser concluída do início ao fim.

Se algum item ficou em “revisar”, isso não significa que seja necessário reconstruir todo o cardápio. Comece pelas barreiras que impedem leitura, navegação ou escolha e repita o teste depois da correção.

Um cardápio simples também precisa ser testado

Acessibilidade não depende de transformar o cardápio em um sistema complexo. Muitas melhorias estão na apresentação do conteúdo: texto real, categorias compreensíveis, contraste, controles utilizáveis e uma estrutura que continue funcionando quando o cliente amplia a página ou usa tecnologia assistiva.

Para pequenos negócios que procuram publicar um menu pelo navegador e compartilhá-lo por link ou QR Code, o é uma alternativa que pode ser considerada. No site consultado em 14 de agosto de 2026, o serviço informa cadastro e uso gratuitos, acesso do cliente sem conta, QR Code, categorias, fotos, preços e três modos de utilização.

A recomendação, porém, é a mesma para qualquer plataforma: depois de cadastrar seus produtos, teste o seu cardápio publicado, com conteúdo e configurações reais. Um checklist ajuda a encontrar falhas; a conclusão sobre conformidade exige avaliação mais abrangente, combinando ferramentas e julgamento humano.