Praktický průvodce vizuální přístupností: kontrast, typografie a UX

Vizuální přístupnost znamená schopnost webu zprostředkovat informace každému uživateli bez ohledu na jeho schopnosti či technická omezení. Pro vývojáře to znamená dívat se na barvy, kontrast, typografii a interaktivní prvky nejen z estetického hlediska, ale také z pohledu použitelnosti a čitelnosti.

1. Velikost textu a stránky

Design musí být flexibilní a umožnit uživatelům zvětšit text až o 200% bez ztráty obsahu nebo funkčnosti. Obsah by se měl plynule přizpůsobit šířce obrazovky, aby se předešlo horizontálnímu scrollu (výjimka jsou velké tabulky, mapy nebo jiné dvou-dimenzionální layouty). Podporujeme minimální šířku zobrazení 320px.

Dosáhnete toho tak, že budete specifikovat velikosti písma, velikosti kontejnerů a pozice prvků použitím relativních jednotek, jako jsou rem, em, %, vw nebo vh. Vyhněte se používání absolutních jednotek, jako jsou pixely (px), při specifikování stylování prvků a rozložení. Uživatelé také mohou zvětšit mezery mezi písmeny letter-spacing, slovy word-spacing, řádky line-height a odstavci, aniž by došlo k oříznutí obsahu nebo narušení funkčnosti.

// Špatné příklady ❌
font-size: 16px;
line-height: 8px;
@media (min-width: 800px) {}

// Dobré příklady ✅

// Pokud nastavíme zoom na 200%, web se vyrenderuje jako na mobilu (např. schvová se menu)
@media (min-width: 50rem) {}
font-size: 1rem;
line-height: 1.5;

Kdy použít px hodnoty?

Více o správném používání relativních jednotek a px naleznete v článku: The Surprising Truth About Pixels and Accessibility.

Kdy použít rem hodnoty?

Používání rem hodnot je super pokud jde o typografii. Když však používáme hodnoty rem pro horizontální odsazení, snižujeme množství využitelného prostoru, čímž dále omezujeme počet slov, která se vejdou na řádek (viz porovnání):

Proto ani pro border-width nemá smysl používat rem hodnoty. Při výběru mezi pixely a rem byste si měli položit tuto otázku:

🤔 Měla by se tato hodnota zvětšovat, když uživatel zvětší výchozí velikost písma v prohlížeči?

2. Stylování textu (AAA pravidlo, ale doporučuji implementovat)

Při blocích textu je třeba vyhnout se zarovnání na střed nebo justified, výška řádku se odpoučí alespoň 1,5 a šířka nesmí přesáhnout 80 znaků. Uživatelé musí mít možnost nastavit barvu textu a pozadí. Lidé s dyslexií nebo jinými poruchami učení často profitují z kratších řádků, většího line-heigtu a jednoduchého textu zarovnaného vlevo.

3. Dostatečný barevný kontrast

Text na webu musí mít dostatečný kontrast vůči pozadí, aby ho mohli číst všichni uživatelé, včetně lidí se zrakovým postižením nebo barvoslepostí, pro které může nízký kontrast způsobit, že text zcela zmizí v pozadí. Používejte nástroje pro kontrolu kontrastu ve Figmě nebo v nástrojích DevTools prohlížeče, abyste ověřili, zda splňujete požadované poměry.

Hlavní pravidla kontrastu textu:

• Běžný text: Musí mít kontrastní poměr alespoň 4,5:1. Například černé písmo na bílém pozadí má vysoký kontrast, zatímco světle šedé písmo na bílém pozadí má nízký kontrast a je obtížně čitelné.
• Velký text: Měl by mít kontrastní poměr alespoň 3:1, je-li:
  • větší než 24px
  • nebo tlustý a větší než 19px.
• Všechny důležité vizuální prvky, které mají informační hodnotu (jako jsou ikony, grafy, tlačítka, formulářová pole a jiné interaktivní komponenty), musí mít kontrastní poměr alespoň 3:1 vůči svému okolí nebo sousedním prvkům.

4. Barevné odlišení

Nepoužívejte barvu jako jediný vizuální prostředek. Informace, akce, výzvy k odpovědi nebo rozlišování vizuálních prvků nesmí být zprostředkovány pouze barvou. Design by měl zahrnovat i další vizuální indikátory jako jsou ikony, podtržení, tučné písmo nebo různé tvary. Pro barvoslepé, slabozraké nebo nevidomé, kteří používají čtečku obrazovky, musí existovat i jiný způsob, jak vyjádřit informaci.

