Nemrég lehetőségem volt beszélni egy Product Design Talks eseményen egy számomra fontos témáról, ami a digitális akadálymentesítés és az inkluzív UX/UI tervezés. Ugye milyen kiábrándító, amikor a nap mint nap használt digitális eszközeink egyszerűen nem működnek jól? Ezt a csalódottságot hatványozottan élik át azok, akik akadályokba ütköznek, amikor az általunk, designerek által tervezett dolgokat próbálják használni.

Az akadálymentesítés nem csupán kipipálandó tétel egy listán. Ez egy alapvető gondolkodásmód, egy olyan szemlélet, amelyet a tervezési és fejlesztési folyamat minden szakaszába be kell építeni.

Gondolkodjunk tágabban: az akadálymentestől az univerzális tervezésig

Az akadálymentesítést gyakran leszűkítik a fogyatékossággal élő emberek számára történő tervezésre. De itt többről van szó: a célunk az inkluzív tervezés legyen, amely az emberek összes különböző igényét figyelembe veszi. Még egy lépéssel tovább menve, az univerzális tervezés arról szól, hogy mindenki számára használható dolgokat hozzunk létre, bármilyen helyzetben is legyen.

Miért? Mert amikor úgy tervezünk, hogy figyelembe vesszük azokat, akik esetleg nem tudják használni valamelyik érzékszervüket, vagy motoros készségekkel kapcsolatos kihívásokkal néznek szembe, elkerülhetetlenül mindenki számára tervezünk. Ezen igények figyelembevétele jobbá és több ember számára használhatóvá teszi a termékünket.

Valószínűleg láttuk már a Microsoft keretrendszerét, amely a korlátozottságokat kategorizálja:

• Állandó: Valaki, akinek nincs karja, aki vak vagy siket.
• Ideiglenes: Egy törött kar.
• Szituációs: Egy újdonsült szülő, akinek egy kézzel kell használnia a telefont.

Szeretem látni, ahogy a cégek ezt adaptálják. A Product Design Talks eseményen megosztottam példákat a Booking.com-tól, akik ezt utazási forgatókönyvekre ültették át: a figyelmetlen sofőr, aki nem tud a képernyőre nézni, vagy a stresszes utazó, aki rossz hírt kap egy törölt járatról. Hogyan reagálna ez a feszült ember egy felületre? Az biztosan nem a legalkalmasabb hely egy biztosítási ajánlat erőltetésére!

Ez a megközelítés nem csak a cégekre jellemző. Az Egyesült Királyság kormánya is kidolgozott hasonló perszónákat a szolgáltatástervezésükhöz, végiggondolva, hogy a különböző helyzetek hogyan befolyásolják a felhasználói igényeket. Gondoljunk például egy elfoglalt vállalkozóra, aki telefonhívások közben próbál kitölteni egy űrlapot, vagy egy utazóra, aki egy zajos, ismeretlen repülőtéren navigál. Minél közelebb kerülünk ezekhez a valós kontextusokhoz, annál több empátiára teszünk szert.

Gyakorlati lépések: mit tegyünk (és mit ne)

Az alap, hogy felismerjük, miért fontos az akadálymentesítés, de a valódi tudás a „hogyan”-ban rejlik. Íme néhány gyakorlati iránymutatás. (Külön köszönet Vitaly Friedmannek, akinek az Inclusive Design Patterns For 2025 című előadása erősen ajánlott mindenkinek, akit érdekel a téma, és amelyre én is támaszkodtam ebben az összeállításban.)

Vizuális tisztaság és érzékelés

A felhasználó első benyomása vizuális, de a látás nem univerzális. A látássérült, köztük a színtévesztő emberek számára a vizuális tisztaság biztosítása alapvető kiindulópont.

• Ne hagyatkozzunk csak a színekre: A szín hatékony eszköz lehet, de nem lehet az egyetlen módja az információnak. Ez a Web Content Accessibility Guidelines (WCAG) egyik alapvető A szintű kritériuma. Például az állapotjelzőknek színt (zöld pont) és szöveget („Most aktív”) is használniuk kell, a hibás mezőknek pedig többre van szükségük egy piros körvonalnál.
• Biztosítsunk megfelelő kontrasztot: A szöveg és a háttér közötti kontraszt kulcsfontosságú az olvashatóság szempontjából. A WCAG egyértelmű minimumokat határoz meg (AA szint): 4.5:1 arány normál szövegnél és 3:1 arány nagyméretű szövegnél (18pt vagy 14pt félkövér). Használjunk online eszközöket a palettáink ellenőrzésére. Ne feledjük, hogy a kék gyakran a legbiztonságosabb árnyalat a színtévesztő felhasználók számára, és kerüljük a piros és zöld, vagy a rózsaszín és türkiz keverését.
• Kerüljük a felső indexet: Azt a kis, megemelt szöveget (mint a TM vagy a fokok esetében) nehezebb olvasni. Használjunk alternatívákat, mint például „(TM)” vagy írjuk ki, hogy „fok”. Szükség esetén fogalmazzuk át a törteket.

Navigáció és struktúra

