Accessibility — grunder, VoiceOver och TalkBack för blinda användare

Vad är Accessibility (a11y) i mobilappar?

Accessibility (förkortat a11y — 11 bokstäver mellan «a» och «y») — praxis att utveckla appar som är tillgängliga för personer med syn-, hörsel-, motoriska och kognitiva funktionsnedsättningar. Inom mobilutveckling omfattar tillgänglighet fyra huvudscenarier: blinda användare (skärmläsare), synsvaga (skalning, kontrast), döva och hörselskadade (undertexter, visuella alternativ till ljud), användare med begränsad motorik (röststyrning, Switch Control, stort pekområde).

Lagkrav — i många länder är tillgänglighet lagligt obligatorisk. USA: Section 508 och ADA. EU: European Accessibility Act (2025). Storbritannien: Equality Act 2010. Utan tillgänglighetsstöd kan en app bli föremål för rättsprocess — i USA lämnades 2023 över 4000 stämningar in om otillgänglighet av digitala produkter. Apple och Google kontrollerar tillgänglighet vid moderering av appar: App Store Review Guidelines (4.2) och Google Play Store kräver minimalt tillgänglighetsstöd.

Affärsargument — tillgänglighet ökar publiken. Enligt Return on Disability (2021) kontrollerar personer med funktionsnedsättning 13 biljoner dollar i disponibel inkomst årligen. Tillgängliga appar rankas också bättre i sökning (semantisk HTML, alt-texter), har högre användarbetyg och färre recensioner om UX-problem. På IT Sectr inkluderar vi tillgänglighet i definition of done för alla projekt — det är en kvalitetsstandard, inte en frivillig förbättring.

Tillgänglighet i iOS: VoiceOver och UIAccessibility

VoiceOver — Apples skärmläsare, inbyggd i iOS, iPadOS och macOS. Användaren drar fingret över skärmen, VoiceOver läser upp namnet på elementet under fingret. Dubbeltryck — aktivering av elementet. VoiceOver stöder över 40 gester: tre fingrar svep (bläddring), två fingrar dubbeltryck (stopp), Z-gest (tillbaka). Utvecklaren styr vad och hur VoiceOver läser via protokollet UIAccessibility och egenskaperna accessibilityLabel, accessibilityTraits, accessibilityHint.

class CustomButton: UIButton {

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

    // override accessibilityLabel
    override var accessibilityLabel: String? {
        get { return "Skicka formulär-knapp" }
        set {}
    }

