Bevezetés a WAI-ARIA szabvány használatába .1. rész

Sosem győzöm elégszer hangoztatni, hogy a webes akadálymentesség egyik alapfeltétele a szemantikailag korrekt HTML kód. A hozzáférhetőséget biztosító kisegítő technológiáknak (például a képernyőolvasó programoknak) csak így tudjuk átadni, hogy weboldalon mi micsoda. Ha a kisegítő technológia megérti ezt az információt, akkor valamilyen formában képes továbbadni a felhasználók fele is.

A jelölőelemek szemantikája

A HTML jelölőelemek szinte mindegyike jól meghatározható szemantikai jelentéssel bír, így ha a fejlesztő korrekt módon választja ki, hogy mikor melyiket alkalmazza, akkor jó irányba halad az akadálymentesség felé. Ha például szemantikailag azt akarja jelezni, hogy az adott szövegrész egy másodszintű címsor, akkor a h2 jelölőelemet használja:

<h2>Ügyfélszolgálatunk elérhetőségei</h2>

A h2 jelölőelem alkalmazása miatt a képernyőolvasó program a fenti szöveget így olvassa fel: Második címsorszint Ügyfélszolgálatunk elérhetőségei. Vagyis a második címsorszint, mint szemantikai információ szépen eljut a képernyőolvasó programhoz, és azon keresztül a látássérült felhasználóhoz is.

Habár ez annyira evidens, mint az egyszeregy, mégis nagyon sokan nem így csinálják. Főleg azért, mert kizárólag az adott szöveg vizuális megjelenésére koncentrálnak, és a szemantikájával abszolút nem törődnek. Az egyik jellemző példa, hogy nem csak a címsoroknál használják a h1-h6 elemeket, hanem akkor is, ha szép nagy betűkkel szeretnének valamit kiírni a képernyőre. De ennél még rosszabb, ha egyáltalán nem használnak címsor jelölőelemeket.

„divitis” a hagyományos weboldalakon

Évekkel ezelőtt, amikor a fejlesztők igyekeztek áttérni a táblázat alapú megjelenésről a modern, CSS alapú megjelenésre, felfedezték maguknak a div és a span jelölőelemeket. Ezzel nincs is gond, de pont ez az a két HTML jelölőelem, ami önmagában különösebb szemantikai jelentéssel nem rendelkezik. Szerepük mindössze annyi, hogy valamilyen szemantikai összetartozást jelöljenek a weboldal szerkezetében. De hogy pontosan mit, azt csak a fejlesztő tudja. Persze az id vagy a class attribútumhoz rendelt, értelmes elnevezésű érték segítségével mások számára is egyértelmű lehet az összetartozás oka, de ez akadálymentességi szempontból sajnos nem számít.

A div és a span térhódítása magával hozta a „divitis” nevű „kódbetegséget”. Ez azt jelenti, hogy sokan akkor is ezeket az elemeket alkalmazzák, amikor alkalmazhatnának egy szematikailag egyértelműbb jelölőelemet is. Sajnos nagyon sokszor találkozom például az alábbi kóddal, ahol a címsor jelölőelem helyett div elemet használ a fejlesztő:

<div class="cimsor">Ügyfélszolgálatunk elérhetőségei</div>

Ennek a kódnak nincs semmilyen szemantikai jelentése, azon kívül, hogy az ügyfélszolgálatunk és az elérhetőségei szó valami miatt összetartozik. A kisegítő technológia nem értesül arról, hogy ez egy címsor, még akkor sem, ha a class értéke erre utal. Sajnos aki ilyen kódot ír, annak csak az számít, hogy a CSS segítségével ezt a szöveget majd nagyobb betűmérettel, esetleg vastagon jelenítse meg a képernyőn, és ezzel a címsor kérdést letudta.

„divitis” a webalkalmazásokban?

Miközben a hagyományos weboldalaknál a div és a span elemek ész nélküli használata egyértelmű hiba, addig a modern, dinamikus webalkalmazásoknál ezek sűrű alkalmazása nem feltétlenül az. A webalkalmazásokban ugyanis rengeteg olyan dinamikus felhasználói felületi elem található, amelyek korrekt szemantikai leírásása a HTML hagyományos jelölőelemei önmagukban nem, vagy csak részben elegendők. Ilyen esetekben sokszor nincs más lehetőség, mint a div és a span használata.

Megjegyzem, hogy sajnos a webalkalmazásoknál is gyakran előfordul, hogy a fejlesztők kényelmi szempontok alapján meg sem kísérlik más, szemantikailag odaillőbb jelölőelemek használatát. Például egy nyomógombnál a button jelölőelem használata helyett mondjuk ezt használják:

<div class="button">Mégsem</div>

Az ilyen esetek miatt a webalkalmazásoknál talán még fontosabb, hogy a kisegítő technológia megértse az adott felületi elem szerepét.

Szemantikai szerepek definiálása a WAI-ARIA segítségével

Az előzőekben ismertetett probléma volt az egyik oka annak, hogy a W3C berkein belül elindult a Accessible Rich Internet Applications (WAI-ARIA) szabvány kidolgozása. Ugyan az ARIA rövidítés az akadálymentes gazdag internet alkalmazásokra utal, semmi sem zárja ki, hogy hagyományos weboldalakon is alkalmazzuk az akadálymentesség tökéletesítése érdekében.

Előre figyelmeztetem az olvasót, hogy abszolút életszerűtlen és nem követendő példa lesz a következő kód, de jól szemlélteti a WAI-ARIA egyik lényegét.

Ha visszatérünk az előző, div elemet használó „címsoros” példára, akkor ott az volt a fő probléma, hogy a képernyőolvasó program nem érti, hogy az ügyfélszolgálatunk elérhetőségei szöveg szemantikai szerepe címsor.

