Akadálymentes pénztár: címkék, hibaüzenetek és sikeres rendelés

A helyőrző nem helyettesíti a címkét

A placeholder a gépeléskor eltűnik. Ha ez az egyetlen útmutatás, a vásárló könnyen elfelejti, hogy mit kellett a mezőbe írnia, és a későbbi ellenőrzés is nehezebb. A látható címke a kitöltés teljes ideje alatt azonosítja a mezőt; a label és az input összekapcsolása pedig a segítő technológiák számára is egyértelművé teszi a kapcsolatot.

A »Név« megnevezésnél pontosabb lehet a »Teljes név«, ha ezt várja a számlázás. A »Cím« helyett külön mezőkben is kérhet irányítószámot, települést és utcát, de csak a ténylegesen szükséges adatokat kérje be. A kötelezőséget a felület elején magyarázza el, és ne kizárólag egy színnel vagy megmagyarázatlan csillaggal jelezze.

Használjon az adatnak megfelelő típust és autocomplete értéket. Az email típus megfelelő billentyűzetet kínálhat mobilon, az autocomplete pedig csökkenti az ismételt gépelést. Ezek nem akadálymentesítenek mindent önmagukban, de a megfelelő címkével együtt jelentősen megkönnyítik a kitöltést.

A hiba megnevezése és a javítás útja

A piros mezőkeret nem mondja meg, mi a probléma. A »Hibás adat« üzenet sem segít, ha nem derül ki, milyen formátumot vár a rendszer. Egy e-mail-mezőnél például a »Adjon meg egy e-mail-címet, például nev@pelda.hu« használhatóbb, mint a puszta »Érvénytelen«.

A mezőhöz kapcsolt hibaüzenetet aria-describedby segítségével tegye elérhetővé, és a hibás állapotot aria-invalid értékkel jelezze. A súgó és a hiba egyszerre is kapcsolható a mezőhöz. A hiba csak akkor legyen jelen, amikor valóban van javítandó állapot; ne induljon minden üres mező hibásként az első oldalbetöltéskor.

Több hiba esetén egy összesítő segítheti a tájékozódást. A mezőkre mutató hivatkozások legyenek működőképesek. Válasszon következetes fókuszkezelést: például sikertelen beküldéskor az összesítő kapjon fókuszt, onnan pedig lehessen a mezőkre lépni. A mezők melletti hibaszöveg ettől még maradjon meg.

<label for="email">E-mail-cím</label>
<input id="email" name="email" type="email"
  autocomplete="email" required
  aria-invalid="true" aria-describedby="email-hiba" />
<p id="email-hiba">Adjon meg egy érvényes e-mail-címet.</p>

<!-- A hibaattribútum és az üzenet csak hibás állapotban jelenjen meg. -->

Mi történik a beküldés után?

A fizetés vagy rendelés közben megjelenő állapot ne csak egy forgó ikon legyen. A vásárló tudja meg, hogy a folyamat elindult, sikerült vagy megállt. Egy status szerepű, megfelelően frissített szöveges terület alkalmas lehet nem sürgős visszajelzésre; sürgős hibánál más bejelentési és fókuszkezelési megoldás is indokolt lehet.

A duplán beküldött rendelést ne csak a gomb letiltásával próbálja megakadályozni. A rendelési rendszerben is szükséges megfelelő védelem. Hálózati hibánál ne törölje a teljes űrlapot, és ne állítsa biztosan, hogy nem történt fizetés, ha a fizetési állapotot még nem sikerült ellenőrizni.

Az ellenőrzéshez szándékosan próbáljon ki hiányzó adatot, hibás formátumot, lassú választ és elutasított tesztfizetést. A sikeres út csak a vizsgálat egyik fele. A hibából való visszatérés gyakran több akadályt tartalmaz, mint az első beküldés.

• A címke a gépelés után is látható és a mezőhöz kapcsolt.
• A kötelező adatok és a várt formátum érthetők.
• A hiba nem csak színnel jelzett, és megmondja a javítás módját.
• A hibás mező billentyűzettel megtalálható.
• A helyes adatok sikertelen beküldés után megmaradnak.
• A feldolgozási és sikeres állapot segítő technológiával is érzékelhető.