Så bygger du en rösttillgänglig meny för synskadade gäster WCAG 2.2 AA

En teträdgård med 12 bord i Kadıköy i Istanbul fick 240 nya besökare per månad efter byte till en QR-meny kompatibel med VoiceOver/TalkBack, delad av Turkiets Synskadeförbund.

WCAG 2.2 AA-grunder

Skärmläsare kräver semantisk HTML: produktnamn i h3, priser via aria-describedby, allergenikoner med aria-label="innehåller gluten". Kontrast minst 4.5:1, tryckyta 44×44 px, logisk tabbordning.

Endast emoji räcker inte — utan ARIA-etikett hör den blinde användaren ingenting.

ARIA Live för varukorgen

När en vara läggs till annonserar role="status": «Linssoppa tillagd, totalt 3 varor». Fel använder role="alert".

ToastProvider i thMenu har aria-live="polite" som standard. Tomt allergen-läge visar «Fråga personalen» som säker fallback.

Test innan lansering

Aktivera VoiceOver (iPhone) eller TalkBack (Android) och gå genom hela beställningsflödet. Tystnad längre än 1 sekund tyder på fokusproblem. Axe DevTools/WAVE hittar stora fel på 30 sekunder.

Testa med en verklig synskadad användare — automatik fångar inte kontext.

FAQ

Behöver jag separat ljudversion? Nej, korrekt HTML betjänar alla.

Lägga till egen TTS? Nej, systemets skärmläsare räcker.

Finns WCAG-certifiering? Officiellt nej; VPAT-rapport är standarden.

Var detta hjälpsamt? Dela det.