Weboldalkészítés látássérültekre is gondolva

Hozzáférés webes tartalmakhoz, információkhoz a világhálón nem csak a látók privilégiuma - bár valószínűleg látóként az emberek zömének fejében ez a feltételezés él. Bizony rengeteg látássérült, látási nehézséggel küzdő és vak felhasználó böngészi az internetet képernyőolvasó alkalmazások, ún. screen reader-ek segítségével.
A képernyőolvasók elemzik a weboldal HTML-jét és hangosan felolvassák annak tartalmát a felhasználó számára. Reagálnak az oldalon való navigálásra vonatkozó felhasználói parancsokra és képesek olyan műveleteket végrehajtani, mint például egy hivatkozásra való kattintás, egy beviteli mező beírása vagy egy űrlap elküldése.

Manapság alapkövetelmény egy weboldallal szemben, hogy látványos és igazán tetszetős legyen. A grafikus és multimédiás elemek erőteljes használata a látók számára teljesen pozitív trend, de egyáltalán nem kedvez a látássérülteknek. Sajnos a weboldalak döntő többségéről nem mondható el, hogy rajtuk egy látássérült felhasználó is képes (jól) tájékozódni.

Ebben a cikkben áttekintést adunk néhány olyan módszerről, amelyek segíthetik a képernyőolvasóknak jobban értelmezni az adott weboldalt. Ezek használatával emelhető a weboldal hozzáférhetőségi szintje. A weboldalak tervezésekor és létrehozásakor fontos, hogy a weboldalak minden célközönség számára hozzáférhetőek legyenek, vagyis leendő webes szakemberként mindenképpen jó, ha tisztában vagy ezekkel a módszerekkel.

Általános alapelvek

A tervezés és létrehozás során az alábbiakra érdemes mindenképpen gondolni:

1. Minden információ logikus sorrendben jelenjen meg, mert a képernyőolvasó programok a szöveget lineárisan olvassák, nem “ugrálnak” és szemezgetnek csapongva mint a emberi szem, hanem szisztematikusan haladnak.
2. Azokat az információkat is jelenítsük meg szöveges formában, amelyeket ennek hiányában a képernyőolvasó nem tudna értelmezni és kezelni (lásd például alt tag-ek lejjebb)
3. Olyan weboldalak esetén, ahol a weboldal témája indokolja, szükség lehet lehetőséget biztosítani a weboldalon arra, hogy a gyengénlátók preferenciáik szerint választhassanak számunkra megfelelő háttér- és betűszínt.
4. A könnyű olvashatóságra való törekvéssel nem csak a gyengénlátók helyzetét könnyítjük meg, hanem alapvetően is fontos általános célkitűzés, hogy a weboldal, amit készítünk, bárki számára könnyen áttekinthető és olvasható legyen.
   Például:
   • Ne alkalmazzunk sorkizárást a szövegben (vagyis mindkét margóhoz igazítást).
   • A szöveg kellően “szellős” legyen megfelelő sortávolságok, megfelelő bekezdéstávolságok használatával.
   • A sorok szélessége ne legyen több, mint 80 karakter.
   • Ne használjunk CSUPA NAGYBETŰS kiemeléseket, headingeket. Egyrészt “kiabáló” hatása lesz, másrészt ez megzavarhatja a képernyőolvasókat, mert előfordulhat, hogy betűszónak értelmezik az ily módon leírt szavakat.

Alt tag-ek

Ez az egyik legismertebb eszköz. Az alt tag (vagyis helyettesítő szöveg, magyarul talán jobb magyarázó vagy leíró szövegnek hívni) nem más, mint egy szöveges attribútum, amit a kódban az

A forráskód a fenti kép esetében így néz ki:

<img src=“url” alt=“Őszi tájkép mezővel, fákkal, a távolban naplementével”>

A képernyőolvasó érzékeli az alt információt és felolvassa, ezáltal a látássérült felhasználó is tudja, hogy a weboldalon ezen a helyen egy őszi tájkép fotója van. Ha itt nem lenne alt szöveg, akkor csak annyit tud mondani a reader, hogy van itt egy kép, ami ugyebár nagyon szegényes információ.

A mindennapi gyakorlatban - leginkább időhiány miatt - sajnos sokszor elmarad az alt tag-eg megadása, pedig igen nagy szükség lenne rá, hogy legyenek és valóban jó leírást is adjanak. Mellesleg az alt tag a keresőmotorok által használt AI (mesterséges intelligencia) alkalmazások számára is információt hordoz. Ha kitöltjük, akkor azzal a Google robotokat is ‘tanítjuk’.

Szemantikus tag-ek

Egy weboldal szövegének formázásakor van, hogy több lehetőség is kínálkozik egy adott hatás elérésére.
Például mind a <b>, mind pedig a <strong>  tag használta a szöveg félkövéren való megjelenítést eredményezi.

Az <i>, illetve <em>  tag-ek pedig dőlt szövegmegjelenést adnak.

Ha a példaként említett párok egyikét a másikra cseréljük, többnyire nem történik változás a weboldal kinézetében: félkövér - félkövér, dőlt - dőlt, látványra azonosak. Azonban jelentős különbség van közöttük a mai téma tekintetében.

A <b> és az <i> tag-ek a képernyőolvasók számára a szöveg kinézetére vonatkozóan adnak információt.

A <strong>  és az <em>  tag-eket viszont a szöveg értelmezésére vonatkoztatják, ezeket szemantikus tag-eknek nevezzük.
Bár látványra nincs különbség egy <strong>  és egy <b>  tag-gel elért félkövér szöveg kinézetén, de egy <strong>  tag-es szöveget a képernyőolvasó más hangon, erőteljesebben olvas fel.

Záró gondolatok

Végezetül hadd térjünk ki arra az általános tévhitre, miszerint akadálymentesítésre csak a vakok és gyengénlátók miatt van szükség. Ez nem igaz, több szempontból sem. Egyrészt gondoljunk a diszlexiásokra, akik tökéletesen látnak, de mégis olvasási nehézségeik vannak. Számukra óriási különbséget jelent, ha a számukra megfelelő színséma elérhető egy weboldalon.

Másfelől mindenki számára jobb, ha minél több könnyen olvasható, valóban logikusan felépített és információt jól tálaló weboldal születik. Nem mellesleg, a keresők is jobban megtalálják és díjazzák a gondosan felépített oldalakat, vagyis SEO szempontból is jelentőséggel bír a téma.

***

Ha szívesen olvasnál más írásokat is IT témában, informatika témájú cikkeink listáját a linkre kattintva tekintheted meg.

Ha pedig tanulásba fognál és ezért képzések érdekelnek, az alábbiakat ajánljuk figyelmedbe:

Webfejlesztő
Webszerkesztés alapjai
Junior frontend fejlesztő
Junior Java backend fejlesztő
Junior szoftvertesztelő
Junior rendszerüzemeltető