Skip to content
FunkceCeníkPartneřiBlogNápovědaO násKontakt
ZačítPřihlásit se
Zpět na Blog
guides2026-10-265 min čtení

Jak vytvořit hlasově přístupné menu pro zrakově postižené hosty WCAG 2.2 AA

Čajovna v Istanbulu získala 240 nových návštěvníků měsíčně díky QR menu kompatibilnímu s VoiceOver/TalkBack. Sémantické HTML, ARIA live a checklist testů.

th

thMenu Team

thmenu.com

Čajová zahrada se 12 stoly v Kadıköy v Istanbulu získala 240 nových návštěvníků měsíčně po přechodu na QR menu kompatibilní s VoiceOver/TalkBack a sdílení Tureckým sdružením nevidomých.

Základy WCAG 2.2 AA

Čtečky obrazovky vyžadují sémantické HTML: názvy produktů jako h3, ceny přes aria-describedby, ikony alergenů s aria-label="obsahuje lepek". Kontrast min. 4.5:1, dotyková plocha 44×44 px, logické pořadí tabulátoru.

Samotná emoji nestačí — bez ARIA-popisku nevidomý uživatel nic neuslyší.

ARIA Live pro košík

Po přidání položky oblast role="status" ohlásí: «Čočková polévka přidána, celkem 3 položky». Chyby používají role="alert".

ToastProvider thMenu má výchozí aria-live="polite". Prázdný stav alergenů zobrazuje «Zeptejte se personálu» jako bezpečný fallback.

Test před spuštěním

Zapněte VoiceOver na iPhonu nebo TalkBack na Androidu a projděte celý objednací tok. Ticho delší než 1 sekundu naznačuje problém s fokusem. Axe DevTools/WAVE odhalí většinu porušení do 30 sekund.

Otestujte i s reálným nevidomým uživatelem — automatické nástroje nezachycují kontext.

FAQ

Potřebuji oddělenou audio verzi? Ne, správné sémantické HTML obsluhuje všechny.

Přidat vlastní TTS? Není třeba, systémová čtečka to zvládne.

Lze získat certifikaci WCAG? Oficiální není; standardem je zpráva VPAT.

Bylo to užitečné? Sdílejte to.