Checklist přístupnosti webu

Chcete vědět, jestli je váš web přístupný? Checklist přístupnosti vám pomůže projít krok za krokem to nejdůležitější, co má smysl kontrolovat – i bez toho, abyste byli odborníkem na WCAG. Zjistíte, zda váš web splňuje základní požadavky přístupnosti podle WCAG 2.1. Checklist není kompletní audit, ale o praktický rozcestník základních testů –⁠ co zkontrolovat a jak.

Pokud si chcete nejdřív projít úplné základy, doporučuji začít článkem Základní test přístupnosti webu: Praktický návod pro každého. Zjistíte, jak začít s testováním přístupnosti webu. Až projdete základy, můžete pokračovat tímto checklistem přístupnosti, rozšířeným seznamem věcí, které má smysl kontrolovat.

Nástroje zdarma pro testování přístupnosti:

  • axe DevTools – doplněk do prohlížeče (axe pro Chrome, axe pro Firefox)
  • Silktide Accessibility Checker – doplněk do Chrome (Silktide)
  • Web Developer – rozšíření do Firefoxu (Web Developer)
  • WAVE – online nástroj
  • Developer Tools – nástroje pro vývojáře přímo v Chrome nebo Firefoxu

Automatizované nástroje vám pomohou odhalit řadu problémů. Některé testy ale musíte tak jako tak udělat ručně a zamyslet se nad nimi. Třeba jak web vnímá člověk, který používá jen klávesnici, nebo čtečku obrazovky, nebo si stránku prohlíží na mobilu za zhoršených podmínek.

Začněte u toho, co zvládnete sami. Nemusíte mít vše dokonalé hned. Každý krok směrem k přístupnějšímu webu se počítá. I malá změna může znamenat velký rozdíl pro někoho, kdo jinak naráží na bariéry.

Barvy a vzhled

Dokážete odlišit důležité informace (např. odkazy) i bez barev? Podívejte se na stránku s použitím barevného filtru například v nástroji Silktide Accessible Checker do Chrome. Více informací o kritériu 1.4.1.

Je text čitelný na prudkém světle nebo v šeru? A je čitelný pro slabozraké? Zkontrolujte barevný kontrast jednotlivých prvků. Více o kritériích 1.4.3 a 1.4.11.

Dává stránka smysl, i když vypnete styly? Může si uživatel stránku přestylovat podle svého? Může si zvětšit text? Vyzkoušejte si vypnout styly na své stránce pomocí Web Developer extension. Více informací o kritériích 1.3.2, 1.4.4 a 1.4.12.

Zobrazuje se stránka dobře na různých zařízeních? Neztrácí se např. při zobrazení na mobilu část informací? Není potřeba stránku posouvat do stran? Otestujte si web na více zařízeních s různě velkou obrazovkou nebo pomocí Developer tools ve vašem prohlížeči. Více informací o kritériu 1.4.10.

Obrázky

Mají všechny obrázky atribut ALT? Je alternativní popis smysluplný? Mají čistě dekorativní obrázky atribut ALT prázdný? A pokud je na obrázku odkaz, popisuje ALT účel odkazu?

Zakažte zobrazování všech obrázků (třeba pomocí Web Developer extension) a podívejte se, jestli stránka i bez nich dává smysl. Další informace o alternativních popisech a kritériu 1.1.1 jsou i v článku Jak správně používat alternativní text u obrázků.

Mají všechny důležité informace textovou podobu? Nejsou na stránkách žádné obrázky, které by nesly důležitou textovou informaci? Vypněte zobrazování všech obrázků a podívejte se, jestli jsou na stránce všechny důležité informace, které tam mají být. Další informace o kritériu 1.4.5.

Ovládání

Je možné procházet a ovládat stránku s použitím pouze klávesnice? Dostanete se na všechny prvky, na které potřebujete (položky menu, odkazy, formuláře)? Vyzkoušejte si to. Podrobnosti ke kritériu 2.1.1

