Weblabor

Mint az előző részben ígértük, most a Webes tartalmak hozzáférési irányelveivel (röviden a WCAG-vel) folytatjuk az akadálymentes weboldalak készítését bemutató cikksorozatunkat. Először (egy rövid bevezető után) a szabvány 2.0 verziószámú munkavázlatát mutatjuk be lépésről-lépésre, majd a végleges 1.0 is megemlítésre kerül a következő részek során. Az ajánlások pontjait példákkal és magyarázatokkal tesszük szemléletesebbé, könnyebben érthetővé.

Mielőtt nekikezdenénk a cikknek, köszönetet szeretnénk mondani Király Péternek, aki elkészítette a WCAG 2.0 magyar változatát, és a Weblabor számára lehetővé tette annak publikálását. Az ajánlás szövegének nagy része cikkünkben is olvasható lesz.

Miről szól a WCAG 2.0?

Az ajánlás a webes tartalmak készítésében nyújt segítséget azáltal, hogy megfogalmazza azokat az elveket, amelyek betartása a hozzáférhetőséget szavatolja. Ha ezeket az elveket semmibe vesszük, akkor megfosztjuk magunkat a látogatók egy részétől, valamint a hátrányos helyzetűek és a weblapunkon található tartalom közé emelünk falat.

Az ajánlás 2.0 verziója nem tartalmaz kifejezetten HTML vagy XML specifikus részeket, azokat cikkünkben magyarázatképpen fűztük az ismertetés mellé.

A szabvány megfogalmazza a hozzáférhetőség négy alapelvét (Érzékelhető, Működőképes, Értelmes és Erőteljes), amelyekre az irányelvek épülnek (összesen tizennégy). Az irányelvekhez sikerfeltételek kapcsolódnak, amelyek három szinten helyezkednek el. A sikerfeltételek különböző szintjeinek való megfeleléssel megfelelési tanúsítványokat nyerhetünk a webes anyagunk részére.

Sikerfeltételek és megfelelési tanúsítványok

A megfelelési tanúsítványhoz jutás minimálisan elvárt szintje, hogy teljesítsünk minden első szintű sikerfeltételt. Az alap tanúsítványt a WCAG 2.0 A jelöli. Ezen a szinten a weboldal információinak megjelenési módja nem változik.

Közepesen szigorú szint a második, amely egyes esetekben a tartalom megjelenési módjának megváltoztatására kényszeríti a tartalom szerzőjét. A második szint eléréséhez természetesen minden második szintű sikerfeltételen túl minden első szintűt is teljesíteni kell. Ezek teljesítése esetén, a WCAG Dupla A (WCAG 2.0 AA) minősítést nyerhetjtük el.

A legszigorúbb szinten minden sikerfeltételnek meg kell felelni. Ezen a szinten elképzelhető, hogy weboldalunk újratervezésére is szükség lehet. Minderre azért van szükség, hogy az olyan speciális (esetleg halmozottan) fogyatékossággal élők is elérhessék oldalaink tartalmát, mint a kéz nélkül, vakon élő embertársaink, vagy az értelmi fogyatékos gyermekek (természetesen lehetetlen lenne minden eshetőséget felsorolni, ez nem is célunk). Természetesen ennek a szintnek is van megfelelési tanúsítványa: WCAG 2.0 Tripla A (WCAG 2.0 AAA).

A munkavázlat célszerűnek tartja átmeneti tanúsítványok bevezetését is, mint amilyen a WCAG 2.0 A+ lenne, amely (az első szint teljesítésén túl) néhány másodiknak való megfelelést is jelentene, de a koncepció még nem érett meg annyira, hogy érdemes volna foglalkoznunk vele.

Nem mondható el általánosságban, hogy a sikerfeltételek géppel ellenőrizhetőek lennének (bár némely pont ellenőrizhető számítógépes úton), mert jónéhány olyan feltétel is létezik, amely emberi vizsgálatot igényel. Az emberi vizsgálatot igénylő sikerfeltételek számos tesztelő egybeeső véleményét kell, hogy eredményezzék.

