Akadálymentes űrlapok: címkék, tippek és hibaüzenetek

Hat sikerkritérium az űrlapokhoz

A WCAG 2.2 a W3C jelenlegi ajánlása az akadálymentes webes tartalomhoz. Egy űrlap szövegeinél hat sikerkritériuma a legfontosabb:

• 1.3.1 Információ és kapcsolatok (A szint): amit az elrendezés mutat, például hogy melyik címke melyik mezőhöz tartozik, az a kódban vagy szövegben is elérhető.
• 1.3.5 A bevitel céljának azonosítása (AA szint): a felhasználóra vonatkozó adatokat kérő mezők, például a név vagy az e-mail, a kódban megadják a céljukat.
• 3.3.1 Hiba azonosítása (A szint): ha egy beviteli hibát automatikusan észlel a rendszer, megnevezi a mezőt, és szövegben leírja a hibát.
• 3.3.2 Címkék vagy utasítások (A szint): ha a tartalom felhasználói bevitelt igényel, címkék vagy utasítások állnak rendelkezésre.
• 3.3.3 Javaslat hiba esetén (AA szint): ha hibát észlel a rendszer, és ismert a javítás módja, javasolja azt, kivéve, ha ez veszélyeztetné a tartalom biztonságát vagy célját.
• 4.1.2 Név, szerep, érték (A szint): minden vezérlőelemnek van neve és szerepe, amelyet a szoftverek ki tudnak olvasni.

Minden mezőnek látható címke kell

A címke megmondja, mi kerül a mezőbe, és gépelés közben is látható marad. HTML-ben kapcsold össze a label elemet a mezővel: a címke for attribútumának pontosan ugyanaz az értéke, mint a mező id-jének. A képernyőolvasók ekkor a mezővel együtt olvassák fel a címkét, és a címkére kattintva a kurzor a mezőbe kerül. Egy gomb a szövegéből kapja a címkéjét, és az „Üzenet küldése” többet mond, mint a „Küldés”. A címkék a választógomboktól és jelölőnégyzetektől általában jobbra, a többi mezőtől balra vagy felette állnak; a mezők feletti címkék kevesebb helyet igényelnek szélességben.

A helyőrző nem címke

Az üres mezőben lévő szürke szöveg címkének tűnik, de nem az. A W3C megnevezi a problémákat:

• Eltűnik, amint valaki gépelni kezd, így küldés előtt nehezebb ellenőrizni a beírt adatokat.
• A böngészők gyakran világos színnel, túl kevés kontraszttal jelenítik meg.
• A képernyőolvasók nem kezelik címkeként, és a támogatás eltérő.

Helyőrzőt legfeljebb egy példához használj, és minden fontosat a címkébe vagy egy tippbe írj.

Tippek és kötelező mezők

• A szabályokat írd egy tippbe: a dátumformátum, az ügyfélszám hossza, mit kell tartalmaznia egy jelszónak. HTML-ben a tippet aria-describedby segítségével kapcsolhatod a mezőhöz, így a képernyőolvasók a címke után felolvassák.
• Jelezd, mely mezők kötelezők és melyek nem. Ha csillagot használsz, az űrlap elején egyszer magyarázd el.
• Az egész űrlapra vonatkozó utasításokat az űrlap elé tedd, például egy időkorlátról.
• A tippek legyenek rövidek. A túl sok utasítás nehezebbé teszi az űrlapot, nem könnyebbé.

Csoportosítsd az összetartozó mezőket

Az összetartozó választógombokat és jelölőnégyzeteket a fieldset elemmel csoportosítod, a legend elem pedig megnevezi a csoportot, például „Hogyan vegyük fel veled a kapcsolatot?”. A W3C szerint a választógomb-csoportokat mindig így kell csoportosítani. A legend legyen rövid, mert egyes képernyőolvasók minden mezőnél felolvassák. A csoportok az azonos címkéjű mezőknél is segítenek, például a szállítási és a számlázási cím utcájánál.

autocomplete: hadd segítsen a böngésző

A felhasználóra vonatkozó adatokat kérő mezőknél az 1.3.5 azt kéri, hogy a céljuk a kódból megállapítható legyen. A WCAG 2.2 tartalmazza ezeknek a céloknak a listáját, a HTML-specifikáció automatikus kitöltésről szóló része alapján, például name, given-name, family-name, email, tel, street-address és postal-code. HTML-ben az autocomplete attribútummal adod meg őket, például autocomplete="email". A böngészők így kitölthetik a mentett értékeket, ami gépelést takarít meg. A nem a felhasználóra vonatkozó mezőknek nem kell cél.

Hibaüzenetek, amelyek segítenek

Egy hibaüzenetnek három feladata van: megnevezni a mezőt, megmondani, mi a hiba, és megmondani, hogyan javítható. A 3.3.1 az első kettőt kéri, szövegben, így egy piros keret vagy egy ikon önmagában nem elég. A 3.3.3 a javítást kéri, ahol az ismert.

• Az üzenetet a mező mellett jelenítsd meg, és kapcsold hozzá aria-describedby segítségével, így a képernyőolvasók a mezővel együtt olvassák fel.
• Küldés után az összes hiba listáját mutasd felül, az űrlap előtt, egy világos címsor alatt. Minden tétel megnevezi a mezőt, a problémát és a javítást, és a mezőre mutat.
• Az oldal címét is frissítsd, például „2 hiba – Kapcsolatfelvételi űrlap”, és vidd a fókuszt az első hibás mezőre.
• Őrizd meg, amit a felhasználó már beírt. Ez a mi tanácsunk, nem WCAG-szabály: ha egyetlen hiba után mindent újra kell gépelni, az emberek feladják.

Ellenőrizd az űrlapodat a Do4U-val

Az Űrlapszövegek eszköz egy webes űrlap szövegeit ellenőrzi. Beilleszted az űrlap HTML-kódját, vagy megadod az oldal címét, és hozzáadhatod az űrlapod által mutatott hibaüzeneteket is. A kód minden mezőt beolvas: a címkéjét és azt, honnan származik a címke, a tippeket, helyőrzőket, kötelező mezőket, autocomplete-értékeket, valamint a választógombok vagy jelölőnégyzetek csoportjait. Olyan problémákat talál, mint a címke nélküli mező, a helyőrző mint egyetlen címke, a szövegben nem említett kötelező mezők, a hiányzó autocomplete-értékek és a homályos hibaüzenetek, mindegyiket a sikerkritériumával. Az AI világos címkét, rövid tippet és olyan hibaüzenetet javasol, amely megnevezi a mezőt, és megmondja, hogyan javítható a bevitel. A kód minden javaslatot ellenőriz, és az űrlapodból javított HTML-tervezetet készít.

A Do4U jelzéseket talál és tervezetet készít, te ellenőrzöl és döntesz. Az eszköz a jelölést ellenőrzi, nem a stílusaidat, szkriptjeidet vagy a billentyűzetes használatot, és nem mondja meg, hogy az űrlapod akadálymentes-e. A javított űrlapot teszteld billentyűzettel és képernyőolvasóval.