HTML alapok › 8. modul: Ellenőrzés és közzététel › 8.3 lecke
HTML alapok · 8.3 lecke
Akadálymentesség ellenőrzése: mindenkinek szóló web
A tanfolyam során minden leckében szó volt arról, hogyan lesz a weboldalad használható azoknak is, akik nem látnak, nem használnak egeret, vagy épp egy napfényes buszmegállóban nézik a telefonjukat. Ebben a leckében összegyűjtjük a tudást, és megtanulod ellenőrizni az oldaladat.
A lecke végére
- megérted, kinek és miért fontos az akadálymentesség;
- ismered a WCAG négy alapelvét;
- 5 perces gyorstesztet végzel egy weboldalon;
- automatikus eszközökkel (WAVE, Lighthouse) ellenőrzöl, és tudod, mit nem látnak.
Mielőtt elkezded
Hasznos ismerni a fejlesztői eszközöket.
Kinek fontos?
Az Egészségügyi Világszervezet (WHO) becslése szerint a világon kb. 1,3 milliárd ember, vagyis minden hatodik ember él jelentős fogyatékossággal. De az akadálymentesség nemcsak róluk szól:
Kihívás: 3 perc egér nélkül
Tedd félre az egeret (vagy ne érj a touchpadhez), és próbálj meg egy kedvenc webhelyeden csak billentyűzettel (Tab, Shift + Tab, Enter, szóköz) eljutni egy konkrét oldalra. Mennyire volt könnyű? Mindig láttad, hol jársz?
A WCAG négy alapelve
A nemzetközi akadálymentességi irányelv, a WCAG (Web Content Accessibility Guidelines, jelenleg a 2.2-es változat) négy alapelvre épül:
| Alapelv | Jelentése | Példa a tanfolyamból |
|---|---|---|
| Észlelhető | Mindenki érzékelni tudja a tartalmat. | Alt szöveg (4.1), jó kontraszt. |
| Működtethető | Mindenki tudja kezelni. | Billentyűzettel elérhető gombok (7.4), ugrólink (6.3). |
| Érthető | A tartalom és a működés érthető. | Oldal nyelve (1.3), beszédes linkek (3.1), címkék (7.1). |
| Robusztus | Sokféle eszközzel működik. | Szabályos, szemantikus HTML (6. modul, 8.1). |
Az 5 perces gyorsteszt
- Billentyűzet: Tab-bal végig lehet menni az oldalon? Mindig látszik, hol vagy (fókuszkeret)? Van ugrólink?
- Nagyítás: Ctrl és + billentyűvel nagyíts 200%-ra. Olvasható maradt, nem csúszik szét?
- Képek: mindegyiknek van értelmes alt szövege (vagy üres, ha díszítő)?
- Címsorok: egy h1, logikus hierarchia (HeadingsMap bővítmény vagy WAVE)?
- Felolvasó: a Windows Narrátorral (Ctrl + Windows + Enter) hallgass meg egy részt: érthető?
Kontraszt
A szöveg és a háttér között elég nagy legyen a különbség: a WCAG szerint normál szövegnél legalább 4,5:1 arány. Világosszürke betű fehér alapon gyakori hiba. Az arányt a fejlesztői eszközök is kiírják, ha egy szövegre kattintasz.
Automatikus eszközök, és amit nem látnak
A gép csak a hibák egy részét találja meg
Az automatikus eszköz látja, hogy hiányzik az alt szöveg, de azt nem, hogy az „IMG_2045” vagy a „kép” értelmetlen. Azt sem, hogy a gomb felirata érthető-e. Ezért mindig kell emberi ellenőrzés is: a gyorsteszt.
Nem csak jó szándék: szabályok
Kihívás: nyilatkozatvadászat
Keresd meg a saját iskolád vagy településed honlapján az akadálymentességi nyilatkozatot (gyakran a láblécben van, 6.8). Mit ír? Milyen ismert hiányosságokat sorol fel? Ha nem találod, az is tanulság.
Projekt: akadálymentességi jelentés és nyilatkozat
Vizsgáld meg a saját oldaladat!
- Végezd el az 5 perces gyorstesztet, és futtasd le a WAVE-et vagy a Lighthouse-t.
- Javítsd ki a talált hibákat.
- Írj egy rövid akadálymentességi nyilatkozatot (egy bekezdés + lista): mit teszteltél, mi működik, és van-e még ismert hiányosság. Tedd ki egy külön oldalra, és linkeld a láblécből.
Kész vagy, ha…
…egér nélkül, 200%-os nagyításban és felolvasóval is használható az oldalad, és a nyilatkozatod őszintén leírja az eredményt.
Ellenőrizd magad!
Kiknek segít az akadálymentesség?
A tartósan, átmenetileg és helyzetileg akadályozott embereknek, és az idősebbeknek, végső soron mindenkinek.
Mi a WCAG négy alapelve?
Észlelhető, működtethető, érthető, robusztus.
Miért nem elég az automatikus ellenőrzés?
Mert csak a hibák egy részét találja meg; például az alt szöveg vagy a feliratok érthetőségét embernek kell megítélnie.
Mi az akadálymentességi nyilatkozat?
Egy oldal, amely leírja, mennyire akadálymentes a webhely, és milyen hiányosságok ismertek. Magyarországon a közszféra honlapjain kötelező.
Tanároknak
Kerettantervi kapcsolódás
NAT 2020, Digitális kultúra, 9–10. évfolyam: Publikálás a világhálón (akadálymentes weblap), valamint Az információs társadalom, e-Világ (esélyegyenlőség, jogi szabályozás). Kapcsolódik az osztályfőnöki és társadalomismereti témákhoz (befogadás, esélyegyenlőség).
Szakmai háttér
WCAG 2.2 (W3C, 2023); WHO-becslés (2023): kb. 1,3 milliárd ember él jelentős fogyatékossággal. Magyar szabályozás: 2018. évi LXXV. törvény; uniós: (EU) 2019/882 irányelv, alkalmazandó 2025. június 28-tól. A tartós–átmeneti–helyzeti felosztás a Microsoft Inclusive Design szemléletéből ismert.
Módszertan
Az „egér nélkül” kihívás és a helyzeti akadályozottság példái empátiát építenek. A gyorsteszt a W3C WAI Easy Checks egyszerűsített, diákoknak szóló változata. A nyilatkozatvadászat valós, helyi intézményi példát hoz.
Időterv
Kinek fontos?: 10 perc (kihívással). Négy alapelv: 7 perc. Gyorsteszt: 12 perc. Eszközök: 8 perc. Szabályok: 8 perc.