    // override accessibilityHint
    override var accessibilityHint: String? {
        get { return "Dubbeltryck för att skicka data" }
        set {}
    }

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

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

Dynamisk typografi — Dynamic Type i iOS låter användaren välja textstorlek (från XS till XXXL). Utvecklaren använder UIFontMetrics.scaledFont för automatisk skalning. Text måste visas korrekt i alla storlekar: rader får inte kapas, knappar måste växa proportionellt med texten. UITableView uppdaterar automatiskt cellhöjden vid ändring av textstorlek. Att ignorera Dynamic Type innebär att göra appen otillgänglig för synsvaga användare.

Tillgänglighet i SwiftUI

SwiftUI tillhandahåller modifierare för tillgänglighet: .accessibilityLabel(), .accessibilityHint(), .accessibilityAddTraits(), .accessibilitySortPriority(). Som standard är alla SwiftUI-element (Text, Button, Image) redan tillgänglighetselement med automatiska etiketter. För anpassade vyer, använd .accessibilityElement(children: .combine) för att slå samman underordnade element till ett. SwiftUI stöder automatiskt Dynamic Type och VoiceOver.

VStack {
    Image(systemName: "trash")
        .accessibilityLabel(Text("Ta bort element"))
    Text("Papperskorg")
        .font(.body)
}
.accessibilityElement(children: .combine)
.accessibilityAddTraits(.isButton)
.accessibilityHint(Text("Tar bort det valda elementet utan möjlighet till återställning"))

Tillgänglighet i Android: TalkBack och contentDescription

TalkBack — Googles skärmläsare, förinstallerad på de flesta Android-enheter (tillgänglig i Google Play för alla Android 5+ versioner). TalkBack använder samma gester som VoiceOver: svep för navigering, dubbeltryck för aktivering. Utvecklaren ställer in beskrivningen av element via attributet android:contentDescription i XML eller via setContentDescription() i kod. För ImageView är contentDescription obligatorisk — utan den rapporterar TalkBack «omärkt» eller läser filnamnet.

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

// Kotlin: programmeringsinställning
iconDelete.contentDescription = getString(R.string.delete_button_desc)

// Accessibility Delegate (anpassad)
iconDelete.accessibilityDelegate = object : View.AccessibilityDelegate() {
    override fun onInitializeAccessibilityNodeInfo(
        host: View, info: AccessibilityNodeInfo
    ) {
        super.onInitializeAccessibilityNodeInfo(host, info)
        info.text = "Radera-knapp"
        info.contentDescription = "Ta bort valt element"
        info.className = Button::class.java.name
    }
}

// Live Regions för dynamiska uppdateringar
textView.accessibilityLiveRegion = View.ACCESSIBILITY_LIVE_REGION_POLITE

Live Regions — Android-mekanism för att meddela TalkBack om innehållsändringar utan fokus. Attributet android:accessibilityLiveRegion har tre värden: none (inga meddelanden), polite (meddela efter nuvarande), assertive (meddela omedelbart). Använd polite för uppdatering av laddningsstatus, assertive för kritiska fel. Missbruk av assertive leder till kaos för användaren — TalkBack avbryter ständigt den aktuella åtgärden.

Accessibility Scanner

Accessibility Scanner — gratis app från Google för att testa tillgänglighet i Android-appar utan tillgång till källkod. Skannern kontrollerar: textkontrast, storlek på pekområden (minst 48×48dp enligt Android Accessibility Guidelines), förekomst av contentDescription för ImageView, korrekthet av elementhierarki. För automatiserade tester, använd AccessibilityChecks från Espresso — de integreras i CI/CD och kontrollerar tillgänglighet vid varje bygge.

WCAG 2.1: kontrast, storlek och pekområden

WCAG 2.1 (Web Content Accessibility Guidelines) — internationell tillgänglighetsstandard utvecklad av W3C. Version 2.1 (2018) innehåller 13 ytterligare kriterier för mobilappar. Nivåer av överensstämmelse: A (minimal), AA (obligatorisk för de flesta organisationer), AAA (maximal). Apple och Google rekommenderar nivå AA som minimum för publicering av appar. WCAG 2.2 släpptes 2023 med förtydliganden för fokus och inmatning.

Nyckelkriterier för mobilutveckling: textkontrast på minst 4.5:1 (AA) eller 7:1 (AAA), storlek på pekområden minst 44×44pt (iOS) eller 48×48dp (Android), stöd för liggande och stående orientering utan funktionsförlust, möjlighet att stänga av animation (prefers-reduced-motion), förekomst av undertexter för multimedia, kompatibilitet med röststyrning (Voice Control på iOS, Voice Access på Android).

Kontrastkontrollverktyg — Colour Contrast Analyser (TPGI), WebAIM Contrast Checker, Stark (Figma), Accessibility Inspector (Xcode). På IT Sectr kontrollerar vi kontrast i designfasen (Figma + Stark) och igen i utvecklingsfasen (Accessibility Inspector / Accessibility Scanner). Minimikrav — 4.5:1 för all text mindre än 18pt (14pt bold). För logotyper och dekorativa element krävs inte kontrast.

Testa tillgänglighet: verktyg och checklista

iOS-testning — Accessibility Inspector i Xcode (Xcode → Open Developer Tool → Accessibility Inspector) kontrollerar label, traits, hint för varje element. VoiceOver kan aktiveras i inställningar eller via Accessibility Shortcut (trippeltryck på knappen). För automatiserade tester, använd XCUITest med XCTAssertTrue(app.staticTexts["label"].isAccessibilityElement). Apple rekommenderar att testa alla skärmar i appen med VoiceOver aktiverat.

Android-testning — Accessibility Scanner (Play Store) kontrollerar kontrast, storlek på pekområden, contentDescription. För automatisering: Espresso AccessibilityChecks (import: androidTestImplementation 'androidx.test.espresso:espresso-accessibility:3.5.1'). Google rekommenderar checklista: varje ImageView har contentDescription, pekområden är inte mindre än 48×48dp, text skalas till 200% utan kapning, alla element nås med TalkBack-svep.

IT Sectr checklista — före release kontrollerar vi: (1) VoiceOver/TalkBack läser alla element korrekt, (2) text skalas till maximal storlek utan funktionsförlust, (3) alla ImageView har contentDescription, (4) textkontrast ≥4.5:1 i alla teman, (5) pekområden ≥44pt/48dp, (6) ingen snabbmeny endast tillgänglig via lång tryckning, (7) stöd för Reduce Motion / Remove Animations i systeminställningar. Denna checklista ingår i definition of done för varje sprint.