Praktický sprievodca vizuálnou prístupnosťou: kontrast, typografia a UX

Vizuálna prístupnosť znamená schopnosť webu sprostredkovať informácie každému používateľovi bez ohľadu na jeho schopnosti či technické obmedzenia. Pre vývojárov to znamená pozerať sa na farby, kontrast, typografiu a interaktívne prvky nielen z estetického hľadiska, ale aj z pohľadu použiteľnosti a čitateľnosti.

1. Veľkosť textu a stránky

Dizajn musí byť flexibilný a umožniť používateľom zväčšiť text až o 200% bez straty obsahu alebo funkčnosti. Obsah by sa mal plynule prispôsobiť šírke obrazovky, aby sa predišlo horizontálnemu scrollu (výnimka sú veľké tabulky, mapy alebo iné dvoj-dimenzionálne layouty). Podporujeme minimálnu šírku zobrazenia 320px.

Dosiahnete to tak, že budete špecifikovať veľkosti písma, veľkosti kontajnerov a pozície prvkov použitím relatívnych jednotiek, ako sú rem, em, %, vw alebo vh. Vyhnite sa používaniu absolútnych jednotiek, ako sú pixely (px), pri špecifikovaní štýlovania prvkov a rozloženia. Používatelia tiež môžu zväčšiť medzery medzi písmenami letter-spacing, slovami word-spacing, riadkami line-height a odsekmi bez toho, aby došlo k orezaniu obsahu alebo narušeniu funkčnosti.

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

// Dobré príklady ✅

// Ak nastavíme zoom na 200%, web sa vyrenderuje ako na mobile (napr. schvová sa menu)
@media (min-width: 50rem) {}
font-size: 1rem;
line-height: 1.5;

Kedy použiť px hodnoty?

Viac o správnom používaní relatívnych jednotiek a px nájdete v článku: The Surprising Truth About Pixels and Accessibility.

Kedy použiť rem hodnoty?

Používanie rem hodnôt je super pokiaľ ide o typografiu. Keď však používame hodnoty rem pre horizontálne odsadenie, znižujeme množstvo využiteľného priestoru, čím ďalej obmedzujeme počet slov, ktoré sa zmestia na riadok (viď porovnanie):

Preto ani pre border-width nemá zmysel používať rem hodnoty. Pri výbere medzi pixelmi a rem by ste si mali položiť túto otázku:

🤔 Mala by sa táto hodnota zväčšovať, keď používateľ zväčší predvolenú veľkosť písma v prehliadači?

2. Štýlovanie textu (AAA pravidlo, ale odporúčam implementovať)

Pri blokoch textu je potrebné vyhnúť sa zarovnaniu na stred alebo justified, výška riadku sa odpúča aspoň 1,5 a šírka nesmie presiahnuť 80 znakov. Používatelia musia mať možnosť nastaviť farbu textu a pozadia. Ľudia s dyslexiou alebo inými poruchami učenia často profitujú z kratších riadkov, väčšieho line-heigtu a jednoduchého textu zarovnaného vľavo.

3. Dostatočný farebný kontrast

Text na webe musí mať dostatočný kontrast voči pozadiu, aby ho mohli čítať všetci používatelia, vrátane ľudí so zrakovým postihnutím alebo farbosleposťou, pre ktorých môže nízky kontrast spôsobiť, že text úplne zmizne v pozadí. Používajte nástroje na kontrolu kontrastu vo Figme alebo v nástrojoch DevTools prehliadača, aby ste overili, či spĺňate požadované pomery.

Hlavné pravidlá kontrastu textu:

• Bežný text: Musí mať kontrastný pomer aspoň 4,5:1. Napríklad čierne písmo na bielom pozadí má vysoký kontrast, zatiaľ čo svetlosivé písmo na bielom pozadí má nízky kontrast a je ťažko čitateľné.
• Veľký text: Mal by mať kontrastný pomer aspoň 3:1, ak je:
  • väčší ako 24px
  • alebo tučný a väčší ako 19px.
• Všetky dôležité vizuálne prvky, ktoré majú informačnú hodnotu (ako sú ikony, grafy, tlačidlá, formulárové polia a iné interaktívne komponenty), musia mať kontrastný pomer aspoň 3:1 voči svojmu okoliu alebo susedným prvkom.

4. Farebné odlíšenie

Nepoužívajte farbu ako jediný vizuálny prostriedok. Informácie, akcie, výzvy na odpoveď alebo rozlišovanie vizuálnych prvkov nesmú byť sprostredkované len farbou. Dizajn by mal zahŕňať aj ďalšie vizuálne indikátory ako sú ikony, podčiarknutie, tučné písmo alebo rôzne tvary. Pre farboslepých, slabozrakých alebo nevidiacich, ktorí používajú čítačku obrazovky, musí existovať aj iný spôsob, ako vyjadriť informáciu.

