Akadálymentesítés Elementorral – Gyakorlati Útmutató

Melyik témánál kell ezeket beállítani?

Ha a Hello témát használod (az Elementor minimális témája), akkor az alábbi beállításokat mind neked kell megcsinálnod, mivel ez a téma tényleg csak egy üres vászon.

A Twenty Twenty-One és újabb WordPress alapértelmezett témák viszont már alapból tartalmazzák az ugrólinket és a területjelzőket. Ezeknél csak akkor kell az alábbi lépéseket követned, ha Elementor template-ekkel (Header, Footer) felülírod az eredeti téma struktúráját.

Tehát nézd meg először, mit használsz és mi hiányzik – lehet, hogy nem kell minden lépést megcsinálnod!

Globális beállítások

Alapértelmezett színek és betűtípusok tiltása

Képzeld el, hogy színvak vagy, és egy oldalt böngészel, ahol a linkek csak színben különböznek a normál szövegtől. Vagy hogy gyengénlátó vagy, és az oldal betűtípusa olyan vékony, hogy még nagyítóval sem tudod elolvasni.

Hol találod: Elementor > Beállítások > Általános fül

Az Elementor alapértelmezett beállításai nem mindig gondolnak ezekre az esetekre. Amikor letiltod őket (csak két pipát kell betenned), teljes kontrollt kapsz a design felett. Így te döntöd el, milyen kontrasztarányokat használsz, és milyen betűtípusokat választasz. A cél a WCAG által előírt megfelelő színkontraszt (1.4.3).

Egy ügyfelem egyszer panaszkodott, hogy a nagymamája nem tudja olvasni a weboldalát. Kiderült, hogy az alapértelmezett világosszürke szöveg fehér háttéren szinte láthatatlan volt számára. Miután átállítottuk a színeket megfelelő kontraszttal, a nagymama végre önállóan tudta használni az oldalt.

Globális színek megadása

Egy helyen határozd meg az oldalon használt színeket. Ezáltal követhető lesz később is, egy másik fejlesztő is könnyedén átlátja a felépítést.

Hol találod: Nyiss meg egy oldalt az Elementorban > Bal felső sarokban kattints a Site Settings-re > Global Colors

Adj beszédes neveket a színeidnek:

• „Sötét szöveg főcímekhez”
• „Világos háttér tartalomhoz”
• „Kiemelt gombszín”
• „Link kék – normál állapot”

Angela Bowman, aki évek óta épít akadálymentes Elementor oldalakat, azt javasolja: készíts egy stílusútmutató oldalt, ahol az összes színkombinációdat tesztelheted kontrasztellenőrző eszközökkel. Így azonnal látod, ha valamelyik kombináció nem felel meg a WCAG szabványnak.

Kontraszt ellenőrzésre itt egy szuper eszköz: WebAIM contrast checker↗⧉

A REM vs. pixel vita – Miért a REM a megfelelő?

Képzeld el, hogy gyengénlátó vagy, és a böngésző beállításaiban megnöveled az alapértelmezett betűméretet 16 px-ről 24 px-re. Ha az oldal fix pixeleket használ, semmi nem változik: a szöveg ugyanakkora marad. Ha viszont REM-et alkalmazol, az egész oldal arányosan nagyobb lesz, így a tartalom végre könnyen olvashatóvá válik.

Hol találod: Nyiss meg egy oldalt az Elementorban > Bal felső sarokban kattints a Site Settings-re > Typography vagy Global Fonts

Egy egyszerű példa a REM számításra:

• 16px = 1rem (alapértelmezett)
• 24px = 1.5rem
• 32px = 2rem

Használj REM konvertert↗⧉, ha nem vagy biztos a számításban. A lényeg: adj esélyt a felhasználóknak, hogy az igényeikhez igazítsák az oldaladat!

Területjelölők – A láthatatlan térkép

A szemantikus HTML ereje

Most következik az a rész, amit sokan kihagynak, pedig kritikus fontosságú. A képernyőolvasók egy weboldalon úgy navigálnak, mint te egy épületben: tájékozódási pontokat keresnek. A HTML5 által definiált jelölőket – például a header, nav, main és footer elemeket – ma már minden képernyőolvasó felismeri. Ha ezeket helyesen használod, már ezzel is rengeteget segítesz a felhasználóknak.

A fejléc beállítása

Hol találod: Menj a Header sablonodhoz → kattints a középső fogaskerék ikonra.

Ha a HTML címkét header-re állítod, tulajdonképpen kihelyezel egy táblát: „Itt kezdődik az oldal fejléce.” A képernyőolvasó felhasználók így gyorsbillentyűvel azonnal ide ugorhatnak.

A lábléc szerepe

Hol találod: Menj a Footer sablonodhoz → kattints a középső fogaskerék ikonra.

Ugyanez érvényes a footer-re is: ez jelzi, hogy „Itt van az oldal lábléce.” Fontos, hogy ezt is megfelelő HTML címkével lássuk el, mert a képernyőolvasók így könnyebben felismerik, és a felhasználók gyorsabban navigálhatnak hozzá.

A fő tartalom jelölése

Ez talán a legtrükkösebb rész. A tartalmat egy üres konténerbe kell csomagolnod:

• Nullázd ki a konténer padding és margin értékeit
• Adj hozzá egy CSS ID-t: content
• A Haladó beállítások alatt állítsd a HTML címkét main-re
• Ellenőrizd, hogy az oldal elrendezése site default legyen (ne full width)

Miért fontos ez?
Mert így működik a Skip to content link – az a láthatatlan hivatkozás, amely a Tab billentyű első megnyomásakor jelenik meg. Ez különösen azoknak hasznos, akik kizárólag billentyűzettel navigálnak, és nem szeretnének minden egyes menüponton végigléptetni, mielőtt a fő tartalomhoz jutnak.

