Prinzipien zur Verbesserung der Barrierefreiheit von Apps

Um Nutzer in Bezug auf Barrierefreiheit zu unterstützen, bietet das Android-Framework Ihnen folgende Möglichkeiten: Eine Bedienungshilfe erstellen, mit der Nutzern Inhalte aus Apps präsentiert werden können und betreiben in ihrem Namen Apps.

Android bietet verschiedene Bedienungshilfen, darunter:

  • TalkBack: hilft Menschen mit eingeschränktem Sehvermögen oder blinden Menschen. Inhalte werden über eine synthetisierten Stimmen und führt Aktionen in einer App als Reaktion auf Nutzergesten aus.
  • Schalterzugriff: Menschen mit motorischen Beeinträchtigungen. Interaktive Elemente werden hervorgehoben. und führt als Reaktion auf das Drücken einer Taste durch die Nutzenden Aktionen aus. Sie ermöglicht das Gerät mit nur einer oder zwei Tasten steuern.

Damit Menschen mit Bedarf an Barrierefreiheit Ihre App erfolgreich verwenden können, App muss den auf dieser Seite beschriebenen Best Practices entsprechen, die auf den Richtlinien unter Apps optimieren barrierefrei.

Jede dieser Best Practices, die in den folgenden Abschnitten beschrieben werden, können Sie die Barrierefreiheit Ihrer App weiter verbessern:

Label-Elemente
Nutzer müssen den Inhalt und Zweck der einzelnen interaktiven Elemente verstehen können. und aussagekräftiges UI-Element innerhalb Ihrer App.
Aktionen für Bedienungshilfen hinzufügen
Durch das Hinzufügen von Aktionen für Bedienungshilfen können Sie um kritische Abläufe für Nutzer in Ihrer App abzuschließen.
System-Widgets erweitern
Bauen Sie auf den Ansichtselementen des Frameworks auf, anstatt auf und erstellen Sie Ihre eigenen benutzerdefinierten Ansichten. Die Ansichts- und Widget-Klassen des Frameworks sind bereits die meisten der Bedienungshilfen bieten, die Ihre App benötigt.
Andere Hinweise als Farben verwenden
Nutzer müssen in der Lage sein, zwischen Elementkategorien in den eine Benutzeroberfläche. Verwenden Sie dazu Muster, Position und Farbe, um diese Unterschiede.
Medieninhalte zugänglicher machen
Fügen Sie den Video- oder Audioinhalten Ihrer App Beschreibungen hinzu, damit Nutzer die sich diese Inhalte konsumieren, sich nicht ausschließlich auf visuelle oder akustische Signale verlassen können.

Label-Elemente

Es ist wichtig, den Nutzenden nützliche und aussagekräftige Labels interaktives UI-Element in Ihrer App. Jedes Label muss die Bedeutung Zwecks eines bestimmten Elements. Screenreader wie TalkBack können dir Nutzern diese Labels zu präsentieren.

In den meisten Fällen geben Sie im Layout die Beschreibung eines UI-Elements an. Ressourcendatei, die das Element enthält. Normalerweise fügen Sie Labels das Attribut contentDescription, wie in der Anleitung zum Erstellen von Apps beschrieben. barrierefreier. Es sind verschiedene weitere Labeling-Techniken, die in den folgenden Abschnitten beschrieben werden.

Bearbeitbare Elemente

Wenn Sie bearbeitbare Elemente wie EditText-Objekten enthält, ist es hilfreich, Text, der ein Beispiel für eine gültige Eingabe im Element selbst enthält, zusätzlich zu sodass dieser Beispieltext Screenreadern zur Verfügung steht. In diesen Situationen das Attribut android:hint verwenden, wie im folgenden Snippet gezeigt:

<!-- The hint text for en-US locale would be
     "Apartment, suite, or building". -->
<EditText
   android:id="@+id/addressLine2"
   android:hint="@string/aptSuiteBuilding" ... />

In diesem Fall muss das View-Objekt das Attribut android:labelFor haben ist auf die ID des EditText-Elements festgelegt. Weitere Informationen finden Sie hier: .

Paare von Elementen, von denen eines das andere beschreibt

Häufig hat ein EditText-Element ein entsprechendes Ein View-Objekt, das beschreibt, was Nutzer tun müssen in das EditText-Element ein. Sie können diese Beziehung angeben, indem Sie Das Attribut android:labelFor des View-Objekts

