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

Átugró link nem csak az intro átugrásához kell

A weboldalon történő navigáció megkönnyítésére klasszikus akadálymentesítési megoldás az úgynevezett átugró linkek (angolul skip link) használata. Kiknek és miben segít? Hogyan érdemes beépíteni a weboldalba? Ezeket a kérdéseket járom körül ebben a cikkben.

Navigációs lehetőségek az oldalon belül

Látó felhasználók és fejlesztők számára evidens, hogy a másodperc tört része alatt vizuálisan átfutják a megjelenő weboldalt, majd ugyanilyen gyorsasággal eldöntik, hogy abból melyik rész érdekli őket, melyik linkre kattintanak rá.

Képernyőolvasó programmal internetező látássérült felhasználók számára azonban ez a fajta gyors „rápillantás” nem létezik. Számukra a weboldal felépítésének és tartalmának megismerése alapvetően egy lineáris folyamat. Ez persze a közhiedelemmel ellentétben nem azt jelenti, hogy nekik mindig minden weboldal teljes tartalmát az első karaktertől az utolsóig kötelezően el kell olvasni. Amennyiben egy weboldal korrekt HTML szemantikát használ, akkor számos lehetőség kínálkozik az oldal áttekintésére.

Ezek közül az egyik lehetőség, ha a látássérült felhasználó a képernyőolvasó program segítségével leválogatja az oldalon található címsorokat, linkeket, űrlapmezőket, illetve újabban az úgynevezett navigációs szakaszjelzőket is. Ezeket megismerve egy durva képet (tartalomjegyzéket) kaphat az adott oldal tartalmi felépítéséről, de akár közvetlenül el is ugorhat az így megismert részekhez.

Átugró linkek az oldal elején

A képernyőolvasó által biztosított fenti lehetőséget kiegészíthetjük azzal, ha az oldalak legelejére (lehetőleg közvetlenül a nyitó body címke után) beépítünk egy afféle mini tartalomjegyzéket. Ebbe maximum 2-3 darab linket szoktunk elhelyezni, amelyek külön-külön az adott oldal fő szakaszaira mutatnak. Ezek fontossági sorrendben jellegzetesen (de nem kizárólagosan) a következő szöveggel rendelkeznek:

  • Ugrás az oldal tartalmához
  • Ugrás a navigációhoz
  • Ugrás a kereséshez
  • Ugrás az oldal másodlagos tartalmához

Azért említem a fontossági sorrendet, mert ha csak egy ilyen link kerül beépítésre, akkor az a tartalomhoz vagy a navigációhoz mutató link legyen.

Sokan átesnek a ló túloldalára azzal, hogy az oldal tetejére túl sok átugró linket helyeznek el. Ez azért rossz, mert ilyenkor maguk az átugró linkek képeznek felesleges akadályt.

Az alábbi kódrészletben két átugró link található a képzeletbeli oldal navigációs és tartalmi szakaszához:

<body>
  <ul id="atugrolinkek">
    <li><a href="#tartalom">Ugrás az oldal tartalmához</a></li>
    <li><a href="#navigacio">Ugrás a navigációhoz</a></li>
  </ul>
  ...
  <div id="navigacio">
  </div>
  ...
  <div id="tartalom">
  </div>

Ha csak egy átugró linket teszünk az oldal elejére, akkor természetesen a lista értelmetlen. Ilyenkor az átugró link önmagában is elég:

<body>
  <a href="#tartalom" class="atugrolink">Ugrás az oldal tartalmához</a>
  ...
  <div id="navigacio">
  </div>
  ...
  <div id="tartalom">
  </div>

Miért hívjuk ezeket a linkeket átugró linkeknek?

Egy jó felhasználói élményt nyújtó honlapnál bizonyos tartalmi szakaszok következetesen minden weboldalon ugyanott vannak. Jellegzetesen ilyen szakasz lehet például a fejléc vagy a navigációs menü. Ha a felhasználó már megismerte a honlap felépítését, sőt bizonyos időt el is töltött rajta, akkor pontosan tudja, hogy ezek a szakaszok hol vannak, és körülbelül mi a tartalmuk.

A maga módján minden felhasználó átugorja az ismétlődő szakaszokat. A látó felhasználók az oldal pásztázása közben szinte már rájuk se pillantanak. A látássérült felhasználók pedig az átugró linkekkel tudják kihagyni ezeket a lineáris felolvasásból. Ha például rögtön az oldal elején kiválasztják az Ugrás az oldal tartalmára linket, akkor nem kell újra és újra végighallgatniuk a fejléc és a navigáció tartalmát, hanem rögtön az oldal fő tartalmát ismerhetik meg.

Átugró linkek az oldal belsejében

Átugró linket nem csak az oldal elején javasolt elhelyezni, hanem minden olyan nagyobb tartalmi blokk elején, amely több oldalon át ismétlődik. Ilyen esetekben az átugró link az adott blokkot követő blokkhoz ugorjon. Klasszikus példa lehet erre a navigációs menü átugrása, ami az alábbi mintakódban a rákövetkező tartalmi blokkhoz ugrik:

<div id="navigacio">
  <h2>Navigációs menü</h2>
  <a href="#tartalom" class="atugrolink">Navigációs menü átugrása</a>
  <ul>
    <li><a href="index.html">Főoldal</a></li>
    <li><a href="termekeink.html">Termékeink</a></li>
    <li><a href="kapcsolat.html">Kapcsolat</a></li>
  </ul>
</div>

