Principes pour améliorer l'accessibilité des applications

Pour aider les utilisateurs ayant des besoins d'accessibilité, le framework Android vous permet Créer un service d'accessibilité capable de présenter aux utilisateurs le contenu d'applications et exploite également des applications en son nom.

Android fournit plusieurs services d'accessibilité, y compris :

• TalkBack: aide les personnes malvoyantes ou aveugles. Il annonce les contenus via un la voix synthétisée et exécute des actions sur une application en réponse aux gestes des utilisateurs.
• Switch Access: aide les personnes handicapées et motrices. Il met en évidence les éléments interactifs et exécute des actions en réponse à l'appui de l'utilisateur sur un bouton. Cela permet de contrôler l'appareil en n'utilisant qu'un ou deux boutons.

Pour aider les personnes ayant des besoins d'accessibilité à utiliser votre application avec succès, votre application doit respecter les bonnes pratiques décrites sur cette page, qui s'appuient sur des consignes décrites dans la section Rendre les applications plus accessibles.

Chacune de ces bonnes pratiques, décrite dans les sections suivantes, peut améliorer l'accessibilité de votre application:

Libellés

Les utilisateurs doivent pouvoir comprendre le contenu et l'objectif de chaque session interactive et pertinent au sein de votre application.

Ajouter des actions d'accessibilité

En ajoutant des actions d'accessibilité, vous pouvez permettre aux utilisateurs de services d'accessibilité de suivre des parcours utilisateur critiques dans votre application.

Étendre les widgets système

S'appuyer sur les éléments de la vue inclus dans le framework, plutôt que sur pour créer vos propres vues personnalisées. Les classes de vue et de widget du framework offrent déjà la plupart des fonctionnalités d'accessibilité dont votre application a besoin.

Utiliser des signaux autres que la couleur

Les utilisateurs doivent pouvoir distinguer clairement les catégories d'éléments dans une UI. Pour ce faire, exprimez ces différences à l'aide de motifs, de positions et de couleurs.

Rendre les contenus multimédias plus accessibles

Ajoutez des descriptions au contenu vidéo ou audio de votre application afin que les utilisateurs qui consomment ce contenu n'ont pas besoin de s'appuyer sur des indicateurs visuels ou sonores.

Libellés

Il est important de fournir aux utilisateurs des étiquettes utiles et descriptives pour chaque interactif de votre application. Chaque étiquette doit expliquer la signification l’objectif d’un élément particulier. Les lecteurs d'écran tels que TalkBack ces libellés aux utilisateurs.

Dans la plupart des cas, vous spécifiez la description d'un élément d'interface utilisateur dans la mise en page. fichier de ressources contenant l'élément. Habituellement, vous ajoutez des étiquettes en utilisant L'attribut contentDescription, comme expliqué dans le guide de création d'applications plus accessibles. Il y Il existe plusieurs autres techniques d'étiquetage décrites dans les sections suivantes.

Éléments modifiables

Lorsque vous attribuez des libellés à des éléments modifiables, tels que EditText, il est utile de montrer texte qui donne un exemple d'entrée valide dans l'élément lui-même, en plus de mettre cet exemple de texte à la disposition des lecteurs d'écran. Dans ce cas, vous pouvez utiliser l'attribut android:hint, comme indiqué dans l'extrait suivant :

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

Dans ce cas, l'objet View doit avoir son attribut android:labelFor. défini sur l'ID de l'élément EditText. Pour en savoir plus, consultez les ressources suivantes : .

Paires d'éléments où l'un décrit l'autre

Il est courant qu'un élément EditText ait un élément Un objet View qui décrit ce que les utilisateurs doivent saisissez l'élément EditText. Vous pouvez indiquer cette relation en définissant l'attribut android:labelFor de l'objet View.

Voici un exemple d'ajout de libellé pour de telles paires d'éléments :

!<-- 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" ... /
>

Éléments d'une collection

Lorsque vous ajoutez des libellés aux éléments d'une collection, chaque libellé doit être unique. De cette façon, les services d'accessibilité du système peuvent se référer à un seul élément à l'écran lors de l'annonce d'un libellé. Cette correspondance permet aux utilisateurs de savoir quand ils parcourent l'UI ou lorsqu'ils sélectionnent un élément qu'ils ont déjà découverts.

