Accessibility — basis, VoiceOver en TalkBack voor blinde gebruikers

Wat is Accessibility (a11y) in mobiele apps?

Accessibility (afgekort a11y — 11 letters tussen «a» en «y») — de praktijk van het ontwikkelen van apps die toegankelijk zijn voor mensen met visuele, auditieve, motorische en cognitieve beperkingen. In mobiele ontwikkeling omvat accessibility vier hoofdscenario's: blinde gebruikers (schermlezers), slechtzienden (schaling, contrast), doven en slechthorenden (ondertiteling, visuele alternatieven voor geluid), gebruikers met beperkte motoriek (spraakbediening, Switch Control, groot aanraakgebied).

Wettelijke vereisten — in veel landen is accessibility wettelijk verplicht. VS: Section 508 en ADA. EU: European Accessibility Act (2025). VK: Equality Act 2010. Zonder accessibility-ondersteuning kan een app het doelwit worden van een rechtszaak — in de VS zijn in 2023 meer dan 4000 rechtszaken ingediend over ontoegankelijkheid van digitale producten. Apple en Google controleren accessibility bij het modereren van apps: App Store Review Guidelines (4.2) en Google Play Store eisen minimale ondersteuning van toegankelijkheid.

Zakelijk argument — toegankelijkheid vergroot het publiek. Volgens Return on Disability (2021) controleren mensen met een handicap $13 biljoen aan besteedbaar inkomen per jaar. Toegankelijke apps scoren ook beter in zoekopdrachten (semantische HTML, alt-teksten), hebben een hogere gebruikersbeoordeling en minder recensies over UX-problemen. Bij IT Sectr nemen we accessibility op in de definition of done van alle projecten — het is een kwaliteitsnorm, geen optionele verbetering.

Accessibility in iOS: VoiceOver en UIAccessibility

VoiceOver — Apple schermlezer, ingebouwd in iOS, iPadOS en macOS. De gebruiker beweegt zijn vinger over het scherm, VoiceOver leest de naam van het element onder de vinger. Dubbeltikken — activering van het element. VoiceOver ondersteunt meer dan 40 gebaren: drie vingers vegen (scrollen), twee vingers dubbeltikken (stoppen), Z-gebaar (terug). De ontwikkelaar bepaalt wat en hoe VoiceOver leest via het UIAccessibility-protocol en de eigenschappen accessibilityLabel, accessibilityTraits, accessibilityHint.

class CustomButton: UIButton {

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

    // override accessibilityLabel
    override var accessibilityLabel: String? {
        get { return "Formulier verzendknop" }
        set {}
    }

