Apps barrierefrei gestalten

Versuche, deine Android-App für alle Nutzer zugänglich zu machen, auch für Menschen mit besonderen Anforderungen an die Barrierefreiheit.

Menschen mit Sehbehinderung, Farbenblindheit, Hörbehinderung, eingeschränkter Geschicklichkeit, geistiger Behinderung und vielen anderen Behinderungen verwenden Android-Geräte. Wenn Sie bei der Entwicklung von Apps die Barrierefreiheit im Blick behalten, verbessern Sie die Nutzererfahrung für Menschen mit besonderen Anforderungen.

Auf dieser Seite finden Sie Richtlinien zur Implementierung wichtiger Elemente der Barrierefreiheit, damit Ihre App für alle Nutzer einfacher zu verwenden ist. Ausführlichere Informationen dazu, wie Sie Ihre App barrierefreier gestalten können, finden Sie unter Prinzipien zur Verbesserung der Barrierefreiheit von Apps.

Sichtbarkeit des Textes erhöhen

Für jeden Text in Ihrer App empfehlen wir, dass der Farbkontrast – also der Unterschied in der wahrgenommenen Helligkeit zwischen der Farbe des Textes und der Farbe des Hintergrunds hinter dem Text – über einem bestimmten Schwellenwert liegt. Der genaue Schwellenwert hängt von der Schriftgröße des Textes und davon ab, ob der Text fett formatiert ist:

  • Wenn der Text kleiner als 18 sp ist oder wenn der Text fett und kleiner als 14 sp ist, verwende Vorder- und Hintergrundfarben, die ein Farbkontrastverhältnis von mindestens 4,5:1 ergeben.
  • Für alle anderen Texte sollte das Farbkontrastverhältnis mindestens 3:1 betragen.

Die folgende Abbildung zeigt zwei Beispiele für den Farbkontrast zwischen Text und Hintergrund:

Zwei Beispiele für das Wort „Text“ auf farbigem Hintergrund. Das Beispiel links hat einen geringen Farbkontrast zwischen Text und Hintergrund, während das Beispiel rechts einen ausreichenden Farbkontrast hat.
Abbildung 1. Farbkontrast, der niedriger als empfohlen ist (links), und ausreichender Farbkontrast (rechts).

Wenn Sie den Farbkontrast zwischen Text und Hintergrund in Ihrer App prüfen möchten, können Sie ein Onlinetool zur Farbkontrastprüfung oder die App Accessibility Scanner verwenden.

Große, einfache Steuerelemente verwenden

Die Benutzeroberfläche Ihrer App ist einfacher zu bedienen, wenn die Steuerelemente leichter zu sehen und anzutippen sind. Bei Touch-Oberflächen empfehlen wir, dass jedes interaktive UI-Element einen fokussierbaren Bereich oder eine Größe des Berührungszielbereichs von mindestens 48 × 48 dp hat. Größer ist sogar noch besser.

In Jetpack Compose wird diese Mindestgröße bereits von vielen integrierten Material-Komponenten wie Button, IconButton und ListItem erzwungen. Wenn Sie jedoch benutzerdefinierte interaktive Elemente erstellen, müssen Sie die Größe selbst festlegen.

Im folgenden Snippet wird ein kleines UI-Element barrierefrei gemacht, indem ihm ein größerer Berührungszielbereich zugewiesen wird:

@Composable
private fun LargeBox() {
    var clicked by remember { mutableStateOf(false) }
    Box(
        Modifier
            .size(100.dp)
            .background(if (clicked) Color.DarkGray else Color.LightGray)
    ) {
        Box(
            Modifier
                .align(Alignment.Center)
                .clickable { clicked = !clicked }
                .background(Color.Black)
                .sizeIn(minWidth = 48.dp, minHeight = 48.dp)
        )
    }
}

Weitere Informationen zu den Größen von Berührungszielbereichen finden Sie unter Mindestgrößen für Berührungszielbereiche.

UI-Elemente beschreiben

Fügen Sie für jedes UI-Element in Ihrer App eine Beschreibung hinzu, die den Zweck des Elements beschreibt. In den meisten Fällen fügen Sie diese Beschreibung im Attribut contentDescription des Elements ein, wie im folgenden Code-Snippet gezeigt:

@Composable
private fun ShareButton(onClick: () -> Unit) {
    IconButton(onClick = onClick) {
        Icon(
            imageVector = Icons.Filled.Share,
            contentDescription = stringResource(R.string.label_share)
        )
    }
}

Beachten Sie, dass Sie für Text-Kompositionen keinen contentDescription angeben müssen. Android-Bedienungshilfen wie TalkBack sagen den Text automatisch an.

Beachten Sie beim Hinzufügen von Beschreibungen zu den UI-Elementen Ihrer App die folgenden Best Practices:

  • Verwenden Sie Beschreibungen, um den Zweck und das Ergebnis der Interaktion zu vermitteln, nicht die visuellen Details. Verwenden Sie die Semantik-Property Role (z. B. Role.Button oder Role.Switch), um den Typ eines UI-Elements anzugeben. So können Screenreader das Element richtig ansagen.

  • Vermeiden Sie Redundanzen in Beschreibungen. Wenn beispielsweise durch die Auswahl eines Buttons eine „Senden“-Aktion in Ihrer App ausgelöst wird, sollte die Beschreibung des Buttons "Submit" und nicht "Submit button" lauten.

  • Jede Beschreibung muss eindeutig sein. Wenn Nutzer von Screenreadern auf eine wiederholte Elementbeschreibung stoßen, erkennen sie so, dass der Fokus auf einem Element liegt, das bereits zuvor im Fokus war. Insbesondere sollte jedes Element in einer Liste wie LazyColumn eine andere Beschreibung haben, die den Inhalt des jeweiligen Elements widerspiegelt, z. B. den Namen einer Stadt in einer Liste von Standorten.

  • Verwenden Sie die hideFromAccessibility API, um rein dekorative Elemente zu kennzeichnen, damit Bedienungshilfen sie ignorieren können. Wenn ein UI-Element einen contentDescription-Parameter hat, aber rein dekorativ ist (z. B. ein Icon, das Teil eines anderen UI-Elements ist), übergeben Sie null, um redundante Labels zu vermeiden. Weitere Informationen zu komplexeren Anwendungsfällen finden Sie unter Zusammenführen und löschen.

  • Testen Sie Ihren Code, um sicherzustellen, dass die Inhaltsbeschreibung wie erwartet bereitgestellt wird. Mit Android Lint, Compose-Tests sowie manuellen und automatisierten Testtools können häufige Probleme erkannt und Probleme in Ihrer Implementierung aufgedeckt werden.

Zusätzliche Ressourcen

Weitere Informationen dazu, wie du deine App barrierefreier gestalten kannst, findest du in den folgenden zusätzlichen Ressourcen:

Codelabs

Videos

Inhalte ansehen