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

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.