Szaktanácsadás akadálymentes honlap készítéséhez

Nem volt akadálymentes az online népszámlálási kérdőív

A cikk témái:

Így a 21. század elején teljesen normális dolog, hogy az internet segítségével több olyan állampolgári kötelezettségünknek is eleget tudunk tenni, amelyre eddig csak papír alapú, személyes vagy hivatali ügyintézés keretében kerülhetett sor. Igaz ez a 2011-es népszámlálásra is, amelynél most első alkalommal a népszámlálási kérdőív online kitöltésére is lehetőséget kaptunk. Ezzel a lehetőséggel azonban többen képtelenek voltak élni, hiszen az online népszámlálási kérdőív nem volt akadálymentes.

Az a baj, hogy szinte előre borítékolni mertem volna, hogy ez így lesz. Miközben maximálisan elismerem azt a gigászi méretű munkát, amit az informatikus kollégák a népszámlálás informatikai rendszerének kialakításakor elvégezhettek, mégis megdöbbent, hogy egy ilyen méretű állami projekt megtervezésekor láthatóan nem volt cél a népszámlálás webes felületének akadálymentes megvalósítása.

Ilyenkor mindig felmerül a kérdés, hogy ennek vajon mi az oka? Tételezzük fel jóhiszeműen, hogy nem az esélyegyenlőség elvének megkérdőjelezése. Akkor az akadálymentes webfejlesztéssel kapcsolatos ismerethiány? Vagy a nagy klasszikus: a pénzhiány?

Sajnos az ismerethiányból simán következhet az utóbbira való téves hivatkozás. Az ugyanis egyik projekt esetén sem jelent nagyságrendi forrásigény növekedést, ha a projekt tervezésétől fogva legalább egy, hozzám hasonló akadálymentesítési specialista segíti a projektmenedzserek és a fejlesztők munkáját. Így ugyanis eleve akadálymentes oldal jöhet létre, ami bizonyítottan kevesebb ráfordítással jár, mintha utólag kellene akadálymentesíteni a már kész rendszert.

Az Informatika a Látássérültekért Alapítvány közleménye szerint az online népszámlálási kérdőív esetén az utolsó pillanatban ugyan történt egy kétségbeesett kísérlet az utólagos akadálymentesítésre, de ekkor már késő volt. Webfejlesztési szempontból annyira szokatlan és merev megoldások voltak a weboldalon, hogy néhány alt attribútum elhelyezésén túl más akadálymentesítési megoldás már szóba sem jöhetett.

Konkrét példa

Miután a blogom egyik fő célja, hogy a webfejlesztők tanuljanak a jó és a rossz megoldásokból, ezért egy rövid és egyszerű példán megmutatom, hogy rögtön a népszámlálási weboldal nyitóoldalán milyen akadálymentességi hibákkal találkoztam. A belső oldalakon, azaz magán az online kérdőíven jellemzően ugyanezek a hibák ismétlődtek, bár jócskán előfordultak ezeknél komolyabbak is.

Induljunk ki abból, hogy a népszavazási kérdőív nem más, mint egy űrlap. Vannak benne űrlapmezők, amelyekhez bevitelt segítő címkék és magyarázatok tartoznak. Azt vártam volna, hogy a kérdőív legalább az űrlapok terén kielégítse azt a minimális akadálymentességi követelményt, hogy az űrlap kitöltőjének mindig egyértelmű legyen, melyik űrlapmezőbe mit és hogyan kell beírnia, vagy milyen opciók közül kell választania. De ez nem így volt.

Az online népszámlálás nyitóoldalán a belső oldalakhoz képest egy nagyon egyszerű űrlap szerepelt, ami két űrlapmezőt és egy gombot tartalmazott.

Az online népszámlálás nyitóoldalán lévő, a belépéshez szükséges űrlap képernyőfotója
Az online népszámlálás nyitóoldalán elhelyezett űrlap

Az egyik űrlapmezőbe a bejelentkezéshez szükséges azonosítót, a másikba a belépési kódot kellett beírni. A HTML kódban ezt így lett megvalósítva:

<tr>
  <td class="GJN-M04OJ">
    <div class="GJN-M04PJ">Azonosító:</div>
  </td>
</tr>
<tr>
  <td class="GJN-M04NJ" nowrap="nowrap">
    <input maxlength="14" class="gwt-TextBox" type="text">
  </td>
</tr>
<tr>
  <td class="GJN-M04OJ">
    <div class="GJN-M04PJ">Belépési kód:</div>
  </td>
</tr>
<tr>
  <td class="GJN-M04NJ" nowrap="nowrap">
    <input maxlength="9" class="gwt-TextBox" type="text">
  </td>
</tr>

Az első megfogalmazható kritika ezzel a kóddal szemben a táblázat használata. Önmagában az még nem lenne gond, ha az űrlap elrendezésére korrektül elkészített táblázatot használ valaki. Például olyat, ahol az űrlapmező címke és az űrlapmező egymás melletti cellákban van, mégpedig úgy, hogy az űrlapmező címkéjének cellája th fejléccella. Itt viszont az egymás alatt lévő, egyforma td táblázatcellák arra utalnak, hogy a táblázatos elrendezés használata nem igazán indokolható.

A másik probléma, hogy ez a kód jellegzetes példája az úgynevezett „divitis” nevű „kódbetegségnek”. Akkor mondjuk egy HTML kódra, hogy „divitis”-es, ha ott is a különösebb szemantikai jelentéssel nem rendelkező div jelölőelemet alkalmazzák, ahol egy szemantikusabban kifejezőbb jelölőelemet kellene használni.

Esetünkben érthetetlen, hogy az azonosító és a belépési kód szövegű űrlapcímkék megjelölése miért div-vel, és miért nem a HTML-ben erre a célra kitalált, szemantikusan pont ideillő label jelölőelemmel történt. Akadálymentesség szempontjából a kettő között borzasztóan nagy a különbség.

De a label használata önmagában még nem elég. Ugyanis biztosítani kell azt is, hogy az űrlapcímke logikailag össze legyen párosítva a hozzá tartozó űrlapmezővel. Ezt jellemzően úgy oldjuk meg, hogy a label jelölőelem for nevű attribútumába a hozzá párosított űrlapmező id attribútumának értékét írjuk. Valahogy így:

<label for="azonosito">Azonosító:</label>
<input id="azonosito" type="text" />

Ezt az összekapcsolást a képernyőolvasó programok úgy tudják kihasználni, hogy amikor a felhasználó belép az űrlapmezőbe, akkor felolvasásra kerül az űrlapmezőhöz tartozó címke szövege. Így mindig egyértelmű, hogy az adott űrlapmezőbe mit kell beírni.

Talán érezhető, hogy ez a megoldás nem annyira bonyolult, hogy egy kis odafigyeléssel, egy akkora léptékű projektnél, mint az online népszámlálás, ezt ne lehetett volna megvalósítani.