Apps barrierefrei gestalten

Versuchen Sie, Ihre Android-App für alle Nutzer zugänglich zu machen, auch für Menschen mit besonderen Bedürfnissen.

Menschen mit Sehbeeinträchtigung, Farbenblindheit, Hörbeeinträchtigung, eingeschränkter Fingerfertigkeit, kognitiven Behinderungen und vielen anderen Behinderungen verwenden Android-Geräte. Wenn Sie Apps mit Blick auf die Barrierefreiheit entwickeln, verbessern Sie die Nutzerfreundlichkeit für Menschen mit besonderen Bedürfnissen.

Auf dieser Seite finden Sie Richtlinien zur Implementierung wichtiger Elemente der Barrierefreiheit, damit jeder Ihre App einfacher verwenden kann. Ausführlichere Informationen dazu, wie Sie Ihre App barrierefreier machen können, finden Sie unter Grundsätze zur Verbesserung der Barrierefreiheit von Apps.

Text besser sichtbar machen

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

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

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

Verwenden Sie einen Online-Farb kontrastprüfer oder die Accessibility Scanner App, um den Farbkontrast zwischen Text und Hintergrund in Ihrer App zu prüfen.

Große, einfache Steuerelemente verwenden

Die Benutzeroberfläche Ihrer App ist einfacher zu verwenden, wenn die Steuerelemente leichter zu sehen und anzutippen sind. Für 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 noch besser.

In Jetpack Compose erzwingen viele integrierte Material-Komponenten wie Button, IconButton, und ListItem bereits diese Mindestgröße. 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 es einen größeren Berührungszielbereich erhält:

@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)
        )
    }
}
AccessibilitySnippets.kt

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

Jedes UI-Element beschreiben

Fügen Sie für jedes UI-Element in Ihrer App eine Beschreibung hinzu, die den Zweck des Elements erläutert. 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)
        )
    }
}
AccessibilitySnippets.kt

Für Text-Composables müssen Sie keine contentDescription angeben. Android-Bedienungshilfen (z. B. TalkBack) geben den Text automatisch aus.

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 Role semantische Eigenschaft (z. B. Role.Button oder Role.Switch), um den Typ eines UI-Elements anzugeben. So können Screenreader das Element korrekt ausgeben.

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

• Jede Beschreibung muss eindeutig sein. So erkennen Nutzer von Screenreadern, wenn sie auf eine wiederholte Elementbeschreibung stoßen, dass der Fokus auf einem Element liegt, das bereits zuvor fokussiert war. Insbesondere jedes Element in einer Liste wie LazyColumn sollte eine andere Beschreibung haben, die den Inhalt widerspiegelt, der für ein bestimmtes Element eindeutig ist, z. B. der Name einer Stadt in einer Liste von Orten.

• 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 Anwendungsfälle finden Sie unter Zusammenführen und Löschen.

• Testen Sie Ihren Code, um sicherzustellen, dass die Inhaltsbeschreibung wie erwartet bereitgestellt wird. Android Lint, Compose-Tests sowie manuelle und automatisierte Testtools können häufige Probleme erkennen und Probleme in Ihrer Implementierung aufdecken.

Zusätzliche Ressourcen

Weitere Informationen dazu, wie Sie Ihre App barrierefreier machen können, finden Sie in den folgenden zusätzlichen Ressourcen:

Codelabs

• Barrierefreiheit in Jetpack Compose

Videos

• Barrierefreiere Benutzeroberflächen mit Jetpack Compose erstellen

Inhalte zu Ansichten

• Apps barrierefreier machen (Ansichten)