1.3.5 - Bemeneti cél

Kategória: 1. Érzékelhető (Perceivable) Irányelv: 1.3. Adaptálhatóság Szint: AA

Röviden a szabványpontról

A WCAG 1.3.5 (Identify Input Purpose) előírja, hogy a felhasználóról információt gyűjtő minden input mező célja programozottan meghatározható legyen. Ez azt jelenti, hogy a fejlesztőknek szemantikus információt kell biztosítaniuk az űrlap mezőkben várt adattípusról, hogy a kisegítő technológiák (mint a képernyőolvasók) és böngészők megérthessék és közvetíthessék a célt a felhasználóknak.

Ez elsősorban az űrlapok input mezőire vonatkozik – mint például név, e-mail, telefonszám, cím, hitelkártyaszám stb. A cél az, hogy lehetővé tegye a böngészők és kisegítő eszközök számára a kontextus-tudatos funkciók nyújtását, mint az automatikus kitöltés, input segítség és hibamegelőzés, javítva a használhatóságot és akadálymentességet.

Kiket érint

Ez a szabványpont elsősorban a kognitív fogyatékossággal, mozgáskorlátozással élőket és kisegítő technológiákra támaszkodó felhasználókat érinti. Például a memória- vagy figyelemzavarral élő felhasználók az automatikus kitöltés funkciókat használhatják az űrlapok gyorsabb és pontosabb kitöltéséhez. De hasznos lehet akkor is, ha:

Minden felhasználó részesül a következetes, kiszámítható űrlap viselkedésből
Az automatikus kitöltés csökkenti a gépelési erőfeszítést, megelőzi a hibákat és felgyorsítja az űrlap kitöltését minden eszközön, beleértve a mobilokat is

Tesztelés

Az 1.3.5 szabványpont megfelelőségének ellenőrzéséhez próbáld ki ezeket a módszereket:

Jelölés vizsgálata autocomplete attribútumokra: Ellenőrizd, hogy az input mezők használják-e a megfelelő autocomplete attribútum értékeket (pl. autocomplete=”email”, autocomplete=”tel”, autocomplete=”street-address”)
Böngésző automatikus kitöltés használata: Teszteld, hogy a böngészők felismerik-e az input mezőket és megfelelően ajánlanak-e automatikus kitöltési javaslatokat
Képernyőolvasó tesztelés: Használj képernyőolvasókat annak ellenőrzésére, hogy az input mezők világosan közvetítik-e a céljukat
Automatizált eszközök: Futtass axe DevTools vagy hasonló akadálymentességi szkennereket a hiányzó vagy helytelen autocomplete attribútumok jelzésére
Manuális kód áttekintés: Győződj meg róla, hogy az űrlap mezők logikusan csoportosítva vannak és megfelelően címkézettek az autocomplete attribútumok mellett

Jó gyakorlatok

1. E-mail input autocomplete-tel

<label for="email">E-mail cím</label>
<input type="email" id="email" name="email" autocomplete="email" />
<!-- autocomplete="email" megmondja a böngészőknek és kisegítő technológiáknak, 
     hogy ez a mező e-mail címet vár -->

2. Postai cím űrlap mezők

<label for="street">Utca, házszám</label>
<input type="text" id="street" name="street-address" autocomplete="street-address" />

<label for="city">Város</label>
<input type="text" id="city" name="address-level2" autocomplete="address-level2" />

<label for="zip">Irányítószám</label>
<input type="text" id="zip" name="postal-code" autocomplete="postal-code" />

<label for="country">Ország</label>
<select id="country" name="country" autocomplete="country">
  <option value="HU">Magyarország</option>
  <option value="AT">Ausztria</option>
</select>

3. Kapcsolódó input mezők csoportosítása

Használj <fieldset> és <legend> elemeket a kapcsolódó input mezők csoportosításához, javítva a szemantikus struktúrát:

<fieldset>
  <legend>Fizetési információk</legend>
  
  <label for="cc-number">Hitelkártya szám</label>
  <input type="text" id="cc-number" name="cc-number" autocomplete="cc-number" />
  
  <label for="cc-exp">Lejárati dátum</label>
  <input type="text" id="cc-exp" name="cc-exp" autocomplete="cc-exp" placeholder="MM/YY" />
  
  <label for="cc-csc">Biztonsági kód</label>
  <input type="text" id="cc-csc" name="cc-csc" autocomplete="cc-csc" />
</fieldset>

4. Személyes adatok űrlap

<fieldset>
  <legend>Személyes adatok</legend>
  
  <label for="given-name">Keresztnév</label>
  <input type="text" id="given-name" name="given-name" autocomplete="given-name" />
  
  <label for="family-name">Vezetéknév</label>
  <input type="text" id="family-name" name="family-name" autocomplete="family-name" />
  
  <label for="tel">Telefonszám</label>
  <input type="tel" id="tel" name="tel" autocomplete="tel" />
  
  <label for="bday">Születési dátum</label>
  <input type="date" id="bday" name="bday" autocomplete="bday" />
</fieldset>

5. Bejelentkezési űrlap

<form>
  <label for="username">Felhasználónév</label>
  <input type="text" id="username" name="username" autocomplete="username" />
  
  <label for="current-password">Jelszó</label>
  <input type="password" id="current-password" name="current-password" autocomplete="current-password" />
  
  <button type="submit">Bejelentkezés</button>
</form>

Rossz gyakorlatok

Hiányzó autocomplete attribútum

<label for="phone">Telefon</label>
<input type="text" id="phone" name="phone" />

Probléma: Az autocomplete attribútum hiánya miatt a böngészők nem tudják azonosítani az input célt.

Helytelen vagy általános autocomplete értékek használata

<input type="text" name="userinput" autocomplete="off" />

Probléma: Az autocomplete="off" letiltja az automatikus kitöltést és input segítséget.

Csak placeholder szövegre támaszkodás az input cél meghatározásához

<input type="email" placeholder="Add meg az e-mail címed" />

Probléma: A placeholder nem címke és eltűnhet gépeléskor, valamint nem biztosít programozható információt az input céljáról.

Nem szabványos autocomplete értékek használata

<input type="text" autocomplete="phone-number" />
<!-- Helyes: autocomplete="tel" -->

Probléma: Nem szabványos értékek használata miatt a böngészők és kisegítő technológiák nem ismerik fel az input célt.

Források

Amennyiben szeretnél első kézből értesülni az új bejegyzésekről, iratkozz fel hírlevelünkre!