Das folgende Snippet zeigt ein Beispiel für die Kennzeichnung solcher Elementpaare:

!<-- Label text for en-US locale would be "Username:" --
>T<extView
   android:id="@+id/usernameLabel" ...
   android:text="@string/username"
   android:labelFor="@+id/usernameEntry" /
>
E<ditText
   android:id="@+id/usernameEntry" ... /
>
!<-- Label text for en-US locale would be "Password:" --
>T<extView
   android:id="@+id/passwordLabel" ...
   android:text="@string/password
   android:labelFor="@+id/passwordEntry" /
>
E<ditText
   android:id="@+id/passwordEntry"
   android:inputType="textPassword" ... /
>

Elemente in einer Sammlung

Wenn Sie den Elementen einer Sammlung Labels hinzufügen, muss jedes Label eindeutig sein. So können sich die Bedienungshilfen des Systems auf genau eine Anzeige auf dem Bildschirm beziehen. -Element an, wenn Sie ein Label ansagen. Diese Korrespondenz informiert die Nutzenden darüber, durch die Benutzeroberfläche wechseln oder den Fokus auf ein Element verschieben, die sie bereits entdeckt haben.

Fügen Sie insbesondere zusätzliche Text- oder Kontextinformationen in Elemente innerhalb wiederverwendeter Layouts, wie z. B. RecyclerView -Objekte, damit jedes untergeordnete Element eindeutig identifiziert wird.

Legen Sie dazu die Inhaltsbeschreibung als Teil Ihrer Adapterimplementierung fest: wie im folgenden Code-Snippet dargestellt:

Kotlin

data class MovieRating(val title: String, val starRating: Integer)

class MyMovieRatingsAdapter(private val myData: Array<MovieRating>):
        RecyclerView.Adapter<MyMovieRatingsAdapter.MyRatingViewHolder>() {

    class MyRatingViewHolder(val ratingView: ImageView) :
            RecyclerView.ViewHolder(ratingView)

    override fun onBindViewHolder(holder: MyRatingViewHolder, position: Int) {
        val ratingData = myData[position]
        holder.ratingView.contentDescription = "Movie ${position}: " +
                "${ratingData.title}, ${ratingData.starRating} stars"
    }
}

Java

public class MovieRating {
    private String title;
    private int starRating;
    // ...
    public String getTitle() { return title; }
    public int getStarRating() { return starRating; }
}

public class MyMovieRatingsAdapter
        extends RecyclerView.Adapter<MyAdapter.MyRatingViewHolder> {
    private MovieRating[] myData;


    public static class MyRatingViewHolder extends RecyclerView.ViewHolder {
        public ImageView ratingView;
        public MyRatingViewHolder(ImageView iv) {
            super(iv);
            ratingView = iv;
        }
    }

    @Override
    public void onBindViewHolder(MyRatingViewHolder holder, int position) {
        MovieRating ratingData = myData[position];
        holder.ratingView.setContentDescription("Movie " + position + ": " +
                ratingData.getTitle() + ", " + ratingData.getStarRating() +
                " stars")
    }
}

Gruppen ähnlicher Inhalte

Wenn in Ihrer App mehrere UI-Elemente angezeigt werden, die eine natürliche Gruppe bilden, z. B. eines Liedes oder Merkmale einer Botschaft zeigen, ordnen Sie diese Elemente container, der normalerweise eine abgeleitete Klasse von ViewGroup ist. Container festlegen des Objekts android:screenReaderFocusable true und der Parameter android:focusable false verwenden. So können Bedienungshilfen die innere Elemente in einer einzelnen Ankündigung nacheinander die Inhaltsbeschreibungen enthalten. Diese Konsolidierung verwandter Elemente hilft Nutzenden von Hilfstechnologien die Informationen auf dem Bildschirm effizienter zu finden.

Das folgende Snippet enthält Inhalte, die sich auf sodass das Containerelement, eine Instanz von ConstraintLayout, Das Attribut „android:screenReaderFocusable“ wurde auf true und das innere Attribut festgelegt Für TextView-Elemente ist das android:focusable-Attribut jeweils auf false:

<!-- In response to a single user interaction, accessibility services announce
     both the title and the artist of the song. -->
