WEBRA3 - webra

Akadálymentes weboldalak

Az akadálymentes weboldalak készítéséről az elmúlt évekig viszonylag keveset lehetett hallani. A témával foglalkozó nonprofit szervezetek és magánszemélyek erőfeszítéseinek köszönhetően azonban egyre inkább figyelmet kap, mind a magánszektorban, mind pedig a kormányzati szférában.

(Forrás: http://bartal.org/)

• A vakok, gyengénlátók, színvakok és színtévesztők nyilvánvalóan érintettek. Ez a csoport a webet használóknak nem elhanyagolható része. Alapvetően érintett minden olyan felhasználó, aki látásában, hallásában vagy mozgásában korlátozott, vagy az információt valamilyen okból nehezen, vagy csak részben képes feldolgozni.
• Testi fogyatékosok, vagy a mozgásukban valamilyen módon korlátozott felhasználók, akiknek gondot okozhat az egér vagy a billentyűzet használata.
• Azok a felhasználók, akik a webet mobiltelefonról vagy PDA-ról érik el. Ez a csoport piaci szempontból azért érdekes, mert az átlagosnál magasabb életszínvonalon él, telekommunikációs eszközhasználata intenzív.
• Régi számítógépet, régi böngészőt használók, modemes internet-használók: azok a szervezetek és magánszemélyek, akik (például anyagi okokból) nem tértek át korszerű szoftverekre, új számítógépekre.
• A fiatal (5-10 éves) internet-használóknak — akik bár közvetett, de szintén nem elhanyagolható vásárlóerővel rendelkeznek — szintén okozhat problémát a szem-kéz koordináció és az olvasás.
• Az idősek. A "Silver Surfer" csoport szintén nem elhanyagolható célcsoport, mely a gazdagabb nyugati országokban dinamikusan növekszik, és egyre többet is költ online csatornákon. Ez a csoport az akadálymentes web szempontjából a gyengébb látás, korlátozott mozgás és gyengébb szem-kéz koordináció miatt lehet érintett.
• Azon felhasználók, akiknek az írott szöveg értelmezése nehézséget okoz, illetve nem beszélik folyékonyan azt a nyelvet, melyen egy adott weboldal íródott.

• Az akadálymentes weboldalak — strukturált felépítésüknek köszönhetően — a webes keresőkben jobb helyezést érnek el. A Googlebot az internet legbefolyásosabb vak felhasználója.
• Pozitív PR — a website tulajdonosa hangoztathatja társadalmi felelősségvállalását és a szabványoknak való megfelelését.
• A website tulajdonosa olyan piaci csoportokat érhet el, melyek még kevésbé telítettek — a látogatók számának növekedése.

• Bár a jogi érvelés önmagában (ma és itt) hatástalan — Magyarországon még nem fordult elő, hogy emiatt akár egy céget is bepereltek volna —, a hatályos törvények szerint tilos bárminemű hátrányos megkülönböztetés. A magyar közigazgatási honlapok egységesítését célzó KIETB ajánlás előírja a kormányzati honlapok akadálymentessé tételét.
• Potenciális ügyfelek elvesztése. Másodrangú polgárként kezelt, panaszos ügyfelek. A felhasználók általában pozitív tapasztalataikat ritkábban osztják meg egymással, mint a negatívakat. Kisszámú elégedetlen ügyfél véleménye is negatív PR.

• Oldalszerkezet. Használjunk kifejező oldalcímet. Használjunk fejléceket (h1...h6), listákat és következetes struktúrát, használjunk CSS-t a szerkezet és a stílus leírásához, ha lehetséges. A CSS-ben használjunk relatív a betűméreteket (%, em). Adjunk meg alternatív stylesheet-et gyengénlátók részére. Felejtsük el a <b>, <i>, <u> tag-eket, helyettük használjunk <strong>, <em> tag-eket, illetve CSS-t. Használjuk intelligensen a CSS nyújtotta lehetőségeket (pl. médiatípusok: screen, print, handheld, aural), ugyanakkor ügyeljünk arra, hogy a website stíluslapok nélkül is használható maradjon. Az oldal felépítése legyen lineáris: a képernyőolvasó szoftverek az oldal tartalmát a forráskódnak megfelelően olvassák fel.
   
• Képek, grafikonok és animációk. Használjuk az alt attribútumot a képi információk szöveges leírására. A csak vizuálisan élvezhető, vagy korlátozottan látható tartalmi elemekhez egyenértékű szöveges, tehát képernyőolvasóval is élvezhető tartalmat kell biztosítani.
  A kizárólag esztétikai célú képek esetén
  • A helyőrző képek ALT szövege legyen megadva és legyen üres.
  • Lehetőleg kerüljük képek használatát pszeudo-felsorolásjelként, inkább használjunk CSS-t:
    ul { list-style-image: url('http://www.kutykurutty.hu/brekeke.png'); }
    Ha valamiért mégis szükséges, a felsorolásjelként használt képek ALT szövege legyen "*".
  • Ha egy képet valamilyen okból több darabra kell vágni, az első darab ALT szövege vonatkozzon az egész képre, a többi darab ALT szövege legyen megadva és legyen üres.
  Ha az ALT paramétert nem adjuk meg, a képernyőolvasó szoftver a képfájl nevét olvassa fel (vagy csak jelzi, hogy egy kép található ott), viszont egy oldalban az érdemi információk helyett csak azt hallani, hogy "transparent.gif", "transparent.gif", egy idő után bosszantó.
  Összetett képek esetén készítsünk kivonatot, használjuk a longdesc attribútumot. Tekintettel azokra a kliensekre, melyek a longdesc attribútumot nem támogatják, közvetlenül a kép után adjunk description-link-et. Ez a következőképp nézzen ki:
  <a href="kep_1_longdesc.txt" title="értelmes linkszöveg" class="dlink">d</a>
  a .dlink CSS class használatával a látó felhasználók elől elrejthetjük ezt a típusú linket (display: none;) azonban a felolvasószoftverek részére a generált HTML kódban szerepeltetni kell. A hivatkozás mutasson arra a címre, amit a longdesc attribútumban is megadunk.
   
• Multimédia. Tegyük elérhetővé a hanganyagok szöveges átiratát, a videó anyagokról pedig készítsünk leírást.
   
• Táblázatok. Lehetőleg ne használjunk táblázatot formázási céllal, csak akkor, ha tartalma lineárisan olvasva is értelmes marad. Az adattáblázatokhoz készítsünk olyan összefoglaló megjegyzéseket, melyek a sorról-sorra való olvasáskor a megértést segítik, valamint készítsünk összegzést a táblázat tartalmáról (summary attribútum). Használjuk értelemszerűen a thead és tfoot tag-eket. Ne használjuk formázáshoz a TH tag-et, sőt nem adattáblákban egyáltalán ne használjuk.
   
• Script-ek, appletek, ActiveX objektumok. Nyújtsunk alternatívát arra az esetre, ha a böngésző az aktív elemek megjelenítését nem támogatja. Használjuk a noscript tag-et. Lehetőleg kerülni kell a popup ablakok használatát, és hogy a hivatkozásokban megadott oldalak új ablakban nyíljanak meg. Ha mégis szükség van rájuk, jelezzük, hogy a hivatkozás új ablakban nyílik meg.
   
• Imagemap-ek. Ha imagemap-et használunk, válasszuk lehetőleg a kliensoldali régiómegadást (a map tag segítségével) a kiemelendő képrészletekhez, és társítsunk ezekhez szöveges leírást. Adjunk redundáns szöveges linkeket is.
   
• Hivatkozások, navigáció. A hivatkozások szövegezése legyen olyan, hogy a szövegkörnyezetből kikerülve is utaljon a hivatkozás céljára. Erre azért van szükség, mert a vakok számára készített böngészők képesek külön kigyűjteni az oldalon található linkeket, így például a "kattints ide" szövegezés önmagában semmitmondó. Kerüljük az oldalon belül az azonos linkszövegeket, vagy ha mégis szükséges (jellemzően a "Tovább" linkek), a linknek adjunk egyedi title attribútumot. A fontosabb navigációs linkekhez rendeljünk accesskey-t és szükség esetén használjunk taborder-t.
   
• Frame-ek. Lehetőség szerint kerüljük. Ha mégis szükséges, használjuk a noframes elemet és a tartalomra utaló frame-neveket.
   
• Űrlapok. Azonosítsuk az összetartozó input mezőket és felirataikat a <label> tag-gel:
  <label for="id_felh_nev">Felhasználónév:</label>
<input type="text" name="username" id="id_felh_nev" />
  Ez nem csak accessibility szempontból előnyös, de olyan extra szolgáltatást is nyújt a látók számára, hogy az input mezőhöz tartozó szövegre kattintva automatikusan az inputmezőre ugrunk (vagy kijelölődik a checkbox, radio), így a html oldal hasonlóan viselkedik a Windowsban megszokotthoz, tehát használata mindenképpen javasolt.
  A logikailag egy csoportba foglalható beviteli mezőket kapcsoljuk össze a <fieldset> elemmel. Adhatunk címet is a csoportnak (<legend>).
   
• Nyelv. Adjunk meg HTML DOCTYPE-ot. A website használjon valid (X)HTML-t. Adjuk meg az oldal nyelvét (jellemzően <html lang="hu">). Ha az adott oldalon belül többnyelvű szöveget is megjelenítünk, az eltérő nyelvű szövegrészek jelölésére szintén használjuk a LANG attribútumot (<p lang="en">, <span lang="fr">, <a lang="de">, stb.). A modern képernyőolvasó szoftverek ilyenkor automatikusan megváltoztatják a beszédhang kiejtését, ezzel is elősegítve a vakok számára a leírt szöveg pontos megértését. Így megkímélhetjük a látogatót az angol kiejtéssel felolvasott magyar szöveg szürreális élményétől.
   
• Ellenőrizzük a kész oldalakat. Használjunk ellenőrző eszközöket, checklist-eket. Az automatikus eszközökkel nem ellenőrizhető accessibility problémák felderítéséről a checklist-ek segítségével magunknak kell meggyőződnünk.

• Szöveges alternatívát szükséges nyújtani a vizuális és hallható tartalomhoz (jellemzően vakok, siketek részére).
• Ne támaszkodjunk egyedül a színekre (rossz: "Kattintson a zöld gombra a továbblépéshez")
• Valid (X)HTML és style sheet-ek használata.
• Tartalom nyelvének megadása.
• Ha táblázatokat használunk, szerkezetük legyen olyan, hogy lineáris szöveggé transzformálva is értelmezhetőek legyenek.
• Az új technológiák (Java appletek, Flash intrók és menük, illetve más ActiveX objektumok) mellett nyújtsunk szöveges alternatívát.
• A felhasználói felület minden funkciója legyen közvetlenül elérhető (azaz ne hozzunk létre fontos navigációs linkeket pl. kliens oldali script-tel).
• Tervezzünk platformfüggetlenül.
• Vegyük figyelembe a W3C szabványait és ajánlásait
• Használjunk egyértelmű navigációs elemeket. A használt HTML elemek feleljenek meg a dokumentum struktúrájának. Ne használjunk tehát logikai elemeket formázási célra (h1...h6, blockquote), a h1...h6 hierarchiát tartsuk meg (pl. h1 után ne használjunk h4-et, átugorva a köztes heading szinteket).
• Érhetően és egyszerűen fogalmazzunk.

• Ha elektronikus formában információt állítanak elő, szolgáltatnak, vagy használnak, azokhoz a megváltozott munkaképességű kormányzati alkalmazottak a többi munkatárs részére elérhető információhoz szintén hozzáférhessenek.
• A Section 508 azt is megköveteli, hogy a közintézményekhez forduló megváltozott képességű állampolgár hozzáférhessen és használhassa mindazt az információt, amit az intézmény minden állampolgár részére egyébként szolgáltat.

S.508

http://www.section508.gov/,
http://www.access-board.gov/508.htm,
http://www.section508.gov/index.cfm?FuseAction=Content&amp;ID=12.