A tiszta, kiszámítható struktúra a használható felület gerince. Csökkenti a kognitív terhelést minden felhasználó számára, és elengedhetetlen azoknak, akik segítő technológiákkal navigálnak.

• Építsünk logikus hierarchiát: Használjuk helyesen a szemantikus HTML-t, különösen a címsor elemeket (H1, H2, H3). Ez egy logikus vázlatot hoz létre az oldalról, lehetővé téve a képernyőolvasót használóknak, hogy megértsék a struktúrát és közvetlenül a számukra szükséges szakaszra ugorjanak ahelyett, hogy mindent végighallgatnának.
• Tartsuk fenn a következetességet: Ha már kialakítottunk egy navigációs mintát, tartsuk azt következetesen minden oldalon. Egy váratlanul elmozduló keresősáv vagy főmenü növeli a használathoz szükséges kognitív terhelést. Ez összhangban van a WCAG következetes navigációra vonatkozó kritériumával (AA szint).
• Tervezzünk reszponzívan: Használjunk relatív egységeket, például százalékokat, ne pedig fix pixeleket a tervezés során. Ez biztosítja, hogy az elrendezés elegánsan alkalmazkodjon, amikor a felhasználók nagyítanak, vagy különböző képernyőméreteken nézik, megakadályozva a tartalom összekuszálódását vagy elérhetetlenné válását.
• Irányítsuk a figyelmet elrendezési mintákkal: Az emberek gyakran ‘F’ alakban pásztáznak, de néha lejjebb is néznek (rétegminta). Vegyük figyelembe ezeket a mintákat a kulcsfontosságú tartalmak elhelyezésekor.

Interakció és űrlapok

Minden pont, ahol a felhasználó interakcióba lép a termékkel – egy linkre kattintástól egy űrlap kitöltéséig – lehetőség a bizalom építésére vagy a frusztráció keltésére.

• Használjunk leíró linkeket: Az olyan általános linkek, mint a „Kattintson ide” vagy a „Tovább”, kétértelműek a képernyőolvasót használók számára. Tovább miről? Kattintson ide miért? Magának a link szövegének kell leírnia a műveletet vagy a célállomást, például „Olvassa el a specifikációt” vagy „Töltse le a felhasználói kézikönyvet”.
• Címkézzük az űrlapokat egyértelműen és adjunk visszajelzést: Mindig használjunk látható, állandó címkéket az űrlapmezőkhöz. A beviteli mezőben lévő placeholder szöveg nem elfogadható helyettesítő, mivel gyakran eltűnik, amint a felhasználó elkezd gépelni. Adjunk egyértelmű hibavisszajelzést is.
• Biztosítsuk a teljes billentyűzetes hozzáférést: Ez az egyik legfontosabb teszt, amit elvégezhetünk. Elérhető és működtethető-e minden egyes interaktív elem – a linkektől a gombokon át az űrlapvezérlőkig – kizárólag a billentyűzet használatával? Biztosítsuk, hogy a fókuszjelző (az a körvonal, ami megmutatja, melyik elem van kiválasztva) mindig látható legyen. Az összetett interakciókhoz, mint például a fogd és vidd (drag-and-drop), billentyűzetes alternatívát kell biztosítani.
• Egyszerűsítsük a követelményeket: Kerüljük a túlságosan bonyolult jelszókövetelményeket, amelyek mind az emberek, mind a jelszókezelők számára nehézséget okoznak. Ahol lehetséges, javasoljunk kétfaktoros hitelesítést (2FA) vagy passkey-ket modernebb, hozzáférhetőbb alternatívaként.
• Felugró párbeszédablakokat csak mértékkel használjunk: A „ne használj modalokat” talán túlzás, de óvatosan alkalmazzuk őket, mivel megzavarhatják a felhasználói folyamatot. Ha mégis használjuk, biztosítsuk, hogy teljes mértékben akadálymentesek legyenek.

Média, animáció és nyelv

A dinamikus tartalom és a multimédia javíthatja az élményt, de akadályokat is teremthet, ha nem kezeljük őket körültekintően.

• Biztosítsunk szöveges alternatívákat: Minden kontextus szempontjából releváns vizuális elemnek, mint a fotóknak, illusztrációknak, sőt néha az ikonoknak is, szüksége van szöveges alternatívára. Képek esetén adjunk leíró alt szöveget. Audio- és videótartalmakhoz biztosítsunk átiratot és feliratot.
• Adjuk a felhasználók kezébe az irányítást a mozgás felett: Találkoztunk már villogó elemekkel vagy automatikusan lejátszott videókkal? Ez bárki számára zavaró lehet, nem is beszélve a kognitív vagy szenzoros érzékenységű felhasználókról. Kerüljük az ilyen megoldásokat, vagy biztosítsunk egyértelmű vezérlőket a szüneteltetésre, leállításra.
• Használjunk világos és egyszerű nyelvezetet: Kerüljük a szakzsargont, és írjunk könnyen érthető módon. Ez mindenkinek előnyös, a kognitív nehézségekkel élő felhasználóktól a nem anyanyelvi beszélőkig.

