Accessibility — alapok, VoiceOver és TalkBack vak felhasználók számára

Mi az Accessibility (a11y) a mobilalkalmazásokban?

Accessibility (rövidítve a11y — 11 betű az «a» és «y» között) — a látás-, hallás-, mozgás- és kognitív zavarokkal élők számára hozzáférhető alkalmazások fejlesztésének gyakorlata. A mobilfejlesztésben az accessibility négy fő forgatókönyvet ölel fel: vak felhasználók (képernyőolvasók), gyengénlátók (méretezés, kontraszt), siketek és nagyothallók (feliratok, vizuális alternatívák hanghoz), korlátozott mozgású felhasználók (hangvezérlés, Switch Control, nagy érintési terület).

Jogi követelmények — sok országban az accessibility törvényileg kötelező. USA: Section 508 és ADA. EU: European Accessibility Act (2025). Egyesült Királyság: Equality Act 2010. Accessibility támogatás nélkül az alkalmazás per tárgyává válhat — az USA-ban 2023-ban több mint 4000 pert indítottak digitális termékek hozzáférhetetlensége miatt. Az Apple és a Google ellenőrzi az accessibility-t az alkalmazások moderálásakor: az App Store Review Guidelines (4.2) és a Google Play Store minimális akadálymentesítési támogatást ír elő.

Üzleti érv — a hozzáférhetőség növeli a közönséget. A Return on Disability (2021) szerint a fogyatékkal élők évente 13 billió dollár rendelkezésre álló jövedelmet irányítanak. A hozzáférhető alkalmazások jobban rangsorolnak a keresésben (szemantikus HTML, alternatív szövegek), magasabb felhasználói értékeléssel és kevesebb UX-problémákról szóló véleménnyel rendelkeznek. Az IT Sectr-nél az accessibility-t minden projekt definition of done részévé tesszük — ez minőségi színvonal, nem opcionális fejlesztés.

Accessibility iOS-ben: VoiceOver és UIAccessibility

VoiceOver — Apple képernyőolvasó, beépítve iOS, iPadOS és macOS rendszerekbe. A felhasználó az ujját húzza a képernyőn, a VoiceOver felolvassa az ujj alatti elem nevét. Dupla koppintás — az elem aktiválása. A VoiceOver több mint 40 gesztust támogat: három ujj húzás (lapozás), két ujj dupla koppintás (megállás), Z-gesztus (vissza). A fejlesztő szabályozza, hogy a VoiceOver mit és hogyan olvasson az UIAccessibility protokollon és az accessibilityLabel, accessibilityTraits, accessibilityHint tulajdonságokon keresztül.

class CustomButton: UIButton {

    override var isAccessibilityElement: Bool {
        get { return true }
        set {}
    }

    // override accessibilityLabel
    override var accessibilityLabel: String? {
        get { return "Űrlap küldése gomb" }
        set {}
    }

    // override accessibilityHint
    override var accessibilityHint: String? {
        get { return "Koppintson duplán az adatok küldéséhez" }
        set {}
    }

    // override accessibilityTraits
    override var accessibilityTraits: UIAccessibilityTraits {
        get { return .button }
        set {}
    }
}

// Dynamic Type — szöveg méretezése
titleLabel.font = UIFontMetrics.default.scaledFont(
    for: UIFont.systemFont(ofSize: 16)
)
titleLabel.adjustsFontForContentSizeCategory = true

Dinamikus tipográfia — Dynamic Type iOS-ben lehetővé teszi a felhasználó számára a szöveg méretének kiválasztását (XS-től XXXL-ig). A fejlesztő az UIFontMetrics.scaledFont-ot használja automatikus méretezéshez. A szövegnek minden méretben helyesen kell megjelennie: a sorok nem vághatók le, a gomboknak arányosan kell nőniük a szöveggel. Az UITableView automatikusan frissíti a cellák magasságát a szövegméret változásakor. A Dynamic Type figyelmen kívül hagyása azt jelenti, hogy az alkalmazás hozzáférhetetlenné válik a gyengénlátó felhasználók számára.

Accessibility SwiftUI-ben

SwiftUI módosítókat biztosít az accessibility-hez: .accessibilityLabel(), .accessibilityHint(), .accessibilityAddTraits(), .accessibilitySortPriority(). Alapértelmezés szerint az összes szabványos SwiftUI elem (Text, Button, Image) már accessibility elem automatikus címkékkel. Egyéni View-okhoz használja a .accessibilityElement(children: .combine) függvényt a gyermekelemek egyesítéséhez. A SwiftUI automatikusan támogatja a Dynamic Type-ot és a VoiceOver-t.

VStack {
    Image(systemName: "trash")
        .accessibilityLabel(Text("Elem eltávolítása"))
    Text("Kuka")
        .font(.body)
}
.accessibilityElement(children: .combine)
.accessibilityAddTraits(.isButton)
.accessibilityHint(Text("Eltávolítja a kiválasztott elemet helyreállítási lehetőség nélkül"))

Accessibility Androidban: TalkBack és contentDescription

TalkBack — Google képernyőolvasó, előtelepítve a legtöbb Android-eszközön (elérhető a Google Play-ben az Android 5+ összes verziójához). A TalkBack ugyanazokat a gesztusokat használja, mint a VoiceOver: húzás navigációhoz, dupla koppintás aktiváláshoz. A fejlesztő az android:contentDescription attribútumon keresztül XML-ben vagy a setContentDescription() függvényen keresztül kódban állítja be az elemek leírását. ImageView esetén a contentDescription kötelező — enélkül a TalkBack «nincs címkézve» üzenetet ad, vagy a fájlnevet olvassa fel.

