Každé pole spojte s trvalým textovým labelom, požadujte iba potrebné údaje, chybu opíšte pri poli aj v súhrne a po odoslaní jasne potvrďte výsledok.
Formulár je rozhovor medzi človekom a systémom. Ak sa opiera iba o placeholder, neoznačí povinné polia alebo po chybe zmaže údaje, problém sa netýka len používateľov asistívnych technológií. Nejasnosť zvyšuje počet opráv, podporu a riziko, že človek odošle nesprávne alebo citlivé informácie.
Prístupnosť vzniká kombináciou krátkeho rozsahu, správneho HTML, zrozumiteľných pokynov a spoľahlivých stavov. Klientská validácia pomáha opraviť chybu, no nenahrádza serverovú bezpečnostnú kontrolu. Formulár treba testovať klávesnicou, čítačkou obrazovky, zväčšením aj pri pomalom spojení, pričom sa rešpektuje súkromie a právny účel zberu.
Účel a rozsah poľa musia byť zrozumiteľné pred písaním
Pýtajte sa iba na údaje potrebné pre konkrétny proces a vysvetlite, prečo sú potrebné, ak to nie je zrejmé. Rozlíšte povinné a voliteľné polia textom, nie iba hviezdičkou bez legendy. Poradie má sledovať prirodzený rozhovor. Dlhý formulár rozdeľte na logické kroky a priebeh oznámte bez umelého naťahovania.
Pokyn uveďte pred poľom alebo v jeho blízkosti, najmä pri neobvyklom formáte, hesle či nahrávaní súboru. Nečakajte, kým človek urobí chybu, aby sa dozvedel pravidlo. Jazyk má hovoriť, čo zadať a na čo sa údaj použije, nie interný názov databázového stĺpca.
Label je trvalý názov, placeholder iba doplnkový príklad
Použite element label správne prepojený s jedinečným identifikátorom poľa. Kliknutie na label má aktivovať príslušný prvok a čítačka obrazovky má oznámiť jeho názov. Placeholder po začatí písania zmizne, máva slabý kontrast a nesmie niesť jedinú informáciu o účele či formáte.
Skupiny prepínačov a zaškrtávacích polí označte spoločnou legendou a jednotlivým možnostiam ponechajte vlastné labely. Tlačidlo pomenujte podľa výsledku, napríklad „Odoslať žiadosť“, nie všeobecným „OK“. Vlastné komponenty používajte iba vtedy, keď natívny prvok nedokáže splniť potrebu a viete implementovať jeho celé správanie.
- viditeľný label pre každé ovládanie
- jedinečné id a správne prepojenie for
- fieldset a legend pre súvisiacu skupinu
- tlačidlo pomenované podľa skutočnej akcie
Typ poľa a autocomplete znižujú zbytočné prepisovanie
Vyberte vhodný typ vstupu pre e-mail, telefón, dátum alebo číslo, no povoľte formáty, ktoré používateľ reálne potrebuje. Telefónne číslo nie je matematická hodnota a môže obsahovať predvoľbu či medzery. Automatické formátovanie nesmie meniť význam alebo presúvať kurzor nepredvídateľným spôsobom.
Pri bežných osobných a kontaktných údajoch nastavte zodpovedajúci autocomplete, aby prehliadač a asistívne technológie rozpoznali účel. Nezakazujte vloženie textu do hesla alebo overovacieho kódu bez bezpečnostného dôvodu. Správca hesiel a kopírovanie môžu znížiť chyby a podporiť používateľov s motorickými či pamäťovými obmedzeniami.
Chyba pomenuje pole, príčinu a spôsob opravy
Po neúspešnom odoslaní zachovajte správne zadané údaje a zobrazte súhrn chýb na začiatku formulára. Každá položka súhrnu môže odkazovať na konkrétne pole. Chybová správa patrí aj k poľu a musí byť programovo priradená. Červený rám bez textu nevysvetľuje problém a nefunguje bez rozlíšenia farby.
Focus presuňte na súhrn alebo prvú chybu podľa konzistentného modelu a zmenu oznámte asistívnej technológii bez rušivého opakovania. Validujte v primeranom okamihu; agresívna chyba počas každej napísanej číslice prekáža. Server znovu overí vstup a vráti bezpečnú správu bez technického stack trace alebo odhalenia interných detailov.
- jasný súhrn po neúspešnom odoslaní
- textová chyba priradená ku konkrétnemu poľu
- zachované platné hodnoty a logický focus
- rovnaká kontrola na klientovi aj serveri
- pomocný text dostupný spolu s poľom
- žiadne zmazanie správne zadaných hodnôt
- potvrdenie výsledku po autoritatívnej odpovedi
- regresný test s klávesnicou a čítačkou
Potvrdenie a testovanie uzatvárajú celý proces
Po úspechu jednoznačne oznámte, čo bolo prijaté, čo sa stane ďalej a ako človek opraví omyl. Nevytvárajte dojem odoslania iba animáciou tlačidla. Pri dvojitom kliknutí zabráňte duplicitnému záznamu a zobrazte stabilný stav. Citlivé hodnoty neopakujte na potvrdení ani v URL.
Testujte prázdny formulár, hraničné hodnoty, pomalú odpoveď, výpadok servera, návrat späť a obnovenie stránky. Prejdite celý proces bez myši a s čítačkou obrazovky. Automatický audit nájde časť problémov, no neoverí zrozumiteľnosť otázok, primeranosť zberu ani to, či používateľ pochopil výsledok.
Časté otázky
Môže placeholder nahradiť label?
Nie. Po začatí písania mizne a nemusí byť spoľahlivo oznámený. Pole potrebuje trvalý a programovo prepojený názov.
Je klientská validácia dostatočná?
Nie. Pomáha používateľovi, ale vstup treba bezpečne overiť aj na serveri. Chybové správy z oboch vrstiev majú zostať zrozumiteľné a konzistentné.
Treba označiť povinné alebo voliteľné polia?
Zvoľte konzistentný model a vysvetlite ho textom. Pri formulári s väčšinou povinných polí môže byť prehľadnejšie jasne označiť výnimky aj požiadavky.
Zdroje a ďalšie čítanie
Web developer zo Spišskej Novej Vsi. Venuje sa WordPressu, WooCommerce, vlastným pluginom, API integráciám, webovým aplikáciám a praktickým AI automatizáciám.