<ConstraintLayout
    android:id="@+id/song_data_container" ...
    android:screenReaderFocusable="true">

    <TextView
        android:id="@+id/song_title" ...
        android:focusable="false"
        android:text="@string/my_song_title" />
    <TextView
        android:id="@+id/song_artist"
        android:focusable="false"
        android:text="@string/my_songwriter" />
</ConstraintLayout>

Weil Bedienungshilfen die inneren Elemente Beschreibungen in einer gesprochen haben, ist es wichtig, die Beschreibungen so kurz wie möglich zu halten, und gleichzeitig die Bedeutung des Elements zu vermitteln.

Hinweis:Im Allgemeinen sollten Sie erstellen Sie keine Inhaltsbeschreibung für eine Gruppe, indem Sie den Text Kinder. Dies macht die Beschreibung der Gruppe anfälliger und wenn der Text einer ändert, stimmt die Gruppenbeschreibung möglicherweise nicht mehr mit dem sichtbaren Text überein.

In einem Listen- oder Rasterkontext fasst ein Screenreader möglicherweise den Text einer Liste oder Untergeordneten Textknoten des Grid-Elements. Sie sollten dieses Feld .

Verschachtelte Gruppen

Wenn die Benutzeroberfläche Ihrer App mehrdimensionale Informationen wie eine tägliche Liste der Festivalveranstaltungen, verwende die android:screenReaderFocusable für die Container der inneren Gruppe. Dieses Labeling-Schema bietet die Anzahl der Ansagen, die zur Erkennung des und die Länge jeder Mitteilung.

Das folgende Code-Snippet zeigt eine Methode, um Gruppen innerhalb einer größere Gruppen:

<!-- In response to a single user interaction, accessibility services
     announce the events for a single stage only. -->
<ConstraintLayout
    android:id="@+id/festival_event_table" ... >
    <ConstraintLayout
        android:id="@+id/stage_a_event_column"
        android:screenReaderFocusable="true">

        <!-- UI elements that describe the events on Stage A. -->

    </ConstraintLayout>
    <ConstraintLayout
        android:id="@+id/stage_b_event_column"
        android:screenReaderFocusable="true">

        <!-- UI elements that describe the events on Stage B. -->

    </ConstraintLayout>
</ConstraintLayout>

Überschriften im Text

Einige Apps verwenden Überschriften, um Textgruppen zusammenzufassen, die auf dem Bildschirm angezeigt werden. Wenn ein bestimmtes View-Element für eine Überschrift steht, können Sie deren Zweck angeben für Bedienungshilfen, indem Sie die Attribut android:accessibilityHeading für true

Nutzer von Bedienungshilfen können zwischen Überschriften wechseln. statt zwischen Absätzen oder Wörtern. Diese Flexibilität verbessert die die Textnavigation verwenden.

Titel des Bereichs „Bedienungshilfen“

Unter Android 9 (API-Level 28) und höher können Sie Titel für barrierefreie Bereiche eines Bildschirms. Für Barrierefreiheit ist ein Fenster ein visuell erkennbarer Teil eines Fensters, eines Fragments. Damit die Bedienungshilfen eine fensterähnliches Verhalten haben, geben Sie Ihrer App aussagekräftige Titel Bereiche. Bedienungshilfen können dann detailliertere Informationen wenn sich das Erscheinungsbild oder der Inhalt eines Fensters ändert.

Um den Titel eines Fensters anzugeben, verwenden Sie die android:accessibilityPaneTitle wie im folgenden Snippet gezeigt:

<!-- Accessibility services receive announcements about content changes
     that are scoped to either the "shopping cart view" section (top) or
     "browse items" section (bottom) -->
<MyShoppingCartView
     android:id="@+id/shoppingCartContainer"
     android:accessibilityPaneTitle="@string/shoppingCart" ... />

<MyShoppingBrowseView
     android:id="@+id/browseItemsContainer"
     android:accessibilityPaneTitle="@string/browseProducts" ... />

Dekorative Elemente

Wenn ein Element in Ihrer UI nur für visuelle Abstände oder visuelle Darstellung vorhanden ist sollten Sie die android:importantForAccessibility Attribut zu "no".

Aktionen für Bedienungshilfen hinzufügen

Es ist wichtig, den Nutzenden von Bedienungshilfen zu ermöglichen, User Flows in Ihrer App. Wenn Nutzende z. B. über ein Element in einem kann diese Aktion auch Bedienungshilfen zugänglich gemacht werden, eine alternative Möglichkeit, denselben User Flow abzuschließen.

