Přístupnost webových stránek (Accessibility): Klíč k digitální inkluzi a lepšímu UX

Přečíst si text, přehrát video nebo kliknout na tlačítko – pro většinu z nás běžná činnost, nad kterou se ani nezamýšlíme. Všichni se snažíme držet krok s neustále se zrychlujícím online světem.

Ale co lidé s nějakým omezením – zrakovým (např. barvoslepost, slabozrakost), sluchovým, pohybovým nebo kognitivním? Pro ně může být i jednoduchý úkon na webu značně složitý, nebo dokonce nemožný.

Přístupnost webu (accessibility) znamená vytvářet digitální prostředí vstřícné ke všem – bez výjimky. Přístupnost totiž není důležitá jen pro osoby s postižením, zlepšuje celkovou použitelnost webu, a tím i uživatelský zážitek (UX) pro všechny návštěvníky. Když je web dobře navržený, uživatel se lépe orientuje, rychleji najde, co potřebuje, a odchází spokojenější.

Přístupnost není bonus navíc. Je to znak kvalitního webu, který myslí na různorodost – a tu bere vážně.

Význam přístupnosti: Etika, zákon, byznys

Digitální inkluze a rovnost

Webová přístupnost je otázkou základní slušnosti a respektu. V digitálním světě by měl mít každý rovný přístup k informacím, službám a nákupům. Když přístupnost ignorujeme, vylučujeme z online prostředí miliony lidí – a tím jdeme také sami proti sobě.

Podle Světové zdravotnické organizace (WHO) žije na světě přes 1 miliardu lidí s nějakou formou postižení – tedy 15 % světové populace. Přístupnost proto není okrajové téma. Je to otázka rovnosti a důstojnosti.

Právní rámec: Co říká zákon?

Přístupnost není jen dobrá vůle. V řadě případů je i povinností danou zákonem.

Zákon č. 99/2019 Sb. – platný v Česku od roku 2020. Týká se veřejných institucí, které musí zajistit přístupnost svých webových a mobilních aplikací dle standardu WCAG 2.1 (úroveň AA). Tedy například úřady, školy nebo nemocnice.
European Accessibility Act (EAA) – evropská směrnice přijatá v roce 2019. Od 28. června 2025 začne platit i pro vybrané subjekty v soukromém sektoru. Týká se e-shopů, bank, dopravních portálů, poskytovatelů e-knih a dalších digitálních služeb.

Nedodržení těchto norem může vést k právním postihům i ztrátě důvěry uživatelů.

Obchodní přínos

Přístupnost se vyplácí. Nejenže zvyšuje dosah webu a pozitivně ovlivňuje SEO, ale vede i ke spokojenějším uživatelům a vyšší míře konverzí.

Například:

83 % lidí s postižením preferuje přístupné weby.
71 % z nich opustí stránky s omezenou přístupností.
75 % uživatelů ocení použitelnost víc než cenu produktu.¹

Přístupnost tak může být nejen konkurenční výhodou, ale i velmi podstatným faktorem růstu.

Základní principy přístupnosti podle WCAG

Standard WCAG (Web Content Accessibility Guidelines) definuje čtyři klíčové principy:

Vnímatelnost (Perceivable) – obsah musí být dostupný skrze různé smysly, např. zrak nebo sluch. Texty musí mít dostatečný kontrast, obrázky popisky (alt texty), video titulky.
Ovladatelnost (Operable) – uživatel musí být schopen web ovládat i bez myši – třeba jen klávesnicí nebo hlasem.
Srozumitelnost (Understandable) – obsah a ovládací prvky musí být jasné, předvídatelné a konzistentní. Text by měl být čitelný a přehledný.
Robustnost (Robust) – web musí správně fungovat na různých zařízeních a prohlížečích a být kompatibilní s asistivními technologiemi (např. čtečky obrazovky). Díky tomu je přístupný širokému spektru uživatelů bez ohledu na používanou technologii.

Praktické kroky pro zlepšení přístupnosti

1. Dostatečný kontrast textu a pozadí

Aby byl text čitelný i pro slabozraké uživatele nebo ty s barvoslepostí, je důležité zajistit dostatečný kontrast mezi textem a pozadím.

