A <dl> leíráslistáról

A <dl> jelölőelem, vagyis a leíráslista a HTML egyik őseleme, hiszen már a HTML DTD első vázlatában is felbukkant, majd ezt követően a HTML összes verziójában megtaláljuk. Valami miatt azonban mégis alulreprezentált, amit onnan gondolok, hogy én is viszonylag ritkán látom éles kódokban. Pedig alkalmazási lehetősége bőven lenne.

Ezt a jelölőelemet – amit időnként definíciós listaként is emlegetnek – jellemzően név-érték párok felsorolására használhatjuk. Vagyis olyan esetekben, amikor valamiről vagy valakiről nevesített adatokat, értékeket, tulajdonságokat szeretnénk elhelyezni a weboldalon.

Vegyük példaként azt, hogy egy online könyváruházban az alábbi módon szeretnénk megjeleníteni a könyv adatait:

<div>-ekből barkácsolt adatlap

Nagyon gyakori, hogy a példánkhoz hasonló adatlapokat valami ilyesmi formában, jellemzően <div> jelölőelemekkel kódolják:

<div class="adatlap">
    <div class="adatlap--sor">
        <div class="adatlap--cimke">
            Kiadó:
        </div>
        <div class="adatlap--ertek">
            Magvető Kiadó
        </div>
    </div>
    <div class="adatlap--sor">
        <div class="adatlap--cimke">
            Oldalak száma:
        </div>
        <div class="adatlap--ertek">
            540
        </div>
    </div>

    <!-- ide jönnek a további tulajdonságok -->
</div>

Ez a megoldás gyakorlatilag soronkénti szövegegységeket hoz létre, mindenfajta szemantikai információ nélkül. Vagyis például képernyőolvasó programmal felolvastatva csak ez lesz hallható:

Kiadó

Magvető Kiadó

Oldalak száma

540

Erre sokan mondhatják azt is, hogy mi ezzel a gond, hiszen minden adat elhangzik? Persze, az adatok valóban hallhatóak, de a következők például már nem:

• Nem hallható, hogy ez egy felsorolás, és az sem, hogy hány elemből áll.
• Nem hallható, hogy hol kezdődik, és hol végződik a tulajdonságok felsorolása. Vajon egy elhangzó szövegrész még az adatlap része, vagy már egy teljesen másik blokkhoz tartozik?
• Hallhatóan nem különböztethető meg, hogy melyik szöveg a tulajdonság neve, és melyik a tulajdonság értéke. Ez bizonyos esetekben akár komoly félreértésekhez is vezethet.

Ha azonban a példánkban szereplő adatlapot a <dl> jelölőelem segítségével kódoljuk, akkor elviekben az említett információkhoz is hozzájuthatnak a képernyőolvasós felhasználók. (Az elviekben kitételt azért hangsúlyozom, mert mindjárt látni fogjuk, hogy sajnos a gyakorlatban még nem ennyire rózsás a helyzet.)

A leíráslista definiálása

Kezdjük tehát azzal, hogy az adatlapunkat, vagyis a leíráslistánkat a <dl> jelölőelemmel definiáljuk:

<dl>
    
</dl>

Ha az adatlapunknak van címe is (pl. „A könyv adatai”), akkor azt mindenképpen a <dl> jelölőelem elé tegyük, mégpedig egy megfelelő címsor jelölőelemmel (pl. <h2> címsorral). Közvetlenül a <dl> elembe beágyazva ugyanis csak bizonyos elemek kerülhetnek, címsorok például nem.

Ezután jöhetnek a név-érték párok. <dt> jelölőelembe tesszük az adott tulajdonság nevét, és <dd> jelölőelembe az értékét:

<dl>
    <dt>Kiadó:</dt>
    <dd>Magvető Kiadó</dd>

    <dt>Oldalak száma:</dt>
    <dd>540</dd>

    <!-- ide jönnek a további tulajdonságok -->
</dl>

A név-érték pár nem minden esetben jelent 1:1 kapcsolatot. Akadhatnak olyan esetek is, amikor ugyanahhoz a tulajdonsághoz több érték is tartozik. Ezt egyszerűen úgy oldhatjuk meg, hogy a <dt> elem után több <dd> elemet definiálunk. Például a borítónál így:

<dt>Borító:</dt>
<dd>keménytábla</dd>
<dd>védőborító</dd>

