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

Sokan azt gondolják, hogy néhány beállítás az oldalon, esetleg pár akadálymentességet elősegítő bővítmény felrakása, és máris kipipálhatják ezt a „funkciót”. Ez korántsem ilyen egyszerű, ugyanis rengeteg kritériumnak kell megfelelni ahhoz hogy a weboldal valóban akadálymentes lehessen. A jó hír viszont az, hogy pár egyszerű lépéssel rengeteg pontot kipipálhatsz a listán.

Ebben az útmutatóban végigvezetlek a legfontosabb lépéseken, amelyekkel valóban akadálymentesebbé teheted az Elementorral épített oldaladat. Nem csak felsorolom a teendőket – elmagyarázom, miért fontosak ezek, és milyen valós problémákat oldanak meg.

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.

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.

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!

• 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.

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.