A bizonytalan vagy ismeretlen szemantikájú jelölőelemeknél (mint például a div vagy a span) a szemantikát a WAI-ARIA szabványban meghatározott attribútumok és attribútumértékek segítségével biztosítjuk. A szabvány többek között definiál egy role (szerep) nevű attribútumot, melyet bármelyik meglévő HTML jelölőelemhez hozzárendelve megadhatjuk annak valós szemantikai szerepét. A role attribútum 60 különböző attribútumértéket vehet fel.

Esetünkben azt, hogy az adott div elem tulajdonképpen egy címsor, a role attribútum heading értékével definiálhatjuk:

<div role="heading" class="cimsor">
   Ügyfélszolgálatunk elérhetőségei
</div>

Ha ezzel a kóddal egy olyan képernyőolvasó program találkozik, amelyik már támogatja a WAI-ARIA-t, akkor ezt fogja felolvasni: Címsor Ügyfélszolgálatunk elérhetőségei. Az aria-level attribútummal még akár azt is megadhatjuk, hogy második szintű címsorról van szó:

<div role="heading" aria-level="2" class="cimsor">
   Ügyfélszolgálatunk elérhetőségei
</div>

Hangsúlyozom, hogy ez csak egy elvi szemléltető példa, hiszen a korrekt megoldás ebben az esetben mindenképpen a natív h2 jelölőelem role attribútum nélküli használata lenne, mivel maga a jelölőelem természetes módon hordozza a szemantikai információt:

<h2>Ügyfélszolgálatunk elérhetőségei</h2>

A magam részéről nem feltételezem, hogy aki egy hagyományos weboldalon a címsort div elemmel definiálja, az nagy energiát fektetne még abba, hogy a role attribútumot is megadja, hiszen ennyi erővel egyszerűbb lenne neki a h2 elemet használni. Ugyanakkor a webalkalmazások esetén talán már könnyebben rávehetők a fejleszők, hogy ha a korábban említett példa kapcsán mégis ragaszkodnak a div segítségével megadott nyomógombhoz, akkor a role attribútum button értékének megadásával biztosítsák az akadálymentes értelmezést:

<div role="button" class="button">Mégsem</div>

Ettől függetlenül azt javaslom, hogy ők is fontolják meg a natív button jelölőelem alkalmazását:

<button>Mégsem</button>

Ökölszabály, hogy ha valaki WAI-ARIA role attribútumot használ, akkor mindig tegye fel magának a kérdést, hogy nincs-e eleve olyan HTML jelölőelem, ami önmagában megfelelő lenne.

Szakaszjelző szerepek

A HTML4 és az XHTML kódokban nem minősül divitis-nek ha a weboldal egyes régióit, szakaszait div elemekkel jelöljük meg. Például a navigációs területet én így szoktam megjelölni:

<div id="navigacio">
   <!-- ide jön a navigáció -->
</div>

Értelemszerűen ennek sincs semmilyen szemantikai értelme, de valahogy mégis jó lenne átadni a képernyőolvasót alkalmazó felhasználónak, hogy ez itt a navigációs szakasz. Ezt például úgy lehet megoldani, hogy egy címsort teszünk a div elembe, amit persze az egyik korábbi cikkemben leírt módon vizuálisan elrejtünk.

<div id="navigacio">
   <h2 class="vizualisrejtes">Navigációs menü</h2>
   <!-- ide jön a navigáció -->
</div>

A megadott címsor nem pusztán azt a célt szolgálja, hogy azonosítja az adott területet, hanem úgynevezett navigációs ugrópontként is funkcionál. Ugyanis a képernyőolvasó programot használók a címsorok listájának lekérése után egyből odaugorhatnak bármelyik címsorral kezdődő részhez.

A WAI-ARIA role attribútumának segítségével a navigációs szakasz sokkal egyszerűbben és egyértelműbben definiálható:

<div role="navigation" id="navigacio">
   <!-- ide jön a navigáció -->
</div>

A WAI-ARIA-t támogató képernyőolvasó program ehhez kódhoz érve megérti a div valódi szemantikai szerepét, és például azt olvassa fel, hogy Navigáció szakaszjelző. Sőt, a szakaszjelző az ugrópont szerepét is betölti, hiszen a címsorokhoz hasonlóan ezeket is külön lekérheti a képernyőolvasó felhasználója.

Mivel azonban a WAI-ARIA-t csak az újabb képernyőolvasó programok támogatják, így a visszamenő kompatibilitás érdekében a role definiálásával párhuzamosan egy ideig javasolt a címsor használata is:

<div role="navigation" id="navigacio">
   <h2 class="vizualisrejtes">Navigációs menü</h2>
   <!-- ide jön a navigáció -->
</div>

A HTML5-ben a navigációs terület definiálásához már rendelkezésre áll egy nav nevű jelölőelem, aminek egyértelmű szemantikai jelentése van. Ha a jövőben a képernyőolvasó programok natívan megértik majd a nav jelölőelem szemantikáját, akkor sem a címsorra, sem a role attribútumra nem lesz szükség. Addig azonban érdemes egy ilyen öszvér megoldást használni:

<nav role="navigation">
   <h2 class="vizualisrejtes">Navigációs menü</h2>
   <!-- ide jön a navigáció -->
</nav>

A WAI-ARIA-ról szóló cikksorozatom következő részében a szabvány által definiált állapotokkal és tulajdonságokkal foglalkozom majd.

Frissítés

Időközben megjelent a WAI-ARIA szabvány magyar fordítása is, Akadálymentes Gazdag Webes Alkalmazások címmel.