Az első két szint teljesítése minden weboldal esetén alkalmazható ésszerű módon, a harmadik szint teljesítéséhez azonban egy-egy oldalt teljesen újra szükséges tervezni (míg másokon nem szükséges komoly változtatást végrehajtani).

Szöveges leírásban az AA helyett a dupla A kifejezést használjuk, mert a felolvasó szoftverekkel így könnyebben megérthetőek.

WCAG 1.0 vs. WCAG 2.0

A WCAG 2.0 alkotói igyekeztek úgy megfogalmazni az ajánlást, hogy a WCAG 1.0 ajánlásnak megfelelő oldalak gazdáinak minél kevesebb munkát (vagy semennyit se) jelentsen az átállás. A két szabvány azonban természetszerűen eltérő kódot igényelhet, abból adóan is, hogy míg az 1.0-ban erős volt az eszközfüggőség, a 2.0 inkább elveket kíván megfogalmazni. Egy elv bizonyos esetekben szigorúbb feltételeket határoz meg, máskor azonban könnyebben teljesíthető, mint a kód szintű előírás.

Alapelvek és irányelvek

Az alábbiakban felsoroljuk, a négy alapelvet és a rájuk épülő irányelveket. Az egyes elvek részletes leírásai a felsorolás után olvashatóak (illetve következő cikkünkben fogunk kitérni rá).

Első alapelv: a tartalomnak érzékelhetőnek kell lennie

• 1.1 irányelv: A nem szöveg típusú tartalom mellett biztosítsuk azok szöveges megfelelőit, amelyek ugyanazt a célt szolgálják vagy ugyanazt az információt közvetítik mint a nem szöveges tartalom, kivéve amikor annak egyedüli célja, hogy sajátos érzékszervi tapasztalatokat nyújtson (például zene vagy vizuális művészet) amely esetben kielégítőnek mutatkozik egy szöveges felirat vagy leírás.
  
• 1.2 irányelv: Az időhöz kötött megjelenítésekhez biztosítsunk szinkronizált média megfelelőket.
  
• 1.3 irányelv: Biztosítsuk az információ, a funkcionalitás és a szerkezet a megjelenítéstől való elkülöníthetőségét.
  
• 1.4 irányelv: A képi megjelenítés során tegyük lehetővé az előtérben lévő szavak és a képek könnyű megkülönböztetését a háttértől.
  
• 1.5 irányelv: A hangos megjelenítés során tegyük lehetővé az előtérben elhangzó beszéd és hangok megkülönböztetését a háttérhangoktól. [2. szintű irányelv]
  

Második alapelv: A tartalom interfész-elemeinek működőképeseknek kell lenniük

• 2.1 irányelv: Tegyük lehetővé, hogy minden funkciót a billentyűzeten vagy a billentyűzeti interfészen keresztül lehessen működtetni.
  
• 2.2 irányelv: Tegyük a felhasználók számára lehetővé, hogy az olvasást vagy az interakciót érintő időhatárokat szabályozhassák, hacsak sajátos valós idejű események vagy versenyszabályok nem teszik ezt lehetetlenné.
  
• 2.3 irányelv: Tegyük a felhasználók számára lehetővé, hogy távol tudják tartani magukat olyan tartalomtól, ami fényérzékeny epileptikus rohamot idézhet elő.
  
• 2.4 irányelv: Könnyítsük meg a felhasználók tartalmon belüli tájékozódási és mozgási képességét. [2. szintű irányelv]
  
• 2.5 irányelv: Segítsük a felhasználókat abban, hogy elkerülhessék a hibákat és könnyítsük meg ezek kijavítását. [2. szintű irányelv]
  

Harmadik alapelv: A tartalomnak és a vezérlő elemeknek érthetőeknek kell lenniük

• 3.1 irányelv: Biztosítsuk a tartalom jelentésének meghatározhatóságát.
  
• 3.2 irányelv: Következetesen rendezzük el a tartalmat „lapról lapra” és úgy készítsük el az interaktív összetevőket, hogy azok megjósolhatóan működjenek.
  