• Alternatívy textu: Ak napríklad označíte chybné polia vo formulári červeným okrajom, pridajte aj textové upozornenie o chybe.
• Odkazy v texte: Odkazy v texte by nemali byť odlíšené len farbou. Vždy ich aj podčiarknite alebo zmeňte ich štýl písma, tučnosť alebo pridajte okraj.

• Grafika: Na mapách, grafoch alebo v iných vizuáloch, kde farba odlišuje prvky, pridajte aj symboly alebo ikony pre každú kategóriu.

Prístupnosť nie je len o dizajne. Pozri si praktický checklist, ktorý ti ukáže, ako písať HTML a CSS tak, aby bol web čitateľný, použiteľný a férový pre všetkých 👇

5. Veľkosť interaktívnych prvkov

Tlačidlá, odkazy a iné interaktívne prvky na webe by mali mať minimálnu veľkosť 24 x 24 pixelov (pre dôležitý obsah je odporúčané minimálna veľkosť 48x48 pixelov). Ak to nie je možné, musia mať okolo seba dostatočný prázdny priestor, aby sa predišlo náhodným kliknutiam. Malé a natlačené prvky sú frustrujúce na klikanie, najmä na dotykových obrazovkách pre ľudí s:

• obmedzenou kontrolou rúk (napr. tras, artritída),
• používajúcich menšie obrazovky alebo s väčšími prstami.

6. Konzistentná navigácia na webe

Používatelia očakávajú, že funkcie, ako je menu, search, tlačidlá na preskočenie obsahu alebo kontakt menu, zostanú na rovnakom mieste, keď navštevujú rôzne podstránky webu.

Predvídateľné rozloženie webovej stránky uľahčuje život všetkým. Keď používatelia vždy vedia, kde nájdu kľúčové navigačné prvky, nestrácajú čas hľadaním. Udržiavanie konzistentnosti nie je len užitočné, je nevyhnutné.

Konzistentnosť interaktívnych elementov

Interaktívne prvky, ako sú tlačidlá, odkazy a ovládacie prvky formulárov, sú na webovej stránke označené konzistentne. Ak niečo vykonáva rovnakú akciu na viacerých stránkach, mala by byť vždy identifikovaná rovnakým spôsobom.

Nevidiaci sa pri interakcii s webovými stránkami spoliehajú na čítačky obrazovky. Ak tlačidlo na jednej stránke zobrazuje „Pridať do košíka“ a na inej „Kúpiť teraz“, musia zistiť, či robí rovnakú funkciu, čo vyžaduje zbytočnú námahu.

Interaktívne komponenty, ktoré sa bežne duplikujú na webových stránkach sú napr.:

• Tlačidlá: 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 čokoľvek na webe okrem textu, napr. obrázky, grafy, video, zvuk a iný vizuálny a zvukový obsah. Textové alternatívy pomáhajú sprístupniť netextový obsah pre nevidiacich alebo nepočujúcich.

ℹ️ Vyhľadávače ako Google alebo AI (Gemini), vďaka alternatívnym textom lepšie chápu obsah stránky, a preto správnym vyplnením alternatívnych textov zlepšujete SEO.

Pravidlá pre písanie alternatívnych textov pre obrázky:

• Stručnosť a výstižnosť: Text by mal presne opísať, čo je na obrázku, ale bez zbytočných detailov.
• Kontext je kľúčový: Vždy sa zamyslite, prečo je obrázok na stránke. Aký účel plní? Alternatívny text by mal tento účel sprostredkovať.
• Nezačínajte frázami "Obrázok..." alebo "Fotka...": Čítačka obrazovky už vie, že ide o obrázok (z HTML značky <img>). Pridávať to do alt textu je zbytočné a pôsobí rušivo.
• Ak je obrázok odkazom, opíšte cieľ odkazu: Ak kliknuteľný obrázok vedie na inú stránku, alt text by mal popísať, kam sa používateľ dostane (napr. "Domovská stránka spoločnosti XY").
• Dekoratívne obrázky musia mať prázdny alt atribút: Ak obrázok neslúži na prenos informácie, ale len na vizuálne spestrenie (napr. rôzne vlnovky, pozadia), musí mať alt="". Tým dáte čítačke signál, aby ho ignorovala. Nevynechávajte alt atribút úplne!

// Dobré príklady ✅
<!-- Je to stručné, výstižné a presne opisuje hlavnú myšlienku obrázka. -->
<img alt="Zlatý retriever sa v parku hrá s červenou loptou.">

<!-- Ak sú dáta jednoduché a stručné, môžete ich vložiť priamo do alt textu. -->
<img alt="Stĺpcový graf návštevnosti: Apríl - 5000, Máj - 8000, Jún - 12000 návštev.">

<!-- Jasne komunikuje, že kliknutím na logo sa používateľ vráti na hlavnú stránku. Opisuje funkciu, nie len to, čo na obrázku je. -->
<img src="logo_GR.png" alt="GoodRequest - domovská stránka">

// Zlé príklady ❌
<!-- Príliš všeobecné. Neposkytuje žiadnu užitočnú informáciu. -->
<img alt="pes">

