Pomocník
Prihlásiť sa

Prístupnosť pre témy

Pri prispôsobovaní témy voľte taký dizajn a obsah, ktorý pomôže udržať váš online obchod prístupný. Prístupné webové sídlo je navrhnuté tak, aby ho mohol používať každý vrátane ľudí so zdravotným postihnutím. Ak pri rozhodovaní o svojom online obchode pamätáte na prístupnosť, pomôže vám to poskytnúť inkluzívne prostredie pre všetkých zákazníkov.

Nižšie uvedené usmernenia boli vytvorené s ohľadom na usmernenia pre prístupnosť obsahu webových stránok (Web Content Accessibility Guidelines, WCAG). Keďže pri tvorbe prístupného webového sídla je potrebné zohľadniť množstvo faktorov, samotné dodržiavanie týchto usmernení nezaručuje úplnú prístupnosť vášho online obchodu. Viac informácií o prístupnosti webu nájdete na webovom sídle WCAG alebo v nižšie uvedených zdrojoch.

Na tejto stránke

Prístupnosť textu

Je dôležité, aby bol text vo vašom online obchode čitateľný pre zákazníkov so zrakovým postihnutím alebo pre tých, ktorí majú problém čítať husté bloky textu.

Farebný kontrast

Pri úprave farieb vo svojom online obchode sa uistite, že všetok váš text je prístupný pre zákazníkov s farbosleposťou alebo iným zrakovým postihnutím. Títo zákazníci sa spoliehajú na primeraný farebný kontrast na vizuálne odlíšenie jednotlivých prvkov. Na kontrolu kontrastu rôznych častí obchodu môžete použiť online nástroj na pomer kontrastu.

V nasledujúcom príklade má text kontrastný pomer voči pozadiu 2,4:1 a pre niektorých zákazníkov je ťažko čitateľný.

Blok svetlosivého textu na plnom bielom pozadí.

V ďalšom príklade má text kontrastný pomer 4,8:1 a pre mnohých zákazníkov je ľahšie čitateľný.

Blok tmavosivého textu na plnom bielom pozadí.

Otestujte kontrast všetkého textu vrátane textu tela, nadpisov, odkazov a polí formulára. Postupujte podľa nasledujúcich pokynov:

  • Farba textu tela a textu tlačidla má kontrastný pomer voči pozadiu aspoň 4,5:1.
  • Farba nadpisov a iného veľkého textu (veľkosť písma 24 px a viac) má kontrastný pomer voči pozadiu aspoň 3:1.
  • Farba všetkých textov na obrázkoch vrátane prezentácií, bannerov a videí má dostatočný kontrastný pomer voči pozadiu. Pre veľký text (veľkosť písma 24 px a viac) je kontrast aspoň 3:1. Pre menší text je kontrast aspoň 4,5:1.
  • Farba netextových prvkov vrátane okrajov vstupných polí a ikon má kontrastný pomer voči pozadiu aspoň 3:1.

Textové nadpisy

Keď na stránku pridávate nadpisy pomocou editora formátovaného textu, je dôležité zachovať ich v postupnom poradí (1 – 6). Nadpisy používajú asistenčné technológie na komunikáciu o organizácii obsahu stránky. Preskakovanie úrovní, napríklad po nadpise úrovne 2 nasleduje nadpis úrovne 4, môže byť pre používateľov mätúce. Postupujte podľa nasledujúceho pokynu:

  • Nadpisy sa používajú v postupnom poradí a nepreskakujú úrovne.

Veľkosť a zarovnanie textu

Pri úprave nastavení typografie svojej témy sa uistite, že je text dostatočne veľký, aby sa dal zákazníkom pohodlne čítať.

Text by mal mať aj konzistentné rozstupy medzi slovami a písmenami, aby bol ľahko čitateľný. V nasledujúcom príklade je text zarovnaný do bloku, čo vytvára nekonzistentné rozstupy medzi slovami.

Blok textu zarovnaný do bloku. Každý riadok textu vypĺňa priestor od jedného konca k druhému, čo vynucuje rôzne medzery medzi slovami.

V ďalšom príklade je text zarovnaný doľava, čo vytvára konzistentné rozstupy medzi slovami.

Blok textu zarovnaný doľava. Medzi jednotlivými slovami sú konzistentné medzery.

Pri prispôsobovaní veľkosti a zarovnania textu postupujte podľa týchto pokynov:

  • Minimálna veľkosť písma pre text tela je ekvivalentom 16 px.
  • Text nie je zarovnaný do bloku. Text zarovnaný do bloku vytvára nekonzistentné rozstupy medzi slovami.

Textové odkazy

Textové odkazy by mali byť podčiarknuté alebo by mali mať v porovnaní s bežným textom iný vizuálne odlišný štýl. Keďže niektorí zákazníci majú problém s vnímaním farieb, nemôžete sa pri odlíšení odkazu od bežného textu spoliehať iba na zmenu farby.

Textové odkazy by sa mali otvárať na rovnakej karte. Odkazy, ktoré sa otvárajú na novej karte alebo v novom okne, môžu spôsobiť zmätok, najmä v mobilných zariadeniach, kde staré okno nie je viditeľné, a nie sú inkluzívne pre zákazníkov, najmä tých, ktorí používajú zväčšenie obrazovky alebo sú menej technicky zdatní.

