Kritérium úspěšnosti 1.3.5 Určení účelu vstupu – úroveň AA

Představte si, že vyplňujete online formulář a prohlížeč vám sám nabízí jméno, e-mail nebo třeba datum narození. Tohle není magie, ale správně nastavený web podle pravidla Identifikace účelu vstupu.

Kritérium 1.3.5 se týká formulářů, ve kterých zadáváte svoje osobní údaje, například jméno, adresu nebo e-mail. Pokud jsou formulářová pole správně označená (W3C), prohlížeč (nebo třeba jiná asistivní technologie) snadno pozná, co do kterého pole patří a může vám automaticky nabídnout správné údaje.

Ušetříte tím čas, snížíte riziko chyb a vyplňování formulářů je najednou mnohem pohodlnější.

Komu to pomáhá

  • Nevidomí uživatelé: když je pole správně označené, čtečka obrazovky jim řekne, co mají vyplnit.
  • Lidé s kognitivním postižením: například osoby, které mají problémy s pamětí, ocení automatické vyplňování nabízené prohlížečem.
  • Všichni uživatelé: každý ocení, když prohlížeč sám vyplní objednávku, registraci nebo přihlášku. Je to rychlejší a vyhnete se chybám.

Detailní popis

Příklady

  • Kontaktní formulář automaticky doplňuje obsah polí pro jméno, adresu, směrovací číslo, telefonní číslo nebo e-mail na základě údajů, které má uložené prohlížeč.
  • Prohlížeč může u definovaných polí místo popisů zobrazit ikony nebo jiné symboly, které má uživatel nastavené v prohlížeči, a usnadnit tak pochopení účelu vstupního pole.
  • Při vyplňování objednávky, kde máte zvlášť doručovací a fakturační adresu, prohlížeč sám vyplní správná políčka. Stačí, aby byla pole označena atributy shipping (doručovací) a billing (fakturační).

Jak na to?

Typ pole v HTML (např. type="email") říká, jaká data pole očekává, ale to nestačí. Je potřeba jít víc do hloubky a nastavit tzv. atribut autocomplete (MDN), který říká, co přesně má uživatel zadat.

Například:

  • autocomplete="name" – celé jméno
  • autocomplete="given-name" – křestní jméno
  • autocomplete="family-name" – příjmení
  • autocomplete="username" – uživatelské jméno
  • autocomplete="nickname" – přezdívka
<label for="firstName">Křestní jméno:</label>
<input name="firstName" id="firstName" type="text" autocomplete="given-name" />

<label for="lastName">Příjmení:</label>
<input name="lastName" id="lastName" type="text" autocomplete="family-name" />

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

Pokud se použije technika automatického doplňování atributů autocomplete, může prohlížeč uživateli navrhnout a doplnit správný obsah na základě dříve zadaných údajů, které jsou uloženy v prohlížeči.

Proč je to důležité?

Správné nastavení automatického doplňování pomáhá všem. Uživatel nemusí donekonečna vyplňovat ty samé údaje. Stačí jedno kliknutí a všechno je vyplněné. Je to úleva hlavně pro ty, kteří mají potíže s pamětí nebo čtením. Ale upřímně, kdo z nás někdy něco nepopletl?

Navíc hodnoty atributu autocomplete jsou nezávislé na jazyce. Uživatel se nemusí orientovat podle toho, co je napsáno v popisku. Prohlížeč to rozpozná podle kódu.

Uživatel tak nemusí zadávat informace opakovaně a místo toho se může soustředit pouze na kontrolu údajů.

S využitím těchto předdefinovaných typů mohou také prohlížeče (a další asistivní technologie) zobrazovat účel formulářových polí různým způsobem. Například mohou vedle pole zobrazit známou ikonu, která pomůže uživatelům s poruchami čtení a soustředění. Před vstupním polem s autocomplete="bday" může být zobrazena ikona narozeninového dortu, před vstupním polem s autocomplete="tel" ikona telefonu.

Shrnutí a tip na závěr

Chcete mít formuláře, které uživatelé milují?
U každého pole, kde to jde, nastavte správný atribut autocomplete. Ušetříte tím čas uživatelům, minimalizujete chyby a uděláte web přístupnější úplně všem.

Doplňující informace