Checklist přístupnosti

00:00:00

Přístupnost se nejlépe ověřuje ještě před tím, než stránku zveřejníš. Tento checklist jsem sestavil z vlastní každodenní zkušenosti nevidomého uživatele a tvůrce webu. Projdi ho pro každou stránku, kterou publikuješ – odhalíš problémy dřív, než na ně narazí skuteční uživatelé.

Struktura a HTML

  • Stránka má atribut lang na tagu <html> se správným jazykovým kódem (např. lang="cs").
  • Existuje právě jeden <h1> – název stránky.
  • Nadpisy tvoří logickou hierarchii bez přeskočených úrovní (<h1> → <h2> → <h3>).
  • Jsou použity sémantické tagy: <nav>, <main>, <header>, <footer>, <article>, <section>.
  • Je přítomen skip link jako první prvek v <body>.
  • Stránka se zobrazí i bez CSS (strukturovaně, ne krásně).

Klávesnice a fokus

  • Celá stránka jde ovládat pouze klávesnicí (bez myši).
  • Fokus je vždy viditelný – neskrývej ho přes outline: none v CSS bez alternativy.
  • Pořadí fookusu odpovídá vizuálnímu pořadí prvků na stránce.
  • Žádné „foukusové pasti\" – z každého místa lze odejít klávesou Tab nebo Escape.
  • Interaktivní prvky (tlačítka, odkazy, pole) reagují na klávesu Enter a mezerník.

Obrázky a média

  • Každý obrázek má atribut alt.
  • Informativní obrázky mají výstižný alt text popisující obsah a kontext.
  • Dekorativní obrázky mají prázdný alt="" (ne chybějící alt).
  • Klikatelné obrázky mají alt popisující funkci (ne obsah): „Přejít na domovskou stránku\".
  • Videa mají titulky nebo textový přepis.

Formuláře

  • Každé formulářové pole má viditelný a správně přiřazený <label>.
  • Povinná pole jsou označena atributem required a vizuálně i textově (ne jen hvězdičkou).
  • Chybové hlášky jsou propojeny s příslušným polem pomocí aria-describedby.
  • Oblast pro zprávy (úspěch/chyba) má aria-live="assertive" nebo role="alert".
  • Formulář lze odeslat klávesou Enter.
  • Placeholder není náhradou za label – label je vždy přítomen.

Barvy a kontrast

  • Kontrast textu vůči pozadí splňuje WCAG AA: alespoň 4,5 : 1 pro normální text, 3 : 1 pro velký text.
  • Informace není přenášena jen barvou – přidej ikonu, text nebo tvar.
  • Interaktivní prvky jsou rozlišitelné od okolního textu i jinak než barvou.
  • Stránka funguje i v režimu vysokého kontrastu operačního systému.

Odkazy a tlačítka

  • Text odkazu dává smysl sám o sobě, bez kontextu okolního textu. Žádné „Klikni zde\" nebo „Číst dál\".
  • Odkaz a tlačítko jsou odlišeny podle funkce: odkaz = přechod, tlačítko = akce.
  • Odkaz otevírající nové okno (target="_blank") na to uživatele upozorní v textu nebo přes aria-label.
  • Tlačítka s pouze ikonou nebo emoji mají aria-label popisující funkci.

ARIA atributy

  • ARIA se používá jen tam, kde nestačí nativní HTML.
  • Žádný element nemá role přidanou „navíc\" (např. role="button" na skutečném <button>).
  • Dynamicky se měnící oblasti mají aria-live s vhodnou hodnotou (polite nebo assertive).
  • Rozbalovací prvky mají aria-expanded s aktuálním stavem.
  • Sekce jsou propojeny s nadpisy přes aria-labelledby.

Jak stránku otestovat

Automatické nástroje odhalí jen část problémů – lidský test (zvláště s odečítačem) odhalí zbytek.

Automatické nástroje

  • axe DevTools – rozšíření prohlížeče, prověří stránku podle WCAG. Zdarma dostupná základní verze.
  • Lighthouse – záložka Accessibility v DevTools Chrome. Skóre 0–100, konkrétní doporučení.
  • WAVE – online nástroj na wave.webaim.org, vizuálně zobrazí problémy přímo na stránce.

Ruční test – klávesnice

  1. Odlož myš.
  2. Stiskni Tab a procházej stránku. Vidíš, kde je fokus? Dostaneš se všude?
  3. Aktivuj tlačítka a odkazy klávesou Enter. Funguje to?
  4. Zkus skip link – přeskočí fokus na hlavní obsah?

Ruční test – VoiceOver

  1. Zapni VoiceOver (Cmd + F5 na Macu).
  2. Nechej si přečíst nadpisy stránky (VoiceOver rotor – Ctrl + Alt + U).
  3. Projdi všechny formulářové pole – přečte VoiceOver jejich popisky?
  4. Klikni na obrázek – co VoiceOver přečte? Je to výstižné?
  5. Projdi seznam všech odkazů – dávají smysl bez kontextu?

Tip od Zdeňka

Zdeněk radí: Tento checklist si projdu pro každou novou stránku, kterou přidávám na web. Nepotřebuji ho přitom fyzicky číst – po čase si ho zapamatuješ a kontrola se stane přirozenou součástí práce. Nejdůležitější test je stále ten nejjednodušší: zavřít oči, zapnout VoiceOver a zkusit stránku normálně používat. Co přitom zažiješ, ti řekne víc než jakýkoli automatický nástroj. Přístupnost není checkbox – je to způsob myšlení. A čím dříve ho zahrneš do tvorby od začátku, tím méně oprav budeš dělat na konci.