Ak upravujete štýlový hárok svojej témy, dajte pozor, aby ste neodstránili štýly textových odkazov. Postupujte podľa nasledujúcich pokynov:

  • Textové odkazy sú buď podčiarknuté, alebo majú iný vizuálny rozlišovací prvok okrem farby, aby zákazníci mohli odlíšiť odkazy od bežného textu.
  • Textové odkazy sa po kliknutí otvoria na rovnakej karte.

Alternatívny text pre obrázky

Keď do svojho online obchodu pridávate obrázky, je dôležité, aby boli prístupné pre nevidiacich a slabozrakých zákazníkov. Môžete to urobiť pridaním alternatívneho textu, ktorý presne popisuje každý obrázok. Zákazníci, ktorí používajú čítačky obrazovky, sa spoliehajú na alt text pri komunikácii o obsahu obrázkov vo vašom online obchode.

Z administrátora Shopify môžete pridať alt text k obrázkom produktov. Z editora tém môžete pridať alt text k iným obrázkom vo svojej téme.

Pri pridávaní alt textu k obrázku je osvedčeným postupom predstierať, že obrázok popisujete niekomu, kto má zatvorené oči. Pomôžte mu vytvoriť si obraz v mysli. Spôsob, akým popíšete obrázok, závisí aj od kontextu vašej webovej stránky. Obrázok napríklad popíšete inak, ak ste cestovná kancelária, a inak, ak predávate outdoorové vybavenie. Pozrite si nasledujúci obrázok:

Dvaja priatelia s ruksakmi sa navzájom objímajú a pozerajú na oceán

V prípade cestovnej kancelárie môžete spomenúť krajinu a región, v ktorom dvaja priatelia cestujú, a názov oceánu alebo mora, na ktoré sa pozerajú. Na druhej strane, v prípade obchodu s outdoorovým vybavením sa môžete zamerať na značky a funkcie ruksakov týchto dvoch priateľov.

Ak je vaša firma cestovnou kanceláriou, príkladom nesprávneho alt textu môže byť: „Dvaja ľudia pred oceánom.“ Pre tú istú kanceláriu by mohol byť príkladom dobrého alt textu: „Dvaja priatelia cestujúci do Lagosu v Portugalsku, ktorí sa počas slnečného dňa pozerajú na piesočnatú zátoku Praia do Camilo.“

Prístupnosť prezentácie a videa

Keď do svojho online obchodu pridávate videá, nezabudnite zohľadniť potreby slabozrakých, nepočujúcich alebo nedoslýchavých zákazníkov, prípadne zákazníkov, ktorí môžu byť náchylní na vestibulárne poruchy.

Niektorí z týchto zákazníkov sa spoliehajú na schopnosť prevodu textu na reč čítačiek obrazovky, ktoré nahlas čítajú obsah webovej stránky. Ďalší zvuk z videí a hudby, najmä ak je neočakávaný, môže tento zážitok sťažiť. Pre nepočujúcich a nedoslýchavých zákazníkov je dobré do videí pridať skryté titulky, aby mali k obsahu prístup.

Zákazníci s vestibulárnymi poruchami môžu pri pohybujúcom sa obsahu pociťovať závraty. Preto je dôležité, aby sa prezentácie a videá neprehrávali automaticky a aby zákazník mohol prezentáciu ovládať pomocou ovládacích tlačidiel.

Prezentácie

Keď do svojho online obchodu pridávate prezentáciu, postupujte podľa týchto pokynov:

  • Prezentácie sa neprehrávajú automaticky.
  • Ak sa prezentácie prehrávajú automaticky, obsahujú ovládacie prvky prezentácie, pomocou ktorých môžu zákazníci prezentáciu pozastaviť, posunúť alebo zastaviť.

Videá

Keď do svojho online obchodu pridávate video, postupujte podľa týchto pokynov:

  • Videá sa neprehrávajú automaticky.
  • Ak sa videá prehrávajú automaticky, ich zvuk je stlmený.
  • V prípade videí so zvukom je video plne viditeľné a neprekrývajú ho iné prvky stránky. Vďaka tomu zostanú viditeľné skryté titulky.
  • Pre videá obsahujúce dialógy sú k dispozícii textové prepisy. Sú uvedené buď priamo na stránke, alebo v odkaze na samostatnú stránku.

Tieto pokyny platia aj pre videá v prezentácii.

Podpora klávesnice

Zákazníci so zrakovým alebo motorickým postihnutím môžu na navigáciu a vykonávanie úloh online používať klávesnicu. Títo zákazníci sa spoliehajú na vizuálny indikátor, ktorý im ukazuje, kde sa na webovej stránke nachádza zameranie klávesnice. V príklade nižšie má pole E-mail vizuálny indikátor zamerania:

Obrazovka prihlásenia zákazníka v online obchode so zobrazenými poľami formulára pre e-mail a heslo. Pole E-mail je ohraničené modrou farbou.

Ak upravujete štýlový hárok svojej témy, uistite sa, že neodstránite štýl zamerania klávesnice zo žiadnych prvkov stránky. Postupujte podľa nasledujúcich pokynov:

  • Všetky interaktívne prvky stránky majú pri zameraní klávesnice jasný vizuálny indikátor. Medzi tieto prvky patria odkazy, tlačidlá a polia formulárov.

Zdroje

Viac informácií o prístupnosti webu pre témy preberané v tomto článku nájdete v nasledujúcich zdrojoch.

Zdroje o farebnom kontraste

Zdroje o texte

Zdroje o alternatívnom texte

Zdroje o prezentáciách a videách

Zdroje o podpore klávesnice

V tejto sekcii