Negyedik alapelv: A tartalomnak elég szilárdnak kell lennie ahhoz, hogy a jelenlegi és a jövőbeni technológiákkal együtt tudjon működni

• 4.1 irányelv: A technológiákat az előírásoknak megfelelően használjuk.
  
• 4.2 irányelv: Biztosítsuk a felhasználói felület hozzáférhetőségét vagy biztosítsunk hozzáférhető alternatívá(ka)t.
  

1.1 irányelv

Első szintű sikerfeltétel az 1.1. irányelvhez

A szöveges megfelelők világosan vannak hozzákapcsolva a nem szöveges tartalomhoz, kivéve amikor a nem szöveges tartalom célja, hogy sajátos érzékszervi tapasztalatokat nyújtson (például szöveg nélküli zene vagy vizuális művészet).

A szöveges megfelelő ugyanazt a szerepet tölti be, amit a szerző a nem szöveges tartalomnak szánt (vagyis hordozza az összes szándék szerinti információt és betölti a nem szöveges tartalom szerepét).
Kivétel: Ha a cél az, hogy a felhasználónak meghagyjuk azt a lehetőséget, hogy szövegmegfelelőket töltsenek fel (például helyesírás ellenőrzés) akkor a szöveg-megfelelő nem kötelező.



Az olyan nem szöveges tartalomnak, aminek célja hogy sajátos érzékszervi tapasztalatokat nyújtson (például szöveg nélküli zene vagy vizuális művészet) van pontosan hozzárendelt szöveges címkéje vagy szöveges leírása.

Példák a megvalósításra:

Egy egyszerű képet helyezünk el az oldalon:

Helytelen kód:Helyes kód:Egy bonyolultabb képet helyezünk az oldalra:

Helytelen kód:Helyes kód:A dialog.txt tartalma:Mint látható, az egyszerűbb képek esetén az alt attribútum kitöltése elegendő, azonban egy bonyolultabb kép esetében fontos információktól esnek el azok, akik nem képesek a képek megtekintésére. A longdesc tulajdonság segítséget jelenthet a képek értelmezésében a képeket nem érzékelő felhasználók számára.
Egy tablókép esetében például az alt értéke lehet az, hogy „Családunk (tablókép)”, a longdesc által meghatározott fájlban pedig felsorolhatjuk a képen szereplő személyeket.

Második szintű sikerfeltétel az 1.1. irányelvhez

Ehhez az irányelvhez nincs második szintű sikerfeltétel.

Harmadik szintű sikerfeltétel az 1.1. irányelvhez

Egy szöveges dokumentumnál (például filmforgatókönyv) biztosítják, hogy tartalmazza az összes fontos vizuális információt, párbeszédet és egyéb fontos hangzóanyagot.

Érdemes megnézni az ajánlás szövegében olvasható példákat is.

1. példa: nyomógombként használt kép (rövid szerepmegfelelő)

Jobbra mutató nyíl ikont használjuk egy diavetítés következő diájára mutató linkként. A szöveges megfelelő a „Következő dia”, így a képernyő olvasó elolvassa a „Következő dia” kifejezést és automatikusan felismeri, hogy ez egy link, hozzáadva a link szót, vagy megváltoztatva a szintetizátor hangját.

2. példa: grafikon (rövid cím + hosszabb leírás)

Egy oszlopgrafikon veti össze a június, július és augusztus során eladott szerkezeteket. A rövid címke így hangzik: „Első ábra – A júniusi, júliusi és augusztusi eladások”. A hosszabb leírás meghatározza a grafikon vagy az ábra típusát, ahhoz hasonlóan, ahogyan a grafikonról vagy az ábráról is le lehet olvasni, nagy vonalakban összegzi az adatokat és azokat táblázatban vagy más hozzáférhető módon közli.

3. példa: mozgókép (rövid cím + hosszabb leírás)

