Přístupné kontaktní formuláře a evropský akt o přístupnosti

Kontaktní formulář je často jedinými dveřmi mezi návštěvníkem a vaší firmou. Pokud lze tyto dveře otevřít jen myší, dobrým zrakem a trpělivostí k vyřešení rozmazané obrázkové hádanky, někteří lidé prostě zůstanou venku. Od poloviny roku 2025 už nejde jen o otázku použitelnosti: pro mnoho firem prodávajících spotřebitelům v EU se z toho stala otázka právní.

Na co se evropský akt o přístupnosti vztahuje

Evropský akt o přístupnosti (směrnice (EU) 2019/882) se použije od 28. června 2025. Stanoví požadavky na přístupnost pro určité výrobky a služby nabízené spotřebitelům – mimo jiné elektronický obchod, bankovní služby pro spotřebitele, e-knihy, elektronické komunikace a části osobní dopravy. U webu to znamená e-shop nebo bankovní službu jako celek, včetně formulářů, kterými vás zákazníci kontaktují, kladou dotazy nebo si stěžují. Mikropodniky, které poskytují služby, jsou vyňaty: podniky s méně než deseti zaměstnanci a ročním obratem nebo bilanční sumou nejvýše 2 miliony EUR. Nabídky určené čistě jiným podnikům jsou zpravidla mimo jeho působnost.

Každý členský stát provedl směrnici do vnitrostátního práva. V Německu jde o Barrierefreiheitsstärkungsgesetz (BFSG), v Polsku o zákon z roku 2024 o zajištění souladu určitých výrobků a služeb s požadavky na přístupnost. Dozorové orgány a sankce se v jednotlivých zemích liší, ale technické měřítko je v zásadě stejné: v praxi evropská norma EN 301 549, která zase vychází z Web Content Accessibility Guidelines (WCAG).

Proč se to vyplatí i bez zákonné povinnosti

Možná je vaše firma vyňata nebo obsluhujete pouze jiné firmy. Přístupné formuláře se přesto vyplatí, a to z prostého důvodu: každý, kdo to vzdá v polovině, je poptávka, kterou nikdy nedostanete. Úpravy, které pomáhají uživateli čtečky obrazovky, pomáhají i tomu, kdo vyplňuje formulář na telefonu ve vlaku, na ostrém slunci, se zlomeným zápěstím nebo v cizím jazyce. Jasné popisky a užitečná chybová hlášení znamenají méně opuštěných formulářů pro všechny – a žádné z nich neoslabuje vaši ochranu proti spamu.

Praktický kontrolní seznam s odkazy na WCAG 2.2

• Viditelné popisky propojené se vstupy (1.3.1, 3.3.2): každé pole má viditelný popisek propojený s ním pomocí for/id. Samotný placeholder není popisek – zmizí, jakmile člověk začne psát.
• Chybová hlášení, která vysvětlují nápravu (3.3.1, 3.3.3): uveďte pole, řekněte, co je špatně a jak to opravit – textem, ne jen červeným rámečkem. „Zadejte prosím e-mailovou adresu ve tvaru name@example.com“ je lepší než „Neplatný vstup“.
• Plné ovládání klávesnicí (2.1.1, 2.1.2): každé pole, zaškrtávací políčko, CAPTCHA i odesílací tlačítko jsou dosažitelné a ovladatelné klávesami Tab, mezerník a Enter, bez pastí klávesnice.
• Viditelný fokus (2.4.7): vždy je vidět, které pole je aktivní. Odstranění obrysu fokusu prohlížeče bez náhrady toto kritérium nesplňuje.
• Dostatečný kontrast (1.4.3): text, popisky a chybová hlášení mají vůči pozadí kontrastní poměr alespoň 4,5:1 (3:1 u velkého textu).
• Velikost cíle (2.5.8): tlačítka, zaškrtávací políčka a odkazy mají alespoň 24 × 24 pixelů CSS nebo kolem sebe dostatek místa.
• Alternativy ke CAPTCHA (1.1.1) a přístupné ověřování (3.3.8): 1.1.1 vyžaduje textovou alternativu a CAPTCHA ve více než jedné smyslové formě; 3.3.8 se striktně vzato týká přihlašovacích kroků, ale jeho myšlenka platí i zde – hádanka, jako je přepisování zkreslených písmen nebo řešení příkladu, by neměla být jedinou cestou dál. Nabídněte alternativu nebo použijte metodu, která žádnou hádanku nepotřebuje.
• Honeypoty skryté před asistenčními technologiemi: pole-past dostane na svém obalu aria-hidden="true" a tabindex="-1", takže se do něj uživatelé čteček obrazovky a klávesnice nikdy nedostanou.

CAPTCHA a honeypoty: kde se ochrana proti spamu potkává s přístupností

Striktně vzato se kritérium 3.3.8 týká přihlašovacích a ověřovacích kroků, nikoli kontaktních formulářů. Myšlenka za ním se však dobře přenáší: psaní zkreslených písmen, řešení příkladu nebo vybírání semaforů z mřížky obrázků některé lidi zcela vylučuje. Možnosti, které obvykle fungují bez jakékoli hádanky – například Cloudflare Turnstile, Friendly Captcha, honeypot v kombinaci s časovou kontrolou nebo filtrování na straně serveru jako Akismet –, udrží spam venku, aniž by po návštěvnících chtěly cokoli dokazovat. Honeypot je přátelský jen tehdy, je-li skutečně neviditelný, a to i pro čtečky obrazovky a uživatele klávesnice:

<div class="hp" aria-hidden="true">
  <label for="hp-website">Toto pole nechte prázdné</label>
  <input type="text" id="hp-website" name="website"
         tabindex="-1" autocomplete="off">
</div>
<!-- CSS: .hp { position: absolute; left: -10000px; } -->

Otestujte svůj formulář za patnáct minut

1. 1Odložte myš a vyplňte celý formulář pouze klávesnicí. Dostanete se ke každému poli a k odesílacímu tlačítku a vidíte vždy, kde se nacházíte?
2. 2Odešlete formulář prázdný a pak s chybnou e-mailovou adresou. Zobrazí se chyby jako text u správného pole a je jasné, co dělat?
3. 3Otevřete stránku na telefonu nebo zvětšete prohlížeč na 200 %. Je vše čitelné, dají se tlačítka snadno stisknout a nezakrývá cookie lišta nebo chatovací widget odesílací tlačítko?
4. 4Zapněte čtečku obrazovky (VoiceOver, NVDA nebo TalkBack) a poslouchejte: je každé pole oznámeno se svým popiskem a zůstává honeypot zticha?
5. 5Spusťte automatickou kontrolu, například axe-core. Rychle najde chybějící popisky a problémy s kontrastem, ale ne všechno – výše uvedené ruční kroky jsou stále potřeba.

Pokud byste raději začali přehledem, formexposed se na vaše veřejné formuláře podívá zvenčí, aniž by cokoli odesílal. Jeho kontroly přístupnosti spouštějí axe-core na každém formuláři, označují CAPTCHA bez přístupné alternativy a honeypoty, které čtečky obrazovky oznamují, a prohlížejí formulář na telefonu – dotykové cíle, překryvné prvky zakrývající odesílací tlačítko, vodorovné posouvání. Bezplatná kontrola ukazuje celkovou úroveň; tyto podrobnosti jsou v úplném reportu. Je to dobrý výchozí bod pro výše uvedený seznam, nikoli náhrada testování se skutečnými lidmi.