A leíráslista előnyei az akadálymentesség szempontjából

A div-es barkácsolással szemben a <dl>, <dt> és <dd> elemekre épülő szemantikus leíráslistát a böngészőprogramok sokkal „értelmesebben” tudják továbbítani a különböző kisegítő technológiák, így például a képernyőolvasó programok felé.

Vagyis elviekben feltételezhetjük a következőket:

• Az adatlaphoz érve a képernyőolvasó program beolvashatja, hogy egy leíráslista következik.
• Az adatlap végén vagy az adatlapot elhagyva a képernyőolvasó program beolvashatja, hogy a leíráslista végére ért a felhasználó.
• A képernyőolvasó program beolvashatja, hogy hány darab név-érték pár vagy elem található a felsorolásban.
• A képernyőolvasó program beolvashatja, hogy a felhasználó éppen a felsorolás hányadik név-érték párját vagy elemét hallja.
• A képernyőolvasó program beolvashatja, hogy az adott szöveg a tulajdonság neve (a kifejezés), vagy a tulajdonság értéke (a leírás).

Hogyan hallatszik képernyőolvasóval?

Lássuk, hogy az elvi feltételezéseinkhez képes a gyakorlatban (a cikkem írásának idején) mi hallatszik a különböző képernyőolvasó programokban. (A sorok a képernyőolvasó kurzorával történő lépkedések után elhangzó szöveget reprezentálják.)

Definíciós lista, 2 elemű

Kiadó

Magvető Kiadó

Oldalak száma

540

Lista vége

Lista, 4 elemmel, Kiadó

Magvető Kiadó

Oldalak száma

540

Lista vége

Leíráslista 2 elem

Kiadó, 1/4

Magvető Kiadó, 2/4

Oldalak száma, 3/4

540, 4/4

Leíráslista vége

Kiadó, Leíráslista kezdete, Kifejezés

Magvető Kiadó, Leírás

Oldalak száma, Kifejezés

540, Leíráslista vége, Leírás

Kiadó

Magvető Kiadó, Definíció

Oldalak száma

540, Definíció

Ezekből az eredményekből megállapíthatjuk, hogy a <dl> leíráslista képernyőolvasós támogatottsága nagyon eltérő, és sajnos elmarad az elvárásainktól. De még így sokkal jobb, mint a div-es megoldás. Szóval bátran használjuk, és bízzunk abban, hogy a támogatottsága idővel javulni fog.

Vízszintes megjelenésű leíráslista

Sokan a hagyományos felsorolásoknál (<ul> és <ol> listáknál) is úgy gondolják, hogy a felsorolás csak függőleges irányban értelmezhető. Így ha meglátnak egy olyan képernyőtervet, amin egymás mellett lévő elemek vannak, akkor azt nem feltétlenül tekintik listaként.

Pedig a felsorolás csak egy logikai fogalom, ami megjelenésében függőleges és vízszintes is lehet. Gondoljunk például a honlap tetején vízszintesen megjelenő navigációs sávra, amiben a linkek egymás mellett vannak felsorolva.

A <dl> leíráslisták is lehetnek vízszintes megjelenésűek, bár ennek elég sokáig komoly kerékkötője volt, hogy a <dt> és <dd> elemek közösen nehézkesen voltak formázhatók, illetve pozicionálhatók.

A megoldást 2016-ban a WHATWG-féle HTML specifikáció módosítása, majd 2017-ben a HTML 5.2 hozta el. A HTML szabvány ezen verzióitól kezde a <dl> jelölőelemben a <dt>/<dd> párok <div> jelölőelemmel csoportosíthatók a CSS formázás, illetve a globális HTML attribútumok (pl. mikroadatok) definiálása céljából. Ez a <dl> jelölőelem szemantikáját semmilyen módon nem változtatja meg, így a képernyőolvasós felolvasást sem befolyásolja.

Lássunk egy példát a csoportosításra:

<dl>
    <div>
        <dt>Átvételi mód</dt>
        <dd>Házhozszállítással</dd>
    </div>
    <div>
        <dt>Szállítási cím</dt>
        <dd>
            Gipsz Jakab<br />
            1111 Budapest, Nevenincs utca 1.
        </dd>
    </div>
</dl>

Ez a leíráslista már könnyedén megformázható vízszintes (és ha kell, akkor persze függőleges) megjelenésűre is. Például így: