Szemantikus HTML
Helyesen jelölt címsorok, listák, gombok és oldalrészek, hogy a képernyőolvasó egyből oda ugorhasson, amit a látogató keres.
Akadálymentes weboldal
Akadálymentes weboldal: olyan oldal, amit bárki használni tud.
Vevők, akik rosszul látnak, nem tudnak egeret használni, vagy napfényben olvasnak a telefonjukon. Az akadálymentes weboldalon mindenki megtudja, mit csinálsz, és el tud érni.
Az akadálymentes weboldalt látás-, hallás- vagy mozgássérült emberek is használni tudják: billentyűzettel, képernyőolvasóval vagy felnagyított szöveggel. Minden új oldalamat így építem: szemantikus HTML, megfelelő kontraszt, billentyűzetes navigáció, alternatív szöveg a képekhez, jól olvasható betűk és érthető űrlapok. Meglévő oldalnál akadálymentességi ellenőrzést végzek, és javítási listát adok.
Miért számít az akadálymentesség
Mert változott a jog. A 2019/882-es uniós irányelv, az európai akadálymentesítési jogszabály, 2025. június 28-tól sok termékre és szolgáltatásra vonatkozik, köztük a fogyasztóknak nyújtott elektronikus kereskedelmi szolgáltatásokra. Magyarországon a 2022. évi XVII. törvény ültette át, amely a termékekre és a szolgáltatásokra vonatkozó akadálymentességi követelményeknek való megfelelés általános szabályairól szól. Nem vagyok jogász: a technikai részt elmagyarázom, a konkrét kötelezettségeidet ügyvéddel ellenőrizd.
Mert sok vevőnek szüksége van rá, csak nem mondja. Idősebbek, akik felnagyítják a szöveget, valaki begipszelt kézzel, valaki, aki nem különbözteti meg a pirosat a zöldtől. Ha a kapcsolat gomb nem látszik, vagy az űrlapot nem lehet kitölteni, szó nélkül továbbmennek.
És mert az akadálymentes oldal általában jobb oldal is. A világos szerkezetet, amit a képernyőolvasó felolvas, a Google is olvassa. A jó kontraszt mindenkinek segít, aki napfényben nézi a telefonját, az érthető űrlapokat pedig gyorsabban ki lehet tölteni.
Mit csinálok konkrétan
Kontraszt és betűk
A háttértől jól elváló szöveg, könnyen olvasható betűk, és oldalak, amelyek nagyított szöveggel is rendben maradnak.
Billentyűzetes navigáció
Minden menü, gomb és űrlap használható csak billentyűzettel is, jól látható kerettel az aktív elemen.
Alternatív szövegek
A tartalmat hordozó képek rövid leírást kapnak. A csak díszítő képeket elrejtem a képernyőolvasók elől.
Érthető űrlapok
Minden mezőnek van címkéje, a hibákat szavakkal magyarázom el, nem csak piros színnel.
Kevesebb mozgás, nyilatkozat
Az animációk leállnak annak, aki ezt kérte a telefonja beállításaiban. Az oldal akadálymentességi nyilatkozatot is kap.
Mennyibe kerül
Az akadálymentesség minden új oldalban benne van, felár nélkül. Meglévő oldal ellenőrzésének árát azután mondom meg, hogy megnéztem, mert a méretétől és a felépítésétől függ: előre fix árat kapsz. Ha a régi oldalon túl sok a hiba, gyakran egy új oldal az egyszerűbb:
| Szolgáltatás | Ár | Mit kapsz |
|---|---|---|
| Akadálymentes Essential weboldal (1 oldal, szöveggel) | 999 €≈ 367 000 Ft | Egy oldal legfeljebb 12 szekcióval, eleve akadálymentesen építve, akadálymentességi nyilatkozattal. |
| Akadálymentes Business weboldal | 1 499 €≈ 550 000 Ft | Legfeljebb 10 oldal, eleve akadálymentesen, Google Cégprofillal és saját domaines e-maillel. |
| Akadálymentes webáruház | 1 999 € -tól≈ 734 000 Ft | Kosár, rendelés és űrlapok, amelyek billentyűzettel és képernyőolvasóval is működnek. |
Akadálymentes kód, widget vagy semmi
Háromféleképpen kezelik az akadálymentességet a kisebb oldalakon:
| Akadálymentes kód (RAGANA Studio) | Akadálymentességi widget | Semmi | |
|---|---|---|---|
| Képernyőolvasó | Helyes szerkezet, megnevezett gombok | Az alatta lévő kód ugyanaz marad | Gyakran nehezen használható |
| Billentyűzet | Az egész oldal, látható fókusszal | Az oldaltól függ, nem a widgettől | Gyakran elakad a menüben |
| Űrlapok | Címkék és szavakkal elmagyarázott hibák | Nem változik | Gyakran címke nélkül |
| Költség | Az új oldalakban benne van | Gyakran havidíjas | Nulla, amíg nincs baj |
| Sebesség | Nincs plusz szkript | Még egy szkript minden betöltésnél | Változatlan |
| Akadálymentességi nyilatkozat | Benne van | Gyakran hiányzik | Hiányzik |
Hogyan ellenőrzök egy meglévő oldalt
1. Küldd el a linket
Megnézem az oldalt, és megmondom, mennyibe kerül a teljes ellenőrzés.
2. Ellenőrzés
Automatikus tesztek, aztán kézi ellenőrzés: csak billentyűzettel, képernyőolvasóval és nagyított szöveggel használom az oldalt.
3. Javítási lista
Világos, sorrendbe állított listát kapsz: mi súlyos, mi apróság, mi javítható gyorsan.
4. Javítás vagy új oldal
Kijavítom a meglévő oldalt, vagy ha egyszerűbb, újat építek, eleve akadálymentesen.
5 gyakori hiba az akadálymentességnél
Widget a helyes kód helyett
Az egy kattintásos akadálymentességet ígérő gombok színeket és méreteket változtatnak az oldal fölött, de az alatta lévő kódot nem javítják. A címke nélküli űrlap címke nélkül marad. A hibákat az oldalban kell javítani, nem fölötte.
Világosszürke szöveg fehéren
Egy jó kijelzőn, sötét szobában elegáns. Napfényben a telefonon, vagy annak, aki rosszul lát, nehezen olvasható. A kontraszt mérhető, nem ízlés kérdése.
Név nélküli ikonok
Egy nagyító, egy kosár, egy háromvonalas menü. Aki lát, felismeri, de a képernyőolvasó csak annyit mond: „gomb”. Minden gombnak kell egy név, akkor is, ha nem látszik.
Eltüntetett fókuszkeret
Sok oldal elrejti a keretet, ami billentyűzetes használatnál mutatja, hol vagy, mert nem tetszik. Nélküle a billentyűzetet használó látogató nem tudja, hol jár az oldalon.
Csak automatikus teszt
Az automatikus eszközök a hibák egy részét találják meg, nem mindet. Nem tudják, értelmes-e egy alternatív szöveg, vagy logikus-e a billentyűzetes sorrend. A kézi ellenőrzés szükséges.
Gyakori kérdések
Rám is vonatkozik a törvény?
Attól függ, mit árulsz, kinek, és mekkora a vállalkozásod. Elsősorban a webáruházakat és azokat a szolgáltatásokat érinti, ahol a fogyasztó online köt szerződést. A szolgáltatást nyújtó mikrovállalkozások, vagyis a 10 főnél kevesebbet foglalkoztató, legfeljebb 2 millió eurónak megfelelő éves nettó árbevételű vagy mérlegfőösszegű vállalkozások mentesülnek. A saját helyzetedet kérdezd meg ügyvédtől.
Milyen szabványt használsz?
A szokásos műszaki szabvány az EN 301 549, amely a WCAG 2.1 AA szintjére hivatkozik. Létezik az újabb WCAG 2.2 is, néhány további feltétellel. Az új oldalaimnál a WCAG 2.1 AA a cél, és a 2.2 feltételeit is figyelembe veszem.
Másképp néz ki egy akadálymentes oldal?
Nem feltétlenül. Ugyanolyan modern lehet. A különbség főleg a kódban, a kontrasztban és abban van, hogyan viselkednek a gombok és az űrlapok.
Mi az akadálymentességi nyilatkozat?
Egy oldal, amely elmondja, mennyire akadálymentes a weboldal, mi nem az még, és hogyan jelezheti, akinek problémája van. Minden új oldalhoz megírom.
Vannak átmeneti határidők?
Egyes termékekre és a már meglévő szerződésekre a törvény átmeneti időszakot ad, amely egyes esetekben 2030-ig tart. Új weboldalnál és webáruháznál ne erre építs. Hogy rád milyen határidők vonatkoznak, azt ügyvéddel ellenőrizd.
Ha mikrovállalkozás vagyok, megéri így is?
Igen, ha azt szeretnéd, hogy minden vevőd használni tudja az oldalt. A mentesség a kötelezettség alól ment fel, nem a rosszul látó vagy billentyűzetet használó vevők alól. Az új oldalaknál nem kerül pluszba.
Webshop készítésBemutatkozó weboldalCéges weboldal készítésLanding oldal készítésGoogle CégprofilGoogle értékelésekDigitális étlapKeresőoptimalizálásSEO TemesvárLáthatóság a ChatGPT-benGyors weboldal, PageSpeed 90+Logótervezés és arculatOnline időpontfoglalásWordPress vagy saját weboldal?GaranciáimHavi gondozásCéges videó készítésÁrkalkulátor rendelésselFacebook és Google hirdetésekTöbbnyelvű weboldalSEO szövegírásCéges e-mail címWeboldal megújítás
Írta: Raul Gabriel Nagy
A RAGANA Studio alapítója, 2009 óta webdesigner. Weboldalakat és webshopokat építek vállalkozásoknak Romániában, Magyarországon, Ausztriában és Németországban, és saját webáruházat is működtetek, a raganadesign.shopot. A történetem →
Frissítve:Kíváncsi vagy, mennyire akadálymentes az oldalad?
Küldd el a linket. Megnézem, és megmondom, mit érdemes ellenőrizni, és mennyibe kerül. Munkanapokon még aznap válaszolok.