Como criar um menu acessível por voz para clientes com deficiência visual

Uma casa de chá de 12 mesas em Kadıköy, Istambul, ganhou 240 novos visitantes por mês após migrar para um menu QR compatível com VoiceOver/TalkBack, divulgado pela Associação Turca de Cegos.

Fundamentos WCAG 2.2 AA

Leitores de tela exigem HTML semântico: nomes em h3, preços via aria-describedby, ícones de alérgenos com aria-label="contém glúten". Contraste mínimo 4.5:1, alvos de toque 44×44 px, ordem lógica de tabulação.

Emojis sozinhos não bastam — quem é cego não ouve nada sem rótulo ARIA.

ARIA Live para o carrinho

Ao adicionar um item, uma região role="status" anuncia: «Sopa de lentilha adicionada, 3 itens no total». Para erros, use role="alert".

O ToastProvider do thMenu já usa aria-live="polite". O estado vazio mostra «Consulte um atendente» como salvaguarda.

Testes antes do lançamento

Ative VoiceOver (iPhone) ou TalkBack (Android) e percorra todo o fluxo. Silêncios acima de 1 segundo indicam problema de foco. Axe DevTools ou WAVE detectam falhas em 30 segundos.

Inclua um testador realmente cego — ferramentas automáticas não captam contexto.

FAQ

Preciso de uma versão de áudio separada? Não, HTML semântico atende todos.

Adicionar TTS próprio? Não, o leitor do sistema já faz isso.

Existe certificação WCAG? Oficial não há; um relatório VPAT é o padrão.

Achou útil? Compartilhe.