Například černý text na bílém pozadí nebo naopak.
Poměr kontrastu by měl být alespoň 4,5:1 pro běžný text a 3:1 pro velké nadpisy.
Použijte nástroje jako Contrast Checker pro kontrolu kontrastu.

2. Alt texty u obrázků

Obrázky musí mít alternativní text (alt text) popisující jejich obsah. To pomáhá lidem, kteří používají čtečky obrazovky.

Například u fotografie produktu ho popište jako „červené sportovní tenisky velikosti 42“.
Alt text by měl být výstižný a stručný, ale dostatečně informativní.

3. Klávesová navigace

Web by měl být ovladatelný bez myši – například pouze pomocí klávesnice.

Uživatelé by měli být schopni procházet menu, formuláře i tlačítka tabulátorem a klávesou Enter.
Vyhněte se ovládacím prvkům, co vyžadují myš (např. hover efekty bez náhradního přístupu).

4. Logická struktura obsahu

Používejte správnou hierarchii nadpisů (H1, H2, H3), odstavce a seznamy.

Nadpisy pomáhají orientovat se na stránce i lidem s kognitivními potížemi a usnadňují navigaci pomocí čteček obrazovky.
Členění textu na kratší úseky a používání odrážek zvyšuje přehlednost.

5. Titulky a přepisy u videí

Pro uživatele se sluchovým postižením je důležité, aby videa měla titulky nebo přepis.

Titulky zároveň pomáhají všem, například při sledování v hlučném prostředí.

6. Zamezení blikajících a rychle se měnicích prvků

Blikající animace nebo rychlé pohyby mohou vyvolat epileptické záchvaty nebo rozptylovat.

Pokud jsou animace potřeba, uživatel by měl mít možnost je vypnout.

7. Formuláře přístupné pro všechny

Každé pole by mělo mít popisek (label) viditelný i pro čtečky obrazovky.
Zobrazujte jasné chyby při vyplňování (např. „Zadejte platný e-mail“).
Nabídněte nápovědu nebo příklady formátu.

Nejčastější chyby zabraňující přístupnosti

Chybějící nebo nejednoznačné popisky u tlačítek a odkazů – např. „Klikněte zde“ neříká nic konkrétního. Nahraďte jej např. „Zobrazit ceník“.
Nedostatečný kontrast – světlý šedý text na bílém pozadí může vypadat elegantně, ale pro spoustu lidí je nečitelný.
Web nekompatibilní s čtečkami obrazovky – např. použití vizuálně hezkých prvků místo správných HTML značek. Čtečky tak obsah nemusí přečíst správně nebo vůbec.
Ovládání webu závislé pouze na myši – formuláře, menu nebo galerie, nereagující na klávesnici, znemožňují přístup lidem s pohybovým omezením.
Nedostatečné označení stavu formulářů – např. když se po chybě v odeslání formuláře neoznačí, co je špatně, nebo když není chyba vůbec čitelná pro čtečku.
Automatické přehrávání médií – zvuk nebo video, které se spustí bez souhlasu, může být rušivé a problematické nejen pro uživatele se zrakovým omezením, ale i pro všechny v rušném prostředí.

Mýty o přístupnosti

„Přístupnost je jen pro nevidomé.“

Přístupnost se netýká jen lidí se zrakovým postižením. Pomáhá i uživatelům se sluchovým omezením (např. titulky u videí), s motorickými obtížemi (např. ovládání webu klávesnicí nebo hlasem), s kognitivními poruchami (např. přehledná struktura a jednoduchý jazyk) nebo lidem s dočasným omezením (např. zlomená ruka, práce v hlučném prostředí). Dobře navržený přístupný web je snazší na používání pro každého.

„Je to drahé a složité.“

Pokud se přístupnost řeší už při návrhu webu, není finančně ani technicky náročná. Je mnohem levnější začlenit ji hned na začátku než ji dodatečně „lepit“ do hotového produktu. Navíc spousta doporučení (např. kontrasty, popisky, struktura) přirozeně vede k lepšímu UX.

„Stačí alt texty.“

Alternativní texty jsou důležité, ale tvoří jen malou část přístupnosti. Je třeba řešit i klávesovou navigaci, kontrast, hierarchii nadpisů, validní HTML, přehledné formuláře, čitelnost, chytré označení chyb a mnoho dalšího. Přístupnost je velmi komplexní téma.

