Barrierefreiheit in mobilen Anwendungen – Vollständiger Leitfaden mit Beispielen

Barrierefreiheit Die Theorie ist schön, aber was Entwickler und Designer wirklich brauchen, sind Beispiele. Zu sehen, wie der Code funktioniert, wie sich die Schnittstelle verhält und wo Unternehmen Fehler machen (und Dinge richtig machen), ist der beste Weg, etwas zu lernen.

In diesem praktischen Leitfaden verlassen wir das Feld der Ideen und vertiefen uns in reale Beispiele für die Implementierung von Barrierefreiheit in mobilen Anwendungen (iOS und Android), analysieren UI-Muster und zeigen, wie man sie inklusiv gestaltet.

Beispiel 1: Der „Ghost“-Button (Icon-Buttons)

Kennen Sie das Lupensymbol in der Ecke des Bildschirms, um nach etwas zu suchen? Oder das Zahnradsymbol für Einstellungen? Für einen sehenden Benutzer reicht das Symbol. Für einen blinden Benutzer, der einen Bildschirmleser (VoiceOver/TalkBack) verwendet und diese Schaltfläche keine Beschriftung (Beschriftung) hat, hört er nur: „Schaltfläche“.

„Button“ sagt nichts. Knopf was? Konto löschen? Kaufen?

Der falsche Weg (unzugänglich)

<!-- Android Layout -->
<ImageButton
    android:id="@+id/btn_settings"
    android:src="@drawable/ic_gear"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Der Bildschirmleser liest den Klassennamen oder nur die „unbeschriftete Schaltfläche“ vor.

Der richtige Weg (barrierefrei)

<!-- Android Layout -->
<ImageButton
    android:id="@+id/btn_settings"
    android:src="@drawable/ic_gear"
    android:contentDescription="@string/settings_button_description"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Auf iOS (SwiftUI):

// Acessível
Button(action: openSettings) {
    Image(systemName: "gear")
}
.accessibilityLabel("Configurações")

Ergebnis: Der Benutzer hört „Einstellungen, Schaltfläche“. Einfach, aber wichtig.

Beispiel 2: Fehlerrückmeldung in Formularen

Sie füllen ein Formular aus, klicken auf „Senden“ und nichts passiert. Das Passwortfeld wurde rot, aber Sie haben es nicht gesehen, weil Sie farbenblind sind (Protanopie).

Goldene Regel: Verwenden Sie niemals nur Farbe, um Informationen zu vermitteln.

Der richtige Weg

Fügen Sie nicht nur den Rand rot ein, sondern fügen Sie auch ein Warnsymbol und eine erläuternde Textnachricht unter dem Feld hinzu.

❌ Schlecht: Roter Rand.
✅ Gut: Roter Rand + Symbol ⚠️ + Text „Passwort muss 8 Zeichen lang sein“.

Darüber hinaus muss bei Screenreadern der Fokus auf das Fehlerfeld gehen oder der Fehler muss angekündigt werden.

// Android: Anunciar erro para TalkBack
passwordInputLayout.error = "Senha muito curta"
passwordInputLayout.announceForAccessibility("Erro: Senha muito curta")

Beispiel 3: Berühren Sie Ziele

Haben Sie schon einmal versucht, auf das kleine „x“ zu klicken, um eine Anzeige zu schließen, und sind am Ende auf die Anzeige geklickt? Das ist für jeden frustrierend, für Menschen mit Handzittern (z. B. Parkinson) jedoch unmöglich.

Die WCAG- und Apple/Google-Richtlinien empfehlen einen minimalen Berührungsbereich von 44 x 44 dp (iOS) oder 48 x 48 dp (Android).

Implementierungstipp: Sie müssen das Symbol nicht optisch vergrößern. Sie können nur die unsichtbare Polsterung um ihn herum vergrößern.

/* CSS (React Native / Web App) */
.close-button {
  width: 20px;   /* Ícone visual pequeno */
  height: 20px;
  padding: 12px; /* Área de toque grande */
  box-sizing: content-box; /* Garante que o padding some ao tamanho */
}

Beispiel 4: Dekorative Bilder vs. Informationen

Nicht jedes Bild benötigt eine Beschreibung. Wenn Sie alles beschreiben, verunreinigen Sie das Hörerlebnis des Benutzers.

Informatives Bild: Ein Foto eines Produkts, das Sie verkaufen.
- Aktion: alt="Tênis de corrida azul com solado branco".
Dekoratives Bild: Ein Pfeilsymbol neben einem „Weiterlesen“-Text oder eine grafische Welle am unteren Rand der Kopfzeile.
- Aktion: Aus dem Screenreader ausblenden.

Im Flattern:

// Imagem Decorativa (Invisível para Semântica)
ExcludeSemantics(
  child: Image.asset('background_wave.png'),
)

// Imagem Informativa
Semantics(
  label: 'Logo da Empresa',
  image: true,
  child: Image.asset('logo.png'),
)

Beispiel 5: Ladezustand

Der Benutzer klickt auf „Bezahlen“. Der Bildschirm friert ein. Ein Spinner scheint sich zu drehen. Für jeden, der es sieht, ist klar: „Es lädt.“ Für diejenigen, die es nicht sehen, ist die Stille beunruhigend. „Es ist abgestürzt? Die App wurde geschlossen? Mein Internet ist ausgefallen?“

Geben Sie immer eine akustische Rückmeldung zum Ladestatus.

Android: Verwenden Sie ProgressBar mit android:stateDescription="Carregando pagamento...".
iOS: Verwenden Sie UIAccessibility.post(notification: .announcement, argument: "Processando pagamento, aguarde.").

Fazit

Bei Barrierefreiheit geht es nicht darum, sich abstrakte Regeln zu merken. Es geht darum zu verstehen, wie Code für verschiedene Menschen in Erfahrungen umgesetzt wird.

Durch die Anwendung dieser Standards (Schaltflächenbeschriftungen, redundante Farben, großzügige Berührungsflächen, korrekte Semantik und Zustandsrückmeldung) beseitigen Sie 90 % der Hindernisse, die Menschen daran hindern, Ihre App zu verwenden.

Der beste Code ist nicht der komplexeste. Es ist diejenige, die für die meisten Menschen funktioniert.