Přístupnost (Accessibility)

Příklady z praxe

1. 01

   E-mailové pole s pevným popiskem

   Registrace obsahuje e-mailové pole, ale popisek je jen placeholder. Uživatel se čtečkou obrazovky slyší nejasnou informaci a po vyplnění pole zmizí nápověda i vizuálně. Propojený element label dá poli stabilní název, který funguje pro myš, klávesnici i asistivní technologie.

   <label for="email">E-mail</label>
   <input id="email" name="email" type="email" autocomplete="email">

2. 02

   Košík otevřitelný klávesnicí

   E-shop otevře košík po kliknutí na barevný blok vytvořený z divu. Myš funguje, ale klávesnice se na prvek nedostane a uživatel nemůže pokračovat v nákupu. Nativní button doplní roli, focus i klávesové ovládání bez ručního napodobování prohlížeče.

   <button type="button" aria-expanded="false">
     Otevřít košík
   </button>

Časté omyly

MýtusPřístupnost stačí vyřešit pluginem nebo automatickou opravou.

Ve skutečnostiPlugin může pomoci s dílčí kontrolou, ale nezmění špatnou informační architekturu, nejasné texty ani neovladatelné komponenty. Přístupnost musí být součástí návrhu, implementace i testování.

MýtusPřístupnost kazí vizuální design.

Ve skutečnostiPřístupnost nevyžaduje ošklivé rozhraní. Požaduje čitelnost, předvídatelnost a ovladatelnost, což se dá spojit s kvalitní vizuální identitou.

Časté dotazy

Týká se přístupnost jen lidí se zrakovým postižením?

Přístupnost se netýká jen nevidomých uživatelů. Přístupný návrh pomáhá lidem se slabším zrakem, poruchou barvocitu, omezenou motorikou, dyslexií, dočasným úrazem nebo situací, kdy nelze použít myš či zvuk. Přístupnost zároveň zlepšuje běžné UX: jasné popisky, předvídatelné ovládání a čitelný kontrast snižují chybovost u všech uživatelů.

Kdy má přístupnost používat ARIA místo běžného HTML?

ARIA má smysl hlavně tam, kde nativní HTML neumí vyjádřit potřebný stav nebo složitější widget. Přístupnost obvykle začíná správným elementem, například button, nav, label nebo heading. Špatně použitá ARIA může výsledek zhoršit, protože asistivní technologii slíbí chování, které komponenta ve skutečnosti nemá.

Stačí pro přístupnost zelený výsledek v automatickém nástroji?

Automatický audit přístupnosti nestačí jako finální důkaz kvality. Nástroj rychle odhalí část technických chyb, například chybějící popisky, nízký kontrast nebo neplatné atributy. Ruční testování musí ověřit pořadí focusu, ovládání klávesnicí, srozumitelnost instrukcí, dynamické změny obsahu a reálné dokončení úkolu uživatelem.

Co u přístupnosti znamenají úrovně WCAG A, AA a AAA?

Úrovně WCAG A, AA a AAA označují rostoucí náročnost kritérií. Úroveň A pokrývá základní překážky, úroveň AA je běžný cíl pro mnoho veřejných a komerčních webů a úroveň AAA je velmi přísná. Přístupnost projektu se obvykle plánuje podle konkrétních právních, obchodních a uživatelských požadavků, ne podle pocitu.

Zdroje

1. Web Content Accessibility Guidelines (WCAG) 2.2(otevře se v novém okně)W3C, 2023
2. Web Accessibility Initiative (WAI)(otevře se v novém okně)W3C
3. Accessibility(otevře se v novém okně)MDN Web Docs
4. HTML Standard(otevře se v novém okně)WHATWG
5. ARIA Authoring Practices Guide(otevře se v novém okně)W3C

Související pojmy

• Uživatelské testováníUživatelské testování je výzkumná metoda, při které skuteční lidé z cílové skupiny plní na produktu předem připravené úkoly a moderátor sleduje, kde narazí na potíže. Cílem není zjistit názor uživatele, ale pozorovat jeho chování: kde zaváhá, co si špatně vyloží a kde úkol vzdá. Výstupem je seznam konkrétních problémů použitelnosti.
• Kontrast textuKontrast textu je měřitelný rozdíl jasu mezi barvou písma a barvou pozadí, vyjádřený kontrastním poměrem od 1:1 do 21:1. Metodika WCAG požaduje pro běžný text alespoň 4,5:1 a pro velký text 3:1 na úrovni AA. Nízký kontrast znesnadňuje čtení lidem se slabším zrakem i uživatelům na slunci.
• Formulářová validaceFormulářová validace je kontrola, zda data zadaná uživatelem do formuláře odpovídají očekávanému formátu, rozsahu a obchodním pravidlům, ještě než je aplikace zpracuje nebo uloží. Probíhá ve dvou vrstvách: v prohlížeči kvůli rychlé zpětné vazbě a na serveru kvůli bezpečnosti a integritě dat, protože klientskou kontrolu lze obejít.
• 3D model3D model je digitální reprezentace objektu nebo prostoru ve třech rozměrech, složená z geometrie, materiálů a často i textur, animací či fyzikálních vlastností. Používá se v hrách, filmech, průmyslovém návrhu, architektuře, e-commerce i simulacích, kde software z modelu počítá zobrazení nebo další data.
• A/B testováníA/B testování je řízený experiment, který porovnává dvě varianty stránky, funkce, ceny nebo sdělení na podobných skupinách uživatelů. Měří předem zvolenou metriku, například konverzi nebo retenci, a pomáhá rozhodnout, zda změna skutečně zlepšuje výsledek, nebo zda pozorovaný rozdíl mohl vzniknout náhodou.
• AcquirerAcquirer je finanční instituce nebo platební poskytovatel, který obchodníkovi umožňuje přijímat karetní platby a předává transakce do karetních schémat. V online platbách stojí mezi platební bránou, vydavatelem karty a obchodníkem, zajišťuje autorizaci, zúčtování, vyplacení peněz a část řízení rizik.
• Adaptive IconAdaptivní ikona je formát ikony aplikace na Androidu, který se místo jedné hotové bitmapy skládá z oddělených vrstev: pozadí a popředí. Systém výsledný tvar sám ořízne podle masky výrobce zařízení a může vrstvy animovat nebo přebarvit. Vývojář tak dodá jeden zdroj a launcher z něj vytvoří kruh, čtverec i squircle.
• AI etikaAI etika je obor, který zkoumá, jaké dopady mají systémy umělé inteligence na lidi, a formuluje pravidla pro jejich návrh, trénink a provoz. Řeší zaujatost dat, transparentnost rozhodování, ochranu soukromí, odpovědnost za chybu i bezpečnost modelu. Ve firemní praxi se promítá do interních politik, dokumentace modelů a povinností podle regulace typu AI Act.