Űrlapmezők akadálymentes címkézése

A cikk témái

Vitathatatlan tény, hogy az űrlapok központi szerepet töltenek be korunk weboldalain, hiszen nélkülük nem lehet regisztrálni, vásárolni, hozzászólni, bankolni, keresni. Amennyiben egy webes űrlap nem akadálymentes, akkor ezeket a feladatokat sok felhasználó csak nagyon körülményesen vagy egyáltalán nem képes elvégezni. Több tényezőtől függ az, hogy egy űrlap akadálymentes vagy sem. Ezek közül most csak a legegyszerűbbet, az űrlapmezők címkézését járom körül.

Mire szolgál az űrlapmező címke?

Az űrlapmezőhöz tartozó címke nagyon egyszerű feladatra hivatott. Megadja a felhasználónak, hogy az adott űrlapmezőbe mit kell beírnia, mit kell kiválasztania, illetve a kijelölős űrlapmezők esetén mit jelent az adott opció kijelölése.

Sok fejlesztő azt gondolja, hogy elegendő a címkét vizuálisan valamilyen irányban az űrlapmező közelében elhelyeznie, és így a címke és az űrlapmező összetartozása világos lesz a felhasználó számára. Azon túl, hogy ez a UX (felhasználói élmény) kutatások alapján a látó felhasználók esetén sem mindig igaz, a vak felhasználók számára végképp nem az.

Miért? Mert esetükben a vizuális összetartozás érzékelése hiányzik. Számukra erősebb kapcsolatra (szaknyelven: a képernyőolvasó program által algoritmikusan meghatározható kapcsolatra) van szükség az űrlapmező és a hozzá tartozó címke között. Ez azt jelenti, hogy ha a vak felhasználó egy adott billentyűparancs segítségével közvetlenül az űrlapmezőre navigál, akkor a képernyőolvasó program képes legyen önmagától meghatározni és felolvasni, hogy az adott űrlapmezőhöz milyen címke tartozik.

Űrlapmező definiálása label jelölőelemmel

A HTML nyelvben a label jelölőelem segítségével lehet szemantikusan megjelölni az űrlapmező címkéjét. Például így:

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

Önmagában a label jelölőelem ilyen formájú használata azonban még nem elégséges a címke és az űrlapmező kapcsolatának egyértelmű kifejezésére. Ha ugyanis a felhasználó az űrlapmezőre lép, akkor a képernyőolvasó program csak ennyit fog felolvasni: Szerkesztőmező. Ilyen esetben kénytelen a vak felhasználó önmagától, pusztán a logikai képességeire hagyatkozva „körbejárni” az űrlapmezőt, hogy a hozzá tartozó címkét megkeresse, pontosabban kikövetkeztesse. Ebben sajnos az sem segít, ha a címke egyébként label jelölőelemmel van ellátva.

Csak csendben jegyzem meg, hogy az egyik legelterjedtebb képernyőolvasó program, a JAWS újabb verziói már képesek intelligens módon kikövetkeztetni, hogy mi lehet a címke. De ez a következtetés nem mindig pontos. Éppen ezért jobb és biztonságosabb, ha mi magunk tesszük egyértelművé a kapcsolatot. Ráadásul nem szabad akadályok elé állítani azokat a felhasználókat sem, akik más képernyőolvasót használnak.

A címke és az űrlapmező összekapcsolása

A címke és az űrlapmező kapcsolatát kétféleképpen lehet egyértelművé tenni.

Címkébe ágyazott űrlapmező

Az egyik megoldást viszonylag kevesen alkalmazzák (beleértve magamat is), holott a HTML nyelvben már régóta szerepel. Ilyenkor a label elembe ágyazzuk be az űrlapmezőt, azaz szülő-gyerek viszonyt hozunk létre köztük:

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

Ez a kapcsolat egyértelmű a böngészőprogram és rajta keresztül a képernyőolvasó program számára is. Vagyis a képernyőolvasó az űrlapmezőre lépve elvileg ezt fogja felolvasni: Név szerkesztőmező. Azért csak elvileg, mert jelenleg nem mindegyik képernyőolvasó képes ezt megtenni, és emiatt nem alkalmazzuk sűrűn ezt a megoldást.

