A fieldset és a legend igazi szerepe

Már 1997 óta, azaz a HTML 4 megjelenése óta létezik ez a két jelölőelem, mégis ritkán találkozom velük a kódokban. Csak vélelmezni tudom, hogy sokan vagy nem ismerik, vagy túl lényegtelennek és opcionálisnak tartják a használatukat. Pedig nagyon sok olyan eset van, amikor a használatuk messze nem opcionális, hanem szinte kötelező. Nem véletlen, hiszen tulajdonképpen az akadálymentesség miatt lettek kitalálva.

Definíció szerint a <fieldset> jelölőelem a logikailag összetartozó űrlapelemek csoportosítására szolgál. A csoport címkéjét (nevét) a <legend> jelölőelem segítségével adhatjuk meg, ami az első elem a <fieldset> elemen belül.

Klasszikus példa, amikor egy rendelési űrlapban a szállítási és a számlázási cím megadására szolgáló űrlapmezőket csoportosítjuk:

<form>
  <fieldset>
    <legend>Szállítási cím</legend>
    <label for="szallitasi-nev">Név:</label>
    <input type="text" id="szallitasi-nev" name="szallitasi-nev">
    <!-- ide jönnek a szállítási cím további űrlapmezői -->
  </fieldset>
  <fieldset>
    <legend>Számlázási cím</legend>
    <label for="szamlazasi-nev">Név:</label>
    <input type="text" id="szamlazasi-nev" name="szamlazasi-nev">
    <!-- ide jönnek a számlázási cím további űrlapmezői -->
  </fieldset>
</form>

Sajnos sokszor láttam már különböző HTML oktatóanyagokban, hogy a <fieldset> elemet egyszerűen úgy definiálják, hogy segítségével „keretet lehet rajzoltatni” az űrlapelemek köré. Habár a böngészőprogramok jellemzően valóban keretezéssel jelenítik meg a <fieldset> határait, természetesen nem a grafikai keretezés a lényeg, hanem a logikai összetartozás felhasználóbarát érzékeltetése.

Vagyis az, hogy a felhasználó észlelje és megértse, hogy a <fieldset>-ben lévő űrlapmezők a <legend> által leírt „szempont” miatt összetartoznak, és valamilyen módon észlelje azt is, hogy az adott csoport hol kezdődik, illetve hol ér véget. Utóbbi kapcsán az is érdekes lehet, hogy a hasonló vagy egyforma címkéjű (nevű) űrlapmezőkről a felhasználó nagy biztonsággal eldönthesse, hogy ebbe vagy abba csoportba tartoznak-e. És ami talán akadálymentességi szempontból a leglényegesebb, hogy mindez vizuálisan és hallhatóan is megtörténjen.

Az összetartozás vizuális érzékeltetésére a körbekeretezés kézenfekvő megoldás, de a CSS segítségével egyéb grafikai megoldások is szóba jöhetnek. Ugyanígy a <legend> stílusa is szabadon variálható annak érdekében, hogy a csoport domináns címkéjeként jelenjen meg.

Egyesekben felmerülhet kérdés, hogy Oké, de ez a csoportosítás egy CSS-sel megformázott <div>-vel is megoldható. Miért jobb a <fieldset>?

Ami a <fieldset> és a <legend> párosát igazán megkülönbözteti egy CSS-sel körbekeretezett mezei <div>-től, az a képernyőolvasó programok által biztosított hallható „megjelenés”.

A képernyőolvasó programok ugyanis megértik a <fieldset> szemantikáját (szerepét), és amikor a felhasználó egy ilyen elemhez érkezik, vagy közvetlenül belelép a csoport egyik űrlapelemébe, akkor meghallja, hogy egy csoporthoz érkezett, vagy egy csoportban van. És persze azt is meghallja, hogy mi a csoport neve, hiszen ezt a <legend> biztosítja. Vagyis létrejön az összetartozás hallható érzékeltetése.

Fontos megjegyeznem, hogy a különböző képernyőolvasó programok eléggé eltérő „stratégiával” olvassák fel a <fieldset> és a <legend> elemet. Ennek részleteibe most nem mennék bele, de például van olyan képernyőolvasó és böngészőprogram páros, amelyik a csoport összes űrlapeleménél felolvassa az adott űrlapelem címkéjét és a csoport nevét (vagyis a <legend>-et) is. De van olyan is, amelyik csak az első űrlapelemnél teszi ugyanezt. Ráadásul a felolvasást az is befolyásolhatja, hogy a felhasználó melyik navigációs módszert alkalmazza, amikor az űrlapelemek között lépked.

Például az első mintakódunk esetén az NVDA képernyőolvasó ezt olvassa fel, ha a TAB billentyűvel lépünk bele a szállítási cím csoport első mezőjébe: Szállítási cím elemcsoport, Név, szerkesztőmező. Ugyanez a VoiceOver képernyőolvasó esetén így hangzik: Név, szöveg szerkesztése, Szállítási cím, Szállítási cím, csoport.

Amikor a <fieldset> használata szinte kötelező

Értelemszerűen nem mindegyik űrlap tartalmaz több csoportra osztható mezőket, tehát nem kell indokolatlanul <fieldset>-et használni. Ugyanakkor a bevezetőben is említettem, hogy van egy borzasztóan gyakori űrlaptípus, amikor a <fieldset> használata szinte kötelező. Ezek a rádiógombokat és/vagy jelölőnégyzeteket tartalmazó űrlapok, hiszen ezeknél a választható opciók jellemzően mindig összetartoznak.

