Ako vytvoriť prístupný web

Čo prístupnosť webu znamená

Prístupnosť je snaha o tvorbu webov tak, aby boli použiteľné pre všetkých používateľov bez ohľadu na ich zdravotné obmedzenia alebo znevýhodnenia. 

Ide o dodržiavanie niekoľkých pravidiel, ktoré handikepovaným ľuďom zabezpečia rovnakú alebo aspoň podobnú online skúsenosť ako všetkým ostatným.

Prístupnosť je dôležitá súčasť používateľskeho zážitku (UX), preto by ste ju mali ideálne zohľadniť už v procese vývoja a dizajnu webu. 

Dobrá správa je, že veľkú časť svojho webového obsahu sprístupnite už len tým, že budete správne používať jednotlivé prvky HTML kódu. 

Stránky sa dajú sprístupniť aj dodatočne pomocou platených aplikácií, ale bez správne štruktúrovaného HTML vás ani tie nespasia.

Kto rieši prístupnosť

Celosvetovo rieši prístupnosť webov organizácia W3C, ktorá spomínané pravidlá (WCAG) navrhuje. Europská norma EN 301 549 pre smernicu EU o prístupnosti webu síce výslovne neuvádza, že prijala pravidlá WCAG, ale zahŕňa všetky ich požiadavky.

Na Slovensku majú momentálne podľa zákona č. 95/2019. povinnú prístupnosť len weby verejnej správy, to sa však má od budúceho roku zmeniť.

Už v roku 2025 vstúpi do platnosti zákonná povinnosť o prístupnosti webov aj do súkromného sektoru, preto je teraz najvyšší čas si webové stránky na budúci rok nachystať.

Prečo je prístupnosť dôležitá

Webové stránky a najrôznejšie aplikácie hrajú stále významnejšiu úlohu vo vzdelávaní, zamestnaní, nakupovaní, komunikácii s priateľmi aj s úradmi, v zdravotnej starostlivosti a ďalších aspektoch ľudského života. Preto je nevyhnutné, aby poskytovali rovnaký prístup a rovnaké príležitosti ľuďom s rôznymi schopnosťami. 

Už vieme, že prístupnosť webu pomáha hlavne ľuďom so znevýhodnením, teda takým, ktorí:

• nepočujú nebo sú nedoslýchaví
• nevidia alebo trpia farbosleposťou
• majú najrôznejšie fyzické obmedzenia
• majú kognitívne alebo neurologické poruchy
• Nemôžu hovoriť a pod.

Prístupnosť webu však pomáha aj tým, ktorí sú bez znevýhodnenia, napríklad:

• starším ľuďom
• ľuďom, ktorí používajú mobilné telefóny, smart hodinky a ďalšie zariadenia s malými obrazovkami
• ľuďom s „dočasným znevýhodnením“, čo môže byť napríklad zlomená ruka alebo stratené okuliare
• ľuďom so „situačným obmedzením“ – nevidia na displej kvôli slnku alebo sú v prostredí, kde nemôžu počúvať zvuk
• ľuďom, ktorí majú pomalé pripojenie k internetu alebo tarifové obmedzenie

Na rozdiel od tlačených, zvukových a vizuálnych médií dokážu webové stránky ľuďom so znevýhodnením ponúknuť bezbariérový prístup k informáciám a interakciám, pretože weby majú schopnosť prispôsobiť sa individuálnym potrebám používateľov.

Prečo je prístupný web lepší

Keď sa prístupné webové stránky stanú celosvetovým štandardom, stane sa internet lepším miestom pre všetkých. Okrem toho vám dobrá stratégia prístupnosti prinesie aj obchodné benefity. 

V procese vývoja a dizajnu webu sa prístupnosť vzťahuje takmer na každú súčasť tvorby webových stránok. Prekrýva sa s použiteľnosťou, responzivitou a dizajnom pre mobilné zariadenia, multisenzorickou komunikáciou, optimalizáciou pre vyhľadávače (SEO) a ďalšími disciplínami.

