Barion Pixel
Segédlet

Akadálymentesség a weben

2021. június 17. | Bognár Péter

# # # #

Mostanában az élet minden területén fontos kulcsszóvá vált az akadálymentesség, legyen szó építészetről, ügyintézésről vagy éppen webdesignról. Ez persze nem azt jelenti, hogy ez valami újmódi divat lenne, vagy hogy újabban megnövekedett volna az igény az ilyen megoldásokkal szemben, pusztán az elmúlt évtizedekben elkezdett elharapózni az a furcsa gondolat, hogy nem muszáj direkt meg is nehezíteni egymás életét, ha van rá mód (és igazából van), meg hogy talán nem muszáj aktívan tenni azért, hogy egyes kisebbségben levő embereket kizárjunk a hétköznapi élet szinte minden területéről, holott éppenséggel ugyanolyan joguk van ott lenni, mint bárki másnak. Talán Stephen Hawking professzor esete volt a legnagyobb emlékeztető arra, hogy mi mindent veszíthetnénk, ha egyszerűen kiírjuk a fogyatékkal élőket a társadalomból. 

Akkord kiadó, 2016

A web sok szempontból a nagy kiegyenlítő szerepében szokott tetszelegni, hiszen itt elég egy valamennyire eldöcögő készülék, egy alapszintű internet-kapcsolat, és máris ugyanolyan értékű tagja lehet az ember bármilyen közösségnek, mint bárki más, eljuthat bármilyen távoli vidékre, ügyet intézhet, üzletelhet, gyarapíthatja a tudását (és dúskálhat a cicás képekben). De ha egy kicsit is megkapirgáljuk a felszínt, mindjárt kiderül, hogy mekkora csúsztatás van ebben az állításban – a web használata ugyanis elsősorban egyfajta embertípusra lett becélozva: arra a “hétköznapi” emberre, akinek a keze-lába, szeme-esze éppen, de legalábbis minimum úgy működik, mint a nagy átlagnak; ez az embertípus viszont egyáltalán nem annyira normális, mint azt hinnénk. Nehéz erről statisztikákat találni – a 2011-es népszámlálás adatai szerint a KSH szempontjai alapján 467.388 fő volt hivatalosan is a 15 év fölötti fogyatékossággal élők száma, de a következőkben látni fogjuk, hogy ez a csoport valószínűleg nem tökéletesen egyezik a számunkra érdekessel, ennek alapján mindenesetre nem tűnhet túlzásnak, ha akár félmillió érintett fővel is számolunk csak a magyarul olvasó közönségből – ez azért nem egy elhanyagolható szám.

Az akadálymentesség gondolata a weben egyáltalán nem újkeletű koncepció, már a kilencvenes évek végén, a web korai, a szűk szakmai körökből éppen csak kilépő szakaszában is komolyan foglalkozni kezdtek vele a különböző fórumok. A web nemhivatalos “kormánya”, a W3C (World Wide Web Consortium) 97-ben állította fel a Webes Akadálymentességi Kezdeményezés (WAI, Web Accessibility Initiative) nevű részlegét, ahol különböző munkacsoportok munkálkodnak a web akadálymentesítésén – pontosabban az ezzel kapcsolatos szabványok, útmutatók és javaslatok előállításán. 1999-ben született meg a Web Akadálymentesítési Útmutató (WCAG, Web Content Accessibility Guidelines) című anyag első változata, ami már más a 2.1-es frissített változatnál tart. (Ugyanakkor készül a 2.2 és már lefektették a jövő szabványa, a WCAG 3.0 alapjait is.)

Ha a W3C neve nem lenne elég biztosíték arra, hogy komoly, nagyszabású dologról van szó, nem csak egy maréknyi fórumózó nyavalygásáról, talán meggyőzőbben hangzik, hogy a WCAG 2.0-ás verziója időközben ISO szabvánnyá nemesült, egész pontosan az ISO/IEC 40500:2012 számú szabvány alatt lehet megtalálni.

Kik számítanak a hátrányos helyzetűnek a web használhatósága szempontjából?  

Ahogy fent is írtam, a hivatalos, hétköznapi statisztika szempontjából fogyatékossággal élők számára nem feltétlenül jelent kihívást a nem akadálymentesített web használata, hiszen pl. egy kerekesszék nem számít komoly akadálynak a géphasználatban. Lássuk a fő csoportokat a WAI kategóriái alapján!

Elsődlegesen azok kerülnek hátrányba, akik az alábbi típusú fogyatékosságok valamelyikével élnek:

  • hallás
  • értelmi képességek
  • neurológiai fogyatékosságok
  • fizikai fogyatékosságok
  • beszéd
  • látás

Ezeket a fő csoportokat a WAI a kor szellemét követve egy remek kis videóban is sorra veszi.