<div id="tartalom">
</div>

Az átugró linkeket nem csak a vak internetezők használják

Az ismétlődő blokkok átugrása azon látó felhasználóknak is fontos, akik valamilyen ok miatt kizárólag billentyűzettel tudnak navigálni az oldalon. A billentyűzetes navigáció jellegzetessége, hogy az aktív elemek (például a linkek között) valamelyik billentyű (asztali gépeknél jellemzően a tab billentyű) lenyomásával lehet lépkedni.

Billentyűzetes navigációra kényszerülnek például azok a felhasználók, akiknek mozgás- vagy idegrendszeri betegségük kizárja az egér használatát.

De érintettek azok az ép felhasználók is, akik olyan mobiltelefonnal interneteznek, ami csak a billentyűzetes navigációt támogatja.

Miben segít ilyenkor az átugró link? Képzeljünk el egy olyan navigációs menüt (listát), amiben mondjuk tíz menüpont található. Amikor a felhasználó a navigációs menühöz ér, akkor azon tíz gombnyomással tud végiglépni. Értelemszerűen ezt a tíz gombnyomás újra és újra meg kell tennie, ha az adott oldalt kinyitja. Ha viszont az átugró linkek rendelkezésére állnak, akkor ez a navigációs lépéssorozat drasztikusan lecsökken. A navigációs menü akár egy billentyűlenyomással is átugorható lesz.

Hogyan jelenjenek meg az átugró linkek?

Állandóan láthatóan

Miután az átugró linkeket látó és látássérült felhasználók egyaránt használják, ezért ideális lenne, ha mindegyik mindig látszódna. Léteznek olyan honlapok, ahol ezt így is csinálják.

Egy angol nyelvű honlap navigációs menüjéről készült képernyőfotó, ahol az ugrás az oldal tartalmára és az ugrás a navigációhoz link a vízszintesen elhelyezett menüsáv felett állandóan látszik
Állandóan látható átugró (skip) linkek egy angol honlap tetején

Vizuálisan elrejtve

Ugyanakkor tény az is, hogy a vizuális megjelenésbe néha nehéz az átugró linkeket esztétikusan beletervezni. Ilyenkor merülhet fel, hogy az átugró linkek vizuálisan rejtettek legyenek, de a képernyőolvasó képes legyen felolvasni őket. Az elrejtésre bármelyik akadálymentes elrejtési módszer alkalmas, amelyik kizárólag vizuálisan rejti el a linkeket.

A teljes vizuális rejtés nem jó mindenkinek

A vizuális rejtéssel azonban a billentyűzettel navigáló látó felhasználók elől is elrejtjük az átugró linkeket. Így ők ezeket képtelenek lesznek használni. Ezt egy kompromisszumos megoldással tudjuk áthidalni, aminek lényege az, hogy a vizuális rejtés csak részleges.

Alapállapotban vizuális rejtést alkalmazunk, de ha a billentyűzettel navigáló látó felhasználó a tab billentyűvel rálép az átugró linkre, akkor az rögtön megjelenik. Úgy is mondhatjuk, hogy ha az átugró link a fókuszba kerül, akkor az elrejtését ideiglenesen megszüntetjük. Ezt a CSS-ben a :focus pszeudo osztály felhasználásával tudjuk megtenni.

Ha például a vizuális rejtést a képernyőről történő kimozgatással oldottuk meg, akkor a fókuszált állapotban így „hozhatjuk vissza” az átugró linkeket:

#atugrolinkek a:focus,
a.atugro:focus,
#atugrolinkek a:active,
a.atugro:active {
  position: static;
  width: auto;
  height: auto;
}

A példában az :active pszeudo osztályt is felhasználtam, hiszen így a linkre történő kattintás állapota is látható lesz.

A fenti megoldást alkalmazom ezen a honlapon is, így ha a tab billentyűt nyomogatja, akkor élőben is kipróbálhatja a működését.

Sajnos ez a megoldás a felhasználói élmény szempontjából nem tökéletes. Egyrészt az érintett felhasználók addig nem értesülnek arról, hogy az oldalon átugró linkek vannak, amíg a rá nem lépnek. Másrészt sokak számára zavaró lehet a hirtelen a semmiből megjelenő link.

Az átugró linkek jövője a HTML5 fényében

Miután a HTML5-ben és a WAI-ARIA-ban rengeteg lehetőség kínálkozik az egyes tartalmi szakaszok pontos szemantikai megjelölésére, ezért várhatóan az átugró linkek szerepe is fokozatosan a háttérbe szorul.

Ha például a navigációs szakasz megjelölésére alkalmas nav jelölőelemet nézzük, akkor a böngészőprogramok és a képernyőolvasó programok miért ne kínálhatnának majd fel maguktól egy olyan ugrási lehetőséget, ami a felhasználót rögtön az adott oldal navigációjához viszi?

Természetesen az átmenet ideje megjósolhatatlan, így addig mindenképpen érdemes a hagyományos átugró linkeket is beépíteni.

Utóirat

A címben utalást tettem az úgynevezett intro-k (magyarul bevezető képek, animációk) átugrására. A felhasználók általában itt találkoznak olyan linkkel, aminek szövegében az átugrás szó szerepel. Például Intro átugrása, vagy Hirdetés átugrása. Persze a maguk módján ezek a linkek is átugró linkek, de több szempontból (így akadálymentesítési szempontból) is ideálisabb lenne a web, ha az intro-kat véglegesen elfelejtenék a megrendelők.