Na Slovensku má vyše 30 % ľudí určitú formu zdravotného znevýhodnenia, ktorá im môže komplikovať prácu s webovými stránkami.

Keď si svoj web naprogramujete dobre a odstránite z neho bariéry, sprístupnite ho ľuďom so zdravotným znevýhodnením a tí sa stanú vašimi novými zákazníkmi.

Prístupné webové stránky však výrazne zlepšia používateľský dojem pre všetkých, preto môžu prinášať aj lepšie výsledky vyhľadávaní, nižšie náklady na údržbu alebo väčší dosah publika. 

V neposlednom rade takéto stránky demonštrujú spoločenskú zodpovednosť (CSR) vašej firmy, čo vo vašich zákazníkoch zaručene zanechá pozitívny dojem.

Ako web sprístupniť všetkým

Požiadavky na prístupnosť webu sú rozdelené na 4 základné princípy, ktoré pomáhajú, aby boli webové stránky vnímateľné, ovládateľné, zrozumiteľné a stabilné. Tieto princípy sa neskôr delia na 13 pravidiel, tie najdôležitejšie si teraz v skratke prejdeme.

1. Vnímateľnosť

Pre väčšinu používateľov je vnímanie webu založené hlavne na zraku. No ľudia, ktorí zle vidia, sa spoliehajú na zvuk alebo hmat. 

Nevidiaci alebo slabozrakí používatelia často používajú softvér na čítanie obrazovky, ktorý preklápa text na syntetizovanú reč alebo znaky Braillovho písma.

Vizuálne informácie (tvary, veľkosti, poradie) by ideálne mali byť vnímatelné rôznymi zmyslami tak, aby pre ľudí so znevýhodnením nič nezostalo nezistiteľné alebo neviditeľné. Všetok netextový obsah by mal mať svoju textovú alternatívu.

Alternatívne texty

Ponúknite textové alternatívy k obrázkom, videám a zvukovému obsahu, aby ich mohli vnímať aj nevidiaci. Bežným riešením sú tzv. alt texty obrázkov v HTML kóde stránky.

Zvuk a video

Pri zvukovom obsahu poskytnite nepočujúcim úplný prepis nahrávky. K videám pridajte titulky a uistite sa, že sú synchronizované so zvukom.

Kontrast

Aby si všetci vrátane farboslepých mohli prečítať obsah vašej stránky alebo texty v obrázkoch, použite vhodný kontrast medzi farbou textu a jeho pozadím.

Na ladenie farebného kontrastu podľa štandardov WCAG vyskúšajte napríklad plugin Figmy alebo online Color Contrast Checker.

Veľkosť textu

Dajte ľuďom možnosť zväčšiť si text na stránke aspoň na 200 % a zmenšit aspoň na 50 % pôvodnej hodnoty pomocou štandardných funkcií prehliadača. To by malo ísť bez straty obsahu alebo funkčnosti webu.

2. Ovládateľnosť

Interaktívne prvky webových stránok, ako sú tlačidlá, navigácia, výber odkazu alebo prehrávanie či pozastavenie videa, by mali byť viditeľné a ovládateľné pre všetkých používateľov.

Väčšina ľudí si vystačí s fyzickým kliknutím, klepnutím, prejdením alebo posunutím. Tým, ktorí takto interagovať nemôžu, umožnite v kóde použitie hlasových príkazov alebo pomocných zariadení, napr. sledovačov očí a pohybov.

Kód svojho webu môžete doplniť o ARIA (Accessible Rich Internet Applications), ktoré sprístupnia webový obsah a webové aplikácie (najmä tie vyvinuté pomocou JavaScriptu) ľuďom so znevýhodnením.

Klávesnica

Niektorí používatelia vašej webovej stránky nebudú používať myš ani touchpad. Všetky funkcie na vašom webe by preto mali byť dostupné len pomocou klávesnice. 

To jednoducho docielite sémantickým značkovaním v HTML, prípadne opäť pomocou ARIA.

