A webakadálymentesítés alapjai egyszerűen, kisvállalkozóknak (szakértő nélkül)

Hallottad már, hogy a weboldaladnak „akadálymentesnek” kellene lennie, és valószínűleg egy drága auditot, egy szakértőt és egy olyan ellenőrzőlistát képzeltél el, amit el sem tudsz olvasni. Jó hír: a haszon nagy része néhány egyszerű döntésből fakad, amit egy délután alatt magad is ellenőrizhetsz, egyetlen sor kód megírása nélkül.

Az akadálymentesség nem csupán „a fogyatékkal élők oldala”. Azt jelenti, hogy az oldal működik annak, aki tűző napsütésben, telefonon nézi, egy idősebb ügyfélnek, aki nem tudja elolvasni a világosszürke szöveget, vagy annak, aki billentyűzettel navigál. A gyakorlatban ez azt jelenti, hogy többen hívnak fel vagy töltik ki az űrlapodat. Ebben a cikkben pontosan megmutatom, mit érdemes megnézni és mit kijavítani, abban a sorrendben, ami a legfontosabb.

Mit is jelent valójában az akadálymentesség (és miért érint téged)

A webakadálymentesség azt jelenti, hogy az oldaladat a lehető legtöbb ember tudja használni, függetlenül a látásától, hallásától, mozgásától vagy a körülményeitől (olcsó telefon, gyenge térerő, közvetlen napfényben lévő képernyő).

Ez nem a politikai korrektségről szól. Nagyon is gyakorlati kérdés: minden ember, aki nem tudja elolvasni az árat, megérinteni a gombot vagy megtalálni a telefonszámodat, egy elveszett ügyfél. A legtöbb akadálymentességi probléma valójában használhatósági probléma, ami mindenkit érint.

Egy másik kézzelfogható előny: a Google könnyebben „olvassa” az akadálymentes oldalt. A tiszta szöveg, a megfelelően leírt képek és a logikus felépítés a SEO-nak is segít, nem csak az olvasóidnak. Így egyszer dolgozol, és két problémát oldasz meg.

Szövegkontraszt — a legolcsóbb nyereség

A leggyakoribb hiba a kisvállalkozói oldalakon a világosszürke szöveg fehér háttéren. „Elegánsnak” néz ki a tervező laptopján, de olvashatatlanná válik a szabadban használt telefonon vagy egy fáradt szempárnak.

Ökölszabály: sötét szöveg világos háttéren (vagy fordítva), semmi határeset-árnyalat. A WCAG szabvány normál szöveghez legalább 4,5:1 kontrasztarányt kér — technikailag hangzik, de ingyen ellenőrizheted.

• Keresd rá a Google-ben a „WebAIM contrast checker” kifejezésre, add meg a szöveg és a háttér színkódját, és megmondja, hogy megfelel-e.
• Fordíts külön figyelmet a kis méretű szövegre: láblécek, árak, feltételek, vékony betűs gombok.
• Ne támaszkodj egyedül a színre. Ha egy hibát csak pirossal jelölsz, aki nem különbözteti meg jól a színeket, nem fogja látni — adj hozzá szöveget is („Kötelező mező”).

Alternatív szöveg a képekhez (alt text)

Minden érdemi kép mellé kellene egy rövid szöveges leírás — „alt text”. A képernyőolvasók ezt használják a vak felhasználóknak, de akkor is megjelenik, amikor a kép nem töltődik be (gyenge térerő), és a Google is ebből olvassa ki a kontextust.

Hogyan csináld jól, kevés erőfeszítéssel:

• Írd le röviden és természetesen, ami hasznos a képen: „Kétszintes torta erdei gyümölcsökkel” — nem „IMG_2043”.
• Tisztán dekoratív képeknél (egy háttértextúra) hagyd üresen a leírást, hogy ne zsúfolja tele a képernyőolvasót.
• Ne tömd tele SEO-kulcsszavakkal. Annak írd, aki nem látja a fotót.

A legtöbb platformon (WordPress, Wix, bármelyik szerkesztő) van egy „Alt text” mező közvetlenül a kép mellett. Fotónként csak pár másodpercig tart.

Gombok, linkek és űrlapok, amiket bárki tud használni

Itt vész el a legtöbb konverzió, még akkor is, ha az oldal többi része jól néz ki.

• Az ujjal megérintett gomboknak és linkeknek elég nagynak és jól elkülönítettnek kell lenniük. Ha neked is nehéz eltalálni őket telefonon, akkor az ügyfelednek is.
• A link szövege mondja meg, hová vezet: „Nézd meg az étlapot” vagy „Hívj most”, ne „Kattints ide”. Aki linkek listáját böngészi, a környező szöveg nélkül is meg kell hogy értse.
• Az űrlapokon minden mezőnek legyen látható címkéje (Név, Telefon), ne csak szürke helyőrző szöveg, ami eltűnik, amint elkezdesz gépelni.
• A telefonszámod és a címed valódi szöveg legyen, ne kép. Így közvetlenül megérinthető és bármely eszközzel olvasható.

Egy gyors teszt: próbálj végigmenni az oldalon kizárólag a Tab billentyűvel. Ha eljutsz a gombig és jól látod, hol vagy éppen, akkor jó úton jársz.

Gyakori csapdák és honnan tudod, hogy rendben vagy (fizetős audit nélkül)

Néhány hiba, amit gyakran látok:

• „Akadálymentesítő widgetek” (az az ikonsáv, ami egy kattintással ígéri akadálymentessé tenni az oldalt). A legtöbbször nem oldják meg a valódi problémákat, sőt olykor rontanak rajtuk. Nincs varázsgomb — inkább a forrásnál javítsd a dolgokat.
• Zsúfolt képekre helyezett szöveg kontraszt nélkül.
• Túl kicsi betűméret. A törzsszövegnél 16px alatt nehézzé válik az olvasás telefonon.
• Videó, ami hanggal, magától elindul.

Hogyan ellenőrizd magad, ingyen: nyisd meg az oldalt telefonon, nappali fényben; nagyítsd fel a böngésző szövegét, és nézd meg, elromlik-e az elrendezés; menj végig Tabbal az oldalon; futtass egy automatikus tesztet (keress rá a „WAVE accessibility” kifejezésre, vagy használd a Lighthouse „Accessibility” jelentését a Chrome-ban). Nem fog mindent elkapni, de megmutatja a könnyű nyereségeket.

Ha szeretnéd, a MPO Web Studio-nál ingyenes demót építünk a te oldaladról, már eleve helyesen beállítva a kontrasztra, a struktúrára és a mobilra — még fizetés előtt látod, országosan, távolról dolgozunk, és átláthatóan megmondjuk, mibe kerül. Írj nekünk WhatsApp-on, és gyorsan átnézzük, mid van most.