Ugyanakkor nagyon fontos azt is szem előtt tartani, hogy nem csak a fogyatékkal élők járnak jól az akadálymentesített webbel, ugyanis egy rakás olyan csoportot is találunk, akik szintén profitálhatnak a kicsit gondosabban megtervezett internetből:

  • mobil készülékeket, kisebb képernyőket használó internetezők,
  • idősek, akiknek koruk miatt megváltoznak a képességeik,
  • “ideiglenesen fogyatékos emberek” – akivé akárki válhat pl. egy törött kar, elveszett szemüveg, bedugult fül esetén,
  • helyzeti nehézségekkel küzdők: pl. zajos környezetben vagy erős napsütésben tartózkodók,
  • belassult internetet használók, vagy rossz lefedettségű területen lévő emberek – esetleg olyan helyen élők, ahol ritka és drága a szélessávú internet.

Amint ebből a listából is kiderült, valójában bárki kerülhet olyan helyzetbe, hogy hirtelen használhatatlanná válik egy nem akadálymentesre terezett weboldal, akármilyen modern és cutting edge megoldásokat  tervezett is bele a mögötte álló webdesigner. 

De mit lehet/kell tenni?

Az akadálymentességnek sok megközelítése lehetséges, én itt most a W3C WAI által összeírt anyagot fogom kicsit kivesézni. A WCAG (Dante poklához hasonlóan) egyre szűkebb körökből épül fel, bár ide kilenc helyett csak három jutott: 

Alapelvek: Négy alapelv biztosítja az akadálymentes web alapjait: Ezek kontextusba helyezik az egész koncepciót.

Irányelvek: A négy alapelv alá 13 irányelv tartozik, amik konkrét javaslatokká/előírásokká alakítják az alapelvekbe foglalt szándékokat.

Teljesítési feltételek: Minden egyes irányelvhez egy csokornyi  tesztelhető teljesítési feltétel tartozik, ezekkel adott helyzetben konkrétan, tételesen le lehet vizsgáztatni a webdesignt vagy honlapot. Ezek nem egyszerű nulla-egy jellegű értékek, az egyes teszteken három szinten lehet pozitív eredményt elérni (egy, kettő és három A-s eredménnyel).

Nézzük meg őket kicsit közelebbről!

Alapelvek

A négy alapelv az észlelhetőség, működtethetőség, érthetőség és robusztusság. Vegyük őket sorra a WCAG 2.1 által javasolt megoldásokkal! (Kis észrevétel: a WCAG 2.0 szövege magyar fordításban is elérhető és böngészhető, de a cikkhez nem ragaszkodtam az ebben található megfogalmazásokhoz, inkább az alapvető elemek érthető összefoglalására teszek kísérletet.)

Észlelhetőség

Helyezzünk el szöveges alternatívákat a nem szöveges tartalmakhoz. Képeknél ne feledkezzünk meg az alt-textről, de más objektumokat is a kódból kiolvasható módon kell felcímkézni. Fontos itt megemlíteni, hogy súlyos pontokat veszíthetünk, ha az oldalunk fontos információt hordozó grafikus elemeket helyez el a html kód helyett a css-ben leírva.

Adjunk feliratokat vagy más alternatív szöveget a multimédiás tartalomhoz. Erről már máshol is volt szó, a videóink feliratozása amúgy is kívánatos.

A tartalmat úgy tervezzük meg, hogy különböző módokon lehessen tálalni úgy, hogy a jelentése nem sérül, akár asszisztív technológiákkal is. A lényeges információ és struktúra a kódból automatizált eszközökkel is legyen kiolvasható, a struktúra ne támaszkodjon túlságosan vizuális elemekre (formák, színek, elhelyezés) az érthetőséghez. A layout működjön álló és fekvő képernyőnél is.

Legyen egyszerűbb a tartalom megtekintése avagy meghallgatása. Ide tartozik pl, hogy jól kivehető, kontrasztos módon jelenjenek meg a feliratok, a fontos funkciókat ne kizárólag szín jelenítse meg. A hangos tartalmak megállíthatóak legyenek, hangerejük állítható.

Egy rossz példa…
…és egy sokkal jobb (Kép: Accessibility Developer Guide)

Működtethetőség

Minden funkcionalitás legyen elérhető a billentyűzetről is. Ez különösen fontos lehet a webes űrlapok esetében, de arra is oda kell figyelni, hogy a megszokott módon navigálhatóak legyenek az oldalaink (azaz pl. minden link és menüpont elérhető legyen a TAB, Shift+TAB gombokkal lépkedve).

Hagyj időt a felhasználónak, hogy elolvassa és használja a tartalmat. Mozgó, scrollozó, villogó tartalmak esetében különösen oda kell rá figyelni, hogy követhető legyen a tartalom, de legalábbis legyen mód a mozgás megállítására vagy az effektus kikapcsolására.

Segítsd a felhasználót a navigációban és a tartalom átlátásában. Itt olyan megoldásokra kell gondolni, mint az oldalak fejlécének rendes és értelmes kitöltése, a linkek érthető jelentéssel bíró elnevezése, címkék és főcímek használata az oldalon és a kódban is. 

