Každé pole spojte s trvalým textovým labelem, požadujte jen potřebné údaje, chybu popište u pole i v souhrnu a po odeslání jasně potvrďte výsledek.
Formulář je rozhovor mezi člověkem a systémem. Pokud se opírá jen o placeholder, neoznačí povinná pole nebo po chybě smaže údaje, problém se netýká jen uživatelů asistivních technologií. Nejasnost zvyšuje počet oprav, zátěž podpory a riziko, že člověk odešle nesprávné nebo citlivé informace.
Přístupnost vzniká kombinací krátkého rozsahu, správného HTML, srozumitelných pokynů a spolehlivých stavů. Klientská validace pomáhá opravit chybu, ale nenahrazuje serverovou bezpečnostní kontrolu. Formulář je třeba testovat klávesnicí, čtečkou obrazovky, při zvětšení i při pomalém připojení, přičemž je nutné respektovat soukromí a právní účel sběru.
Účel a rozsah pole musí být srozumitelné před psaním
Ptejte se pouze na údaje potřebné pro konkrétní proces a vysvětlete, proč jsou potřebné, pokud to není zřejmé. Povinná a volitelná pole rozlišujte textem, nikoli jen hvězdičkou bez legendy. Pořadí má sledovat přirozený rozhovor. Dlouhý formulář rozdělte do logických kroků a průběh oznamte bez umělého natahování.
Pokyn uveďte před polem nebo v jeho blízkosti, zejména u neobvyklého formátu, hesla či nahrávání souboru. Nečekejte, až člověk udělá chybu, aby se pravidlo dozvěděl. Text má říkat, co zadat a k čemu bude údaj použit, nikoli uvádět interní název databázového sloupce.
Label je trvalý název, placeholder jen doplňkový příklad
Použijte element label správně propojený s jedinečným identifikátorem pole. Kliknutí na label má aktivovat příslušný prvek a čtečka obrazovky má oznámit jeho název. Placeholder po začátku psaní zmizí, mívá slabý kontrast a nesmí nést jedinou informaci o účelu či formátu.
Skupiny přepínačů a zaškrtávacích polí označte společnou legendou a jednotlivým možnostem ponechte vlastní labely. Tlačítko pojmenujte podle výsledku, například „Odeslat žádost“, ne obecným „OK“. Vlastní komponenty používejte pouze tehdy, když nativní prvek nedokáže potřebu splnit a umíte implementovat celé jeho chování.
- viditelný label pro každý ovládací prvek
- jedinečné id a správné propojení for
- fieldset a legend pro související skupinu
- tlačítko pojmenované podle skutečné akce
Typ pole a autocomplete snižují zbytečné přepisování
Zvolte vhodný typ vstupu pro e-mail, telefon, datum nebo číslo, ale povolte formáty, které uživatel skutečně potřebuje. Telefonní číslo není matematická hodnota a může obsahovat předvolbu či mezery. Automatické formátování nesmí měnit význam ani nepředvídatelně přesouvat kurzor.
U běžných osobních a kontaktních údajů nastavte odpovídající autocomplete, aby prohlížeč a asistivní technologie rozpoznaly účel pole. Nezakazujte vkládání textu do hesla nebo ověřovacího kódu bez bezpečnostního důvodu. Správce hesel a kopírování mohou snížit chybovost a podpořit uživatele s motorickými či paměťovými omezeními.
Chyba pojmenuje pole, příčinu a způsob opravy
Po neúspěšném odeslání zachovejte správně zadané údaje a zobrazte souhrn chyb na začátku formuláře. Každá položka souhrnu může odkazovat na konkrétní pole. Chybová zpráva patří také k poli a musí k němu být programově přiřazena. Červený rámeček bez textu problém nevysvětluje a nefunguje bez rozlišení barev.
Focus přesuňte na souhrn nebo první chybu podle konzistentního modelu a změnu oznamte asistivní technologii bez rušivého opakování. Validujte ve vhodnou chvíli; agresivní chyba při každé napsané číslici překáží. Server vstup znovu ověří a vrátí bezpečnou zprávu bez technického stack trace nebo odhalení interních detailů.
- jasné shrnutí po neúspěšném odeslání
- textová chyba přiřazená ke konkrétnímu poli
- zachované platné hodnoty a logický focus
- stejná kontrola na klientovi i serveru
- pomocný text dostupný společně s polem
- žádné smazání správně zadaných hodnot
- potvrzení výsledku po autoritativní odpovědi
- regresní test s klávesnicí a čtečkou
Potvrzení a testování uzavírají celý proces
Po úspěchu jednoznačně oznamte, co bylo přijato, co se stane dál a jak člověk opraví omyl. Nevytvářejte dojem odeslání pouze animací tlačítka. Při dvojitém kliknutí zabraňte duplicitnímu záznamu a zobrazte stabilní stav. Citlivé hodnoty neopakujte na potvrzení ani v URL.
Testujte prázdný formulář, hraniční hodnoty, pomalou odpověď, výpadek serveru, návrat zpět a obnovení stránky. Projděte celý proces bez myši a se čtečkou obrazovky. Automatický audit najde část problémů, ale neověří srozumitelnost otázek, přiměřenost sběru ani to, zda uživatel pochopil výsledek.
Časté dotazy
Může placeholder nahradit label?
Ne. Po začátku psaní mizí a nemusí být spolehlivě oznámen. Pole potřebuje trvalý a programově propojený název.
Je validace na straně klienta dostatečná?
Ne. Pomáhá uživateli, ale vstup je nutné bezpečně ověřit i na serveru. Chybové zprávy z obou vrstev mají zůstat srozumitelné a konzistentní.
Je třeba označit povinná nebo volitelná pole?
Zvolte konzistentní model a vysvětlete ho textem. U formuláře s převahou povinných polí může být přehlednější jasně označit výjimky i požadavky.
Zdroje a další čtení
Adam Antoni vyvíja weby, aplikácie a softvér na mieru. Prepája firemné systémy, automatizuje procesy a vytvára AI agentov. Pôsobí v Spišskej Novej Vsi a spolupracuje s firmami na celom Slovensku.