Plus spécifiquement, incluez du texte supplémentaire ou des informations contextuelles dans des éléments des mises en page réutilisées, tels que RecyclerView de sorte que chaque élément enfant soit identifié de manière unique.

Pour ce faire, définissez la description du contenu dans le cadre de l'implémentation de votre adaptateur, comme indiqué dans l'extrait de code suivant :

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"
    }
}

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")
    }
}

Groupes de contenus similaires

Si votre application affiche plusieurs éléments d'interface utilisateur qui constituent un groupe naturel, tels que les informations d'une chanson ou les attributs d'un message, organisez-les dans un conteneur, qui est généralement une sous-classe de ViewGroup. Définissez l'attribut android:screenReaderFocusable de l'objet conteneur sur true et l'attribut android:focusable de chaque objet du conteneur sur false. De cette façon, les services d'accessibilité peuvent présenter éléments les descriptions de contenu, l'une après l'autre, dans une même annonce. Cette consolidation des éléments associés aide les utilisateurs de technologies d'assistance découvrir les informations à l'écran plus efficacement.

L'extrait suivant contient des contenus en rapport avec l'un d'eux un autre. Ainsi, l'élément conteneur, une instance de ConstraintLayout, a son L'attribut android:screenReaderFocusable est défini sur true et la valeur interne L'attribut android:focusable des éléments TextView est défini sur 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>

Étant donné que les services d'accessibilité annoncent les descriptions des éléments intérieurs en une seule fois, il est important que chaque description soit aussi courte que possible tout en transmettant correctement la signification de l'élément.

Groupes imbriqués

Si l'interface de votre application présente des informations multidimensionnelles, telles qu'un liste quotidienne des événements du festival, utilisez le android:screenReaderFocusable sur les conteneurs du groupe interne. Ce schéma d'étiquetage offre une bonne équilibre entre le nombre d'annonces nécessaires pour découvrir le contenu et la durée de chaque annonce.

L'extrait de code suivant présente une méthode d'ajout de libellés pour des groupes imbriqués dans d'autres groupes :

<!-- 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>

Titres dans le texte

Certaines applications utilisent des titres pour récapituler les groupes de texte qui apparaissent à l'écran. Si un élément View particulier représente un titre, vous pouvez indiquer son objectif aux services d'accessibilité en définissant l'attribut android:accessibilityHeading de l'élément sur true.

Les utilisateurs de services d'accessibilité peuvent choisir de naviguer d'un titre à l'autre plutôt que d'un paragraphe/mot à un autre. Cette flexibilité améliore l'expérience de navigation dans le texte.

Titres accessibles pour les volets

Sous Android 9 (niveau d'API 28) ou version ultérieure, vous pouvez fournir des titres accessibles pour les volets d'un écran. Pour des raisons d'accessibilité, un volet est une partie distincte d'une fenêtre, comme le contenu d'un fragment. Pour que les services d'accessibilité comprennent comme une fenêtre, attribuez des titres descriptifs aux volets. Les services d'accessibilité peuvent ensuite fournir des informations plus précises aux utilisateurs lorsque l'apparence ou le contenu d'un volet changent.

Pour spécifier le titre d'un volet, utilisez l'attribut android:accessibilityPaneTitle, comme indiqué dans l'extrait de code suivant :

<!-- 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" ... />

Éléments décoratifs

Si un élément de votre UI n'existe qu'à des fins d'espacement ou d'apparence visuelle, définissez son attribut android:importantForAccessibility sur "no".

Ajouter des actions d'accessibilité

Il est important de permettre aux utilisateurs des services d’accessibilité d’effectuer facilement toutes les flux utilisateur dans votre application. Par exemple, si un utilisateur peut balayer un élément cette action peut aussi être exposée aux services d'accessibilité pour que les utilisateurs une autre façon de compléter le même flux utilisateur.

Rendre toutes les actions accessibles

Vous utilisez TalkBack (Voice Access) ou Switch Access peuvent nécessiter d'autres moyens pour terminer certains parcours utilisateur dans l'application. Pour les actions associées aux gestes, comme glisser-déposer ou balayer l'écran, votre application peut exposer les actions d'une manière accessible aux utilisateurs services d'accessibilité.

À l'aide d'actions d'accessibilité, l'application peut proposer d'autres moyens aux utilisateurs d'effectuer une action.

Par exemple, si votre application permet aux utilisateurs de balayer un élément, vous pouvez également Exposez la fonctionnalité via une action d'accessibilité personnalisée, comme ceci:

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
}

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:

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
)

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

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

