Barrierefreiheit in Android: Entwicklereinblicke und Implementierungsleitfaden

Weltweit gibt es rund 285 Millionen Menschen mit Sehbehinderungen. Wenn Sie also eine neue Anwendung entwerfen oder eine Designüberarbeitung in Betracht ziehen, ist es sicherlich eine gute Idee, Ihre App an die Bedürfnisse dieser breiten Benutzergruppe anzupassen. Das Anpassen von Anwendungen für sehbehinderte Menschen verbessert die Erfahrung aller Ihrer Benutzer. Welche anderen Gründe sprechen dafür, die Barrierefreiheit Ihrer App zu verbessern , und wie geht das? Nachfolgend finden Sie alle Antworten!

Wie nutzen sehbehinderte Menschen Apps?

Ein Screenreader ist ein Tool zum Ausführen von Anwendungen (oder einfach zum Durchsuchen Ihres Smartphone-Bildschirms) für blinde und sehbehinderte Menschen. Der beliebteste Screenreader für Android ist TalkBack . Bei diesem Tool führt der Benutzer Eingaben über Gesten wie Wischen oder Ziehen durch.

Normalerweise ist die Ausgabe gesprochenes Feedback. In TalkBack haben wir zwei Gesteneingabemodi:

• Berühren Sie Erkundung , wo Sie Ihren Finger über den Bildschirm ziehen.
• Lineare Navigation , bei der Sie mit dem Finger nach links und rechts wischen, bis Sie das gewünschte Element gefunden haben.

Sobald Sie bei dem Artikel angekommen sind, an dem Sie interessiert sind, können Sie doppelt darauf tippen, um ihn zu aktivieren. Möchten Sie mehr darüber erfahren, wie Sie TalkBack ausführen? Bitte lesen Sie den folgenden Artikel.

Prinzipien barrierefreier Apps

Damit Menschen mit Sehbehinderungen unsere Anwendung nutzen können, müssen wir zunächst die Prinzipien verstehen, denen wir bei der Entwicklung folgen müssen. Lassen Sie uns daher, bevor wir zum Implementierungsabschnitt übergehen, die wichtigsten Annahmen diskutieren.

Layout und Typografie

Der visuelle Teil der App ist entscheidend. Richtig implementierte Schaltflächen und Textverarbeitung sind einer der wichtigsten Faktoren, die die Anwendung barrierefrei machen.

Berühren Sie Ziele

Berührungsziele sind Teile des Bildschirms, die auf Benutzerinteraktionen reagieren. Die Hauptempfehlung lautet, Berührungsziele mit einer Auflösung von mindestens 48 x 48 dp zu erstellen. Mehr dazu lesen Sie im nächsten Kapitel.

Farbe und Kontrast

Das World Wide Web hat Richtlinien für die Zugänglichkeit von Farbkontrasten erstellt, um Benutzern mit Farbmängeln zu helfen und sie zu unterstützen. Laut Dokumentation sind die kritischen Aspekte bezüglich der Farbkontrastzugänglichkeit :

• Verhältnis : Text und interaktive Elemente sollten ein Farbkontrastverhältnis von mindestens 4,5:1 haben.
• Farbe als Indikator : Farbe sollte nicht der einzige Indikator für interaktive Elemente sein. Am besten unterstrichen Sie auch Links beim Hover oder markieren Pflichtfelder mit einem Sternchen.
• Farbenblindheit: Rot/Grün-Farbenblindheit ist die häufigste. Vermeiden Sie daher Grün auf Rot oder Rot auf Grün. Vermeiden Sie aus dem gleichen Grund die Verwendung von Rot und Grün für „schlechte“ und „gute“ Indikatoren.

Typografie

Benutzer können die Schriftgröße erhöhen, um die Lesbarkeit zu verbessern. Auf Android-Geräten ist dies eine häufig verwendete Systemoption. Stellen Sie daher sicher, dass genügend Platz für große und fremde Schriftarten vorhanden ist.

