Űrlapcímkék: Alapvető akadálymentesítési követelmények a beviteli mezőkhöz

Az űrlapok az internet alapvető részét képezik. Az egyszerű kapcsolatfelvételi űrlapoktól a bonyolult e-kereskedelmi fizetési folyamatokig lehetővé teszik a felhasználók számára, hogy interakcióba lépjenek a webhelyekkel és alkalmazásokkal. A rosszul megtervezett űrlapok azonban jelentős akadályokat gördíthetnek a fogyatékossággal élő felhasználók elé. Az akadálymentes űrlapok létrehozásának kulcsfontosságú eleme az űrlapcímkék megfelelő használata. Ez az útmutató átfogó áttekintést nyújt az űrlapcímkék akadálymentesítési követelményeiről, biztosítva, hogy űrlapjai mindenki számára használhatóak legyenek, képességeiktől függetlenül.

Miért fontosak az akadálymentes űrlapcímkék?

Az akadálymentes űrlapcímkék több okból is létfontosságúak:

Használhatóság: A tiszta és tömör címkék minden felhasználónak segítenek megérteni az egyes beviteli mezők célját, javítva ezzel az általános használhatóságot.
Akadálymentesítés: A címkék alapvető információkat nyújtanak a fogyatékossággal élő felhasználók számára, különösen azoknak, akik kisegítő technológiákra, például képernyőolvasókra támaszkodnak. Megfelelő címkék nélkül ezek a felhasználók esetleg nem tudják kitölteni az űrlapokat.
WCAG-megfelelőség: A Webtartalmak Akadálymentesítési Irányelvei (WCAG) előírják, hogy minden űrlapvezérlőhöz tartozzon címke. Ezen irányelvek teljesítése biztosítja, hogy webhelye akadálymentes és jogilag megfelelő legyen számos joghatóságban.
SEO: Bár nem közvetlen rangsorolási tényező, az akadálymentes webhelyek általában jobb felhasználói élményt nyújtanak, ami közvetve javíthatja a SEO teljesítményt.

A WCAG űrlapcímkékre vonatkozó követelményeinek megértése

A WCAG konkrét irányelveket ad az űrlapok akadálymentesítésének biztosítására. Íme a legfontosabb, űrlapcímkékre vonatkozó követelmények:

WCAG 2.1 Sikerkritérium 1.1.1 Nem szöveges tartalom (A szint)

Bár nem közvetlenül a címkékről szól, ez a kritérium hangsúlyozza a szöveges alternatívák biztosításának fontosságát minden nem szöveges tartalomhoz, beleértve a CAPTCHA-kat és az űrlapokon belüli képeket is. A megfelelően címkézett űrlap kulcsfontosságú ahhoz, hogy kontextust biztosítson ezeknek az alternatíváknak.

WCAG 2.1 Sikerkritérium 1.3.1 Információ és kapcsolatok (A szint)

A megjelenítés által közvetített információnak, szerkezetnek és kapcsolatoknak programozottan meghatározhatónak vagy szövegben elérhetőnek kell lenniük. Ez azt jelenti, hogy a címke és a hozzá tartozó beviteli mező közötti kapcsolatot explicit módon kell definiálni a HTML kódban.

WCAG 2.1 Sikerkritérium 2.4.6 Címsorok és címkék (AA szint)

A címsorok és címkék a témát vagy a célt írják le. Az űrlapcímkék leíró kontextust biztosítanak a beviteli mezők számára, megkönnyítve a felhasználók számára az űrlap szerkezetének megértését és pontos kitöltését.

WCAG 2.1 Sikerkritérium 3.3.2 Címkék vagy utasítások (A szint)

Címkéket vagy utasításokat kell biztosítani, amikor a tartalom felhasználói bevitelt igényel.

WCAG 2.1 Sikerkritérium 4.1.2 Név, szerep, érték (A szint)

Minden felhasználói felületi komponens (beleértve, de nem kizárólagosan az űrlap elemeket, linkeket és szkriptek által generált komponenseket) esetében a név és a szerep programozottan meghatározható kell legyen; az állapotok, tulajdonságok és a felhasználó által beállítható értékek programozottan beállíthatók kell legyenek; és ezen elemek változásairól értesítés áll rendelkezésre a felhasználói ügynökök, beleértve a kisegítő technológiákat is.

