Přístupnost pro motivy

Tato stránka byla vytištěna: Apr 26, 2024. Aktuální verzi najdete na adrese https://help.shopify.com/cs/manual/using-themes/change-the-layout/accessibility.

Při úpravě motivu je dobré design a obsah volit s ohledem na to, aby byl online obchod dobře přístupný. Přístupný web se vyznačuje tím, že ho můžou používat všichni bez rozdílu, i lidé s hendikepem. Přístupnost online obchodu hraje zcela zásadní roli při zprostředkování inkluzivní zkušenosti.

Uvedená pravidla byla sestavena s ohledem na pravidla WCAG pro tvorbu bezbariérových webů. Při vytváření přístupného (bezbariérového) webu je důležité mít na zřeteli spoustu faktorů a uplatnění uvedených pravidel není samo o sobě zárukou absolutní přístupnosti webu. O přístupnosti webu se dozvíte víc na webové stránce WCAG nebo v uvedených zdrojích.

Na této stránce

Přístupnost textu

Je důležité, aby text ve vašem online obchodu mohli číst i zákazníci, kteří mají zrakové postižení nebo kteří mají problém se čtením hustších textových bloků.

Barevný kontrast

Při barevných úpravách online obchodu dbejte na to, aby byl text přístupný i zákazníkům, kteří jsou barvoslepí či jinak zrakově hendikepovaní. Tito zákaznicí se spoléhají na to, že dokáží věci odlišit na základě odpovídajícího barevného kontrastu. Tento atribut můžete v různých částech obchodu zkontrolovat pomocí online nástroje pro měření kontrastního poměru.

V uvedeném příkladu má text kontrastní poměr 2,4:1 vůči pozadí a pro některé zákazníky je obtížně čitelný.

Blok světle šedého textu na bílém pozadí.

V dalším příkladu má text kontrastní poměr 4,8:1 a pro většinu zákazníků je dobře čitelný.

Blok tmavě šedého textu na bílém pozadí.

Otestujte kontrast veškerého textu, včetně textu těla, nadpisů, odkazů a polí ve formulářích. Postupujte v souladu s následujícími pravidly:

  • Barva textu těla a textu tlačítka musí mít kontrastní poměr 4,5:1 vůči pozadí.
  • Barva nadpisů a dalšího velkého textu (písmo o velikosti 24 px a větší) musí mít kontrastní poměr 3:1 vůči pozadí
  • Barva veškerého textu nad obrázky, včetně prezentací, bannerů a videí musí mít dostatečný kontrastní poměr vůči pozadí. U velkého textu (písmo o velikosti 24 px a větší) musí být kontrastní poměr minimálně 3:1. U menšího textu musí být kontrastní poměr minimálně 4,5:1.
  • Barva netextových prvků, včetně okrajů vstupů a ikon, musí mít vůči pozadí kontrastní poměr minimálně 3:1.

Textové nadpisy

Když na stránku pomocí editoru textu ve formátu RTF přidáte nadpisy, je důležité zachovat posloupnost (1–6). Asistenční technologie využívají nadpisy pro informování o uspořádání obsahu stránky. Nedodržování úrovní, například když po nadpisu úrovně 2 následuje nadpis úrovně 4, může být pro uživatele matoucí. Používej následující pravidlo:

  • U nadpisů se vždy dodržuje posloupnost úrovní:

Velikost a zarovnání textu

Při úpravě typografického nastavení motivu dbejte na to, aby byl text pro zákazníky dostatečně velký a snadno čitelný.

Text by měl mít mezi slovy a písmeny také dostatečnou rozteč, aby byl snadno čitelný. V uvedeném příkladu je text zarovnaný do bloku, kvůli čemuž je rozteč textu nekonzistentní.

Blok textu zarovnaný do bloku. Každý řádek textu vyplňuje prostor od začátku do konce, takže se pak v textu uplatňuje nekonzistentní rozteč.

V dalším příkladu je text zarovnaný doleva, a rozteč textu je tak konzistentní.

Blok textu zarovnaný doleva. Mezi jednotlivými slovy je konzistentní rozteč.

Při úpravě velikosti a zarovnání textu dodržujte následující pravidla:

  • Minimální velikost písma pro text těla odpovídá 16 px.
  • Text není zarovnaný do bloku. Při zarovnání textu do bloku je rozteč textu nekonzistentní.

Odkazy v textu

Při přidávání odkazů do textu dbejte na to, aby je všichni zákazníci bezpečně rozpoznali. Někteří zákazníci nemusí vidět barvy, proto se nespoléhejte na to, že barevné odlišení odkazu postačí. V uvedeném příkladu je text Odhalte náš příběh podtržený a nejen barevně odlišený. Tím je jasně řečeno, že daný text je zároveň odkaz:

Uvítací zpráva „Odhalte náš příběh a poznejte lidi, kteří stojí za naší značkou“. Text „Odhalte náš příběh“ je červený a podtržený, ať je zřejmé, že jde o odkaz.

Při úpravě šablony stylů motivu dbejte na to, ať neodstraníte styly pro textové odkazy. Použijte následující pravidlo:

  • Textové odkazy jsou buď podtržené, nebo jsou od standardního textu jinak vizuálně odlišeny:

Alternativní text k obrázkům

Při přidávání obrázků do online obchodu je zásadní, aby byly přístupné pro zákazníky, kteří jsou slepí nebo mají zhoršený zrak. To se provádí přidáním alternativního textu, který přesně popisuje jednotlivé obrázky. Zákazníci, kteří používají čtečky obrazovek, spoléhají při zprostředkování obsahu obrázků v online obchodě na alternativní text.

Alternativní text lze přidávat k obrázkům produktů prostřednictvím administrátorského rozhraní Shopify. Alternativní text lze přidávat i k jiným obrázkům v motivu prostřednictvím editoru motivů.

Při přidávání alternativního textu k obrázku se osvědčilo předstírat popisování obrázku někomu se zavřenýma očima. Pomoct mu si ten obrázek představit. Způsob popisu obrázku dále závisí na kontextu vaší webové stránky. Obrázek bude například jinak popisovat cestovní agenturu a jinak obchod s outdoorovým vybavením. Pro představu si vezmeme tento obrázek:

Dva přátelé s batohy a rukama kolem sebe pozorující oceán

Cestovní agentura by popisovala zemi a oblast, kde tito dva přátelé cestují, a název oceánu nebo moře, na které se dívají. Obchod s outdoorovým vybavením by se ale zaměřil spíš na značky a funkce batohů těchto dvou přátel.

Pokud máte cestovní agenturu, slabý alternativní text by mohl znít následovně: „Dva lidé u oceánu.“ Příkladem dobrého alternativního textu pro cestovní agenturu by bylo: „Dva přátelé se vypravili do portugalského Lagosu, je slunečný den a dívají se na písčitou zátoku Praia do Camilo.“

Přístupnost prezentace a videa

Při přidávání videí do online obchodu nezapomeňte zohlednit potřeby zákazníků se zhoršeným zrakem, zákazníků se sluchovým postižením nebo zákazníků, kteří můžou být náchylní k vestibulárním poruchám.

Někteří z těchto zákazníků využívají funkci předčítání textu, která čte obsah webové stránky nahlas. Okolní zvuky z videí a hudba, zvlášť ta nečekaná, může jejich zkušenost významným způsobem zhoršit. Pro zákazníky, kteří mají sluchové postižení, je dobré do videí přidat skryté titulky, které jim dokáží obsah pěkně zprostředkovat.

Pohyblivý obsah může u zákazníků s vestibulárními poruchami vyvolávat závratě. Z tohoto důvodu je důležité, aby se prezentace ani videa nepřehrávaly automaticky.

Prezentace

Při přidávání prezentací do online obchodu dodržujte následující pravidla:

  • Prezentace se nesmí přehrávat automaticky.
  • Pokud se přehrávají automaticky, musí mít zákazníci možnost je vypnout nebo pozastavit.

Videa

Při přidávání videí do online obchodu dodržujte následující pravidla:

  • Videa se nesmí přehrávat automaticky.
  • Pokud se videa přehrávají automaticky, musí u nich být ztlumený zvuk.
  • Videa se zvukem musí být vidět celá a nesmí být překrytá jinými prvky stránky. Tím se zajistí viditelnost skrytých titulků.
  • U videí s dialogy musí být dostupný přepis textu. Ten se musí nacházet buď přímo na stránce, nebo na odkazu na samostatnou stránku.

Tato pravidla se uplatňují i na videa, která jsou součástí prezentace.

Podpora klávesnice

Zákazníci se zhoršeným zrakem či motorikou můžou pro navigaci a ovládání používat klávesnici. Tito zákazníci se spoléhají na grafický indikátor udávající zaměření klávesnice na webové stránce. V uvedeném příkladu je grafický indikátor zaměření v poli E-mail:

Přihlašovací obrazovka zákazníka v online obchodu, která zobrazuje formulářová pole pro e-mail a heslo. Pole E-mail má modrý obrys.

Při úpravě šablony stylů daného motivu dbejte na to, ať z žádného prvku stránky neodstraníte styl grafického indikátoru zaměření klávesnice. Použijte následující pravidla:

  • Všechny interaktivní prvky stránky disponují zřetelným grafickým indikátorem zaměření místa, kde se aktuálně nachází klávesnice. Těmito prvky se rozumí odkazy, tlačítka a pole formulářů.

Zdroje

O přístupnosti webu a tématech diskutovaných v tomto článku najdete víc v následujících zdrojích.

Zdroje pro barevný kontrast

  • Colors with Good Contrast (Barvy s dobrým kontrastem), článek od Web Accessibility Initiative
  • Contrast Ratio (Kontrastní poměr), online nástroj, který slouží k zjištění kontrastního poměru mezi dvěma barvami.
  • Color Contrast Analyzer (Analyzátor barevného kontrastu), aplikace pro kontrastní poměr ke stažení z dílny skupiny Paciello Group

Textové zdroje

Zdroje pro alternativní text

Zdroje pro prezentace a videa

Zdroje pro podporu klávesnice

Chcete začít prodávat s Shopify?

Vyzkoušet zdarma