<!-- Zbytočne dlhé a začína slovom "Fotka". Detail o počasí alebo farbe trávy zrejme nie je podstatný pre kontext článku. -->
<img alt="Fotka zlatého retrievera, ako sa hrá s červenou loptou na zelenej tráve v parku počas slnečného dňa.">

<!-- Nepopisuje funkciu odkazu. Používateľ nevie, kam ho kliknutie zavedie. -->
<img alt="Logo">

<!-- Lepšie, ale stále chýba informácia o cieli odkazu. -->
<img alt="Logo firmy WebTech">

<!-- Zbytočne preruší používateľa informáciou, ktorá pre neho nemá žiadnu hodnotu -->
<img alt="Modrá vlnovka"> 

<!-- Používateľ sa vôbec nedozvie dáta, ktoré graf zobrazuje. Je to to isté, ako keby tam obrázok nebol. -->
<img alt="Graf návštevnosti">

Pravidlá pre písanie alternatívnych textov pre iný obsah:

• Audio obsah (napr. podcast): Musí byť k dispozícii úplný textový prepis (transcript). Tento prepis by mal obsahovať nielen hovorené slovo, ale aj popis dôležitých zvukov (napr. "[smiech]", "[potlesk publika]").
• Video obsah: Potrebné zabezpečiť synchronizované titulky (captions). Ak je možné zabezpečte aj tlmočenie do posunkovej reči pre nepočujúcich. Ak sa vo videu zobrazujú dôležité vizuálne informácie, mali by ste poskytnúť zvukový alebo textový popis, ktorý popisuje všetko dôležité, čo sa vo videu deje.
• CAPTCHA (napr. opísanie zdeformovaného textu z obrázka): Musíte poskytnúť alternatívu, ktorá nevyžaduje zrak, napr. audio captcha.

8. Nepoužívať text v obrázkoch

Statické obrázky s textovým obsahom znemožňujú ľuďom zmeniť vzhľad textu, aby sa zlepšila jeho čitateľnosť napr. farebný kontrast, veľkosť textu, atď. Text na obrázkoch pri priblížení je rozmazaný. Na rozdiel od skutočného textu na stránke sa text na obrázku neprispôsobí rôznym veľkostiam obrazovky ani nastaveniam používateľa.

Čítačky obrazovky nedokážu interpretovať text vo vnútri obrázkov, takže ľudia, ktorí sa spoliehajú na tieto nástroje, nebudú mať prístup k obsahu, pokiaľ obrázok nie je správne označený alebo neobsahuje alternatívny text.

9. Pozastavanie automaticky meniaceho obsahu

Automaticky pohybujúci sa alebo animovaný obsah, ktorý trvá dlhšie ako 5 sekúnd, musí byť možné pozastaviť alebo skryť. Prvky, ktoré sa automaticky aktualizujú, spôsobujú problémy používateľom čítačiek obrazovkiek alebo ľudom, ktorý nestíhajú rýchlo spracovať informácie (kognitívne postihnutia).

Nastaviteľné načasovanie

Časovým limitom sa treba vyhnúť, pokiaľ nie sú nevyhnutné pre danú úlohu (napr. skúšky, aukcie). Ak sa používajú časové limity, musí byť možné ich vypnúť, upraviť ich aspoň na 10-násobok predvolenej hodnoty alebo ich predĺžiť aspoň o 10-násobok.

Blikajúci obsah viac ako trikrát za sekundu

Nič na stránke by nemalo bliknúť viac ako trikrát za sekundu. Nezáleží na tom, aký veľký alebo jasný je obsah. Niektorý webový obsah, ako sú videá, hry alebo animovaná grafika, môže rýchlo blikať, aby upútal pozornosť. Takýto druh blikania však môže spôsobiť záchvaty alebo iné vážne zdravotné problémy u používateľov, ktorí sú na blikajúci obsah citliví.

10. Ďalšie pravidlá

• Orentácia zariadenia: Po otočení zariadenia z režimu na výšku do režimu na šírku bude obsah dokonale čitateľný a použiteľný.
• Automatické prehrávanie zvuku (zvyčajne sa zapne spolu s videom), ktoré trvá dlhšie ako 3 sekundy, je možné stlmiť alebo zastaviť.
• Nastavenie časového limitu: Ak má webová stránka akýkoľvek časový limit (napríklad automatické odhlásenie po 10 minútach nečinnosti), používateľ musí mať možnosť tento limit vypnúť, upraviť alebo jednoducho predĺžiť ešte predtým, ako vyprší.
  • Príklad: Ak e-shop rezervuje tovar v košíku na 10 minút, nesmie ho po uplynutí času bez varovania odstrániť. Namiesto toho musí systém používateľa vopred upozorniť, že čas sa kráti. Zároveň mu musí ponúknuť jednoduchú možnosť, napríklad tlačidlo, ktorým si môže časový limit ľahko a opakovane predĺžiť Potrebujem viac času (predĺžiť o 10 minút).