Ne használj olyan tartalmat, ami rohamot vagy más fizikai reakciókat válthat ki az arra hajlamosokban. A villogó tartalmak sajnos közismerten hordoznak magukban ilyen veszélyt, ezért jobb elkerülni őket. A villogás hivatalos mércéje ebben a tekintetben a másodpercenkénti 3 villanás – ennél több már veszélyes lehet. 

Tedd egyszerűbbé a billentyűzettől eltérő beviteli eszközök használatát. Itt olyan dolgokra kell figyelni, mint pl. a jól látható egérkurzor (legalább 44×44 képpont nagyságú), vagy az érintőképernyős felhasználói interfészeken a több ujjas gesztusok kiválthatósága egyujjas megoldásokkal. Ide sorolják azt a kis figyelmességet is, hogy a szöveggel megjelölt UX elemek címkéje vagy kódbeli neve is ugyanazt a szöveget tartalmazza, ami rá van írva.

Érthetőség

Az oldalon szereplő szöveg legyen olvasható és érthető. Ez talán egyszerűnek, vagy magától értetődőnek tűnhet, de igazából nem annyira egyszerű feladat. Az olvashatóságról már nálunk is jelent meg korábban egy rövid áttekintés, de a lényeg, hogy szemmel kell tartani a szöveg külső tálalását (betűméret, font, margók, sorok hossza) és a belső megfogalmazást is, azaz hogy a szövegezés alapvetően egyszerűnek gondolható szempontját illetően a webdesigner vagy tartalomszerző által az oldal keretébe beszerkesztett textus vokabuláris vagy szintaktukus komplexitása által kifejtett presszió ne hasson konfúz módon a felhasználóra. (Pardon.) Emellett fontos a szöveg gépi/szoftveres olvashatósága és elemezhetősége is.

A tartalom kiszámítható, a tőle elvárható módon jelenjen meg és működjön. Ez technikai szempontból azt jelenti, hogy menet közben ne változzon meg a navigáció módja vagy struktúrája, a navigációs menü pedig különösen maradjon egyben a használat minden pontján. Fontos még, hogy egyes beállítások megváltoztatásával ne változzon meg a navigációs elemek funkciója vagy kontextusa, de legalábbis figyelmeztesse az oldal a felhasználót, ha ilyen változások történnek. 

Segítsd a felhasználót a hibák és tévedések megelőzésében vagy kijavításában. Itt főleg az adatbevitel hibáira kerül a fókusz: jó, ha a rendszer ellenőrzi a bevitt adatokat és figyelmeztet az esetleges hibákra (talán még javaslatokat is tesz). Hasznos és elvárt, hogy a bevitel visszafordítható, javítható legyen és legyen az oldalon elérhető segítség ha a felhasználó problémákba ütközne. 

Robusztusság

Törekedj rá, hogy az oldal/UX/kód a lehető leginkább kompatibilis legyen a jelenlegi és a jövőben várható eszközökkel is. Ez leginkább tiszta, jól felcímkézett kódot jelent, amiben jól el tud igazodni bármilyen elemző robot.  

Ezek az alapvető elemek alkotják a WCAG 2.1 gerincét. Persze a konkrét technikai megoldások és javaslatok között elég sokat lehet böngészni, de a lényeg igazából az első lépésben az, hogy egyrészt saját magadat, másodsorban az ügyfeleidet győzd meg arról, hogy igenis érdemes részben vagy egészben akadálymentes módon megtervezni az oldalaidat – valamint, hogy nem szabad elfogadni a fenti alapelvekkel szembe menő ötleteket.

Az akadálymentes web elfogadottsága sajnos nem csak hazánkban, de a világ más tájain sem magától értetődő, az UX Design Blog nemrég meg is jelentetett egy rövid e-könyvet Sheryl Byrne-Haber tollából, Giving a damn about accessibility címmel (kb. Egyáltalán foglalkozni az akadálymentességgel), aminek a lényege éppen a leggyakoribb ellenérvek (jó sok akad) tételes cáfolata. 

További hasznos tanácsokat és konkrét eszközöket is találhatsz az akadálymentes fejlesztéshez a svájci Access for All (Hozzáférés mindenki számára) alapítvány oldalán, az Accessibility Developer Guide-on. 

Legyen a web tényleg mindenkié!

Iratkozz fel 7 napos ingyenes, alapozó webdesign kurzusunkra!

Kipróbálom

blog

Segédlet SEO a Google-ön kívül?

SEO a Google-ön kívül?

2021. július 29.

A SEO (keresőoptimalizálás, Search Engine Optimization) kikerülhetetlen része a webdesignnak, egyszerűen muszáj gondolni rá, hogy az oldalunk kódja megfelelően kedvében járjon a keresőalgoritmusnak meg az ő pici robotjainak. Ha viszont SEO-ról beszélünk, nem is kérdés, hogy melyik is az a keresőmotor, amire mindenki gondol – hát persze, hogy a Google az, akitől kizárólag várhatjuk sorsunk […]

Tovább a cikkre