Az animáció azt mutatja be, hogy hogyan kössünk csomót. A rövid címke így hangzik: „Mozgókép mutatja be, hogy hogyan kössünk takácscsomót”. Ugyanennek bővebb kifejtése leírja a csomózáshoz szükséges kézmozdulatokat.

4. példa: beszéd hangzóanyaga. (rövid cím + átírás)

A weboldalba egy hangállományt ágyaztak be. A rövid címke így hangzik: „Az elnök beszéde a gyűlés résztvevőihez.” A hangklip után közvetlenül egy link vezet a szöveg átírásához.

5. példa: egy szimfónia hangállománya (rövid címke)

A weboldalba egy hangállományt ágyaztak be. A rövid címke így hangzik: „Beethoven 5. szimfóniája a Bécsi Filharmónikusok előadásában.”

Ki veszi hasznát az 1.1. irányelvnek?

• A vak, gyengén látó, értelmi fogyatékos vagy bármely okból olvasási nehézségekkel küszködő embertársaink megfelelő segédtechnológiát használva fel tudják olvastatni a szöveget.
  
• A siket, nagyothalló, vagy bármely okból a hangzó információk megértésének nehézségével küszködő embertársaink el tudják olvasni a szöveges megjelenítést vagy megfelelő segédtechnológiát használva jelbeszédre tudják lefordíttatni és megjeleníttetni.
  
• Siket és vak embertársaink braille írással tudják elolvasni a szöveget.
  

1.2 irányelv

Első szintű sikerfeltételek az 1.2. irányelvhez

Audió-vizuális média esetén biztosítják a képi elemek hangzó átírását. Feliratokat biztosítanak minden fontos párbeszédhez és hanganyaghoz az idő-függő anyagokban. A leírásokat és feliratokat szinkronizálják az általuk reprezentált elemekkel. Kivétel: A szövegátírásokat vagy egyéb nem audio helyettesítőket nem kell szinkronizálni a multimédia prezentációkkal, ha mind a négy alább következő állítás igaz:

• a tartalom valós idejű,
  
• a tartalom kizárólagosan hangzó jellegű,
  
• a tartalom nem idő-érzékeny,
  
• a tartalom nem interaktív
  

Ha a webes tartalom valós idejű videó audiósávval, biztosítják a valós idejű feliratozást. Kivétel: Ha a tartalom olyan zene, ami nagyrészt nem ének(elt jellegű), nem kötelező a feliratozás.

Ha a webes tartalom valós idejű, nem interaktív videó (példának okáért a környező állapotok, egyebek között az időjárásra vonatkozó információk webkamera nézete), akkor az alábbiak valamelyikéről kell gondoskodni:

• egy, az 1.1. irányelvnek megfelelő pótlék (például egy folyamatos szöveges időjárás jelentés)
  
• link az 1.1. irányelvnek megfelelő pótlékra (például link egy, az 1.1. irányelvnek megfelelő, időjárással foglalkozó weblapra)
  

Ha egy csak audió- vagy csak videóanyagot tartalmazó bemutató azt igényli, hogy a felhasználó interaktív módon a bemutató alatt bizonyos időközönként válaszoljon, szinkronizált egyenértékű (hangos, képi vagy szöveges) bemutatót biztosítanak. Kivétel: Ha a más médiumról vagy forrásból újrajátszott tartalom kielégíti az arra a médiumra vonatkozó hozzáférhetőségi követelményeket, akkor az újrajátszás akkor felel meg ennek az ellenőrző pontnak, ha a WCAG 2.0 többi ide vonatkozó fejezeteinek is eleget tesz.

2. szintű sikerfeltételek az 1.2. irányelvhez

3. szintű sikerfeltételek az 1.2. irányelvhez

Ehhez az irányelvhez nem léteznek 3. szintű sikerfeltételek.

Ki veszi hasznát az 1.2. irányelvnek?

• A siket vagy halláskárosult embertársaink a hangzó információkat a feliratokon keresztül érhetik el.
  
• A vak, gyengén látó, valamint azon értelmi fogyatékos embertársaink számára hasznosulnak a képi információk hangzó átírásai akik a történések képi tolmácsolása során nehézségekkel küszködnek.
  