Összekapcsolás for attribútumon keresztül

A másik összekapcsolási mód azonban helyesen működik az ismert képernyőolvasókban. Ehhez első lépésben egyedi azonosítót, azaz id attribútumot adunk az űrlapmezőnek, majd a hozzá tartozó címke (label elem) for attribútumához ugyanezt az id értéket (azonosítót) írjuk be. Ez azt jelenti, hogy a label definiáltan az adott id azonosítóval ellátott űrlapmező címkéje lesz.

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

A felolvasóprogram ezt Név szerkesztőmező vagy Név kettőspont szerkesztőmező formában olvassa fel.

Az így összekapcsolt label és input elem a kódban tetszőleges sorrendben és egymástól távol is elhelyezkedhet. Például egy jelölőnégyzet esetén a címke általában a jelölőnégyzet után következik, ami az értelemszerű felolvasási sorrendet abszolút nem befolyásolja. Vagyis Vegetáriánus menüt kérek jelölőnégyzet. Nincs bejelölve szöveget hallja a felhasználó, ha az alábbi kódhoz ér a képernyőolvasó program:

<input id="vega" name="vega" type="checkbox" />
<label for="vega">Vegetáriánus menüt kérek</label>

Időnként megzavarja a fejlesztőket, hogy az űrlapmező id és name attribútuma között milyen viszony van. A két attribútumnak nincs köze egymáshoz, így értékük lehet egyforma és különböző is. Általában egyszerűbb, ha a két érték egyforma.

Ez alól azonban van egy nagyon fontos kivétel, amire fontos odafigyelni. Összetartozó rádiógombok esetén az egyes rádiógomboknak egyedi id attribútumot kell adnunk, miközben a name attribútumuknak mindenképpen egyformának kell lenni. Ugyanis az űrlapon belül a rádiógombok összetartozását a name attribútum azonosítja, míg az egyes opciókat az id. Utóbbi a label for attribútuma szempontjából fontos.

Az alábbi kódrészletben három szín közül választhat a felhasználó. A három rádiógombnak egyforma értékű a name attribútuma, de az id attribútumuk eltérő. Így mindegyikhez egyértelműen hozzákapcsolható egy saját címke.

<input type="radio" id="szin1" name="szin" value="p" />
<label for="szin1">Piros</label>
<input type="radio" id="szin2" name="szin" value="z" />
<label for="szin2">Zöld</label>
<input type="radio" id="szin3" name="szin" value="k" />
<label for="szin3">Kék</label>

A címke mint kattintható felület

Nem mellékesen akár a beágyazásos, akár a for attribútumos megoldást alkalmazzuk, egy másik előnyt is kínálunk a felhasználóknak. Nevezetesen, ha a címke és az űrlapmező kapcsolata világosan definiált, akkor a böngészőprogramok a címkét kattintható felületként kezelik.

Miért előnyös ez? Mert például a kijelölős űrlapmezők esetén nem kell az egérkurzorral pontosan eltalálni a jellemzően kicsi jelölőnégyzetet vagy rádiógombot, hanem a címkére kattintva is bejelölhetjük a mezőt. Ez elsősorban azok számára jelent könnyebbséget, akik koruk vagy valamilyen képességzavaruk miatt az egeret nehezen kezelik. De ez a megoldás mindenkinek, aki egeret vagy érintőképernyőt használ, megnövelt felhasználói élményt biztosít.

Vizuálisan rejtett űrlapcímke

A weboldalak keresőfunkcióját jellemzően olyan űrlappal oldjuk meg, amiben mindössze egy űrlapmező és egy „Keresés” feliratú gomb található. Ilyenkor a látó felhasználó számára viszonylag egyértelmű lehet, hogy az űrlapmezőbe a keresendő szót vagy kifejezést tudja beírni, hiszen vizuálisan az űrlapmező mellett közvetlenül elhelyezett gomb felirata áttételesen a címke szerepét is betölti.

A képernyőolvasó program felhasználói számára azonban a keresőmező funkciója már nem egyértelmű, mivel hozzárendelt címke hiányában az egy sima szerkesztőmezőként kerül felolvasásra. Számukra tehát kell egy olyan címke, ami a fent ismertetett megoldással hozzá van kapcsolva a keresőmezőhöz. Ugyanakkor jogosan felmerül, hogy ennek a címkének nem indokolt a vizuális megjelenése.