Felcímkézett menü

Használd az új Elementor menü widgetet, és ami a legfontosabb: nevezd el!

Hol találod: Menü widget → Elem beállítások
Például nevezd így: Főmenü

Ha az oldaladon több menü is van (például főmenü és lábléc menü), és mindegyiket ellátod névvel, a képernyőolvasó ezt is bejelenti, így a felhasználó tudni fogja, melyik menüben navigál.

Címsorok – Az oldal vázlata

Képzeld el úgy, mint egy könyv tartalomjegyzékét:

• H1 – A könyv címe (oldalanként csak egy lehet!)
• H2 – Fejezetek
• H3 – Alfejezetek

A képernyőolvasó felhasználók gyakran így navigálnak: „Mutasd az összes H2 címsort” vagy „Ugorj a következő H3-ra”.
Ha a címsorokat csak a kinézet miatt használod összevissza, az olyan, mintha a könyv tartalomjegyzékében teljesen random számozás lenne. A jól megválasztott címsorszöveg a WCAG értelmes fejlécek és címkék követelményét is teljesíti.

Tipp: Telepítsd a HeadingsMap↗⧉ Chrome-bővítményt. Egy pillantással láthatod, rendben van-e a címsorstruktúrád.

Bővebben a címsorokról: Minden, amit a címsorokról tudni érdemes

Linkek aláhúzása

A színvak felhasználók számára fontos, hogy a linkek ne csak színnel legyenek megkülönböztetve.

Hol adhatod hozzá: Site Settings → Custom CSS

Példa CSS-kód:

a:not(.elementor-button):not(.elementor-menu-item) {
  text-decoration: underline;
}
a:not(.elementor-button):not(.elementor-menu-item):hover {
  text-decoration: none;
}

Ez a beállítás aláhúzza a szövegben lévő linkeket, miközben a gombokat és menüpontokat érintetlenül hagyja. A hover effekt (amikor az aláhúzás eltűnik) vizuális visszajelzést ad arról, hogy interaktív elem fölé vitted az egeret.

Képek és alternatív szövegek

Minden képhez szükséges alternatív szöveg, de nem mindegy, milyen! Ezt a WCAG képek szöveges alternatívái pontja írja elő.

• Rossz példa: kép vagy grafika
• Jó példa: Mosolygó ügyfélszolgálatos headsettel a call centerben

Ha a kép pusztán dekoráció (például egy elválasztó vonal), hagyd üresen az alt (helyettesítő szöveg) mezőt – így a képernyőolvasó figyelmen kívül hagyja.

Tesztelés – A valódi próba

A legjobb eszközök

WAVE↗⧉ – Ez legyen az első állomásod. Telepítést sem igényel, a böngészőben azonnal kipróbálhatod. Segítségével megtudhatod:

• Hol hiányzik az alt szöveg
• Mely színkombinációk nem elég kontrasztosak
• Hol vannak strukturális problémák

Deque Axe↗⧉ – Profi eszköz, amely Chrome-bővítményként érhető el, és részletesen tesztelhetők vele a weboldalak.

Fontos: Az automatizált eszközök a hibák mindössze kb. 30–40%-át derítik fel.

A maradék hibákat csak kézi vizsgálat tárja fel: ilyen egy alapos weboldal akadálymentességi audit, amely a valós használhatóságot ellenőrzi.

Manuális tesztelés

1. Nagyítás teszt – Állítsd a böngészőt 200%-os nagyításra. Még mindig minden olvasható és használható? Ha igen, próbáld ki 400%-os nagyítással is.
2. Billentyűzet teszt – Tedd el az egeret! Csak a Tab, Enter és nyílbillentyűkkel navigálj. El tudsz jutni mindenhová?
3. Kontraszt teszt – A WAVE automatikusan ellenőrzi, de érdemes manuálisan is megnézni a kritikus részeket.
4. Képernyőolvasó teszt – Haladó felhasználók kipróbálhatják az oldalt képernyőolvasóval. Windows alatt az NVDA↗⧉ ingyenesen elérhető, és készült hozzá egy részletes magyar útmutató is: Hogyan teszteljük az NVDA képernyőolvasóval weboldalunkat↗⧉

Gyors ellenőrzőlista a kezdéshez

• [ ] Elementor alapértelmezett színek és betűk letiltva
• [ ] Globális színek beszédes nevekkel ellátva
• [ ] Betűméretek REM-ben definiálva
• [ ] Header/Footer/Main HTML tag-ek beállítva
• [ ] Menük elnevezve (pl. Főmenü, Lábléc)
• [ ] Címsorhierarchia rendben (H1 → H2 → H3)
• [ ] Linkek aláhúzva a szövegben
• [ ] Képek alt szöveggel ellátva
• [ ] Tesztelő eszközzel ellenőrizve
• [ ] Billentyűzettel végignavigálva

Ne feledd: az akadálymentesebb weboldal nem csak a fogyatékossággal élőknek segít. A jobb struktúra, tisztább kód és átgondolt navigáció mindenki számára jobb felhasználói élményt biztosít.

A fentiek elvégzésével még nem garantált a teljes akadálymentesség, de nagy lépést teszel ebbe az irányba.
Ha jobban érdekel a téma, kezdd el áttanulmányozni a WCAG szabványban leírtakat. Weboldalunkon minden ponthoz találsz közérthető magyarázatokat példakóddal együtt. Ha kérdésed van, vedd fel velem a kapcsolatot!

Ez a bejegyzés Angela Bowman és David Denedo Elementor Accessibility webinárja↗⧉ alapján készült, kiegészítve saját tapasztalataimmal és gyakorlati tanácsokkal.