Legjobb gyakorlatok az akadálymentes űrlapcímkék megvalósításához

Íme néhány legjobb gyakorlat az akadálymentes űrlapcímkék létrehozásához:

1. Használja a <label> elemet

A <label> elem az elsődleges módja annak, hogy egy szöveges címkét egy beviteli mezőhöz társítsunk. Szemantikus és strukturális kapcsolatot biztosít a címke és a vezérlő között. A <label> elem for attribútumának meg kell egyeznie a megfelelő beviteli mező id attribútumával.

Példa:


<label for="name">Név:</label>
<input type="text" id="name" name="name">

Helytelen példa (kerülendő):


<span>Név:</span>
<input type="text" id="name" name="name">

A span elem használata a label helyett nem hozza létre a szükséges programozott társítást, így a képernyőolvasók számára hozzáférhetetlenné teszi.

2. Társítsa explicit módon a címkéket a beviteli mezőkhöz

Biztosítson tiszta és explicit kapcsolatot a címke és a beviteli mező között a for és id attribútumok használatával, ahogy a fenti példában látható.

3. Helyezze el helyesen a címkéket

A címkék elhelyezése befolyásolhatja a használhatóságot. Általában a címkéket a következőképpen kell elhelyezni:

A beviteli mező felett: Ez gyakran a leginkább akadálymentes és felhasználóbarát opció, különösen szöveges mezők és szövegterületek esetén.
A beviteli mező bal oldalán: Gyakori, de kevésbé lehet hatékony a látássérült felhasználók számára, akiknek nehézséget okozhat az oldal pásztázása.
Rádiógombok és jelölőnégyzetek esetén: A címkéket a vezérlő jobb oldalán kell elhelyezni.

Vegye figyelembe a kulturális normákat a címkék elhelyezésekor. Néhány nyelvben a címkéket hagyományosan a beviteli mező után helyezik el. Igazítsa a tervezést ezekhez a preferenciákhoz.

4. Biztosítson tiszta és tömör címkéket

A címkéknek rövidnek, leírónak és könnyen érthetőnek kell lenniük. Kerülje a zsargont vagy a technikai kifejezéseket, amelyek összezavarhatják a felhasználókat. Például a "UserID" helyett használja a "Felhasználónév" vagy "E-mail cím" kifejezéseket. Vegye figyelembe a lokalizációt. Biztosítsa, hogy címkéi könnyen lefordíthatók legyenek különböző nyelvekre, miközben megőrzik jelentésüket.

5. Szükség esetén használjon ARIA attribútumokat

Az ARIA (Accessible Rich Internet Applications) attribútumok javíthatják az űrlap elemek akadálymentesítését, különösen bonyolult forgatókönyvek esetén. Az ARIA-t azonban körültekintően és csak akkor használja, ha a natív HTML elemek és attribútumok nem elegendőek.

aria-label: Használja ezt az attribútumot címke megadására, ha a látható címke nem lehetséges vagy praktikus.
aria-labelledby: Használja ezt az attribútumot egy meglévő elem ID-jére való hivatkozáshoz az oldalon, hogy az szolgáljon címkeként.
aria-describedby: Használja ezt az attribútumot további információk vagy utasítások megadására a beviteli mezőhöz. Ez hasznos kontextus biztosítására vagy érvényesítési szabályok magyarázatára.

Példa aria-label használatával:


<input type="search" aria-label="Keresés a webhelyen">

Példa aria-labelledby használatával:


<h2 id="newsletter-title">Hírlevél feliratkozás</h2>
<input type="email" aria-labelledby="newsletter-title" placeholder="Adja meg e-mail címét">

6. Csoportosítsa a kapcsolódó űrlap elemeket <fieldset> és <legend> segítségével

A <fieldset> elem a kapcsolódó űrlapvezérlőket csoportosítja, a <legend> elem pedig egy feliratot biztosít a fieldset-nek. Ez javítja az űrlap szerkezetét, és megkönnyíti a felhasználók számára a különböző beviteli mezők közötti kapcsolatok megértését.

Példa:


<fieldset>
  <legend>Elérhetőségi adatok</legend>
  <label for="name">Név:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email">
</fieldset>

7. Biztosítson egyértelmű hibaüzeneteket

Amikor a felhasználók hibát vétenek az űrlap kitöltése közben, adjon egyértelmű és informatív hibaüzeneteket, amelyek elmagyarázzák, mi ment rosszul és hogyan lehet kijavítani a hibát. Társítsa ezeket a hibaüzeneteket a megfelelő beviteli mezőkhöz ARIA attribútumok, például az aria-describedby segítségével.

Példa:


<label for="email">E-mail:</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<span id="email-error" class="error-message">Kérjük, adjon meg egy érvényes e-mail címet.</span>

Gondoskodjon róla, hogy a hibaüzenet vizuálisan megkülönböztethető legyen (pl. szín vagy ikonok használatával), és programozottan hozzáférhető legyen a kisegítő technológiák számára.

8. Használjon megfelelő színkontrasztot

Biztosítson elegendő színkontrasztot a címke szövege és a háttérszín között a WCAG követelmények teljesítéséhez. Használjon színkontraszt-elemző eszközt annak ellenőrzésére, hogy a kontrasztarány megfelel-e a minimális követelményeknek (4.5:1 a normál szöveghez és 3:1 a nagy szöveghez). Ez segíti a gyengénlátó felhasználókat a címkék könnyebb olvasásában.

9. Biztosítsa a billentyűzetes akadálymentesítést

Minden űrlap elemnek elérhetőnek kell lennie kizárólag a billentyűzet használatával. A felhasználóknak képesnek kell lenniük a Tab billentyűvel navigálni az űrlapon, és a Szóköz vagy Enter billentyűvel interakcióba lépni az űrlapvezérlőkkel. Tesztelje alaposan űrlapjait billentyűzettel a megfelelő billentyűzetes akadálymentesítés biztosítása érdekében.

10. Teszteljen kisegítő technológiákkal

Az űrlapok akadálymentesítésének legjobb módja, ha kisegítő technológiákkal, például képernyőolvasókkal (pl. NVDA, JAWS, VoiceOver) teszteli őket. Ez segít azonosítani azokat az akadálymentesítési problémákat, amelyek a vizuális ellenőrzés során esetleg nem nyilvánvalóak. Vonjon be fogyatékossággal élő felhasználókat a tesztelési folyamatba, hogy értékes visszajelzéseket kapjon.

Példák akadálymentes űrlapcímkék megvalósítására

1. példa: Egyszerű kapcsolatfelvételi űrlap (nemzetközi perspektíva)

Vegyünk egy kapcsolatfelvételi űrlapot egy globális közönség számára. A címkéknek tisztának, tömörnek és könnyen lefordíthatónak kell lenniük.


<form>
  <label for="name">Teljes név:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">E-mail cím:</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="country">Ország:</label>
  <select id="country" name="country">
    <option value="">Válasszon országot</option>
    <option value="us">Egyesült Államok</option>
    <option value="ca">Kanada</option>
    <option value="uk">Egyesült Királyság</option>
    <option value="de">Németország</option>
    <option value="fr">Franciaország</option>
    <option value="jp">Japán</option>
    <option value="au">Ausztrália</option>
    <!-- További országok hozzáadása -->
  </select><br><br>

  <label for="message">Üzenet:</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

  <input type="submit" value="Küldés">
</form>

Figyelje meg a "Teljes név" használatát a "Név" helyett az egyértelműség kedvéért, különösen azokban a kultúrákban, ahol a családnév megelőzi a keresztnevet.

2. példa: E-kereskedelmi fizetési űrlap

Az e-kereskedelmi fizetési űrlapok gyakran érzékeny információkat igényelnek. Az egyértelmű címkék és utasítások kulcsfontosságúak a bizalom építéséhez és az akadálymentesítés biztosításához.