Umožnite používateľom preskakovať medzi jednotlivými prvkami na stránke pomocou tabulátoru a klikať na tlačidlá alebo aktívne prvky pomocou klávesu Enter.

Kontaktné formuláre

Pri vypĺňaní formulárov môžu nevidomí používatelia naraziť na problém so zaškrtávacím políčkom, napr. „Súhlasím so spracovaním osobných údajov.“ Bez popisu totiž čítacie zariadenie nevie, o čo ide, a človek nemôže pokračovať ďalej. 

Preto je dôležité popísať všetky časti formulára, poskytnúť chybové správy a umožniť pohyb medzi políčkami formulára pomocou klávesových skratiek.

Ďalej zvážte, či je na vašom webe nevyhnutné na odoslanie formulára použiť test odlíšenia človeka od robotov CAPTCHA. Čítačky obrazovky ho nedokážu rozlúštiť a používateľ nevie formulár odoslať.

Ak je to možné, vyskúšajte niektoré z prístupnejších variant CAPTCHA, ktoré odporúča organizácia W3C na svojich stránkach.

Jedným z riešení sú jednoduché matematické alebo slovné hádanky a podobné logické testy. Je lepšie používať rôzne typy hádaniek, aby človek, ktorý nedokáže vyriešiť jednu z nich, mohol vyskúšať inú.

Časový limit

Ak má nejaká akcia na vašom webe časový limit, používatelia by mali mať možnosť si ho predĺžiť alebo úplne zrušiť.

Blikanie a zvuky na pozadí

Podľa W3C môže obsah, ktorý bliká rýchlejšie než trikrát za sekundu, vyvolať záchvaty. Máte na svojom webe hudobné pozadie? Dajte ľuďom možnosť ho stíšiť alebo úplne vypnúť.

3. Zrozumiteľnosť

Všetok obsah na vašom webe by mal byť pre návštevníkov jednoducho zrozumiteľný. To znamená, že by ste mali dodržať jasnú a prehľadnú štruktúru. Dlhšie obsahové bloky rozdeľte do menších, výstižných celkov.

To isté platí aj pre štruktúru webu: pomenovávanie a radenie stránok by malo byť logické a intuitívne. Uľahčite ľuďom orientáciu na stránkach aj tým, že zakaždým uvidia cestu, ktorou sa preklikali (omrvinková navigácia).

Usporiadanie obsahu

Píšte svoj HTML kód tak, aby informácie a štruktúra webu dávali zmysel aj bez viditeľných grafických prvkov. Správne nadpisy (H1, H2 atď.), zoznamy, tučné texty a kurzíva takisto predávajú informácie. 

Pomôže to nielen ľuďom používajúcim čítacie zariadenie, ale aj robotom internetových vyhľadávačov a vašej SEO stratégii.

Pochopenie obsahu

Ak to charakter vašej webovej stránky nevylučuje, mali by ste sa snažiť podávať informácie jednoduchým jazykom a zrozumiteľne. 

Kde to bude možné, nepoužívajte vysoko technický žargón alebo čisto regionálne výrazy.

Chybové hlásenia

Popíšte chybu a pridajte pokyny, ktoré návštevníkom webu pomôžu chybu napraviť.

4. Stabilita

Stabilitou sa myslí schopnosť webu spoľahlivo fungovať na širokej škále zariadení aj technológií, vrátane pomocných zariadení, ako sú čítačky obrazovky.
Snažte sa vaše stránky aj pravidelne aktualizovať, aby boli so všetkými zariadeniami neustále kompatibilné.

Asistenčné technológie používajú kód HTML na preklad jeho obsahu do iného formátu. Aj preto by mal byť HTML kód vašich stránok napísaný správne.

Prístupné WordPress šablóny

Pri výbere šablóny webu si môžete zvoliť niektorý z prístupných dizajnov. Medzi bezplatnými možnosťami je napríklad Balasana – minimalistický motív pre firemný web alebo Mayland, ktorý je skvelý pre fotografov a vizuálnych rozprávačov.

