Základy WCAG 2.1 standardů pro webové designéry
Stručný přehled nejdůležitějších pokynů pro tvorbu přístupných webů. Všechno, co potřebujete vědět.
Navigace a struktura — jak na přístupný web design
Správná navigace a jasná struktura webu jsou základem přístupnosti. Když návštěvník ví, kde je a kam se chce dostat, zvyšuje se jeho důvěra. Platí to zejména pro lidi se zdravotním postižením, kteří se často spoléhají na pomocné technologie. V tomto průvodci vám ukážeme, jak vytvořit web, který je logický a snadný na orientaci pro každého.
Hierarchie a sémantika — kostrou webu
Není to jen o vzhledu. Struktura webu musí být logická i pro čtečky obrazovky a ostatní asistivní technologie. Používáme správné HTML prvky — heading tagy (h1 až h6), seznamy a sekce — aby stroj rozuměl obsahu stejně jako člověk.
Důležité je mít právě jednu h1 značku na stránce. To je nadpis, kterým říkáme: tady je sumarizace všeho, co následuje. Všechno ostatní je h2, h3 a tak dál. Neskakujte ze h2 rovnou na h4 — čtečky obrazovky si myslí, že chybí obsah.
Prakticky to znamená: když máte sekci o službách, nepoužívejte div a bold text. Udělejte z toho správný heading. Tímhle způsobem tvoříte mapu, kterou se lze orientovat.
Navigační menu — aby všichni věděli, kam jít
Navigace by měla být na každé stránce na stejném místě. Nechte ji v záhlaví, v patičce, nebo na boku — ale zůstaňte konzistentní. Uživatelé, zejména ti se zrakovou vadou, si vytvářejí očekávání. Když se změní umístění, je to dezorientující.
Používejte sémantické HTML — nav prvek pro navigaci, ul a li pro seznamy položek. Přidejte aria-label=”Hlavní navigace”, aby čtečky věděly, o co jde. Barvy odkazů by měly být zřetelně rozlišeny od běžného textu — ne jen podtržením.
Zkušenost nám říká: při testování s uživateli na vozíku nebo se slabozrakostí se navigace s jasným kontraste a viditelným zaměřením (focus) chová nejlépe. To nejsou detaily — to je základ.
Zkraťte cestu — skip links
Skip links (přeskočit na obsah) jsou odkazy na začátku stránky, které jsou skryté, ale viditelné při tabelátoru. Umožňují uživatelům čteček obrazovky přeskočit opakující se navigaci a jít rovnou k hlavnímu obsahu. Zdá se to jednoduché, ale dělá to obrovský rozdíl v rychlosti navigace. Pokud má váš web 40 navigačních odkazů, člověk se čtečkou nechce projít všechny při každé návštěvě nové stránky.
Technicky: Dejte na začátek HTML odkaz s href=”#main-content” a dajte jemu visibility: hidden. Při focusu udělejte visibility: visible. To je všechno.
Orientační body — kde se nacházím?
Mapa webu (sitemap) a breadcrumbs (drobečky) nejsou jen grafické prvky. Jsou to návěští pro návštěvníka. “Jste v: Domů > Produkty > Rukavice > Zimní rukavice” — to je jasné. Uživatel ví, kde je v hierarchii.
Používejte aria-current=”page” na aktivní stránku v navigaci. Čtečky obrazovky pak řeknou: “Toto je aktuální stránka.” To uživateli pomůže orientovat se, kde se nachází.
Landmarks (orientační body) jsou prvky jako main, header, footer, aside. Čtečky obrazovky je identifikují a umožňují uživatelům skákat mezi nimi. Místo toho, aby si poslouchali celou stránku, si řeknou “skočit na obsah” a jsou tam. To šetří čas.
Responzivní menu — stejně přístupné na mobilu i desktopu
Menu na mobilu se často skrývá za hamburger ikonou. To je OK, ale musí být označeno správně. Použijte button prvek s aria-expanded=”true/false” a aria-controls=”menu-id”. Když uživatel rozbalí menu, ví, že se něco změnilo.
Klávesová navigace je kritická. Tabelátor by měl procházet všechny interaktivní prvky v logickém pořadí. Escape by měl zavřít rozbalené menu. To nejsou nice-to-have funkce — to je standard.
Na desktopech se rádi díváme na rozbalovací menu. Při focusu se zobrazí submenu. Na mobilu to ale tabelátorem nefunguje dobře. Zvažte jednoduché řešení: položky submenu prostě vypište pod hlavní položku. Je to o něco delší, ale funguje všude.
Poznámka
Informace v tomto článku jsou určeny pro vzdělávací účely a slouží jako úvod do problematiky. Požadavky na přístupnost se mohou lišit v závislosti na typu webu, právní jurisdikci a standardech, které se rozhodnete dodržovat. Vždy proveďte testování s skutečnými uživateli a konzultujte aktuální WCAG pokyny pro nejlepší výsledky.
Závěr — přístupnost je dar všem
Vytvářet web s jasnou strukturou a logickou navigací není dodatečná práce — je to základní standard. Když to uděláte správně, zvýšíte usability pro všechny. Starší lidé, uživatelé na pomalém internetu, nebo ti na mobilech — všichni profitují z webu, který je logicky uspořádaný.
Nezapomínejte: přístupnost není cílová skupina, která chce něco navíc. Je to standard, který by měl být součástí každého projektu od začátku. Investice do správné struktury se vrátí v podobě lepší uživatelské zkušenosti, vyšší konverze a právního klidu.
Přečtěte si také