Je prvek, který má tzv. „fokus“ (tedy je vybraný) dostatečně zvýrazněný? Vyzkoušejte si procházet stránku pomocí klávesnice a ověřte si, že vždy víte, kde se nacházíte a co máte vybrané. Podrobnosti ke kritériu 2.4.7

Můžete se pomocí klávesnice dostat rychle na menu a hlavní obsah? Nebo musíte projít mnoho odkazů, abyste se tam dostali? Ověřte si, že máte na začátku každé stránky tzv. přeskakovací odkazy. Více informací o kritériu 2.4.1

Aktivují se při procházení klávesnicí prvky ve smysluplném pořadí? Nebo skákají „bez ladu a skladu“? projděte si svoji stránku pomocí klávesnice a zkontrolujte pořadí prvků. Podrobnosti ke kritériu 2.4.3

Máte na webu zvuk, který se začne automaticky přehrávat? Je možné ho vypnout nebo ztlumit přímo na webu (bez změny nastavení zvuku v systému)? Ověřte si to. Pozor, kritérium 1.4.2 je blocker. Bez jeho splnění nemůžete prohlásit, že váš web splňuje požadavky na shodu

Dostanu se z každého prvku stránky jen s pomocí klávesnice? Vyzkoušejte, jestli vás nějaký vložený prvek nechytí do pasti. Pozor, kritérium 2.1.2 je blocker. Bez jeho splnění nemůžete prohlásit, že váš web splňuje požadavky na shodu

Máte na webu obsah, který stroboskopicky blikal? Raději to ověřte, ať nějakému uživateli nezpůsobíte epileptický záchvat. Pozor, kritérium 2.3.1 je také blocker. Bez jeho splnění nemůžete prohlásit, že váš web splňuje požadavky na shodu

Je na stránce automaticky se pohybující nebo měnící obsah? Může uživatel pohyb a změny zastavit? Vyzkoušejte, jestli máte plně pod kontrolou to, co se na stránce hýbe a mění a můžete to zastavit. Pozor, kritérium 2.2.2 je rovněž blocker. Bez jeho splnění nemůžete prohlásit, že váš web splňuje požadavky na shodu

Srozumitelnost

Obsahuje stránka nadpisy? A dají se nadpisy použít pro navigaci na stránce? Zanořují se do sebe správně hierarchicky? Popisují nadpisy dostatečně, jaké informace jsou v následující sekci? Vyzkoušejte si sami, jestli se jste schopni na stránce zorientovat jen podle nadpisů. Více informací o nadpisech a kritériu 2.4.6

Popisuje text odkazu smysluplně, kam odkaz vede? Představte si, že vám stránku někdo čte (třeba Siri), a ověřte si, že se v odkazech orientujete. Více informací o odkazech a kritériu 2.4.4.

Pokud se nejedná o ryze odborný text, pochopí ho i žák druhého stupně základní školy? Je text dostatečně strukturovaný do odstavců? Nepoužíváte zbytečně komplikované věty? Kritérium 3.1.5 je sice úrovně AAA, ale samotný obsah je často tou největší bariérou pro používání webu a získávání informací.

Formuláře

Je jasné, co se má do kterého pole formuláře zadat? A v jakém formátu? Vám to může být jasné, vyzkoušejte to ale s reálnými uživateli. Více informací o kritériu 3.3.2

Je uživatel dostatečně upozorněn na akce, ze kterých mu vyplývají právní nebo finanční důsledky? Probíhá kontrola správnosti dat? Usnadňují formuláře zadávání? Vyzkoušejte si průchod vašimi formuláři na vlastní kůži. Více informací o kritériích 3.3.1, 3.3.3 a 3.3.4

Zjistili jste problém? Pomůžeme vám ho rozklíčovat!

Narazili jste na chybu, ale nevíte, co s ní? My vám ji pomůžeme přesně pojmenovat a vysvětlíme, jak by to mělo správně fungovat.

  • Najdeme příčinu problému.
  • Popíšeme ho srozumitelně pro vás i vaše kodéry.
  • Ukážeme, jak vypadá správné řešení.

Ozvěte se nám a posuňme společně váš web k lepší přístupnosti