HTML elemek akadálymentes elrejtése

Egyik korábbi cikkemben már foglalkoztam azzal a kérdéssel, hogy a weboldal megjelenése alatt nem csak a vizuális megjelenést értjük, hanem a hallható, sőt a tapintható megjelenést is. Ebből kiindulva könnyen belátható, hogy a megjelenés ellentéte, az elrejtés is ugyanilyen sokrétű. Nagyon nem mindegy, hogy a weboldal egyes elemeit melyik megjelenési forma elől akarjuk elrejteni.

Az elrejtések típusai

Alapvetően három típusú elrejtésről beszélhetünk:

• a weboldal adott HTML eleme a képernyőn vizuálisan nem jelenik meg, de a képernyőolvasó program felolvassa (ne legyen látható, de maradjon hallható)
• a weboldal adott HTML eleme a képernyőn vizuálisan nem jelenik meg, és a képernyőolvasó program sem olvassa fel (ne legyen látható, és ne is legyen hallható)
• a weboldal adott HTML eleme a képernyőn vizuálisan megjelenik, de a képernyőolvasó program nem olvassa fel (legyen látható, de ne legyen hallható)

Fontos, hogy az elrejtés minden esetben CSS segítségével történik meg. Így ha a felhasználó lekapcsolja a stíluslapot, az elrejtett elemek mindenképpen megjelennek vizuálisan és hallhatóan is, ami teljesen normális működés.

A tapintható megjelenést azért hagytam ki a felsorolásból, mert a tapintható megjelenést biztosító Braille-kijelzők jellemzően a képernyőolvasó programra hagyatkoznak. Így ha a képernyőolvasó program elől elrejtünk valamit, akkor az elrejtődik a tapinható megjelenés elől is. A cikk hátralévő részében ezért a tapintható elrejtést külön nem hangsúlyozom ki.

A display:none és a visibility:hidden nem (mindig) akadálymentes

Mielőtt egyesével végigveszem az elrejtések típusait fontos megemlítenem, hogy a fejlesztői közvélekedéssel ellentétben az elrejtés nem oldható meg egyszerűen egy display:none vagy egy visibility:hidden CSS deklarációval. Ugyanis ezek az adott elemet nem csak vizuálisan rejtik el, hanem hozzáférhetetlenné teszik a képernyőolvasó program számára is! Ez pedig csak akkor lehet megfelelő megoldás, ha pontosan ez a célunk. Minden más esetben komoly akadálymentességi problémát jelentenek.

Ne legyen látható, de maradjon hallható

A weboldal HTML kódjába akadálymentesítési célból sokszor olyan elemeket is elhelyezünk, amelyeket kifejezetten képernyőolvasó programot használó látássérült internetezőknek szánunk. Ezek az elemek általában a weboldalon történő navigációt, eligazodást segítik.

Például egy látó személy számára teljesen világos, hogy azon a weboldalon, amit éppen néz, melyik rész a navigációs menü. Egy látássérült felhasználónak azonban egyértelművé kell tenni, hogy hol kezdődik a navigációs menü, hiszen ő - a vizuális áttekinthetőségi lehetőség hiányában - csak a képernyőolvasó által felolvasott információkból értesülhet erről. Ezt például úgy oldhatjuk meg, ha beteszünk egy erre utaló címsort a navigációs menü listája elé:

<h2 class="vizualisanrejtett">Navigációs menü</h2>
<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>

A példában a Navigációs menü szövegű címsor a képernyőn teljesen feleslegesen jelenne meg, tehát vizuálisan el kell rejteni. Ugyanakkor az a célunk, hogy a képernyőolvasó program felolvassa. Ennek egyik ismert akadálymentes megoldása, ha a CSS kódban a vizualisanrejtett nevű osztályra ilyen stílusdefiníciót adunk meg:

.vizualisanrejtett {
    position: absolute;
    left: -10000em;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
}

Néhányan felkaphatják a fejüket, hogy miért ennyire bonyolult ez a definíció?

Ahogyan azt a korábban jeleztem a display:none vagy a visibility:hidden definíciókat ebben az esetben nem alkalmazhatjuk, mert ezek nem csak vizuálisan, hanem hallhatóan is elrejtik az elemet.

Felmerülhetne, hogy az adott elem méretét a width és a height tulajdonságok segítségével nullázzuk le. Sajnos van olyan böngészőprogram, amelyik ebben az esetben is nem létezőnek titulálja az elemet, így a képernyőolvasó program sem szerez róla tudomást.

A fent ismertetett megoldás az elrejtést úgy oldja meg, hogy minimálisra méretezi, majd kimozgatja az elemet a képernyő látható területéről. Vagyis a látó felhasználók számára nem lesz látható, de a látássérültek a képernyőolvasó program által hozzáférhetnek.