Ennek a helyzetnek az egyik megoldása az lehet, ha a label elemet a HTML elemek akadálymentes elrejtése című cikkemben leírt módon úgy rejtjük el, hogy az ne legyen látható, de maradjon hallható. Például így:

<label for="kereso" class="vizualisanrejtett">Keresés:</label>
<input id="kereso" type="text" name="kereso" />
<input type="submit" value="Keresés" />

A title attribútum mint címke?

Az iménti problémára egy másik megoldás lehet az is, ha a keresőmezőhöz mégsem társítunk label elemet, hanem felhasználjuk az input mezőhöz is hozzárendelhető title nevű attribútumot. Ugyanis ilyen esetben a title attribútum értékét is felolvassák a képernyőolvasó programok:

<input type="text" name="kereso" title="Keresés" />
<input type="submit" value="Keresés" />

Sajnos abban már eltérő viselkedést mutatnak a képernyőolvasók, hogy ha egy űrlapmezőhöz label elem és title attribútum is tartozik, akkor mit olvasnak fel. Van olyan, amelyik a kettő közül csak az egyik, de van olyan is, amelyik mindkettő értékét felolvassa.

Sok fejlesztő a title attribútumot jellemzően azért használja, mert bizonyos böngészőprogramokban ha a felhasználó az egérkurzort az adott elem fölé viszi, és néhány pillanatig ott is hagyja, akkor a title értéke úgynevezett súgóbuborék formájában jelenik meg. Arra azonban figyelni kell, hogy ezt a lehetőséget csak azok tudják elérni, akik egeret használnak. Akik kizárólag billentyűzetet vagy érintőképernyőt, azok nem. Ebből az következik, hogy önmagában a title elemet, mint címkét használni csak nagyon körültekintően szabad.

Címkézés WAI-ARIA segítségével

Az űrlapmezők címkézésére érdekes lehetőségeket nyújt az újkeletű WAI-ARIA technológia is, bár a fenti lehetőségeket nem feltétlenül helyettesíti vagy váltja le.

Az egyik ilyen az aria-labelledby attribútum. Ez összekapcsolási elvében nagyon hasonlít a label jelölőelem for attribútumára, csak ellenkező irányú. Vagyis nem a címke definiálja, hogy hozzá melyik űrlapmező tartozik, hanem az űrlapmező definiálja a címkéjét az aria-labelledby attribútum segítségével. Az összekapcsolás alapja itt is az id attribútum, de itt a címkéé. Ami igazán érdekes, hogy címkeként bármilyen jelölőelem szóba jöhet, nem csak label. A következő példában egy id attribútummal ellátott span elem tölti be a címke szerepét:

<span id="nevcimke">Név:</span>
<input type="text" name="nev" aria-labelledby="nevcimke" />

A WAI-ARIA szabványtervezet elméletileg azt sem zárja ki, hogy az aria-labelledby attribútum szóközökkel elválasztva több id attribútumértéket tartalmazzon. Ezzel elérhető, hogy szükség esetén az űrlapmezőhöz több különálló címke kapcsolódjon.

A másik kapcsolódó WAI-ARIA attribútum az aria-label, ami leginkább a title segítségével definiált címkéhez hasonlít. Vagyis a címke szövegét az űrlapmező aria-label attribútumában adjuk meg. Alkalmazása akkor megfontolandó, ha a címkét vizuálisan még súgóbuborék formájában sem akarjuk megjeleníteni, de a képernyőolvasóval fel akarjuk olvastatni. A keresőmezős példa így oldható meg aria-label segítségével:

<input type="text" name="kereso" aria-label="Keresés" />
<input type="submit" value="Keresés" />

Az aria-labelledby és az aria-label attribútum a WAI-ARIA-t támogató modern böngészőprogramoknál és képernyőolvasóknál jól működik. A régebbieknél azonban nem, így érdemes a cikk elején ismertetett, natív HTML alapú címkézés alkalmazását folytatni.

Használható-e a placeholder attribútum űrlapcímkeként?

Ezzel a kérdéssel egy külön cikkben foglalkozom.