    // override accessibilityHint
    override var accessibilityHint: String? {
        get { return "Dubbeltik om gegevens te verzenden" }
        set {}
    }

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

// Dynamic Type — tekstschaling
titleLabel.font = UIFontMetrics.default.scaledFont(
    for: UIFont.systemFont(ofSize: 16)
)
titleLabel.adjustsFontForContentSizeCategory = true

Dynamische typografie — Dynamic Type in iOS stelt de gebruiker in staat de tekstgrootte te kiezen (van XS tot XXXL). De ontwikkelaar gebruikt UIFontMetrics.scaledFont voor automatische schaling. Tekst moet correct worden weergegeven op alle formaten: regels mogen niet worden afgesneden, knoppen moeten proportioneel meegroeien met de tekst. UITableView werkt automatisch de celhoogte bij bij wijziging van de tekstgrootte. Dynamic Type negeren betekent de app ontoegankelijk maken voor slechtziende gebruikers.

Accessibility in SwiftUI

SwiftUI biedt modificatoren voor accessibility: .accessibilityLabel(), .accessibilityHint(), .accessibilityAddTraits(), .accessibilitySortPriority(). Standaard zijn alle SwiftUI-elementen (Text, Button, Image) al accessibility-elementen met automatische labels. Gebruik voor aangepaste Views .accessibilityElement(children: .combine) om onderliggende elementen samen te voegen. SwiftUI ondersteunt automatisch Dynamic Type en VoiceOver.

VStack {
    Image(systemName: "trash")
        .accessibilityLabel(Text("Element verwijderen"))
    Text("Prullenmand")
        .font(.body)
}
.accessibilityElement(children: .combine)
.accessibilityAddTraits(.isButton)
.accessibilityHint(Text("Verwijdert het geselecteerde element zonder terugplaatsmogelijkheid"))

Accessibility in Android: TalkBack en contentDescription

TalkBack — Google schermlezer, voorgeïnstalleerd op de meeste Android-apparaten (beschikbaar in Google Play voor alle Android 5+ versies). TalkBack gebruikt dezelfde gebaren als VoiceOver: vegen voor navigatie, dubbeltikken voor activering. De ontwikkelaar stelt de beschrijving van elementen in via het android:contentDescription-attribuut in XML of via setContentDescription() in code. Voor ImageView is contentDescription verplicht — zonder meldt TalkBack «niet gelabeld» of leest de bestandsnaam.

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

// Kotlin: programmatische instelling
iconDelete.contentDescription = getString(R.string.delete_button_desc)

// Accessibility Delegate (aangepast)
iconDelete.accessibilityDelegate = object : View.AccessibilityDelegate() {
    override fun onInitializeAccessibilityNodeInfo(
        host: View, info: AccessibilityNodeInfo
    ) {
        super.onInitializeAccessibilityNodeInfo(host, info)
        info.text = "Verwijderknop"
        info.contentDescription = "Geselecteerd element verwijderen"
        info.className = Button::class.java.name
    }
}

// Live Regions voor dynamische updates
textView.accessibilityLiveRegion = View.ACCESSIBILITY_LIVE_REGION_POLITE

Live Regions — Android-mechanisme om TalkBack te melden over inhoudswijzigingen zonder focus. Het attribuut android:accessibilityLiveRegion kent drie waarden: none (geen meldingen), polite (melden na huidige), assertive (onmiddellijk melden). Gebruik polite voor het bijwerken van laadstatus, assertive voor kritieke fouten. Misbruik van assertive leidt tot chaos voor de gebruiker — TalkBack onderbreekt voortdurend de huidige actie.

Accessibility Scanner

Accessibility Scanner — gratis app van Google voor het testen van de toegankelijkheid van Android-apps zonder toegang tot de broncode. De scanner controleert: tekstcontrast, grootte van aanraakgebieden (minimaal 48×48dp volgens Android Accessibility Guidelines), aanwezigheid van contentDescription voor ImageView, correctheid van de elementhiërarchie. Gebruik voor geautomatiseerde tests AccessibilityChecks uit Espresso — ze integreren in CI/CD en controleren accessibility bij elke build.

WCAG 2.1: contrast, grootte en aanraakgebieden

WCAG 2.1 (Web Content Accessibility Guidelines) — internationale toegankelijkheidsstandaard ontwikkeld door W3C. Versie 2.1 (2018) bevat 13 extra criteria voor mobiele apps. Niveaus van conformiteit: A (minimaal), AA (verplicht voor de meeste organisaties), AAA (maximaal). Apple en Google bevelen niveau AA aan als minimum voor het publiceren van apps. WCAG 2.2 is uitgebracht in 2023 met verduidelijkingen voor focus en invoer.

Belangrijkste criteria voor mobiele ontwikkeling: tekstcontrast van minimaal 4.5:1 (AA) of 7:1 (AAA), grootte van aanraakgebieden minimaal 44×44pt (iOS) of 48×48dp (Android), ondersteuning voor liggende en staande oriëntatie zonder functieverlies, mogelijkheid om animatie uit te schakelen (prefers-reduced-motion), aanwezigheid van ondertiteling voor multimedia, compatibiliteit met spraakbediening (Voice Control op iOS, Voice Access op Android).

Contrastcontroletools — Colour Contrast Analyser (TPGI), WebAIM Contrast Checker, Stark (Figma), Accessibility Inspector (Xcode). Bij IT Sectr controleren we contrast in de ontwerpfase (Figma + Stark) en opnieuw in de ontwikkelfase (Accessibility Inspector / Accessibility Scanner). Minimale vereiste — 4.5:1 voor alle tekst kleiner dan 18pt (14pt bold). Voor logo's en decoratieve elementen is contrast niet vereist.

Toegankelijkheid testen: hulpmiddelen en checklist

iOS testen — Accessibility Inspector in Xcode (Xcode → Open Developer Tool → Accessibility Inspector) controleert label, traits, hint voor elk element. VoiceOver kan worden ingeschakeld in de instellingen of via Accessibility Shortcut (drie keer indrukken van de knop). Gebruik voor geautomatiseerde tests XCUITest met XCTAssertTrue(app.staticTexts["label"].isAccessibilityElement). Apple raadt aan alle schermen van de app te testen met VoiceOver ingeschakeld.

Android testen — Accessibility Scanner (Play Store) controleert contrast, grootte van aanraakgebieden, contentDescription. Voor automatisering: Espresso AccessibilityChecks (import: androidTestImplementation 'androidx.test.espresso:espresso-accessibility:3.5.1'). Google beveelt de volgende checklist aan: elke ImageView heeft contentDescription, aanraakgebieden zijn niet kleiner dan 48×48dp, tekst schaalt tot 200% zonder afsnijden, alle elementen zijn bereikbaar via TalkBack-vegen.

IT Sectr checklist — voor de release controleren we: (1) VoiceOver/TalkBack leest alle elementen correct, (2) tekst schaalt naar maximale grootte zonder functieverlies, (3) alle ImageViews hebben contentDescription, (4) tekstcontrast ≥4.5:1 in alle thema's, (5) aanraakgebieden ≥44pt/48dp, (6) geen contextmenu alleen toegankelijk via lang indrukken, (7) ondersteuning voor Reduce Motion / Remove Animations in systeeminstellingen. Deze checklist maakt deel uit van de definition of done van elke sprint.