Barrierefreiheitstext

Barrierefreiheitstext ist sowohl sichtbarer Text (z. B. Bezeichnungen von UI-Elementen, Text auf Schaltflächen, Links und Formularen) als auch unsichtbare Beschreibungen (Inhaltsbeschreibungen, die mehr Informationen über die beschriebene Komponente liefern können).

Was sind die häufigsten Anwendungsfälle für barrierefreien Text ?

Steuerungstypen und -zustände

Sprachausgabeprogramme wie TalkBack können den Typ oder Zustand eines Steuerelements automatisch ankündigen, indem sie entweder den Namen des Steuerelements sprechen oder einen Ton ausgeben.

Anzeigen von Elementen durch die Aktion

Aktionsverben geben an, was ein Element oder Link tut, wenn Sie darauf tippen, und beschreiben, was eine Ansicht tut.

Elemente mit Zustandsänderungen

Bei Symbolen, die zwischen Werten oder Zuständen umschalten, beschreibt der Bildschirmleser ein Symbol entsprechend der Darstellung für den Benutzer. Weitere Beispiele finden Sie in der Materialdesign-Richtlinie.

Zusammenfassung

In diesem Kapitel haben Sie gelernt, wie Design für sehbehinderte und blinde Menschen angepasst werden sollte. Bisher haben wir Layout, Typografie und Textzugänglichkeit behandelt. Jetzt werden wir zu den Prinzipien ihrer Umsetzung übergehen.

Implementierung der Barrierefreiheit

Im folgenden Abschnitt werde ich mich auf die wichtigsten Aspekte der Implementierung von Barrierefreiheit in Ihrer App konzentrieren. Lass uns anfangen!

Layout – Ziel berühren

Wie ich im theoretischen Teil erwähnt habe, sollte jedes anklickbare Element mindestens 48dp/48dp haben.

Dazu gibt es mehrere Möglichkeiten. Sie könnten:

• Bestimmen Sie die Werte für die Breiten- und Höhenattribute wie empfohlen (48dp/48dp)
• Fügen Sie Polsterung um die Symbole hinzu
• Geben Sie Werte für die Attribute an: MinWidth und/oder minHeight
• Registrieren Sie TouchDelegate.

Sehen Sie sich ein Beispiel aus der offiziellen Dokumentation von Google an. Es zeigt das Element, das die empfohlene Größe des Berührungsziels hat:

 <ImageButton 
   ...
   android:minWidth="40dp"
   android:minHeight="32dp"
   android:paddingLeft="4dp"

   android:paddingTop="8dp"
   android:paddingRight="4dp"
   android:paddingBottom="8dp" />

Barrierefreiheitstext

Eine der Möglichkeiten, Ihren UI-Elementen Barrierefreiheitstext hinzuzufügen, ist die Verwendung eines Android-Attributs namens ContentDescription . Wenn Sie es beispielsweise nicht für eine Bildschaltfläche bereitstellen, kann die Erfahrung für einen TalkBack-Benutzer verwirrend sein.

Schau dir das Beispiel an:

 <!-- Der Wert für die folgende Zeichenfolge ist "Search". -->
<Bildansicht
   ...
   android:contentDescription="@string/search" />

Setzen Sie für dekorative Elemente wie Abstandshalter und Trennwände das Attribut “android:contentDescription” auf "null" . Wenn Ihre App nur Geräte unterstützt, auf denen Android 4.1 (API-Ebene 16) oder höher ausgeführt wird, können Sie stattdessen die Attribute “android:importantForAccessibility” auf "no" setzen.

Bitte stellen Sie sicher, dass Sie den Steuerungstyp oder den Steuerungsstatus nicht in Ihre Inhaltsbeschreibung aufnehmen. Android hat nativ Wörter wie Schaltflächen, ausgewählt, aktiviert usw.