Ugyanerre a rejtési típusra terjedőben van egy általam még kevésbé alkalmazott és tesztelt megoldás is, ami a CSS clip nevű tulajdonságát használja fel:

.vizualisanrejtett {
    position: absolute !important;
    clip: rect(1px,1px,1px,1px);
    width: 1px;
    height: 1px;
    border: 0;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
}

Frissítés: minden jel szerint a clip tulajdonságot visszavonják a CSS szabványból. Helyére a jövőben a clip-path tulajdonság lép majd, amit azonban még nem igazán támogatnak a böngészőprogramok.

Bármelyiket is alkalmazzuk az eredmény gyakorlatilag ugyanaz lesz. Összetett felépítésű oldalak esetén előfordulhat, hogy az elrejtés zavart okozhat az oldal vizuális megjelenésében. Ekkor érdemes kipróbálni, hogy a két ismertetett megoldás közül a melyik a jobb.

A ne legyen látható, de maradjon hallható típusú rejtésnél arra mindenképpen fel kell hívnom a figyelmet, hogy ezt a rejtési formát nagyon körültekintően kell alkalmazni az úgynevezett átugró linkek esetén.

Ne legyen látható, és ne is legyen hallható

Ennek a teljes rejtésnek az a célja, hogy az adott elem a képernyőn se jelenjen meg, és a képernyőolvasó se olvassa fel. Erre a célra a display:none CSS szabály tökéletesen megfelel:

.teljesenrejtett {
    display: none;
}

HTML5-ben tulajdonképpen ugyanezt lehet elérni, ha a hidden attribútumot használjuk.

Legyen látható, de ne legyen hallható

Ez az rejtési forma a legkevésbé tipikus, és véleményem szerint nagyon kevés esetben merülhet fel.

Az egyik ilyen lehet, amikor egy olyan kép kerül az img jelölőelem segítségével a HTML kódba, aminek csak és kizárólag vizuális dizájn szerepe van. Azaz érdemben nem ábrázol olyan tartalmi információt, amit a képernyőolvasó programnak is át kell adni. A mai webfejlesztési módszertan szerint az ilyen dizájnelemeket alapvetően a CSS kódba kell elhelyezni.

Ha viszont valamilyen oknál fogva mégis arra kényszerülünk, hogy egy dizájnképet a HTML kódba tegyünk, akkor azt úgy rejthetjük el a képernyőolvasó program elől, hogy a kötelező alt attribútumát üresen hagyjuk.

<img src="csillanas.jpg" alt="" />

Ezzel jelezzük a képernyőolvasó program számára, hogy a kép tartalmilag lényegtelen, azaz ne olvassa fel még a létezését se. De hangsúlyozom, hogy az alt attribútum tényleg csak akkor maradjon üresen, ha a kép valóban tartalmilag lényegtelen. Minden más esetben legyen kitöltött. Sajnos az egyik leggyakoribb akadálymentességi hiba az indokolatlanul üresen hagyott, vagy a teljesen elhagyott alt attribútum.

Tetszőleges HTML elem kizárólag hallható elrejtésre az ARIA szabvány aria-hidden attribútuma is megoldást jelenthet. Például így:

<p aria-hidden="true">Ez a szöveg látható, de nem hallható</p>

A teljeség igényével megemlítem, hogy a CSS szabványban elvileg szerepel egy speak nevű hangzásbeli tulajdonság. Ennek none értéke a szabvány szerint pontosan azt jelentené, hogy az ilyen tulajdonságú elemet ne olvassa fel a képernyőolvasó. De ezt ma még egyetlen képernyőolvasó program sem implementálta.

És mit szól az elrejtéshez a Google?

Sokszor felteszik nekem a kérdést, hogy az akadálymentességi célból elhelyezett, de vizuálisan elrejtett elemek miatt a Google, illetve más keresőrendszerek nem fogják‑e megbüntetni az oldalt?

Először is az én véleményem szerint a weboldalakat elsősorban a felhasználók számára készítjük, vagyis az ő maradéktalan kiszolgálásuk a cél. A keresőoptimalizálás ugyan nagyon fontos, de ebből a szempontból csak másodlagos tényező.

Másodszor a Google van annyira intelligens, hogy képes kiszűrni a jó és a rossz szándékból elkövetett elrejtéseket. A Google fejlesztői is tisztában vannak az aktuális akadálymentesítési megoldásokkal, amire fényes bizonyíték maga a Google főoldala. Abban ugyanis van olyan elrejtett link, ami kifejezetten a képernyőolvasót használók miatt van elrejtve. Ráadásul ugyanazzal a módszerrel, ahogyan azt ebben a cikkben is leírtam.

Frissítés 2016.október: Egy fejlesztői fórumon feltett kérdésre a Google egyik alkalmazottja megerősítette, hogy a vizuálisan rejtett, de képernyőolvasóval elérhető szövegeket nem bünteti a Google.