„Naše cílovka nejsou lidé s postižením.“

To je častý a nebezpečný omyl. Podle WHO má více než miliarda lidí na světě nějakou formu zdravotního postižení. Navíc každý z nás se může dočasně stát „znevýhodněným“ uživatelem – například když drží dítě, používá telefon na slunci, má nízké připojení nebo krátkodobé zranění. Přístupnost zajišťuje inkluzi a lepší použitelnost pro všechny.

7 rychlých způsobů, jak otestovat přístupnost

1. Použijte jen klávesnici (bez myši)

Projďete stránku za pomoci:

Tab – přecházení mezi prvky (např. tlačítko, odkaz, vstupní pole, rozbalovací nabídku).

Enter – aktivace tlačítek/odkazů

Shift + Tab – přesune fokus zpět na předchozí interaktivní prvek.

Pokud se nic nestane nebo se nikam nedostanete, je to spolehlivý znak toho, že něco není přístupné.

2. Zkontrolujte kontrasty barev

Příliš světlý text na světlém pozadí může být pro mnoho lidí těžko čitelný – zvlášť při zhoršeném zraku nebo na slunci. Správný kontrast je zásadní pro dobrou čitelnost.

Použijte nástroje jako:

Minimální doporučený kontrast pro běžný text je 4,5:1. Pro větší písmo (např. nadpisy) stačí 3:1.

Pokud text splývá s pozadím, může být pro část uživatelů prakticky neviditelný – a tím i nepřístupný.

3. Zvětšete stránku na 200 %

Otestujte, jak se stránka chová při zvětšení – tak, jak ji může používat člověk se zrakovým omezením.

Pomocí klávesové zkratky:

CTRL + (Windows)
CMD + = (Mac – klávesa = bez Shiftu, protože + se na CZ klávesnici zadává přes Shift)

Stránka by měla zůstat čitelná a přehledná. Obsah se nesmí překrývat, vypadávat nebo být nepřístupný (např. text mimo obrazovku bez možnosti scrollování).

Tohle jednoduché zvětšení simuluje běžné potřeby uživatelů se slabším zrakem – a často odhalí problémy v responzivním designu nebo fixních rozměrech bloků.

4. Zkontrolujte alternativní texty (alt texty) u obrázků

Alternativní texty jsou důležité pro uživatele se zrakovým postižením, kteří používají čtečky obrazovky. Popisují, co obrázek znázorňuje.

Klikněte pravým tlačítkem na obrázek a vyberte „Prozkoumat“ (nebo „Inspect“) – otevře se DevTools (nástroje pro vývojáře).
V kódu najděte atribut alt=“…“ u příslušného <img> tagu.
Zkontrolujte, že je v něm popisný a smysluplný text (např. „Červené kolo na trávníku“).

Alt text by neměl být:

prázdný (alt=““),
„obrázek“,
jen souborový název,
nebo nevýznamný (např. „foto123“).

5. Spusťte automatický audit v Chrome

Chrome nabízí nástroj, který rychle otestuje přístupnost stránky a ukáže případné chyby.

Klikněte pravým tlačítkem na stránku a vyberte Inspect (nebo použijte klávesu F12) pro otevření DevTools.
V horní nabídce DevTools přejděte na záložku Lighthouse.
Zaškrtněte kategorii Accessibility.
Klikněte na tlačítko Generate report (Spustit audit).

Výsledek zobrazí například:

chybějící popisky u formulářových prvků (label),
špatné kontrasty barev,
problémy s navigací,
a další zásadní chyby přístupnosti.

6. Použijte čtečku obrazovky (volitelně)

Čtečky obrazovky pomáhají lidem se zrakovým postižením porozumět obsahu webu bez nutnosti vidění.

Mac: Zapněte VoiceOver pomocí klávesové zkratky CMD + F5
Windows: Použijte NVDA (zdarma) nebo Narrator (vestavěný ve Windows)

Vyzkoušejte načíst stránku pomocí čtečky a zjistěte, zda dokážete pochopit, co se na stránce děje. Pomůže vám to zjistit, zda je uživatelské rozhraní (UI) srozumitelné i bez vizuálního vjemu.