Etikettiertechniken

Unten finden Sie eine Reihe bewährter Vorgehensweisen zum Beschreiben von UI-Komponenten in Ihrer Anwendung.

Komponenten, die sich gegenseitig beschreiben

Wenn Sie eine Komponente haben, mit der Sie Daten bereitstellen können (z. B. EditText), ist es gut, ein View-Objekt zu haben, das sie beschreibt (z. B. TextView). Aus diesem Grund wurde das Attribut "android:labelFor" erstellt. Schauen Sie sich bitte das Beispiel an:

 <!-- Labeltext wäre "Name:" -->
<Textansicht 
   ...
   Android:
   android:labelFor="@+id/nameEntry"
   android:text="@string/name" //>

<!-- Barrierefreiheitstext wird "Text für Namen bearbeiten" sein -->
<Text bearbeiten 
   ...
   Android: />

<!-- Labeltext wäre "Nachname:" -->
<Textansicht 
   ...
   Android:
   android:labelFor="@+id/nachnameEintrag"
   android:text="@string/nachname" />

<!-- Barrierefreiheitstext lautet "Text für Nachnamen bearbeiten" -->
<Text bearbeiten 
   ...
   Android: />

Sammlung verwandter Elemente

Wenn Ihre App über UI-Elemente verfügt, die auf natürliche Weise verwandt sind (z. B. Felder mit Informationen zu einem Buch), können Sie sie mithilfe eines fokussierbaren Containers in Gruppen anordnen. Setzen Sie dazu das Attribut “android:focusable” des Containerobjekts auf „true“.

Dabei kann TalkBack die Inhaltsbeschreibungen der inneren Elemente nacheinander in einer einzigen Ansage präsentieren. Das Gruppieren von Inhalten reduziert das Wischen, das der Benutzer ausführen muss, und optimiert gleichzeitig die Sprachausgabe. Bitte schauen Sie sich das Beispiel an:

 <LinearesLayout 
   ...
   Android:
   android:orientation="vertikal"
   android:focusable="true">

   <Textansicht
	  ...
       Android:
       android:text="@string/titel"/>

   <Textansicht
	  ...
       Android:
       android:text="@string/autor"/>

   <Textansicht
	  ...
       Android:
       android:text="@string/pages"/>
</LinearLayout>

Wenn Ihr Container verschachtelte Ansichten hat, können Sie diese Lösung natürlich auch darauf anwenden. Dadurch wird die Navigation in Ihrer Anwendung noch zugänglicher.

Aktionen zur Barrierefreiheit

Wenn Ihre App Aktionen wie Klicken, langes Drücken oder Wischen unterstützt, müssen Sie diese Aktionen für Menschen mit Sehbehinderung anpassen. Darauf konzentrieren wir uns in diesem Teil des Artikels.

Schauen Sie sich an, wie Sie es implementieren können:

 ViewCompat.addAccessibilityAction(
   // Ansicht zum Hinzufügen einer Aktion zur Barrierefreiheit
   Artikelansicht,
   // Das Label, das der Barrierefreiheitsdienst liest
   getString(R.string.speichern)
) { _, _ ->
   // Zugänglichkeitsbefehl
   saveItem()
   Stimmt
}

Dies führt dazu, dass TalkBack „Zum Archivieren doppelt tippen“ ankündigt.

Mit der implementierten Barrierefreiheitsaktion können Benutzer jetzt über das Aktionsmenü auf die Aktion zugreifen. Ich erzähle Ihnen etwas später, wie Sie zu diesem Menü navigieren. Bitte denken Sie daran: Es ist wichtig, dass Benutzer alle Abläufe innerhalb Ihrer App effizient ausführen können.

Widgets

