Zaklady webove pristupnosti — Tvorba webovych stranek pro vsechny

Vice nez miliarda lidi na svete zije s nejakou formou postizeni. To je priblizne 15 % svetove populace. Patri mezi ne lide, kteri jsou nevdomi nebo maji slaby zrak, lide kteri jsou neslysici nebo nedoslychavi, lide s motorickym postizenim, kognitivnimi odlisnostmi nebo docasnymi stavy jako zlomena ruka ci migrena.

Kdyz stavime webove stranky bez ohledu na tyto skutecnosti, nedelaim veci jen nepohodlnymi. Zamykame lidi pred informacemi, sluzbami a prilezitostmi, ktere ostatni berou jako samozrejmost. Pristupnost neni funkce. Je to zodpovednost.

Co znamena webova pristupnost

Webova pristupnost znamena navrhovani a vyvoj webovych stranek tak, aby je lide s postizenim mohli vnimat, chapat, navigovat a interagovat s nimi. Znamena take, ze mohou prispivat na web.

Nejde jen o ctecky obrazovky. Pristupnost zahrnuje:

• Zrakove: slepota, slaby zrak, barvoslepost
• Sluchove: hluchota, nedoslychavost
• Motoricke: omezena jemna motorika, tresy, ochrnu
• Kognitivni: dyslexie, ADHD, problemy s pameti, poruchy uceni
• Docasne a situacni: zlomene zapesti, jasne slunecni svetlo na obrazovce, hlucne prostredi, pomaly internet

Klicovym poznatkem je, ze pristupny design prospiva vsem. Titulky pomahaji v hlucne mistnosti. Vysoky kontrast pomaha na jasnem svetle. Klavesnicova navigace pomaha pokrocilym uzivatelum. Srozumitelny jazyk pomaha nerodilym mluvci. Pristupnost neni specialni rezim — je to dobry design.

Standard WCAG

Web Content Accessibility Guidelines (WCAG) jsou mezinarodnim standardem pro webovou pristupnost, vydanym konsorciem W3C. Aktualni verze je WCAG 2.2, organizovana kolem ctyr principu znamych pod zkratkou POUR:

Vnimatelnost (Perceivable)

Informace musi byt prezentovany zpusoby, ktere vsichni uzivatele mohou vnimat.

• Textove alternativy: kazdy obrazek potrebuje atribut alt popisujici jeho obsah. Dekorativni obrazky pouzivaji alt="".
• Titulky a prepisy: videoobsah potrebuje titulky; zvukovy obsah potrebuje prepisy.
• Prizpusobitelna struktura: obsah musi davat smysl i bez stylu. Pouzivejte semanticke HTML (<h1>, <nav>, <main>, <article>), ne jen vizualni stylizaci.
• Rozlisitelny obsah: dostatecny barevny kontrast, skalovateny text, zadna informace sdelena pouze barvou.

Ovladatelnost (Operable)

Uzivatele musi byt schopni ovladat rozhrani.

• Pristupnost z klavesnice: kazdy interaktivni prvek musi byt dosazitelny a pouzitelny pouze pomoci klavesnice. Zadne pasti na mys.
• Dostatek casu: pokud ma obsah casova omezeni, uzivatele musi mit moznost je prodlouzit nebo vypnout.
• Zadne spoustece zachvatu: vyhybejte se obsahu, ktery blika vice nez trikrat za sekundu.
• Navigovatelnost: jasne nazvy stranek, logicka struktura nadpisu, odkazy pro preskoceni navigace, viditelne indikatory zamereni.

Srozumitelnost (Understandable)

Obsah a rozhrani musi byt srozumitelne.

• Citelny text: urcete jazyk stranky (atribut lang). Pouzivejte jasny a jednoduchy jazyk, kdyz je to mozne.
• Predvidatelne chovani: navigace musi byt konzistentni. Stranky nesmeji neocekavane menit kontext.
• Pomoc pri zadavani: jasne oznacte formularova pole. Poskytujte uzitecne chybove zpravy vysvetlujici, co se pokazilo a jak to opravit.

Robustnost (Robust)

Obsah musi byt dostatecne robustni, aby fungoval se soucasnymi i budoucimi technologiemi.

• Validni HTML: spravny semanticky markup, ktery asistivni technologie mohou spolehlive interpretovat.
• Nazev, role, hodnota: vlastni komponenty musi exponovat svuj ucel pro API pristupnosti (pres ARIA, kdyz je to potreba).

Urovne shody

WCAG definuje tri urovne:

Vetsina legislativy po celem svete vyzaduje shodu s urovni AA. To je uroven, na kterou byste meli cilit.

Bezne bariery a jak je odstranit

Chybejici alt text u obrazku

Problem: uzivatele ctecek obrazovky slysi "obrazek" nebo vubec nic.

Reseni: pridejte popisny alt text ke kazdemu informativnimu obrazku. U dekorativnich obrazku pouzijte alt="", aby je ctecky obrazovky preskocily.

<!-- Dobre -->
<img
  src="chart.png"
  alt="Sloupcovy graf ukazujici 40% narust prodeje od ledna do cervna 2025"
/>

<!-- Dekorativni -->
<img src="divider.svg" alt="" />

Nedostatecny barevny kontrast

Problem: lide se slabym zrakem nebo barvosleposti nemohou precist text.

