Tento článok zhŕňa, čo je na storefronte overiteľne implementované pre mobilné zobrazenie a prístupnosť — nejde o certifikáciu súladu s konkrétnou normou, len o prehľad skutočne existujúcich prvkov, aby ste vedeli, čo môžete zákazníkovi (alebo audítorovi) garantovať.
Responzívne zobrazenie
Všetky témy sú stavané mobile-first — základné štýly platia pre najužšiu obrazovku a pravidlá pre väčšie zariadenia (tablet, desktop) sa dopĺňajú nad nimi, nie naopak. Rozloženie, navigácia aj karuselové rady produktov sa tak prispôsobujú od telefónu po desktop bez samostatnej „mobilnej verzie" webu. Horizontálne rady produktov (novinky, odporúčania) na dotykových zariadeniach ukazujú zámerne odrezaný okraj ďalšej karty ako signál, že sa dá listovať ďalej.
Popisy obrázkov (alt text)
Každý obrázok produktu má vlastné pole s popisným textom (alt), ktoré sa posiela do HTML aj čítačkám obrazovky. Vyplnenie tohto poľa pri nahrávaní fotografií produktu je preto vecou obsahu, nie technického obmedzenia šablóny — prázdne pole znamená, že si čítačka obrazovky obrázok nemá ako opísať.
Šípky na karuseloch podľa vstupného zariadenia
Šípky pri horizontálnych radoch sa zobrazujú podľa typu vstupného zariadenia (jemný ukazovateľ ako myš), nie podľa šírky obrazovky — širší tablet bez myši teda šípky nedostane a naopak, úzke okno na notebooku s myšou o ne nepríde. Na dotykových zariadeniach nahrádza šípky práve viditeľný okraj ďalšej karty.
Redukovaný pohyb (prefers-reduced-motion)
Programové skrolovanie (napr. rolovanie karuselu na tlačidlo, skok na chybové hlásenie v pokladni) rešpektuje systémové nastavenie zákazníka „redukovať pohyb" — pri jeho zapnutí sa presun deje okamžite bez animácie namiesto plynulého skrolovania.
Chyby vo formulároch
Chybové hlásenia vo formulároch (napríklad v pokladni) sú označené tak, aby ich technológie pre čítanie obrazovky vedeli oznámiť, a stránka sa pri odoslaní s chybou sama posunie k prvému nezaradenému chybovému hláseniu.
Chatbot a asistenčné technológie
Zoznam správ v okne chatbota je označený ako živá oblasť (live region) — nová odpoveď sa tak dá zaregistrovať aj bez toho, aby ju bolo treba nájsť zrakom na obrazovke.
Klávesnica
Interaktívne prvky (tlačidlá, odkazy, položky menu) sú stavané na natívnych HTML prvkoch (<button>, <a>), ktoré sú z prehliadača ovládateľné klávesnicou bez ďalšej úpravy — tabulátorom aj enterom/medzerníkom. Povinné polia vo formulároch (napríklad na odstúpení od zmluvy) sú okrem vizuálneho označenia doplnené o aria-required, aby povinnosť poľa vedela oznámiť aj čítačka obrazovky, nie len hviezdička pri popisku.
Časté problémy
Karusel na tablete nemá šípky, hoci na podobne veľkom notebooku áno. Toto je zámer — rozhoduje typ vstupného zariadenia (dotyk vs. myš/trackpad), nie šírka obrazovky. Na dotykovom zariadení nahrádza šípky viditeľný okraj ďalšej karty.
Zákazník s vypnutými animáciami v systéme hlási, že sa mu stránka „trhane" posúva. Naopak — s redukovaným pohybom sa presun deje bez animácie, teda skokom. Ak sa sťažuje na trhanie PRI zapnutých animáciách, ide o iný problém a treba ho nahlásiť konkrétnejšie (zariadenie, prehliadač, miesto výskytu).
Audítor prístupnosti žiada kompletný zoznam podporovaných WCAG kritérií. Tento článok popisuje len konkrétne overené prvky v kóde, nie formálny audit súladu — na kompletné vyhodnotenie normy je potrebný samostatný audit obrazovka po obrazovke.