// XML: contentDescription ImageView-hoz
<ImageView
    android:id="@+id/iconDelete"
    android:src="@drawable/ic_delete"
    android:contentDescription="@string/delete_button_desc"
    android:focusable="true"
    android:clickable="true" />

// Kotlin: programozott beállítás
iconDelete.contentDescription = getString(R.string.delete_button_desc)

// Accessibility Delegate (egyéni)
iconDelete.accessibilityDelegate = object : View.AccessibilityDelegate() {
    override fun onInitializeAccessibilityNodeInfo(
        host: View, info: AccessibilityNodeInfo
    ) {
        super.onInitializeAccessibilityNodeInfo(host, info)
        info.text = "Törlés gomb"
        info.contentDescription = "Kiválasztott elem eltávolítása"
        info.className = Button::class.java.name
    }
}

// Live Regions dinamikus frissítésekhez
textView.accessibilityLiveRegion = View.ACCESSIBILITY_LIVE_REGION_POLITE

Live Regions — Android mechanizmus a TalkBack értesítéséhez a tartalom változásáról fókusz nélkül. Az android:accessibilityLiveRegion attribútum három értéket vehet fel: none (nincs értesítés), polite (az aktuális után jelez), assertive (azonnal jelez). Használja a polite-ot a betöltési állapot frissítéséhez, az assertive-t kritikus hibákhoz. Az assertive-tel való visszaélés káoszt okoz a felhasználónak — a TalkBack folyamatosan megszakítja az aktuális műveletet.

Accessibility Scanner

Accessibility Scanner — ingyenes alkalmazás a Google-tól Android-alkalmazások akadálymentesítésének teszteléséhez forráskód hozzáférése nélkül. A szkennert ellenőrzi: szövegkontraszt, érintési területek mérete (minimum 48×48dp az Android Accessibility Guidelines szerint), contentDescription megléte ImageView-hoz, elemhierarchia helyessége. Automatizált tesztekhez használja az Espresso AccessibilityChecks-jét (import: androidTestImplementation 'androidx.test.espresso:espresso-accessibility:3.5.1') — ezek integrálódnak a CI/CD-be és minden buildnél ellenőrzik az accessibility-t.

WCAG 2.1: kontraszt, méret és érintési területek

WCAG 2.1 (Web Content Accessibility Guidelines) — a W3C által fejlesztett nemzetközi akadálymentesítési szabvány. A 2.1-es verzió (2018) 13 további kritériumot tartalmaz mobilalkalmazásokhoz. Megfelelési szintek: A (minimális), AA (kötelező a legtöbb szervezet számára), AAA (maximális). Az Apple és a Google az AA szintet ajánlja minimumként alkalmazások publikálásához. A WCAG 2.2 2023-ban jelent meg a fókusz és bevitel pontosításaival.

Kulcs kritériumok mobilfejlesztéshez: szövegkontraszt legalább 4.5:1 (AA) vagy 7:1 (AAA), érintési területek mérete minimum 44×44pt (iOS) vagy 48×48dp (Android), fekvő és álló tájolás támogatása funkcióvesztés nélkül, animáció kikapcsolásának lehetősége (prefers-reduced-motion), feliratok megléte multimédiához, kompatibilitás hangvezérléssel (Voice Control iOS-en, Voice Access Androidon).

Kontraszt ellenőrző eszközök — Colour Contrast Analyser (TPGI), WebAIM Contrast Checker, Stark (Figma), Accessibility Inspector (Xcode). Az IT Sectr-nél ellenőrizzük a kontrasztot a tervezési fázisban (Figma + Stark) és újra a fejlesztési fázisban (Accessibility Inspector / Accessibility Scanner). Minimális követelmény — 4.5:1 minden 18pt-nél (14pt bold) kisebb szöveghez. Logók és dekoratív elemek esetén kontraszt nem szükséges.

Akadálymentesítés tesztelése: eszközök és ellenőrzőlista

iOS tesztelés — Accessibility Inspector az Xcode-ban (Xcode → Open Developer Tool → Accessibility Inspector) ellenőrzi a label, traits, hint minden elemhez. A VoiceOver bekapcsolható a beállításokban vagy az Accessibility Shortcut (gomb háromszori megnyomása) segítségével. Automatizált tesztekhez használja az XCUITest-et XCTAssertTrue(app.staticTexts["label"].isAccessibilityElement) paraméterrel. Az Apple javasolja az alkalmazás összes képernyőjének tesztelését bekapcsolt VoiceOver mellett.

Android tesztelés — Accessibility Scanner (Play Store) ellenőrzi a kontrasztot, érintési területek méretét, contentDescription-t. Automatizáláshoz: Espresso AccessibilityChecks (import: androidTestImplementation 'androidx.test.espresso:espresso-accessibility:3.5.1'). A Google a következő ellenőrzőlistát javasolja: minden ImageView rendelkezik contentDescription-szel, az érintési területek nem kisebbek 48×48dp-nél, a szöveg 200%-ig méretezhető vágás nélkül, minden elem elérhető TalkBack húzással.

IT Sectr ellenőrzőlista — kiadás előtt ellenőrizzük: (1) VoiceOver/TalkBack helyesen olvassa az összes elemet, (2) a szöveg maximális méretre méretezhető funkcióvesztés nélkül, (3) minden ImageView rendelkezik contentDescription-szel, (4) szövegkontraszt ≥4.5:1 minden témában, (5) érintési területek ≥44pt/48dp, (6) nincs csak hosszú lenyomással elérhető helyi menü, (7) Reduce Motion / Remove Animations támogatása a rendszerbeállításokban. Ez az ellenőrzőlista minden sprint definition of done részét képezi.