Kihagyás

Mobil Akadálymentesítés (A11Y) és Információs Architektúra (IA)

Ez a lecke összefoglalja a modern mobilalkalmazások akadálymentesítésének alapelveit Android, iOS és keresztplatformos (Flutter/KMP) környezetben.

Miért van erre szükség? Miért nem csak "felolvasás"?

A XXI. században fontos alapelv, hogy igyekezzünk egy alkalmazást mindenkinek készíteni. Nem mindenkinek tökéletes minden érzékszerve, így az ilyen jellegű problémákkal küzdő felhasználóknak is írjuk a programkódjainkat.

Az A11Y (Accessibility) célja, hogy az alkalmazás használható legyen látássérült, mozgáskorlátozott vagy kognitív nehézségekkel élő felhasználók számára is. Az IA (Information Architecture) pedig az adatok logikus elrendezése. Ha az IA rossz, a kisegítő technológiák (képernyőolvasók) egy "digitális labirintust" fognak közvetíteni.

Az Arany szabály: "Native First"

Soha ne emulálj gombot egy sima konténerből (div, Box, View), ha van gyári komponens! A gyári gombok alapból tartalmazzák a szükséges metaadatokat a képernyőolvasók számára.

Platform-specifikus megoldások

Az alább láthatsz pár megoldást Android és iOS rendszereken, amelyekkel az akadálymentesítési kritériumokat teljesítheted.

Funkció Android (Compose/XML) iOS (SwiftUI/UIKit) Leírás
Elsődleges címke contentDescription accessibilityLabel Mit látunk? (Pl. "Mentés gomb")
Típus meghatározása Role accessibilityTraits Hogyan viselkedik? (Gomb, Kapcsoló, Fejléc)
Súgó szöveg Nincs külön (leírásba tehető) accessibilityHint Mi történik az akció után?
Dinamikus változás accessibilityLiveRegion accessibilityAnnounce Szól a gépnek, ha változott egy szöveg (pl. hibaüzenet).

Egyéb keretrendszerek megoldásai

  • Flutter: A Semantics widgettel és a SemanticsLabel tulajdonsággal érhető el ugyanez.
  • KMP: A Compose Multiplatform ugyanazt a Modifier.semantics rendszert használja, mint a natív Android.

Információs Architektúra a Mobilon

A mobilos IA legfontosabb eszköze a Fókuszrend (Focus Order) és a Csoportosítás.

Hierarchia és navigáció

A képernyőolvasót használó felhasználók "lapozó" (swipe) mozdulatokkal haladnak az elemek között. Az hibás működés, ha a fókusz össze-vissza ugrál a képernyőn. Erre a megoldás, hogy logikus, fentről lefelé, balról jobbra tartó sorrendet alkalmazz.

Szemantikai összevonás (Merge Semantics)

Egy termékkártyán (kép + név + ár) ne kelljen hármat lapoznia a felhasználónak Javasolt összevonni a kártya elemeit egyetlen fókuszálható egységbe! Példa kód Compose-ban: Modifier.semantics(mergeDescendants = true) { ... }

Modern Workflow: AI és Audit

Ha AI-t (pl. ChatGPT, Cursor, GitHub Copilot) használsz kódgenerálásra, az eredményt mindig auditálni kell, tehát ellenőrizzük, helyes-e a kódunk.

  1. Vibe Coding: Kérd meg az AI-t: "Tedd WCAG AA kompatibilissé ezt a komponenst, használj natív szemantikát!"
  2. Statikus audit: Használd a beépített eszközöket:
  3. Android: Accessibility Scanner app.
  4. iOS/Xcode: Accessibility Inspector.
  5. Manuális teszt: Kapcsold be a TalkBack-et (Android) vagy a VoiceOver-t (iOS), csukd be a szemed, és próbáld meg használni a saját appodat!

Mindig validáld a következő pontokat:

  • Minden interaktív elemnek (ikonoknak is!) van szöveges leírása?
  • A dekoratív elemek (pl. háttérkép) el vannak rejtve az akadálymentesítés elől?
  • A fókusz sorrendje logikusan követi a vizuális elrendezést?

Irodalomjegyzék