<form>
  <fieldset>
    <legend>Szállítási cím</legend>
    <label for="shipping_name">Teljes név:</label>
    <input type="text" id="shipping_name" name="shipping_name"><br><br>

    <label for="shipping_address">Cím:</label>
    <input type="text" id="shipping_address" name="shipping_address"><br><br>

    <label for="shipping_city">Város:</label>
    <input type="text" id="shipping_city" name="shipping_city"><br><br>

    <label for="shipping_zip">Irányítószám:</label>
    <input type="text" id="shipping_zip" name="shipping_zip"><br><br>

    <label for="shipping_country">Ország:</label>
    <select id="shipping_country" name="shipping_country">
      <option value="">Válasszon országot</option>
      <option value="us">Egyesült Államok</option>
      <option value="ca">Kanada</option>
      <!-- További országok hozzáadása -->
    </select>
  </fieldset>

  <fieldset>
    <legend>Fizetési információk</legend>
    <label for="card_number">Bankkártyaszám:</label>
    <input type="text" id="card_number" name="card_number"><br><br>

    <label for="expiry_date">Lejárati dátum (HH/ÉÉ):</label>
    <input type="text" id="expiry_date" name="expiry_date" placeholder="HH/ÉÉ"><br><br>

    <label for="cvv">CVV:</label>
    <input type="text" id="cvv" name="cvv"><br><br>
  </fieldset>

  <input type="submit" value="Megrendelés leadása">
</form>

A fieldset-ek és legend-ek használata egyértelműen logikai szakaszokra osztja az űrlapot. A helykitöltő szöveg további útmutatást nyújt, de ne feledje, hogy a helykitöltő szöveget nem szabad a címkék helyettesítésére használni.

3. példa: Regisztrációs űrlap ARIA attribútumokkal

Vegyünk egy regisztrációs űrlapot, ahol a becenév megadása opcionális. ARIA attribútumok használatával további kontextust biztosíthatunk.


<form>
  <label for="username">Felhasználónév:</label>
  <input type="text" id="username" name="username" required><br><br>

  <label for="password">Jelszó:</label>
  <input type="password" id="password" name="password" required><br><br>

  <label for="nickname">Becenév (opcionális):</label>
  <input type="text" id="nickname" name="nickname" aria-describedby="nickname-info">
  <span id="nickname-info">Ez a becenév nyilvánosan meg fog jelenni.</span><br><br>

  <input type="submit" value="Regisztráció">
</form>

Az aria-describedby attribútum összekapcsolja a becenév beviteli mezőt egy span elemmel, amely további információt nyújt arról, hogyan lesz a becenév felhasználva.

Eszközök az űrlapok akadálymentesítésének teszteléséhez

Számos eszköz segíthet az űrlapok akadálymentesítésének értékelésében:

Accessibility Insights: Böngészőbővítmény, amely azonosítja az akadálymentesítési problémákat a weboldalakon.
WAVE (Web Accessibility Evaluation Tool): Online eszköz, amely a weboldalakat akadálymentesítési hibák szempontjából értékeli.
axe DevTools: Böngészőbővítmény, amely automatizált akadálymentesítési tesztelést végez.
Képernyőolvasók (NVDA, JAWS, VoiceOver): A képernyőolvasókkal végzett tesztelés elengedhetetlen az olyan akadálymentesítési problémák azonosításához, amelyek az automatizált tesztelés során nem nyilvánvalóak.

Összegzés

Az akadálymentes űrlapcímkék elengedhetetlenek a befogadó webes élmények létrehozásához. Az ebben az útmutatóban vázolt legjobb gyakorlatok követésével biztosíthatja, hogy űrlapjai mindenki számára használhatóak legyenek, képességeiktől függetlenül. Az akadálymentesítés előtérbe helyezése nemcsak a fogyatékossággal élő felhasználók számára előnyös, hanem javítja a webhely általános használhatóságát is minden felhasználó számára. Ne felejtse el következetesen tesztelni űrlapjait kisegítő technológiákkal, és vonjon be fogyatékossággal élő felhasználókat a tesztelési folyamatba, hogy értékes visszajelzéseket kapjon, és folyamatosan javítsa webhelye akadálymentesítését.

Az akadálymentesítés felkarolása nem csupán a megfelelésről szól; arról van szó, hogy egy befogadóbb és méltányosabb webet hozzunk létre mindenki számára. Az akadálymentes űrlaptervezésbe való befektetéssel elkötelezettséget mutat a befogadás iránt, és jobb felhasználói élményt teremt mindenki számára.