Co je webová přístupnost

Co je webová přístupnost

Webová přístupnost označuje praxi navrhování a vývoje webů a aplikací tak, aby je mohli používat všichni lidé včetně osob se zdravotním postižením. Sem patří lidé se zrakovým postižením, sluchovým postižením, pohybovými obtížemi a kognitivními poruchami. Podle údajů Světové zdravotnické organizace žije po celém světě více než miliarda lidí s nějakou formou postižení, což činí z přístupnosti nejen etický imperativ, ale i obchodní potřebu, protože ignorovat tuto populaci znamená přicházet o významnou část potenciálního publika.

Přístupnost není jen pro osoby s trvalým postižením. Situační bariéry jako používání telefonu na ostrém slunci, dočasné zranění ruky nebo hlučné prostředí znemožňující poslech zvuku se týkají nás všech. Navrhování s ohledem na přístupnost zlepšuje zkušenost pro všechny uživatele. Přístupný web bývá obvykle také lépe optimalizovaný pro SEO, protože vyhledávače a čtečky obrazovky interpretují obsah podobně. BeoHosting podporuje přístupnost jako důležitý aspekt kvalitní webové prezentace.

Směrnice WCAG

Přehled standardu WCAG

Web Content Accessibility Guidelines neboli WCAG je mezinárodní standard pro webovou přístupnost. Důležité pro bezpečnost uživatelů je i zabezpečení webu pomocí bezpečnostního certifikátu, vyvíjené organizací W3C. Aktuální verze WCAG 2.2 byla zveřejněna v roce 2023 a definuje tři úrovně shody: A jako minimální úroveň, AA jako doporučenou úroveň pro většinu webů a AAA jako nejvyšší úroveň, kterou je u všech typů obsahu těžké plně dosáhnout. Většina právních předpisů vyžaduje úroveň AA, která představuje dobrou rovnováhu mezi přístupností a praktickou proveditelností implementace.

WCAG je uspořádán kolem čtyř principů známých pod zkratkou POUR: Perceivable (vnímatelnost), Operable (ovladatelnost), Understandable (srozumitelnost) a Robust (robustnost). Vnímatelnost znamená, že uživatelé musí být schopni vnímat obsah alespoň jedním smyslem. Ovladatelnost znamená, že uživatelé musí být schopni používat rozhraní a navigaci. Srozumitelnost znamená, že obsah a rozhraní musí být srozumitelné. Robustnost znamená, že obsah musí být dostatečně robustní, aby jej dokázaly interpretovat různé technologie včetně asistivních technologií.

Klíčová kritéria shody

Textové alternativy pro netextový obsah jsou jedním z nejdůležitějších kritérií. Každý obrázek musí mít atribut alt popisující jeho obsah pro uživatele, kteří jej nevidí. Dekorativní obrázky používají prázdný atribut alt alt="", aby čtečky obrazovky věděly, že je mají přeskočit. Informativní obrázky mají stručný popis obsahu, zatímco složité obrázky jako grafy vyžadují podrobnější popis nebo textovou alternativu poblíž. Video a zvukový obsah vyžadují přepisy a titulky.

Klávesová navigace je zásadní, protože mnoho uživatelů nemůže používat myš. Každý interaktivní prvek musí být přístupný přes klávesnici pomocí Tab pro navigaci, Enter pro aktivaci a Escape pro zavření. Viditelný indikátor fokusu musí jasně ukazovat, který prvek je právě aktivní. Odkaz pro přeskočení navigace na začátku stránky umožňuje uživatelům čteček obrazovky přeskočit opakující se navigaci a přímo se dostat k hlavnímu obsahu.

Atributy ARIA

Základy ARIA

Accessible Rich Internet Applications neboli ARIA je sada atributů rozšiřujících HTML o dodatečné informace pro asistivní technologie. ARIA nemění vizuální vzhled ani chování prvků, ale pouze způsob, jakým je čtečky obrazovky prezentují uživatelům. Prvním pravidlem ARIA je nepoužívat ji, pokud existuje nativní HTML prvek poskytující stejnou sémantiku. Například místo div role=button použijte nativní prvek button, který už má vestavěnou přístupnost včetně fokusu a klávesnice.