Ahogy az Űrlapmezők akadálymentes címkézése című írásomban is leírtam, a rádiógombok, illetve a jelölőnégyzetek esetén is a <label> jelölőelem segítségével címkézhetjük meg magukat a választható opciókat:

<input type="radio" id="piros" name="szin" value="piros">
<label for="piros">Piros</label>
<input type="radio" id="zold" name="szin" value="zold">
<label for="zold">Zöld</label>
<input type="radio" id="kek" name="szin" value="kek">
<label for="kek">Kék</label>

De ebből a példából hiányzik egy nagyon fontos elem. Nevezetesen az, hogy ezek az opciók mire is vonatkoznak, vagyis például mi az a kérdés, amire válaszolnia kell a felhasználónak. Az auditálások során szerzett tapasztalataim szerint ezt sokan úgy oldják meg, hogy egy <p>, <div>, vagy esetleg valamilyen címsor (pl. <h3>) jelölőelembe teszik bele a kérdést. Mondjuk így:

<form>
  <p>Milyen színű legyen?</p>
  <input type="radio" id="piros" name="szin" value="piros">
  <label for="piros">Piros</label>
  <input type="radio" id="zold" name="szin" value="zold">
  <label for="zold">Zöld</label>
  <input type="radio" id="kek" name="szin" value="kek">
  <label for="kek">Kék</label>
</form>

Ez valamilyen alapszintű CSS formázást feltételezve például így nézhet ki:

Ez a megoldás akadálymentességi szempontból azért problémás, mert a kérdés és a hozzá tartozó opciók között nincsen semmilyen kódolt (a képernyőolvasó program által is meghatározható) logikai kapcsolat. Vagyis a kérdés legfeljebb vizuálisan lesz a rádiógomb-csoport címkéje, ami messze nem elégséges. Felolvasáskor is csak maximum abban az értelemben tekinthető címkének, hogy ha lineáris felolvasási sorrendet feltételezünk, akkor a kérdés előbb hangzik el, mint a lehetséges válaszok. Már ha egyáltalán elhangzik.

Ugyanis kódolt kapcsolat hiányában simán elképzelhető, hogy a képernyőolvasó egyáltalán nem fogja felolvasni a kérdést, ha a felhasználó valamelyik választható opcióra lép. Jellegzetesen a Windows-os képernyőolvasóknál létezik az úgynevezett űrlap üzemmód, amikor a felhasználó kizárólag az űrlapban lévő űrlapelemekkel áll interakcióban. Ebben az üzemmódban csak azokat az információkat hallja, amiket az űrlapelemek közvetlenül, vagy valamilyen kódolt kapcsolat útján tartalmaznak. Ilyenkor az űrlapban található „sima” jelölőelemek (például azok a <p> elemek, amelyek nincsenek kódolt kapcsolatban az űrlapelemekkel) nem kerülnek felolvasásra.

És itt kerül újra képbe a <fieldset> és a <legend> párosa. A <fieldset> tudja kialakítani a kérdés és az opciók közötti logikai összetartozást, míg a <legend> tudja biztosítani a kialakított csoport címkéjét. Az iménti példa akadálymentes megoldása tehát ez lehet:

<form>
  <fieldset>
    <legend>Milyen színű legyen?</legend>
    <input type="radio" id="piros" name="szin" value="piros">
    <label for="piros">Piros</label>
    <input type="radio" id="zold" name="szin" value="zold">
    <label for="zold">Zöld</label>
    <input type="radio" id="kek" name="szin" value="kek">
    <label for="kek">Kék</label>
  </fieldset>
</form>

Tulajdonképpen az történik, hogy a rádiógombok logikailag két címkét is kapnak. Az egyiket a <legend> adja, a másikat a <label>. Mindkettőre szükség van ahhoz, hogy a felhasználó ki tudja választani a megfelelő opciót. Ha például a TAB billentyűvel az első rádiógombra lép, akkor valami ilyesmi hangzik el: Milyen színű legyen? elemcsoport, Piros, választógomb.

A jelölőnégyzeteknél is ugyanez a megoldás javasolt, kivéve a logikailag önálló jelölőnégyzeteket.

Egyéb érdekességek

Talán kevésbé köztudott, hogy a HTML 5.2 óta már érvényes megoldás, ha címsor (pl. <h3>) jelölőelemet teszünk a <legend> elembe. A korábbi HTML specifikációk alapján csak bekezdésen belül használható jelölőelemek (pl. <strong>, <span>, stb.) kerülhettek a <legend> elembe. Ez a változás azonban sokat segíthet például azoknak a képernyőolvasós felhasználóknak, akik címsorok alapján navigálnak az oldalon. Természetesen ez sem jelenti azt, hogy minden esetben ezt a mintát kell követni, de ha a konkrét eset úgy adja magát, akkor nyugodtan használható.

A másik érdekesség, hogy elvileg a <fieldset> elemek egymásba ágyazhatók, vagyis egy elemcsoport simán tartalmazhat egy olyan tagot, ami szintén egy elemcsoport. De ez a megoldás jelenleg mégsem igazán ajánlott, mert a <fieldset> végét (a csoport elhagyását) nem mindegyik képernyőolvasó jelzi, vagyis a felhasználó nem tudhatja teljes bizonyossággal, hogy egy adott űrlapelem még a beágyazott csoportba tartozik-e vagy sem.