• Alternativy textu: Pokud například označíte chybná pole ve formuláři červeným okrajem, přidejte také textové upozornění o chybě.
• Odkazy v textu: Odkazy v textu by neměly být odlišeny pouze barvou. Vždy je i podtrhněte nebo změňte jejich styl písma, tučnost nebo přidejte okraj.

• Grafika: Na mapách, grafech nebo v jiných vizuálech, kde barva odlišuje prvky, přidejte také symboly nebo ikony pro každou kategorii.

Přístupnost není jen o designu. Prohlédni si praktický checklist, který ti ukáže, jak psát HTML a CSS tak, aby byl web čitelný, použitelný a férový pro všechny 👇

5. Velikost interaktivních prvků

Tlačítka, odkazy a jiné interaktivní prvky na webu by měly mít minimální velikost 24 x 24 pixelů (pro důležitý obsah je doporučeno minimální velikost 48x48 pixelů). Pokud to není možné, musí mít kolem sebe dostatečný prázdný prostor, aby se předešlo náhodným kliknutím. Malé a natištěné prvky jsou frustrující na klikání, zejména na dotykových obrazovkách pro lidi s:

• omezenou kontrolou rukou (např. třes, artritida),
• používajících menší obrazovky nebo s většími prsty.

6. Konzistentní navigace na webu

Uživatelé očekávají, že funkce, jako je menu, search, tlačítka pro přeskočení obsahu nebo kontakt menu, zůstanou na stejném místě, když navštěvují různé podstránky webu.

Předvídatelné rozložení webové stránky usnadňuje život všem. Když uživatelé vždy vědí, kde najdou klíčové navigační prvky, neztrácejí čas hledáním. Udržování konzistentnosti není jen užitečné, je nezbytné.

Konzistentnost interaktivních elementů

Interaktivní prvky, jako jsou tlačítka, odkazy a ovládací prvky formulářů, jsou na webové stránce označeny konzistentně. Pokud něco provádí stejnou akci na více stránkách, měla by být vždy identifikována stejným způsobem.

Nevidomí se při interakci s webovými stránkami spoléhají na čtečky obrazovky. Pokud tlačítko na jedné stránce zobrazuje „Přidat do košíku“ a na jiné „Koupit nyní“, musí zjistit, zda dělá stejnou funkci, což vyžaduje zbytečnou námahu.

Interaktivní komponenty, které se běžně duplikují na webových stránkách jsou např.:

• Tlačítka: Submit, Add to Cart, Share on Socials, Play/Pause Media…
• Ikony: Print, Save, Download, Trash…
• Pagination: Go to Page 3, Previous Page…
• Call-to-Action odkazy: Learn More, Sign Up, Get Started…

7. Netextový obsah

Netextový obsah je cokoli na webu kromě textu, např. obrázky, grafy, video, zvuk a jiný vizuální a zvukový obsah. Textové alternativy pomáhají zpřístupnit netextový obsah pro nevidomé nebo neslyšící.

ℹ️ Vyhledávače jako Google nebo AI (Gemini), díky alternativním textům lépe chápou obsah stránky, a proto správným vyplněním alternativních textů zlepšujete SEO.

Pravidla pro psaní alternativních textů pro obrázky:

• Stručnost a výstižnost: Text by měl přesně popsat, co je na obrázku, ale bez zbytečných detailů.
• Kontext je klíčový: Vždy se zamyslete, proč je obrázek na stránce. Jaký účel plní? Alternativní text by měl tento účel zprostředkovat.
• Nezačínejte frázemi "Obrázek..." nebo "Fotka...": Čtečka obrazovky již ví, že jde o obrázek (z HTML značky <img>). Přidávat to do alt textu je je zbytečné a působí rušivě.
• Pokud je obrázek odkazem, popište cíl odkazu: Pokud kliknutelný obrázek vede na jinou stránku, alt by měl popsat, kam se uživatel dostane (např. "Domovská stránka společnosti XY").
• Dekorativní obrázky musí mít prázdný alt atribut: Pokud obrázek neslouží k přenosu informace, ale pouze k vizuálnímu zpestření (např. různé vlnovky, pozadí), musí mít alt="". Tím dáte čtečce signál, aby jej ignorovala. Nevynechávejte alt atribut úplně!

// Dobré příklady ✅
<!-- Je to stručné, výstižné a přesně popisuje hlavní myšlenku obrázku. -->
<img alt="Zlatý retrívr si v parku hraje s červeným míčem.">

<!-- Pokud jsou data jednoduchá a stručná, můžete je vložit přímo do alt textu. -->
<img alt="Sloupcový graf návštěvnosti: Duben - 5000, Květen - 8000, Červen - 12000 návštěv.">

<!-- Jasně komunikuje, že kliknutím na logo se uživatel vrátí na hlavní stránku. Popisuje funkci, ne jen to, co na obrázku je. -->
<img src="logo_GR.png" alt="GoodRequest - domovská stránka">

