bybence
Kapcsolat
bybence

Felfedezés

Eszközök

Academy

Blog

Hírek

Kapcsolat

Academy

UI & UX tananyag

ByBence Academy

UI & UX

54 anyag

UI/UX alapok

UI és UX különbségeMi az a UX design?Mi az a UI design?UsabilityMentális modell

Accessibility

Web accessibility
SzínkontrasztBillentyűzetes navigációFocus stateKattintható terület méreteAkadálymentes űrlap
Academy

/

UI & UX

/

Accessibility

Web accessibility

A web accessibility azt jelenti, hogy a webes tartalmak és funkciók különböző képességekkel, segítő technológiákkal és beviteli módokkal is használhatók.

2 perc olvasás

Frissítve: 2026. augusztus 30.

Balogh Bence

Röviden

A web accessibility azt jelenti, hogy a webes tartalmak és funkciók különböző képességekkel, segítő technológiákkal és beviteli módokkal is használhatók.

Vizuálisan

Az akadálymentes felület többféle használati módot támogat

Ugyanazt a helyzetet kétféleképp nézd meg: először a tipikus hibát, utána azt a megoldást, amelyik jobban támogatja a felhasználó feladatát.

×

GYAKORI HIBA

Csak egérrel és vizuális jelzéssel használható

Egér ✓

Billentyűzet ×

Érintés ?

Képernyőolvasó ×

Billentyűzettel, nagyítással vagy segítő technológiával a feladat részben vagy teljesen elérhetetlenné válhat.

HELYES IRÁNY

Ugyanaz a feladat több bemeneti móddal is elvégezhető

Egér ✓

Billentyűzet ✓

Érintés ✓

Képernyőolvasó ✓

A szemantika, fókusz, kontraszt és megfelelő célméret együtt teszi robusztusabbá a felületet.

Mit jelent a web accessibility?

A web accessibility azt jelenti, hogy a webes tartalmak és funkciók különböző képességekkel, segítő technológiákkal és beviteli módokkal is használhatók.

Az accessibility nem külön „speciális mód”, hanem a felület minőségének része. A billentyűzet, megfelelő szemantika, kontraszt és érthető visszajelzés sokféle felhasználónak segít.

A legfontosabb alapelvek

  • Szemantikus HTML.
  • Billentyűzetes használhatóság.
  • Érzékelhető kontraszt és fókusz.
  • Szöveges alternatívák.
  • Érthető hibák és formok.

Gyakorlati példa

Egy jól megírt button elem billentyűzettel és segítő technológiával alapból sokkal használhatóbb, mint egy kattintható div, amelyhez kézzel próbálsz minden viselkedést visszaépíteni.

Egér, billentyűzet, érintés és segítő technológia

Egér

Billentyűzet

Érintés

Segítő technológia

Gyakori hibák

  • Accessibilityt csak projekt végén auditálni.
  • ARIA-val helyettesíteni a natív elemeket.
  • Csak automata auditból következtetni teljes megfelelőségre.

Hogyan alkalmazd a saját felületeden?

Ne izolált szabályként kezeld a témát. A web accessibility akkor működik jól, ha a felhasználó céljával, a tartalom fontossági sorrendjével és a teljes felület többi döntésével együtt vizsgálod.

Teszteld valós feladattal: adj a felhasználónak konkrét célt, figyeld meg, hol bizonytalanodik el, mit ért félre, és mely pontokon kell indokolatlanul gondolkodnia. A jó UI/UX döntés nem attól jó, hogy látványos, hanem attól, hogy kiszámíthatóbbá és könnyebbé teszi a feladat elvégzését.

A vizuális minőség és a használhatóság nem egymás ellenfelei. A jó felület mindkettőt ugyanannak a felhasználói célnak rendeli alá.

Gyakorlati accessibility ellenőrzés

Az automata accessibility scanner hasznos első szűrő, de nem elég. Menj végig az oldalon csak billentyűzettel, ellenőrizd a fókuszsorrendet és fókuszjelzőt, zoomolj, próbáld megérteni a formot vizuális színjelzések nélkül, és ahol lehet, tesztelj képernyőolvasóval is.

A WCAG sikerességi kritériumai mérhető minimumokat adnak, de a megfelelés nem automatikusan jelent kiváló UX-et. Egy technikailag szabályos kontroll továbbra is lehet félreérthető vagy nehézkes, ezért a szabványellenőrzést használhatósági teszttel érdemes kiegészíteni.

  • Tabbal minden funkció elérhető-e
  • látható és nem kitakart-e a fókusz
  • szín nélkül is érthetők-e az állapotok és hibák
  • zoom és nagyított szöveg mellett is használható-e a felület

Gyakori kérdések

Miért fontos a web accessibility?

Az accessibility nem külön „speciális mód”, hanem a felület minőségének része. A billentyűzet, megfelelő szemantika, kontraszt és érthető visszajelzés sokféle felhasználónak segít.

Mikor érdemes tesztelni?

Már korai wireframe vagy prototípus szinten is. Minél később derül ki egy alapvető használhatósági probléma, annál drágább lehet a javítása.

Források és további olvasnivaló

Az accessibility és usability állításoknál elsődleges szabványokra és bevett szakmai forrásokra támaszkodj; a konkrét interface-döntéseket pedig mindig a saját felhasználói kontextusodban teszteld.

W3C – Web Content Accessibility Guidelines (WCAG) 2.2

Előző

Progressive disclosure

Következő

Színkontraszt

Ezen az oldalon

Mit jelent a web accessibility?A legfontosabb alapelvekGyakorlati példaGyakori hibákHogyan alkalmazd a saját felületeden?Gyakorlati accessibility ellenőrzés