Reseni: zajistete minimalni kontrastni pomer 4,5:1 pro bezny text a 3:1 pro velky text (18px+ nebo 14px tucne). Pouzijte nastroj pro kontrolu kontrastu k overeni svych barevnych kombinaci.

Chybejici stitky formularu

Problem: uzivatele ctecek obrazovky nevi, k cemu formularove pole slouzi.

Reseni: kazde vstupni pole potrebuje viditelny element <label> propojeny pres atribut for.

<!-- Dobre -->
<label for="email">E-mailova adresa</label>
<input type="email" id="email" name="email" />

<!-- Spatne: zastupny text neni stitek -->
<input type="email" placeholder="E-mailova adresa" />

Zadna klavesnicova navigace

Problem: uzivatele, kteri nemohou pouzivat mys, uviznou.

Reseni: pouzivejte nativni HTML prvky (<button>, <a>, <select>), ktere jsou pristupne z klavesnice ve vychozim nastaveni. Pokud vytvarite vlastni komponenty, zajistete, ze jsou zameritlne a reaguji na udalosti klavesnice. Nikdy neodstranujte obrysy zamereni bez poskytnuti alternativy.

Chybejici struktura stranky

Problem: uzivatele ctecek obrazovky nemohou efektivne navigovat.

Reseni: pouzivejte semanticke HTML. Jeden <h1> na stranku, logicka hierarchie nadpisu (nepreskakyujte urovne), orientacni body (<nav>, <main>, <footer>).

Automaticky prehravana media

Problem: neocekavany zvuk narusi uzivatele ctecek obrazovky. Automaticky prehravane video muze vyvolat zachvaty nebo zpusobit uzkost.

Reseni: nikdy automaticky neprehravejte zvuk. Pokud se video prehrava automaticky, zajistete, ze nemaa ve vychozim nastaveni zvuk a poskytuje ovladaci prvky pro pozastaveni.

Barva nestaci

Nikdy se nespolejte na barvu jako jediny zpusob sdeleni informace. Zvazete:

• Formularove pole s cervenym okrajem pro chybu potrebuje take ikonu chyby nebo textovou zpravu
• Graf s barvenymi carami potrebuje take vzory, stitky nebo legendu
• Odkaz v bezicim textu potrebuje podtrzeni nebo jiny vizualni vodatko, ne jen zmenu barvy

Priblizne 8 % muzu a 0,5 % zen ma nejakou formu poruchy barevneho videni. Navrhovat s timto na pameti neni specialni pripad — je to zakladni inkluze.

Testovani pristupnosti

Automatizovane testovani

Automatizovane nastroje zachyti priblizne 30-40 % problemu s pristupnosti. Jsou dobrym prvnim krokem, ne uplnym resenim.

• axe DevTools (rozsireni prohlizece) — skenuje stranku a hlasi poruseni WCAG
• Lighthouse (vestaven do Chrome DevTools) — zahrnuje audit pristupnosti
• WAVE (webovy nastroj) — vizualni prekryti zobrazujici problemy

Manualni testovani

Mnoho problemu s pristupnosti vyzaduje lidsky usudek:

• Testovani klavesnici: odpojte mys a navigujte celym webem pomoci Tab, Enter, Escape a sipek. Dostanete se vsude? Je poradi zamereni logicke?
• Testovani cteckou obrazovky: vyzkousejte VoiceOver (Mac), NVDA (Windows, zdarma) nebo TalkBack (Android). Dava obsah smysl, kdyz je precteny nahlas?
• Testovani priblizenim: priblizze prohlizec na 200 %. Funguje rozlozeni stale? Je nejaky obsah oriznyt nebo se prekryva?
• Omezeny pohyb: povolte "omezit pohyb" v nastaveni operacniho systemu. Respektuji animace tuto preferenci?

Uzivatelske testovani

Nejcennejsi zpetna vazba pochazi od lidi, kteri skutecne pouzivaji asistivni technologie ve svem kazdodennim zivote. Pokud to vas rozpocet dovoli, zahrnte uzivatele s postizenim do sveho testovacigo procesu.

Pristupnost je spektrum, ne zaskrtavaci policko

Pristupnost neni jednorazovy projekt s cilem. Je to prubezna praxe. Webove stranky se meni, obsah se pridava a nove bariery se mohou objevit s kazdou aktualizaci.

Cilem neni dokonalost. Cilem je neustale zlepsovani a skutecna starost o lidi, kteri pouzivaji to, co vytvarite. Zacnete s nejvice pusobivymi zmenami — barevny kontrast, alt text, klavesnicova navigace, stitky formularu — a stavejte na tom dal.

Kazda bariera, kterou odstranite, jsou dvere, ktere otevrete.

Rychly kontrolni seznam

• Vsechny obrazky maji smysluplny alt text (nebo alt="" pokud jsou dekorativni)
• Barevny kontrast splnuje WCAG AA (4,5:1 pro text, 3:1 pro velky text)
• Vsechna formularova pole maji viditelne stitky
• Web je plne navigovatelny pomoci klavesnice
• Nadpisy sleduji logickou hierarchii
• Indikatory zamereni jsou viditelne
• Jazyk stranky je nastaven (atribut lang na <html>)
• Zadna informace neni sdelena pouze barvou
• Videa maji titulky
• Animace respektuji prefers-reduced-motion