Alle Aktionen zugänglich machen

Ein Nutzer von TalkBack, Voice Access, oder der Schalterzugriff benötigt möglicherweise alternative Möglichkeiten, in der App. Für Aktionen in Verbindung mit Touch-Gesten wie Drag-and-drop oder Wischen: kann Ihre App die Aktionen für Nutzende von zugänglich machen, Bedienungshilfen.

Über Aktionen für Bedienungshilfen Die App kann Nutzenden alternative Möglichkeiten bieten, eine Aktion auszuführen.

Wenn Ihre App es Nutzern beispielsweise ermöglicht, über einen Artikel zu wischen, können Sie auch Die Funktionalität wird über eine benutzerdefinierte Bedienungshilfe wie folgt bereitgestellt:

Kotlin

ViewCompat.addAccessibilityAction(
    // View to add accessibility action
    itemView,
    // Label surfaced to user by an accessibility service
    getText(R.id.archive)
) { _, _ ->
    // Same method executed when swiping on itemView
    archiveItem()
    true
}

Java

ViewCompat.addAccessibilityAction(
    // View to add accessibility action
    itemView,
    // Label surfaced to user by an accessibility service
    getText(R.id.archive),
    (view, arguments) -> {
        // Same method executed when swiping on itemView
        archiveItem();
        return true;
    }
);

With the custom accessibility action implemented, users can access the action through the actions menu.

Make available actions understandable

When a view supports actions such as touch & hold, an accessibility service such as TalkBack announces it as "Double tap and hold to long press."

This generic announcement doesn't give the user any context about what a touch & hold action does.

To make this announcement more descriptive, you can replace the accessibility action’s announcement like so:

Kotlin

ViewCompat.replaceAccessibilityAction(
    // View that contains touch & hold action
    itemView,
    AccessibilityNodeInfoCompat.AccessibilityActionCompat.ACTION_LONG_CLICK,
    // Announcement read by TalkBack to surface this action
    getText(R.string.favorite),
    null
)

Java

ViewCompat.replaceAccessibilityAction(
    // View that contains touch & hold action
    itemView,
    AccessibilityNodeInfoCompat.AccessibilityActionCompat.ACTION_LONG_CLICK,
    // Announcement read by TalkBack to surface this action
    getText(R.string.favorite),
    null
);

This results in TalkBack announcing "Double tap and hold to favorite," helping users understand the purpose of the action.

Extend system widgets

Note: When you design your app's UI, use or extend system-provided widgets that are as far down Android's class hierarchy as possible. System-provided widgets that are far down the hierarchy already have most of the accessibility capabilities your app needs. It's easier to extend these system-provided widgets than to create your own from the more generic View, ViewCompat, Canvas, and CanvasCompat classes.

If you must extend View or Canvas directly, which might be necessary for a highly customized experience or a game level, see Make custom views more accessible.

This section uses the example of implementing a special type of Switch called TriSwitch while following best practices around extending system widgets. A TriSwitch object works similarly to a Switch object, except that each instance of TriSwitch allows the user to toggle among three possible states.

Extend from far down the class hierarchy

The Switch object inherits from several framework UI classes in its hierarchy:

View
↳ TextView
  ↳ Button
    ↳ CompoundButton
      ↳ Switch

Es empfiehlt sich, die neue TriSwitch-Klasse direkt aus Switch zu erweitern . Auf diese Weise werden die Android-Bedienungshilfen Framework bietet die meisten Bedienungshilfen der TriSwitch-Klasse benötigt:

  • Aktionen für die Barrierefreiheit:Informationen für das System dazu, wie Bedienungshilfen Dienste jede mögliche Nutzereingabe emulieren, die auf einem TriSwitch ausgeführt wird -Objekt enthält. (Übernommen von View.)
  • Ereignisse für Barrierefreiheit:Informationen für Bedienungshilfen zu allen wie sich das Erscheinungsbild eines TriSwitch-Objekts ändern kann, wenn der Bildschirm Aktualisierungen durchgeführt werden. (Übernommen von View.)
  • Eigenschaften: Details zu jedem TriSwitch-Objekt, z. B. das des angezeigten Textes. (Übernommen von TextView.)
  • Statusinformationen:Beschreibung des aktuellen Status eines TriSwitch-Objekts. Beispiel: „Ausgewählt“ oder „deaktiviert“. (Übernommen von CompoundButton.)
  • Textbeschreibung des Bundesstaats:Eine textbasierte Erklärung des jeweiligen Bundesstaats. dargestellt wird. (Übernommen von Switch.)