Zaujíma vás, ako si vybudovať prístupný web vo WordPresse? Zaregistrujte sa na bezplatný webinár Strediska Teiresiás, ktorý prebehne už 22. marca 2024.

Prístupných šablón má však WordPress omnoho viac, stačí zadať slovo „Accessibility/Prístupnosť“ do vyhľadávacieho políčka. Dajte prednosť minimalistickému, čistému dizajnu.

Najfunkčnejšie webové stránky bývajú tie najjednoduchšie. Zbavte sa funkcií, ktoré sú len pre efekt a zbytočne kladú prekážky používateľom so znevýhodnením.

Tieto WordPress šablóny spĺňajú základné požiadavky na prístupnosť

Aplikácie na sprístupnenie webu

Ak ste pri vývoji svojho webu na prístupnosť zabudli, nemusíte hneď prerábať celý kód. Existujú jednoduché aplikácie, ako napríklad AccessiBe (kde sa dá nastaviť aj čeština) alebo jej úspornejšia česká varianta Web bez bariéry, ktoré dokážu webové stránky sprístupniť.

Stačí vložiť krátký kód aplikácie do hlavičky HTML kódu a na stránke sa objaví ikonka s panáčikom. Keď na ňu používatelia kliknú, rozbalí sa im menu, kde si môžu nastaviť svoje preferencie vzhľadu a funkcií webu.

Okrem prispôsobenia veľkosti písma alebo farebného kontrastu a podobných základných úprav dokáže aplikácia prejdením kurzoru prečítať text na stránke a dokáže tak nahradiť čítačku obrazovky.

Aplikácia Web bez bariéry si poradí aj s veľkým problémom webov verejnej správy, ktorým sú neprístupné pdf dokumenty a dokáže ich previesť do prístupnej podoby. S čím si však neporadí je neštruktúrovaný web alebo už spomínaný test CAPTCHA.

Menu aplikácie AccessiBe

Ako si overiť prístupnosť webu

Ak si chcete overiť formálnu prístupnosť svojho webu a zistiť, či zodpovedá pravidlám WCAG, máme pre vás hneď niekoľko bezplatných online riešení. 

Do testerov ako Accessibility Checker alebo Site Improve stačí vpísať názov webovej stránky v priebehu chvíľky dostanete svoj výsledok s tipmi na zlepšenie. 

Nástroje ako Axe alebo WAVE môžete používať aj ako rozšírenie svojho webového prehliadača. Rozsiahly zoznam nástrojov nájdete priamo na webe W3C.

Keď vaše stránky úspešne zvládnu podobný online test, spĺňate základné pravidlá a ste pravdepodobne na dobrej ceste k prístupnosti. Vaším ďalším krokom by malo byť nechať stránky otestovať ľuďmi so znevýhodnením a zapracovať ich spätnú väzbu.

„Vyvážiť, aby bol web prístupný a zároveň použiteľný, môže byť problém, „hovorí Jan Šrubař, jeden z tvorcov aplikácie Web bez bariéry.“ Je potrebné vyhovieť nielen legislatíve a súboru pravidiel WCAG, ale ideálne aj otestovať prístupnosť webu priamo s koncovými používateľmi.“

Túto „skutočnú“ prístupnosť svojho webu si môžete nechať otestovať v rámci projektu Théseus brnianskeho Strediska Teiresiás. Toto stredisko Masarykovej univerzity na pomoc študentom so špecifickými nárokmi sa dlhodobo venuje osvete ohľadne prístupnosti, konzultáciám a testovaniu webov aj aplikácií.

Na záver

Požiadavky na prístupnosť webov sa s neustálym vývojom technológií postupne menia. Preto nezúfajte, keď váš web pravidlá prístupnosti na 100 % nespĺňa, neznamená to automaticky, že je neprístupný. 

Hlavné je, aby znevýhodnení používatelia s vašimi webovými stránkami dokázali pracovať a úspešne na nich vyriešili, čo potrebujú. Sprístupnením webu navyše pomáhate nielen svojim zákazníkom, ale aj sobe, pretože si zvýšite ich loajalitu.