A fogyatékok nélkül élő emberek is hasznosíthatják a pótlólagos médiumokat:

• A hangos környezetben vagy hangtompítóval dolgozó emberek gyakran támaszkodnak feliratokra.
  
• A feliratok sokaknak segítenek nyelvi és olvasási képességeik fejlesztésében.
  
• A hangzó átírások a képi információkat közvetítenek azoknak, akik ideiglenesen nem a képi megjelenítést nézik, például akkor, amikor egy oktatófilmet követve a kezeiket figyelik.
  
• A feliratok és a szöveges átírások lehetővé teszik a média állományok mutatózását és keresését.
  

Példák az 1.2. irányelvhez

1. példa: filmrészlet hangzó átírásával és feliratokkal

Egy filmből részleteket közölnek a weboldalon. A részletben egy gyermek morzsacsíkot húzva próbál becsalogatni egy kiskutyát a szobájába. Mivel a hangsávon csak a gyerek dünnyögését hallani, gyermek dünnyögése után felhangzó hangzó átírás így hangzik: „Charlie a szobájához vezető minden lépcsőfokra morzsát rak.” A dünnyögés során olvasható felirat: „[néma dünnyögés].”

2. példa: egy tudósítás videója

Egy videóklip kísér egy nagyvárost elöntő árvízről szóló tudósítást. A riporter beszámol a helyszínről. Hangzó átírás nem szükséges. A feliratok a riporter szavait jelenítik meg.

3. példa: néma animáció

Egy animáció azt mutatja, hogy egy fehér arcú, fekete öltözetű pantomimjátékos felmászik egy láthatatlan létrára. Ehhez az animációhoz nincs hangsáv. Sem felirat, sem hangzó átírás nem szükséges. Ehelyett – az 1.1. irányelvnek megfelelően – szöveges címkéket és átírást kell szolgáltatni.

Ez az irányelv nem kíván különösebb magyarázatot, hiszen főleg a video- és az audio streaming technológiák körüli teendőket határozza meg, elég érthetően.

1.3 irányelv

Első szintű sikerfeltételek az 1.3. irányelvhez

A következőket programmal (például kódnyelv vagy adatmodell segítségével) lehet kinyerni a tartalomból anélkül, hogy a felhasználónak értelmeznie kellene a bemutatót.

Hierarchikus elemek és kapcsolatok, például:

• bekezdések
  
• listák
  
• címsorok
  
• a táblázatok mezői és fejsorai közötti kapcsolatok
  

Különféle elemek közötti nem hierarchikus kapcsolatok, úgy mint:

• kereszthivatkozások és más összefüggések,
  
• címkék és vezérlőelemek közti összefüggések,
  
• meghatározott szavak, kifejezések és idézetek kiemelései, egyéb formázásai.
  

Minden olyan információt, amit színek segítségével jelenítünk meg, színek nélkül is elérhetünk (például színfüggetlen kontextus, jelölőelem vagy kódolás segítségével).

2. szintű sikerfeltételek az 1.3. irányelvhez

A színek segítségével megjelenített információt színek és értelmezendő kódok nélkül is elérhetünk (például kontextus vagy szövegkódolás segítségével).

3. szintű sikerfeltételek az 1.3. irányelvhez

Ehhez az irányelvhez nem léteznek 3. szintű sikerfeltételek.

Ez az irányelv tulajdonképpen a szementikus weboldalkialakításra buzdítja a webes tartalmak gondozóit. Az alábbi példákban szemléltetünk néhány könnyen alkalmazható módszert.

• Kijelenthető, ha a HTML vagy az XHTML szabványok Strict verzióit használjuk, akkor jó úton haladunk az irányelvnek való megfeleléshez, ugyanis a Strict nem engedélyezi a csupán formázás céljára szolgáló elemek használatát, mint ahogyan a Transitional.
  
• Használjuk címsorok formázására a <h1>, <h2>, <h3>, <h4>, <h5> és <h6> elemeket! (Erre például vak látogatóinknak különösképpen szüksége van, ugyanis a címsorok segítségével könnyebben navigálhatnak az oldalon.)
  