Dieses Verhalten von Switch und den zugehörigen übergeordneten Klassen ist fast die Verhalten für TriSwitch-Objekte. Daher kann Ihre Implementierung die Anzahl der möglichen Stadien von zwei auf drei erhöhen.

Benutzerdefinierte Ereignisse definieren

Wenn Sie ein System-Widget erweitern, ändern Sie wahrscheinlich einen Aspekt der Art und Weise, wie Nutzer mit diesem Widget interagieren. Es ist wichtig, diese Interaktionsänderungen zu definieren, damit Bedienungshilfen das Widget Ihrer App so aktualisieren können, interagiert direkt mit dem Widget.

Generell gilt: Für jeden aufrufbasierten Callback, den du überschreibst, müssen Sie auch die entsprechende Aktion für Bedienungshilfen neu definieren, ViewCompat.replaceAccessibilityAction() In den Tests Ihrer App können Sie das Verhalten dieser neu definierten Aktionen validieren, indem Sie Anrufen ViewCompat.performAccessibilityAction()

Funktionsweise dieses Prinzips für TriSwitch-Objekte

Im Gegensatz zu einem gewöhnlichen Switch-Objekt wird beim Tippen auf ein TriSwitch-Objekt drei mögliche Stadien. Daher sind die entsprechenden ACTION_CLICK-Bedienungshilfen Aktion aktualisiert werden muss:

Kotlin

class TriSwitch(context: Context) : Switch(context) {
    // 0, 1, or 2
    var currentState: Int = 0
        private set

    init {
        updateAccessibilityActions()
    }

    private fun updateAccessibilityActions() {
        ViewCompat.replaceAccessibilityAction(this, ACTION_CLICK,
            action-label) {
            view, args -> moveToNextState()
        })
    }

    private fun moveToNextState() {
        currentState = (currentState + 1) % 3
    }
}

Java

public class TriSwitch extends Switch {
    // 0, 1, or 2
    private int currentState;

    public int getCurrentState() {
        return currentState;
    }

    public TriSwitch() {
        updateAccessibilityActions();
    }

    private void updateAccessibilityActions() {
        ViewCompat.replaceAccessibilityAction(this, ACTION_CLICK,
            action-label, (view, args) -> moveToNextState());
    }

    private void moveToNextState() {
        currentState = (currentState + 1) % 3;
    }
}

Andere Hinweise als Farbe verwenden

Um Nutzenden mit Farbblindheit zu helfen, nutzen Sie andere Hinweise, zwischen UI-Elementen auf den App-Bildschirmen unterscheiden. Diese Techniken können verschiedene Formen oder Größen zu verwenden, Text oder visuelle Muster zu verwenden, oder durch Audio- oder berührungsbasiertes (haptisches) Feedback Unterschiede.

Abbildung 1 zeigt zwei Versionen einer Aktivität. In einer Version wird zum zwischen zwei möglichen Aktionen in einem Workflow unterscheiden. Die andere Version verwendet die Best Practice, neben der Farbe auch Formen und Text die Unterschiede zwischen den beiden Optionen hervorheben:

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Abbildung 1: Beispiele für das Erstellen von UI-Elementen ausschließlich mit Farbe (links) und unter Verwendung von Farben, Formen und Text (rechts).

Medieninhalte zugänglicher machen

Wenn Sie eine App entwickeln, die Medieninhalte wie einen Videoclip enthält oder eine Audioaufnahme zu erstellen, bietet es euch an, Nutzer mit verschiedenen für das Verständnis dieses Materials Anforderungen an die Barrierefreiheit erfüllen. Insbesondere haben wir sollten Sie Folgendes tun:

  • Integrieren Sie Steuerelemente, mit denen Nutzer die Medien pausieren oder stoppen können, Lautstärke und Untertitel ein- und ausschalten.
  • Wenn ein Video Informationen enthält, die für den Abschluss eines Workflows wichtig sind, dieselben Inhalte in einem alternativen Format bereitstellen, z. B. als Transkript.

Weitere Informationen

Weitere Informationen zur Verbesserung der Barrierefreiheit Ihrer App finden Sie hier: Weitere Informationen:

Codelabs

Blogposts