// Špatné příklady ❌
<!-- Příliš obecné. Neposkytuje žádnou užitečnou informaci. -->
<img alt="pes">

<!-- Zbytečně dlouhé a začíná slovem "Fotka". Detail o počasí nebo barvě trávy zřejmě není podstatný pro kontext článku. -->
<img alt="Fotka zlatého retrívra, jak si hraje s červeným míčem na zelené trávě v parku během slunečného dne.">

<!-- Nepopisuje funkci odkazu. Uživatel neví, kam jej kliknutí zavede. -->
<img alt="Logo">

<!-- Lepší, ale stále chybí informace o cíli odkazu. -->
<img alt="Logo firmy WebTech">

<!-- Zbytečně přeruší uživatele informací, která pro něj nemá žádnou hodnotu -->
<img alt="Modrá vlnovka"> 

<!-- Uživatel se vůbec nedozví data, která graf zobrazuje. Je to totéž, jako kdyby tam obrázek nebyl. -->
<img alt="Graf návštěvnosti">

Pravidla pro psaní alternativních textů pro jiný obsah:

• Audio obsah (např. podcast): Musí být k dispozici úplný textový přepis (transcript). Tento přepis by měl obsahovat nejen mluvené slovo, ale také popis důležitých zvuků (např. "[smích]", "[potlesk publika]").
• Video obsah: Nutno zabezpečit synchronizované titulky (captions). Je-li možno zabezpečit i tlumočení do znakové řeči pro neslyšící. Pokud se ve videu zobrazují důležité vizuální informace, měli byste poskytnout zvukový nebo textový popis, který popisuje vše důležité, co se ve videu děje.
• CAPTCHA (např. popsání zdeformovaného textu z obrázku): Musíte poskytnout alternativu, která nevyžaduje zrak, např. audio captcha.

8. Nepoužívat text v obrázcích

Statické obrázky s textovým obsahem znemožňují lidem změnit vzhled textu, aby se zlepšila jeho čitelnost. barevný kontrast, velikost textu, atp. Text na obrázcích při přiblížení je rozmazaný. Na rozdíl od skutečného textu na stránce se text na obrázku nepřizpůsobí různým velikostem obrazovky ani nastavením uživatele.

Čtečky obrazovky nedokážou interpretovat text uvnitř obrázků, takže lidé, kteří spoléhají na tyto nástroje, nebudou mít přístup k obsahu, pokud obrázek není správně označen nebo neobsahuje alternativní text.

9. Pozastavení automaticky měnícího obsahu

Automaticky pohybující se nebo animovaný obsah, který trvá déle než 5 sekund, musí být možné pozastavit nebo skrýt. Prvky, které se automaticky aktualizují, způsobují problémy uživatelům čteček obrazovek nebo lidem, kteří nestíhají rychle zpracovat informace (kognitivní postižení).

Nastavitelné načasování

Časovým limitům je třeba se vyhnout, pokud nejsou nezbytné pro daný úkol (např. zkoušky, aukce). Pokud se používají časové limity, musí být možné je vypnout, upravit je alespoň na desetinásobek výchozí hodnoty nebo je prodloužit alespoň o desetinásobek.

Blikající obsah více než třikrát za sekundu

Nic na stránce by nemělo bliknout více než třikrát za vteřinu. Nezáleží na tom, jak velký nebo jasný je obsah. Některý webový obsah, jako jsou videa, hry nebo animovaná grafika, může rychle blikat, aby upoutal pozornost. Takový druh blikání však může způsobit záchvaty nebo jiné vážné zdravotní problémy u uživatelů, kteří jsou na blikající obsah citliví.

10. Další pravidla

• Orentace zařízení: Po otočení zařízení z režimu na výšku do režimu na šířku bude obsah dokonale čitelný a použitelný.
• Automatické přehrávání zvuku (obvykle se zapne spolu s videem), které trvá déle než 3 sekundy, lze ztlumit nebo zastavit.
• Nastavení časového limitu: Pokud má webová stránka jakýkoli časový limit (například automatické odhlášení po 10 minutách nečinnosti), uživatel musí mít možnost tento limit vypnout, upravit nebo jednoduše prodloužit ještě předtím, než vyprší.
  • Příklad: Pokud e-shop rezervuje zboží v košíku na 10 minut, nesmí jej po uplynutí času bez varování odstranit. Namísto toho musí systém uživatele předem upozornit, že čas se krátí. Zároveň mu musí nabídnout jednoduchou možnost, například tlačítko, kterým si může časový limit snadno a opakovaně prodloužit Potřebuji více času (prodloužit o 10 minut).