12-pöytäinen teehuone Istanbulin Kadıköyssä sai 240 uutta kävijää kuukaudessa siirryttyään VoiceOver- ja TalkBack-yhteensopivaan QR-menuun, jonka Turkin Sokeain Liitto jakoi.
WCAG 2.2 AA perusteet
Ruudunlukijat vaativat semanttista HTML:ää: tuotenimet h3-elementteinä, hinnat aria-describedby -liitoksin, allergeenikuvakkeet aria-label="sisältää gluteenia". Kontrasti vähintään 4.5:1, kosketuskohde 44×44 px, looginen sarkainjärjestys.
Pelkkä emoji ei riitä — ilman ARIA-tunnistetta sokea käyttäjä ei kuule mitään.
ARIA Live ostoskorille
Kun tuote lisätään, role="status" -alue ilmoittaa: «Linssikeitto lisätty, yhteensä 3 tuotetta». Virheille käytetään role="alert".
thMenun ToastProvider on oletuksena aria-live="polite". Allergeenien tyhjä tila näyttää «Kysy henkilökunnalta» -varaviestin.
Testit ennen julkaisua
Avaa iPhonen VoiceOver tai Androidin TalkBack ja käy koko tilausvirta läpi. Yli sekunnin hiljaisuus viittaa fokusongelmaan. Axe DevTools tai WAVE löytää suuret rikkomukset 30 sekunnissa.
Testaa myös oikealla näkövammaisella käyttäjällä — automaatti ei näe käyttökontekstia.
UKK
Tarvitsenko erillisen ääniversion? En, oikea HTML palvelee kaikkia.
Pitääkö lisätä oma TTS? Ei, käyttöjärjestelmän lukija hoitaa.
Voiko saada WCAG-sertifikaatin? Virallista ei ole; VPAT-raportti on standardi.
Oliko tästä hyötyä? Jaa se.
Aiheeseen liittyvät artikkelit
Mikä on QR-valikko? Kattava opas ravintoloille
QR-valikko antaa asiakkaille välittömän pääsyn ruokalistallesi älypuhelimen kaut…
Paperisesta ruokalistasta QR-digitaalimenüün: askel askeleelta -opas
Haluatko ottaa QR-menüt käyttöön mutta et tiedä mistä aloittaa? Tämä opas kattaa…
Geokohdistetut QR-ruokalistat: eri kielet vierailijan IP:n mukaan
Miten 180-paikkainen all-inclusive-lomakeskus Antalyassa ohjaa saman QR-koodin t…