Il est préférable que la nouvelle classe TriSwitch hérite directement de la classe Switch. Ainsi, l'accessibilité des appareils Android cadre de référence fournit la plupart des fonctionnalités d'accessibilité de la classe TriSwitch ; a besoin:

• Actions d'accessibilité:informations destinées au système sur la façon dont l'accessibilité peuvent émuler chaque entrée utilisateur possible effectuée sur un TriSwitch. . (Hérité de View.)
• Événements d'accessibilité:informations concernant les services d'accessibilité pour tous manière dont l'apparence d'un objet TriSwitch peut changer lorsque l'écran des actualisations ou des mises à jour. (Hérité de View.)
• Caractéristiques:informations détaillées sur chaque objet TriSwitch, comme le le contenu de n'importe quel texte qu'il affiche. (Hérité de TextView.)
• Informations d'état:description de l'état actuel d'un objet TriSwitch. comme "coché" ou « décochée ». (Hérité de CompoundButton.)
• Description textuelle de l'état:explication textuelle de chaque état représente. (Hérité de Switch.)

Ce comportement de Switch et de ses super-classes est presque même comportement pour les objets TriSwitch. Par conséquent, votre implémentation peut se concentrent sur l'augmentation du nombre d'états possibles de deux à trois.

Définir des événements personnalisés

Lorsque vous étendez un widget système, vous modifiez probablement un aspect de l'interaction des utilisateurs avec ce widget. Il est important de définir ces changements d'interaction afin que les services d'accessibilité puissent mettre à jour le widget de votre application comme si l'utilisateur interagit directement avec le widget.

En règle générale, pour chaque rappel basé sur une vue que vous remplacez, vous devez également redéfinir l'action d'accessibilité correspondante en remplaçant ViewCompat.replaceAccessibilityAction() Dans les tests de votre application, vous pouvez valider le comportement de ces actions redéfinies en appelant ViewCompat.performAccessibilityAction().

Fonctionnement de ce principe pour les objets TriSwitch

Contrairement à un objet Switch ordinaire, le fait d'appuyer sur un objet TriSwitch le fait défiler trois états possibles. Par conséquent, l'action d'accessibilité ACTION_CLICK correspondante doit être mise à jour :

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
    }
}

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;
    }
}

Utiliser des signaux autres que la couleur

Pour aider les utilisateurs qui ne distinguent pas bien les couleurs, utilisez des signaux autres que la couleur pour séparer les éléments d'UI sur les écrans de votre application. Ces techniques peuvent inclure l’utilisation de différentes formes ou tailles, la fourniture de texte ou de modèles visuels, ou en ajoutant un retour audio ou tactile (haptique) pour marquer les éléments les différences.

La figure 1 illustre deux versions d'une activité. Une version n'utilise que la couleur pour distinguer deux actions possibles dans un workflow. L'autre version applique la bonne pratique qui consiste à inclure des formes et du texte en plus de la couleur pour mettre en évidence les différences entre les deux options :

Rendre les contenus multimédias plus accessibles

Si vous développez une application qui inclut du contenu multimédia, comme un extrait vidéo ou un enregistrement audio, essayez d'aider les utilisateurs ayant différents besoins d'accessibilité à comprendre ce contenu. Nous vous encourageons en particulier à :

• inclure des commandes permettant aux utilisateurs de mettre en pause ou d'arrêter la lecture d'un contenu multimédia, de régler le volume et d'activer ou de désactiver les sous-titres ;
• Si une vidéo présente des informations essentielles à la réalisation d'un flux de travail, fournir le même contenu dans un autre format, tel qu'une transcription

Ressources supplémentaires

Pour en savoir plus sur la manière de rendre votre application plus accessible, consultez les ressources supplémentaires suivantes :

Ateliers de programmation

• Démarrage d'Android accessibilité

Articles de blog

• Accessibilité : tous vos utilisateurs peuvent-ils accéder à l'ensemble de vos services ?