Přístupnost na webu

Jako webový vývojář trávím většinu času tím, abych zajistil, že kód je čistý, rychlý a že design je responsivní. Ale je tu jeden aspekt, který je často opomíjen, a přitom by měl být naprostou prioritou: Přístupnost (Accessibility).

Co vlastně ta přístupnost je?

Dělat web, kterej přečte jen zdravej člověk s nejnovějším iPhonem, je prostě špatně. Přístupnost (A11y) není charita, je to profi přístup. Zajišťuje, že každý, bez ohledu na své schopnosti, může používat web. To zahrnuje lidi s různými typy postižení, ale i starší lidi, těhotné ženy nebo třeba cestující s těžkými zavazadly.

Mimo jiné:

  • Lze ovládat bez myši
  • Má dostatečný kontrast barev
  • Má zřetelně viditelný focus
  • Každý důležitý prvek má svoje textové označení, nemá-li text (ikony, obrázky)

Sémantika

Často se ještě zapomíná na tzv. sémantiku. Pokud má nějaký prvek nějakou roli, měl by být správně označený.

Pokud je něco tlačítko, mělo by být <button>, ne <div>. Pro navigační menu použij <nav>, pro hlavní obsah <main>. Ne na všechno jsou speciální značky, takže je někdy třeba použít ARIA atribut role, který třeba umí alert. Přpadně se dá použít i pro prvky, které HTML sice má, ale ne vždy se používají správně. Například <a> by měl být jen pro odkazy, ne pro tlačítka. Jenomože odkaz je někdy tlačítkem.

Můj pohled z praxe

Přiznám se, že na začátku kariéry jsem přístupnost neřešil. Byl jsem zaměřený jen na to, aby to vypadalo dobře a fungovalo. Ale čím déle se v oboru pohybuji, tím více si uvědomuji, že ignorovat třeba správné sémantické značení HTML, dostatečný kontrast barev nebo klávesovou navigaci je prostě profesionální selhání. Když implementuji nový komponent, vždy testuji, zda je plně ovladatelný klávesnicí a zda má správné ARIA atributy. Stal se z toho zvyk a automatický krok v mém workflow. Mačkat tabulátory je totiž místy uklidňující.

A teď ta velká změna z EU

Pokud jste to ještě nezaznamenali, je čas zbystřit. Evropská unie tlačí na to, aby se přístupnost stala povinnou realitou, a to v mnohem širším měřítku. Konkrétně, od 28. června 2025 budou muset weby a mobilní aplikace splňovat minimální požadavky specifikace WCAG 2.1 na úrovni AA.

WCAG (Web Content Accessibility Guidelines) je soubor mezinárodně uznávaných doporučení pro zlepšení přístupnosti webového obsahu. Úroveň AA je považována za standard pro většinu komerčních a vládních webů. To je obrovský krok! Není to jen hezké mít, je to zákonná povinnost. A pro nás vývojáře to znamená jediné: musíme se s WCAG 2.1 seznámit a implementovat jej.

Specifikace je ale příliš formální a pravidla lze jednoduše shrnout tak, že by každý web měl mít:

  • Dostatečný barevný kontrast (min. 4,5:1, pro velké texty 3:1).
  • Možnost ovládání pouze klávesnicí (tj. bez myši).
  • Zřetelně viditelný focus (vizuální zvýraznění prvků).
  • Textové alternativy k obrázkům a ikonám (alt texty).
  • Smysluplné pořadí a struktura obsahu (např. nadpisy, popisy formulářů).
  • Popisné názvy tlačítek a odkazů.
  • Přístupné formuláře (labely, srozumitelné chybové hlášky).
  • Text čitelný i při výrazném zvětšení (například 200%).
  • Konzistentní ovládání a navigace napříč stránkami.
  • Nesmí být použita jen barva pro sdělení informace.
  • Obsah nesmí blikat víc než 3× za sekundu.

Směrnici si můžete přečíst zde.

Závěr

Práce, kterou do přístupnosti vložíte, není jen splnění normy nebo odškrtnutí požadavku EU. Je to investice do uživatelského zážitku pro každého, rozšíření vaší potenciální uživatelské základny a, upřímně, děláte tím správnou věc. Otevřme web každému z nás.