Ismerjük meg a szabványokat: WCAG és az európai akadálymentesítési irányelv

A referenciapontok ismerete elengedhetetlen, mivel hamarosan a legtöbb cég számára kötelezővé válnak. A legfontosabb a Web Content Accessibility Guidelines (WCAG) a World Wide Web Consortium (W3C)-tól. A legfontosabb tudnivalók:

• Szintek: A (kötelező), AA (ajánlott – ez az általános cél), AAA (a csillagokig – gyakran nagyon nehéz elérni).
• POUR alapelvek: A tartalomnak észlelhetőnek (perceivable), működtethetőnek (operable), érthetőnek (understandable), és segítő technológiával használhatónak (robust) kell lennie.
• Verziók: A WCAG fejlődik (a 2.2-es verzió 2023-ban jelent meg, és jön a 3.0). A WCAG 2.2 olyan dolgokra helyez hangsúlyt, mint a látható fókuszjelzők és a minimális célméretek (pl. ≥24px).

Döntő fontosságú, hogy minden olyan cégnek, amely termékeket és szolgáltatásokat kínál az EU-ban, ismernie kell az Európai Akadálymentesítési Irányelvet (EAA) is.

• Hatálybalépés dátuma: 2025. június 28.
• Hatókör: Túlmutat a weboldalakon és alkalmazásokon. Lefedi az önkiszolgáló terminálokat (ATM-ek, jegykiadó automaták), e-könyveket, e-olvasókat, digitális banki szolgáltatásokat és az e-kereskedelmi termékeket.
• Kire vonatkozik: Minden olyan cégre világszerte, amely európai ügyfeleknek értékesít (B2C). Az EAA mentesíti a mikrovállalkozásokat (10-nél kevesebb alkalmazott, 2 millió eurónál kisebb éves forgalom).
• Szankciók: A meg nem felelés jelentős pénzbírság vagy akár börtönbüntetés kockázatával is járhat. (További részletek a szabályozásról itt.)

Hogyan valósítsuk meg az akadálymentesítést

Hogyan érdemes hozzáfogni vagy fejlődni?

1. Mérd fel a jelenlegi állapotot: Vizsgáljuk át a weboldalt vagy szolgáltatást. Nagyítható-e a szöveg 200%-ra? Mi történik egy képernyőolvasóval? Hogyan vannak kezelve a képek?
2. Teszteljünk fogyatékossággal élő felhasználókkal: A tesztelés felbecsülhetetlen értékű. A felhasználók gyakran a normál weboldalt részesítik előnyben, nem valamilyen külön akadálymentesített verziót vagy widgetet. Gyűjtsük össze a visszajelzéseiket.
3. Képezzük a teljes csapatot: Ne csak a designerekkel és fejlesztőkkel foglalkozzunk, képezzük a vezérigazgatót és a menedzsmentet is! Az ő támogatásuk nélkül az akadálymentesítési erőfeszítések gyakran elakadnak. Ennek a kultúra részévé kell válnia.
4. Integráljuk az akadálymentesítést minden funkcióba: Tegyük az akadálymentességi ellenőrzéseket a rendszeres fejlesztési folyamat és a Definition of Done részévé. Így nem meglepetésként vagy hatalmas feladatként jelentkezik a végén. (Az Ergomania-nál ellenőrző listákat és erőforrásokat használunk nap mint nap, hogy ebben segítsünk.)

Több mint megfelelőség, az akadálymentesítés az emberekről szól

A fő üzenetem a következő: az akadálymentesítés arról szól, hogy értelmes élményeket hozzunk létre. Nem szeretem hallani, amikor csak megfelelésként vagy teherként keretezik. Végső soron az akadálymentes tervezés azt jelenti, hogy több embert érünk el. Empátiát igényel. És az empátia révén valóban jobbá tesszük a világot a digitális termékeinken keresztül.

Igen, a megfelelés egy hajtóerő, különösen a közelgő határidőkkel. Gyakran mondják nekem: „Ez megfelelés, nincs semmi üzleti relevanciája.” Ezzel határozottan nem értek egyet! Igenis van jelentős üzleti relevanciája. Az akadálymentes tervezés szélesebb népességre terjeszti ki a potenciális piacot, erősíti a márka imázsát, és jogi követelmény az olyan szabályozások értelmében, mint az EAA.

De a legnagyobb váltás az, amikor az akadálymentesítés egy kipipálandó tételből a vállalati kultúra központi részévé válik. Ennek leghatékonyabb módja, ha a döntéshozókat bevonjuk a fogyatékossággal élő emberekkel végzett felhasználói tesztekbe. Amikor egy menedzser vagy vezérigazgató látja, hogy egy valós személy küzd a termékük használatával, a beszélgetés azonnal átalakul. Abból, hogy „Mi a minimum, amit meg kell tennünk a megfelelésért?”, az lesz, hogy „Hogyan javíthatjuk ezt meg neki?” Ezen videók megtekintése és a személyes tapasztalatok minden bizonnyal segítettek nekem is abban, hogy jobb szakemberré és jobb emberré váljak.

Dolgozzunk tovább egy akadálymentesebb digitális világért!