Akadálymentesített weboldalak

13.B2 - gondoljátok át, van e esetleg értelme a meglévő projektetekbe még beépíteni. Mint pl itt a Nebih oldalán is lehet látni: https://portal.nebih.gov.hu/rszkf 

12B. Feladat a lap alján, olvasd végig :-) 

az ikonra kattintás után:

nem keverendő össze a dark móddal.

Akadálymentesítés alatt azt értjük, amikor egy weboldalt úgy tervezünk meg és alakítunk ki, hogy azt mindenki – beleértve a fogyatékossággal élőket is – használni tudja.

Kiemelt célcsoport:

• Vak felhasználók: képernyőolvasó szoftvert használnak pl. NVDA, JAWS.  Két barátom is használ felolvasó programot, ezek a felolvasó programok olyan gyorsan olvassák fel a szöveget, hogy én nem is értettem mit mond, ők „fordították le nekem” mit olvasott fel nekik a szoftver. Persze be lehet állítani a sebességet és fokozatosan szoktak hozzá.
• Gyengénlátók: nagyítással, színkontraszttal vagy saját betűtípussal olvasnak.

A WCAG (Web Content Accessibility Guidelines) irányelvei alapján a weboldalaknak a következő négy elvnek kell megfelelniük:

Elv	Jelentés
Észlelhetőség	A tartalom érzékelhető legyen látás nélkül is (pl. hang vagy leírás formájában).
Működtethetőség	A felhasználó vezérelhessen mindent billentyűzettel is.
Érthetőség	A tartalom és navigáció legyen egyszerű és logikus.
Robusztusság	A tartalom különféle segítő technológiákkal is működjön.

A vak felhasználók gyakran fejből tanulják meg az oldal szerkezetét. Ezért is fontos a következetes elrendezés és a logikus sorrend.

További infók:

• https://accessibility.digital.gov/
• https://www.w3.org/WAI/
• WebAIM: https://webaim.org/

Lehetőségek:

Használj megfelelő, beszédes, leíró alternatív szöveget (alt) a képeknél:

<img src="kutyus.jpg" alt="Fehér labrador kutya egy parkban ül">

A képernyőolvasók ezt a szöveget olvassák fel!

Strukturált HTML, szemantikus elemek használata:

·       Használj szemantikus elemeket, header, nav, main, aside, footer, section, article.

·       Használj helyes címsorokat (<h1>, <h2>, stb.), listákat, űrlap elemekhez címkéket (<label>), táblázatokhoz scope attribútumot.

Navigációs elemeket ne képekkel oldd meg:

·       Használj szöveges gombokat, vagy gondoskodj arról, hogy a képnek is legyen alternatív leírása.

Ne csak vizuális utalás legyen:

·       Kerüld a „Kattints a piros gombra!” típusú utasításokat. Írd inkább: „Kattints a ‘Tovább’ feliratú gombra!”

Billentyűzet-navigáció biztosítása:

• Ne csak egérrel legyenek elérhetők a menüpontok!
• Használj tabindex, accesskey attribútumokat, ha szükséges.

Kontrasztarány:

A szöveg és a háttér közti kontraszt legyen legalább 4.5:1.

• ❌ Világosszürke szöveg fehér alapon (gyenge kontraszt)
• ✅ Sötétkék szöveg világos háttéren (jó kontraszt)

Reszponzív és nagyítható betűméret:

·       Használj relatív mértékegységeket (em, %, rem) a betűmérethez, ne px-et fixen.

Saját betűtípus beállításának lehetősége:

·       Ne tiltsd le a böngésző betűtípusainak módosítását !important utasításokkal.

·       Ne villogjon, ne mozogjon gyorsan:

·       Az animációk és villogó elemek (pl. reklámok) zavaróak lehetnek.

Tesztelő eszközök:

• WAVE
• axe DevTools
• Google Chrome „Accessibility” panel (Fejlesztői eszközökben)

Gyakorlati feladat

Feladat: Hozz létre egy weboldalt, amely bemutat egy állatot, és tartalmaz:

• Egy képet alt szöveggel
• Egy címet és bekezdést logikus címsor struktúrával
• Egy űrlapot név bekérésére (label használatával)
• A HTML legyen teljesen billentyűzet-navigálható

Tedd akadálymentessé az oldalt.

Használd az akadálymentesítés ikonját:

Ha van komolyabb kész projektetek, amin szintén érdemes lenne alkalmazni, adjátok hozzá szintén az akadálymentesítési funkciót. 

UI: Régebben is találkoztam ezzel a témával, de azt, hogy mennyire fontos, akkor értettem meg igazán, amikor egy szlovén túrára 2 gyengén látó utas érkezett. Nem voltak teljesen vakok, alakokat láttak. Csak annyit kértek mutassam, meg mi merre van a hotelben, étteremben, és ők utána már kiválóan fognak tudni tájékozódni. A vacsoránál szembesültem vele, hogy azért ez nem teljesen így van, amikor hallottam, hogy beszélgetnek, hogy nem sikerült a büfé asztaltól csirkét választani. Innentől kezdve, felajánlottam menjünk együtt válogatni, és akkor nem lesz ilyen kellemetlenség. Így amikor már a városnéző programra mentünk, tudtam, hogy „akadálymentesen” kell bemutatnom a várost. Amikor egy épületről beszéltem, azt is elmondtam mit látunk pontosan. Először kicsit aggódtam, mit fog szólni a többi utas, de örömmel tapasztaltam, hogy mindenkiben tudatosult, van két gyengén látó útitársunk, és onnantól kezdve, mindenki nagyon segítőkész és figyelmes volt velük. J Így alap volt, hogy a haverom cégének a weboldalába elve beépítem az akadálymentes funkciót: https://balatonbusz.hu/