Atribut ARIA role definuje roli prvku v rozhraní. Například role=navigation označuje navigační blok, role=main označuje hlavní obsah stránky a role=alert označuje dynamickou zprávu vyžadující pozornost uživatele. Orientační (landmark) role jako banner, main, navigation a contentinfo pomáhají uživatelům čteček obrazovky rychle se pohybovat ve struktuře stránky a přeskakovat části, které je nezajímají.

Nejčastěji používané atributy ARIA

Atribut aria-label poskytuje přístupný popisek pro prvek bez viditelného textu. Použijte jej pro ikonová tlačítka jako aria-label="Zavřít menu" pro tlačítko s ikonou X. Atribut aria-labelledby odkazuje na ID jiného prvku, jehož text slouží jako popisek. Atribut aria-describedby propojuje prvek s podrobnějším popisem, což je užitečné u formulářů, kde má pole dodatečné pokyny k vyplnění.

Atribut aria-hidden=true skryje prvek před čtečkami obrazovky, přičemž zůstává vizuálně viditelný. Použijte jej pro dekorativní prvky, které uživatele čteček obrazovky jen matou. Atribut aria-expanded indikuje, zda je prvek jako menu nebo sekce rozbalený, nebo sbalený. Atribut aria-live označuje oblasti, jejichž obsah se dynamicky mění a měl by být uživatelům čteček obrazovky oznámen. Hodnota polite počká, až uživatel dokončí aktuální činnost, zatímco assertive přeruší okamžitě.

Barevný kontrast

Požadavky na kontrast

WCAG definuje minimální poměry kontrastu mezi textem a pozadím. Pro běžný text je minimální poměr kontrastu 4,5:1 na úrovni AA a 7:1 na úrovni AAA. Pro velký text od 18 pt nebo 14 pt tučně je minimální kontrast 3:1 na úrovni AA a 4,5:1 na úrovni AAA. Neinteraktivní grafické prvky a komponenty rozhraní vyžadují kontrast minimálně 3:1 vůči sousedním barvám. Tato pravidla zajišťují čitelnost pro osoby se sníženým zrakem a barevnou vadou.

Nikdy se nespoléhejte na informaci sdělovanou pouze barvou. Pokud například ve formuláři používáte zelenou pro úspěch a červenou pro chybu, přidejte také textový popisek nebo ikonu, protože uživatelé s deuteranopií nerozlišují červenou od zelené. K ověření kontrastu používejte nástroje jako WebAIM Contrast Checker nebo DevTools v prohlížeči. Chrome DevTools má vestavěný kontrol kontrastu zobrazující poměr a shodu s WCAG přímo v inspektoru prvků.

Design s ohledem na přístupnost

Přístupný design nemusí být nudný. Mnoho moderních designových palet splňuje kritéria kontrastu WCAG i s vizuální přitažlivostí. Tmavý text na světlém pozadí je obecně přístupnější než světlý text na tmavém pozadí. Vyhněte se textu přes obrázky, pokud nepoužíváte poloprůhlednou vrstvu zajišťující dostatečný kontrast. U interaktivních prvků jako tlačítka a odkazy věnujte pozornost kontrastu ve všech stavech: normální, hover, fokus a aktivní.

Typografie hraje v přístupnosti klíčovou roli. Používejte písma navržená pro čitelnost na obrazovce s jasným rozlišením podobných znaků jako l, 1 a I. Minimální velikost textu pro tělo obsahu by měla být 16 px s výškou řádku 1,5 pro optimální čitelnost. Vyhněte se kurzívě u velkých bloků textu a nepoužívejte výhradně velká písmena pro věty, protože se hůře čtou. Umožněte uživatelům zvětšit text až o 200 % bez ztráty obsahu nebo funkčnosti.

Čtečky obrazovky

Jak fungují čtečky obrazovky

Čtečka obrazovky je software, který interpretuje obsah obrazovky a prezentuje jej uživateli prostřednictvím syntetizované řeči nebo braillského řádku. Mezi nejpopulárnější čtečky obrazovky patří NVDA zdarma pro Windows, JAWS komerční pro Windows, VoiceOver vestavěný v macOS a iOS a TalkBack vestavěný v Androidu. Čtečky obrazovky se při pochopení struktury a účelu obsahu spoléhají na sémantiku HTML a atributy ARIA. Proto je správné používání HTML prvků pro přístupnost klíčové.

