Skip to content
FunzionalitàPrezziAffiliatiBlogAiutoChi siamoContatti
Inizia oraAccedi
Torna al Blog
guides2026-10-265 min di lettura

Come creare un menu vocale accessibile per clienti ipovedenti

Una sala da tè di Istanbul ha guadagnato 240 visitatori mensili con un menu QR compatibile VoiceOver/TalkBack. HTML semantico, ARIA live e checklist di test.

th

thMenu Team

thmenu.com

Una sala da tè da 12 tavoli a Kadıköy, Istanbul, ha ottenuto 240 visitatori in più al mese dopo essere passata a un menu QR compatibile con VoiceOver/TalkBack e condiviso dall'Associazione Turca dei Ciechi.

Fondamenti WCAG 2.2 AA

Gli screen reader necessitano di HTML semantico: nomi prodotto come h3, prezzi collegati con aria-describedby, icone allergeni con aria-label="contiene glutine". Contrasto minimo 4.5:1, target touch 44×44 px, ordine di tabulazione coerente.

Le emoji da sole non bastano: l'utente cieco non sente nulla senza l'etichetta ARIA.

ARIA Live per il carrello

Quando si aggiunge un articolo, una regione role="status" annuncia: «Zuppa di lenticchie aggiunta, 3 articoli totali». Per gli errori utilizzare role="alert".

ToastProvider di thMenu adotta aria-live="polite" di default. Il fallback «Chiedere al personale» protegge le scelte degli ipovedenti.

Test prima del lancio

Attivare VoiceOver (iPhone) o TalkBack (Android) e navigare l'intero flusso. Silenzi oltre 1 secondo indicano problemi di focus. Axe DevTools o WAVE rilevano gli errori in 30 secondi.

Coinvolgere un tester realmente ipovedente: gli strumenti automatici non colgono il contesto d'uso.

FAQ

Serve una versione audio separata? No, un HTML semantico corretto serve tutti.

Aggiungere TTS proprio? No, lo screen reader di sistema basta.

Esiste una certificazione WCAG? Non ufficiale; un report VPAT è l'equivalente.

Ti è stato utile? Condividilo.