Dieser Abschnitt ist kurz, aber sehr wichtig. Wenn Sie Ihre UI-Komponente erstellen, verwenden oder erweitern Sie vom System bereitgestellte Widgets, die möglichst weit unten in der Klassenhierarchie von Android stehen. Vom System bereitgestellte Widgets weit unten in der Hierarchie verfügen bereits über die meisten Barrierefreiheitsfunktionen, die Ihre App benötigt. Zu den wichtigsten gehören:

• Aktionen zur Barrierefreiheit
• Eigenschaften
• Staatliche Informationen.

Dank dessen müssen Sie keine vollständige Unterstützung der Barrierefreiheit für eine Komponente von Grund auf neu schreiben, und Sie verringern das Fehlerrisiko.

Navigation

TalkBack wächst weiter. Wir haben vor nicht allzu langer Zeit zwei Kontextmenüs (global und lokal) verwendet, um in unserem Smartphone-System zu navigieren. Jetzt sind diese beiden Menüs zu einem geworden.

Das Kontextmenü wird hauptsächlich für zwei Zwecke verwendet:

• Wie der Name schon sagt, dient es der Navigation. Sie können je nach Anwendungspräferenzen oder -fähigkeiten durch Wörter, Überschriften, Links, Zeilen, eindeutige Inhalte oder andere Punkte navigieren.
• Der zweite Zweck ermöglicht es dem Benutzer, TalkBack-Einstellungen und -Steuerelemente schnell zu ändern.

In diesem Menü finden Sie eine Reihe von Aktionen (die im Abschnitt „ Aktion zur Barrierefreiheit “ oben erwähnt wurden). Wie können Sie auf dieses Menü zugreifen? Es ist sehr einfach. Sie müssen nur nach oben wischen und die rechte Geste machen.

Zugänglichkeitsprüfung

In den bisher von mir entwickelten Projekten habe ich vor allem von den drei folgenden Hilfsmitteln profitiert: Accessibility Scanner, Espresso und Lint. Natürlich stehen Ihnen noch viel mehr Tools zur Verfügung. Ich empfehle Ihnen dringend, sie selbst zu überprüfen. Hier finden Sie alle notwendigen Unterlagen.

Barrierefreiheits-Scanner

Dieses Tool scannt die Benutzeroberfläche und gibt Empfehlungen zur Verbesserung der Zugänglichkeit der Anwendung.

Mit Accessibility Scanner kann jeder, nicht nur Entwickler, schnell und einfach einige gängige Verbesserungen der Barrierefreiheit identifizieren, z. B. kleine Touch-Ziele, Kontrastfehler für Text und Bilder, fehlende Inhaltsbeschreibungen für nicht gekennzeichnete Widgets usw Suchen Sie nach detaillierteren Anweisungen, lesen Sie bitte die folgende Dokumentation.

Android Lint

Ich bin mir sicher, dass die meisten von Ihnen dieses Tool aus ihrer täglichen Arbeit kennen. Denken Sie daran, dass Android Studio auch Warnungen zu verschiedenen Barrierefreiheitsproblemen und Links zu Stellen im Quellcode enthält, die diese Probleme enthalten.

Espresso

Espresso ist eine Android-Testbibliothek , mit der Sie Ihre Benutzeroberfläche schnell und einfach testen können. Es ermöglicht die Interaktion mit den getesteten Benutzeroberflächenkomponenten der Anwendung und stellt sicher, dass bestimmte Verhaltensweisen auftreten oder Bedingungen erfüllt werden. Als Teil der Barrierefreiheitsunterstützung können Sie natürlich Barrierefreiheitstests aktivieren und konfigurieren.

Zusammenfassung

Wenn Sie Ihre App barrierefrei machen , wird sie nicht nur für neue Benutzer geöffnet. Es hilft, unser tägliches Leben zu verbessern und die Welt inklusiver zu machen. Ich hoffe, dass dieser Artikel Ihnen geholfen hat, etwas über Barrierefreiheit zu lernen. Für weitere Lektüre vergessen Sie bitte nicht, die offizielle Dokumentation zu überprüfen.