Každý čtvrtý dospělý Američan žije s nějakou formou postižení. Pokud váš formulář není přístupný, odřízli jste čtvrtinu potenciálního publika dřív, než se vůbec dostane k tlačítku odeslat.
Přístupný formulář funguje pro všechny. To znamená uživatele, kteří používají jen klávesnici. Lidi, kteří poslouchají přes odečítač obrazovky. Uživatele se slabým zrakem. Lidi s třesem rukou, kteří potřebují víc času na vyplnění polí. Žádný zvláštní design, žádná další složitost. Jen formulář postavený tak, aby ho všichni tito lidé skutečně mohli použít.
Jasné popisky. Ovládání klávesnicí. Chybové zprávy, které odečítač obrazovky dokáže oznámit. Dostatečný kontrast, aby text přečetli i uživatelé se slabým zrakem. To nejsou doplňkové funkce. To je základ, který WCAG 2.1 AA a americký zákon o zdravotně postižených (ADA) vyžadují od dubna 2026.
Čím se přístupné formuláře liší
Vezměte jakýkoli kontaktní formulář a najdete stále stejné chyby. Textové pole s textem v poli, ale bez viditelného popisku. Zaškrtávací políčko bez vysvětlení, k čemu slouží. Chybová zpráva červeným textem, kterou odečítač obrazovky neoznámí.
Většina formulářů se staví pro uživatele myši a přístupnost se přidává později jako dodatečný nápad. Přístupný formulář funguje opačně. Od začátku počítá s tím, že ho lidé budou používat různě. Někdo myší, někdo jen klávesnicí. Někdo si ho čte, někdo poslouchá odečítač obrazovky.
To mění, jak formulář stavíte. Text v poli bez popisků je k ničemu. Červené hvězdičky bez textu jsou k ničemu. Vizuální rozvržení, které funguje pro uživatele myši, může uživatele klávesnice uvěznit. Přístupný formulář se nestaví hůř. Jen vyžaduje myslet na způsoby ovládání nad rámec myši.
Proč na tom záleží
Zákonný termín. Hlava II zákona ADA vyžaduje WCAG 2.1 AA do 24. dubna 2026. Nedodržování už není riziko. Je to aktuální závazek.
Dopad na podnikání. Návštěvníci s postižením utrácejí skutečné peníze. Přístupný formulář zvyšuje míru dokončení u všech, protože jasné popisky pomáhají všem uživatelům, ne jen lidem s postižením. Zaneprázdněným uživatelům, kteří prolétají web na mobilu v 6 ráno. Pokročilým uživatelům, kteří se pohybují klávesnicí. Všem.
Přínos pro SEO. Vyhledávače upřednostňují stránky, kde jsou interaktivní prvky popsané a ovladatelné klávesnicí. Přístupné formuláře se řadí výš.
Co přístupné formuláře skutečně potřebují
Viditelné popisky u každého pole
Každé vstupní pole potřebuje popisek. Ne text v poli, který zmizí. Ne atribut title. Skutečný popisek přímo na stránce.
Odečítač obrazovky nejdřív přečte popisek a pak oznámí typ pole. "Jméno, textové pole." Uživatel ví, co dělat. Bez popisku uslyší jen "textové pole" a nic víc. Uživatel netuší, co má zadat.
Pro vidoucí uživatele fungují popisky stejně jako na papíře. Říkají, co patří do každého prázdného místa. Zároveň zvětšují klikatelnou plochu. Propojte popisek s polem atributem for a uživatelé mohou kliknout na popisek i na pole a zaměřit ho. Na mobilu na tomto větším cíli ke kliknutí záleží.
Ovládání jen klávesnicí
Mnoho lidí se myši nikdy nedotkne. Motorická postižení, slabý zrak, odečítače obrazovky. Tito uživatelé se pohybují výhradně klávesnicí. Pokud váš formulář potřebuje myš, není přístupný.
Vyzkoušejte to. Odpojte myš. Procházejte formulář jen klávesou Tab, šipkami a Enterem. Měli byste se dostat ke každému poli, vybrat každou možnost a stisknout odeslat, aniž byste pohnuli rukama.
Obrys zaměření musí být viditelný v každém kroku. Žádné neviditelné stavy zaměření. Uživatelé potřebují vědět, kde ve formuláři jsou. A záleží i na pořadí tabulátoru. Pole by měla jít zleva doprava a shora dolů, tak jak se formulář čte. Pokud rozvržení skáče nebo skrývá pole, pořadí tabulátoru se rozbije a uživatelé klávesnice se zaseknou.
Chybové zprávy, které se skutečně ohlásí
Červený text nahoře ve formuláři neznamená pro uživatele odečítače obrazovky nic. Odešle, uslyší ticho a zkusí to znovu. Pak to vzdá.
Propojte chybu s konkrétním polem, kde nastala. Když uživatel odečítače přejde tabulátorem na to pole, chyba se oznámí. A v chybové zprávě napište, co opravit, ne jen "Neplatné." Místo "Neplatný údaj" napište "E-mail musí obsahovat zavináč."
Použijte atributy ARIA, například aria-describedby, k propojení chybové zprávy s polem. Když zaměření dopadne na pole, odečítač obrazovky chybu oznámí automaticky. Žádné hádání.
Čitelný text pro uživatele se slabým zrakem
Světle šedé popisky na bílém pozadí jsou pro člověka se slabým zrakem neviditelné. WCAG 2.1 AA vyžaduje poměr kontrastu 4.5:1 pro běžný text. Tmavý text na světlém pozadí, nebo světlý text na tmavém. Kontrast musí být zřejmý.
Větší text (18 bodů a víc) může mít kontrast 3:1. Všechno ostatní potřebuje 4.5:1. Nástroj na kontrolu kontrastu zabere 5 sekund. Před spuštěním jím proveďte každý popisek, tlačítko a chybovou zprávu.
Nikdy nepoužívejte barvu samotnou k označení povinných polí. Červená hvězdička neznamená nic pro člověka s poruchou barevného vidění. Přidejte vedle pole slovo "povinné". Odečítače obrazovky ho oznámí. Vidoucí uživatelé ho uvidí. Textu rozumí každý.
Pokyny pro přístupnost pole po poli
Textová pole a textové oblasti
Jméno, e-mail, telefon, všechna potřebují popisek přímo nad sebou nebo vedle sebe. Použijte prvek HTML <label> s atributem for, který odpovídá id pole.
Pokud pole očekává konkrétní formát, napište to. "Formát: 555-123-4567" pomáhá všem, zvlášť lidem, kterým lépe vyhovují výslovné pokyny.
Textové oblasti by měly vypadat, že přijmou delší odpovědi. Jednořádkové pole s popiskem "Zpráva" působí jako rychlá odpověď. Vyšší pole říká "napiš víc". Velikost záleží.
Rozbalovací seznamy a přepínače
Každý rozbalovací seznam potřebuje popisek. "Vyberte možnost" a "Ano/Ne" bez kontextu jsou k ničemu. Uživatel odečítače obrazovky netuší, na jakou otázku se ptáte. Popisek seznamu napište jasně, o jakou volbu jde.
Přepínače by měly být ve skupině (fieldset) s nadpisem (legend). Nadpis klade otázku. Možnosti na ni odpovídají. "Co nejlépe popisuje váš případ použití?" s možnostmi jako "E-shop", "Média", "SaaS". Odečítač obrazovky oznámí nadpis a pak každou možnost. Uživatel pochopí, že vybírá ze skupiny, a ví, k čemu skupina slouží.
Zaškrtávací políčka
Popisek zaškrtávacího políčka by se měl číst přirozeně. "Souhlasím s podmínkami služby" jako popisek, s políčkem vedle. Ne holé políčko bez textu, u kterého uživatelé musí hádat, co dělá.
Pokud existují doplňující informace, například odkaz na úplné podmínky, dejte je přímo vedle políčka. Neskrývejte je. Uživatelé potřebují vědět, s čím souhlasí, než políčko zaškrtnou.
Skupiny zaškrtávacích políček fungují jako skupiny přepínačů. Nadpis pojmenuje skupinu a každá možnost má svůj popisek.
Tlačítka
Text tlačítka by měl říkat, co se stane. "Odeslat." "Poslat." "OK" funguje u potvrzení. "Jdi" ne. Žádné obecné popisky.
Pokud máte víc tlačítek, ať se liší. "Zrušit" a "Odeslat" jsou jasná. Dvě tlačítka, která obě říkají "Další", jasná nejsou: uživatel odečítače obrazovky uslyší "tlačítko další, tlačítko další" a netuší, které je které.
Kde se formuláře na webu objevují
Kontaktní formuláře ve vyskakovacích oknech. Přihlášení k newsletteru v patičkách. Darovací formuláře na stránkách o poslání. Dotazníky v pokladně. Každý formulář, kdekoli, musí být přístupný.
Formuláře ve vyskakovacích oknech vytvářejí past na zaměření, pokud ji neošetříte. Když se otevře okno, zaměření do něj skočí. Když se zavře, zaměření skočí zpět na tlačítko, které ho otevřelo. Bez toho uživatelé klávesnice uvíznou a procházejí tabulátorem stránku na pozadí.
U dlouhých stránek s formuláři níž přidejte odkaz pro přeskočení. Uživatelé klávesnice by neměli procházet 50 položek navigace, aby se dostali k vašemu formuláři.
Časté chyby
Spoléhání na text v poli místo popisků
Text v poli "Zadejte svůj e-mail" zmizí ve chvíli, kdy někdo začne psát. Uživatel pak netuší, k čemu pole bylo. Odečítače obrazovky ho nevidí vůbec.
Použijte skutečný popisek. Pokud chcete text v poli pro nápovědu k formátu, v pořádku. Ale nikdy ho nepoužívejte jako popisek samotný.
Označení povinných polí jen barvou
Červená hvězdička je pro lidi s poruchou barevného vidění neviditelná. Ikona je neviditelná pro odečítače obrazovky. Použijte slovo "povinné" v textu. Textu rozumí každý.
Vynechání ručního testování
Správná struktura HTML na papíře neznamená, že formulář funguje ve skutečnosti. Popisky mohou být umístěné příliš daleko od polí. Obrysy zaměření mohou být neviditelné. Chybové zprávy se mohou oznámit, ale nepřesunout zaměření na pole.
Testujte klávesnicí. Testujte odečítačem obrazovky. NVDA je zdarma. JAWS je standard. VoiceOver, pokud testujete na iOS. Automatické kontroly zachytí zřejmé problémy. Skutečné testování zachytí zbytek.
Přidávání časových limitů
Uživatel s třesem píše pomalu. Uživatel odečítače obrazovky potřebuje čas, aby si vyslechl všechny popisky a pokyny. Pětiminutový limit uvězní uživatele, kteří potřebují deset.
Časové limity odstraňte, pokud to jde. Pokud je mít musíte, nechte uživatele čas dvakrát prodloužit, než relace skončí.
Jak WEMASY staví přístupné formuláře
Formuláře WEMASY se navrhují s ohledem na přístupnost od začátku, ne dodatečně. Šablony obsahují správné popisky a chyby se ohlašují odečítačům obrazovky.
Přizpůsobujte, aniž byste přístupnost rozbili. Přidávejte pole, měňte popisky, přeskupujte rozvržení. Základní struktura zůstává přístupná. Přesto formuláře vždy otestujte klávesnicí a odečítačem obrazovky.
Víc se dozvíte v našem kompletním průvodci formuláři nebo se podívejte, co je součástí jednotlivých tarifů WEMASY.