• Az <i> és a <b> elemek semmiképpen ne szerepeljenek a weboldal forrásában, helyettük értelmezés szerint az <em> és a <strong> használatát javasoljuk, ugyanis ezeket az elemeket képes felismerni egy értelmező program is.
  
• Űrlapok esetén használjuk a <label>-t, amihez csak lehet!
  
• A listákat mindig az <ol> vagy az <ul> elemek segítségével hozzunk létre!
  
• A táblázatok elemeit szükség szerint lássuk el a megfelelő tulajdonságok definícióival!
  
• Megerősítés képpen: az oldal legyen a tartalomnak megfelelő elemekkel formázva, tehát szemantikusan.
  

Alább egy táblázat és annak helyes kódolása szerepel:

Mint látható az axis és a headers attribútumok a tartalmi kapcsolatokat segítenek leírni, míg a táblázat summary tulajdonsága a táblázat részletesebb leírását adja. (A fenti táblázat a JAWS képernyőolvasóhoz tartozó online dokumentációban található.)

Ki veszi hasznát az 1.3. irányelvnek

• A tartalomnak és a szerkezetnek a bemutatótól való elkülönítése lehetővé teszi, hogy a webes tartalmat bármiféle információs vagy szerkezeti veszteség nélkül a különféle felhasználói követelményeknek megfelelően különböző módon jelenítsük meg.
  
• Az eredetileg képi formában bemutatni szándékolt információt – példának okáért – beszédben vagy braille (szövegben) lehet megjeleníteni. A szerkezet automatikus tagolását vagy a hatékonyabb navigációt is megkönnyítheti.
  
• Mindezeknek az értelmi és testi fogyatékosok, a hallás- és látáskárosultak is hasznát látják.
  

Példák a 1.3 irányelv használatára

1. példa: Egy űrlap, ami szövegesen jelzi, hogy mely kötelező mezők maradtak kitöltetlenül

Amikor a felhasználó úgy küldi el az űrlapot, hogy nem tölti ki az összes kötelező mezőt, egy üzenet informálja a felhasználót, hogy mely mezők maradtak kitöltetlenül. A kitöltetlen mezőket színek is jelzik az értelmi fogyatékos felhasználók segítségére, hogy felismerjék, mely mezőkre kell ügyelniük. Mivel az üzenet szövegesen is elérhető, a színeket nem látó embertársaink is tudni fogják mely mezőket kell kijavítaniuk.

2. példa: buszmenetrend, ahol a fejsorok kapcsolatosak a mezőkkel

Egy buszmenetrend a megállókat függőleges, a különféle járatokat pedig vízszintes rendben tartalmazza. Minden mező azt az időpontot tartalmazza, amikor a busz a megállóban lesz. A mezők és a megállók valamint a járatok közti kapcsolatok rögzítésére szerkezeti kódnyelvet használtak (a fenti példához hasonlóan).

3. példa: Egy olyan űrlap, ahol a jelölőnégyzetek címkéi kapcsolatban vannak magukkal a jelölőnégyzetekkel

Egy olyan űrlapon, ahol a felhasználó a különféle lehetőségek közül jelölőnégyzetek segítségével választhat, a jelölőnégyzetek címkéi kapcsolatban vannak magukkal a jelölőnégyzetekkel. Ez különféle felhasználóknak van a hasznára. Lehetővé teszi ugyanis, hogy a vak felhasználók eldönthessék, hogy melyik jelölőnégyzet mire szolgál. Mozgáskorlátozott embertársaink könnyebben tudják kontrollálni a jelölőnégyzeteket, mivel a címke bármelyik pontjára klikkelhetnek, nem csak a jelölőnégyzetre.

Összefoglalás

A mai cikkben elkezdtük áttekinteni a WCAG 2.0 ajánlás munkavázlatát, melyet a következő alkalommal folytatni fogunk. A bevezetőben említett munkaváltozat fordítás átolvasását addig is javasolni tudjuk.