Uživatelé čteček obrazovky nečtou stránky lineárně tak, jak vizuálně skenujeme my. Používají nadpisy k navigaci podle struktury obsahu, seznamy k procházení položek, orientační oblasti k přesunu mezi sekcemi a tabulátor k navigaci mezi interaktivními prvky. Proto je správná hierarchie nadpisů h1 až h6 klíčová, protože uživatelé čteček obrazovky používají nadpisy jako obsah pro navigaci podobně, jako my používáme vizuální přehled stránky.

Testování se čtečkami obrazovky

Testování webu se čtečkou obrazovky odhalí problémy, které nejsou viditelné při vizuální kontrole. K další analýze použijte nástroj na kontrolu webu. Zapněte VoiceOver na macOS pomocí Command+F5 a procházejte web pouze pomocí klávesnice. Poslouchejte, jak čtečka obrazovky oznamuje každý prvek, a ověřte, že jsou popisky smysluplné a struktura obsahu logicky prezentovaná. Na Windows nainstalujte bezplatné NVDA a zopakujte stejný test. Každá stránka by měla mít smysluplný titulek stránky, jasnou strukturu nadpisů a informativní popisky pro všechny interaktivní prvky.

Automatizované nástroje jako axe DevTools, accessibility audit v Lighthouse a evaluator WAVE dokážou odhalit mnoho technických problémů, ale nemohou nahradit ruční testování. Automatizované nástroje najdou chybějící atributy alt, problémy s kontrastem a chyby ARIA, ale nedokážou posoudit, zda je alt text skutečně popisný, zda je pořadí fokusu logické, nebo zda jsou chybové zprávy formuláře srozumitelné. Pro nejlepší výsledky kombinujte automatizované a ruční testování.

Česká legislativa k přístupnosti

Zákon o elektronických komunikacích a zákon o ochraně před diskriminací osob se zdravotním postižením v České republice pokládají základy pro digitální přístupnost. Státní instituce a veřejné podniky jsou povinny zpřístupnit své weby podle standardu WCAG 2.1 AA. Soukromý sektor nemá výslovnou zákonnou povinnost, ale zákon o ochraně spotřebitele a antidiskriminační předpisy lze vykládat i v kontextu digitální přístupnosti.

Evropská směrnice o přístupnosti webového obsahu, která je součástí legislativního rámce EU, dále posiluje požadavky na přístupnost v České republice. Firmy plánující působení na trhu EU už nyní musí brát v úvahu European Accessibility Act, který od roku 2025 vyžaduje přístupnost digitálních produktů a služeb. Proaktivní přístup k přístupnosti není jen zákonnou povinností, ale také konkurenční výhodou, protože ukazuje společenskou odpovědnost a otevírá web širšímu publiku.

Praktické kroky implementace

• Používejte sémantické HTML: header, nav, main, article, section, footer místo obecných prvků div
• Přidejte alt text ke všem informativním obrázkům a prázdný alt k dekorativním obrázkům
• Zajistěte klávesovou navigaci pro všechny interaktivní prvky s viditelným indikátorem fokusu
• Zkontrolujte barevný kontrast pomocí WebAIM Contrast Checker pro všechny kombinace textu a pozadí
• Označte jazyk stránky atributem lang na prvku html pro správnou syntézu řeči
• Používejte popisky (label) pro všechna pole formuláře a propojte je atributem for
• Přidejte odkaz pro přeskočení navigace na začátek každé stránky
• Testujte se čtečkou obrazovky alespoň jednou měsíčně
• Spusťte accessibility audit v Lighthouse a opravte všechny zjištěné problémy
• Vzdělávejte tým o přístupnosti, protože je to odpovědnost všech, ne jen vývojářů

Závěr

Webová přístupnost je základní aspekt kvalitního webového vývoje, který zajišťuje, že váš web je použitelný pro všechny lidi bez ohledu na jejich schopnosti. Implementace směrnic WCAG, správné používání atributů ARIA, zajištění dostatečného barevného kontrastu a testování se čtečkami obrazovky jsou klíčovými kroky k přístupnému webu. Přístupnost není jednorázový projekt, ale nepřetržitý proces, který by měl být integrován do každého aspektu designu a vývoje. U BeoHosting podporujeme přístupnost jako důležitou součást profesionální webové prezentace a naše hostingové balíčky jsou optimalizovány pro rychlé načítání, které je pro uživatele asistivních technologií klíčové.