Remédiation du scanner d'accessibilité

Votre équipe utilise-t-elle le scanner d'accessibilité Android de Google ?

Cette section fournira des conseils de remédiation pour les règles vérifiées par le scanner. En savoir plus sur l'utilisation de Scanner d'accessibilité et Axe DevTools Mobile.

Visitez les directives du scanner d'accessibilité de Google pour leur liste complète des vérifications actuelles, descriptions et mises à jour.

Étiquetage du contenu

Étiquette de l'élément manquante

Le contenu de la vue peut manquer d'informations contextuelles.

Pour toute vue fournissant des informations à l'utilisateur, fournissez l'une des solutions suivantes pour résoudre ce problème d'accessibilité :

• android:contentDescription : Dans la plupart des cas, ajouter une description du contenu est tout ce qui est nécessaire.
• android:hint : Des indices peuvent être ajoutés pour décrire le type de données que l'utilisateur doit entrer pour les vues de texte modifiable.
• android:labelFor : Cette balise vous permettra d'attribuer une vue comme étiquette pour une autre vue.

Images décoratives

Les images décoratives qui ne fournissent pas d'informations importantes peuvent être marquées comme non importantes pour l'accessibilité.

Pour XML: android:importantForAccessibility="no"

Ou pour Compose :

Image(
      imageVector = Icons.Filled.AccountCircle,
      contentDescription = null // decorative
    )

Élément étiqueté avec type ou état

Une de vos vues peut avoir un état redondant. Android propose des vues par défaut avec des états comme activé, désactivé, coché, ou non coché. Ajouter un état à la lecture peut entraîner une expérience confuse.

Pour résoudre ce problème d'accessibilité, assurez-vous :

• Les cases à cocher ont une étiquette associée pour le contexte
• Les descriptions d'état ne sont pas ajoutées à la description de la vue

<TextView
      android:id="@+id/edit_text_label"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:labelFor="@+id/example"
      android:text="Check Label" />

<androidx.appcompat.widget.AppCompatCheckBox
      android:id="@+id/example"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/with_text"/>

Descriptions d'éléments dupliquées

Plusieurs vues au sein de la hiérarchie ont été trouvées avec des descriptions identiques.

Cela n'est pas un échec WCAG et il peut y avoir des cas où cela est requis. Si les descriptions de contenu sont dupliquées, assurez-vous que chacune fournit suffisamment de contexte pour que l'utilisateur sache quel serait le résultat d'interagir avec la vue.

But du lien peu clair

Tout lien doit contenir suffisamment de texte pour en indiquer la finalité. Lors de l'utilisation de descriptions comme « Cliquez ici », vous devez vous assurer que le texte environnant contient suffisamment d'informations pour décoder le but du lien.

Mise en œuvre - Éléments cliquables

Liens cliquables

Les liens doivent être clairement affichés et facilement accessibles depuis le menu contextuel local. Google suggère d'utiliser URLSpan ou la classe de commodité Linkify pour afficher les hyperliens dans l'interface utilisateur d'une application afin d'accroître la probabilité que ces liens soient détectés et activés.

Vues cliquables dupliquées

L'un des éléments cliquables de votre vue chevauche un autre élément cliquable. Vous pouvez résoudre ce problème d'accessibilité de l'une des manières suivantes :

• Déplacer les éléments cliquables pour qu'ils ne se heurtent pas ou ne se chevauchent pas.
• Si les vues ne peuvent pas être déplacées, assurez-vous que les deux vues ont une zone de clic de taille appropriée et que tout le monde peut interagir avec les éléments sans problème.

Étiquette d'élément modifiable

Les champs modifiables doivent avoir une étiquette décrivant l'objectif du champ.

Un exemple avec EditText :

<TextView
      android:id="@+id/edit_text_label"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:labelFor="@+id/edit_text"
      android:text="Enter your username" />

<EditText
      android:id="@+id/edit_text"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:hint="Hint" />

Un exemple avec CheckBox :

Utilisez un TextView et associez-le à l'élément CheckBox :

val checkBox: CheckBox = ....... // Role: CheckBox
val label: TextView = ....... // Role: Label
label.setLabelFor(checkBox.getId()) // Associate the Checkbox with its Name

Type d'élément non pris en charge

Il semble que vous ayez une vue personnalisée. Modifiez le AccessibilityNodeInfo pour fournir au className un but approprié pour la vue.

val frameLayout = findViewById<FrameLayout>(R.id.custom_view)
frameLayout.setAccessibilityDelegate(object : View.AccessibilityDelegate() {
      override fun onInitializeAccessibilityNodeInfo(
          host: View,
          info: AccessibilityNodeInfo
      ) {
            info.className = "ClassName"
            info.contentDescription = "ContentDescription"
            super.onInitializeAccessibilityNodeInfo(host, info)           
      }
})

Ordre de passage

Si vous pouvez naviguer dans vos vues en utilisant TalkBack d'une manière qui a du sens contextuellement, cela peut être un faux positif et n'a pas besoin d'être adressé.

Si TalkBack ne fournit pas les mêmes informations qu'une lecture de l'application sans technologie d'assistance, vous pourriez envisager de modifier l'ordre des vues. Comme il peut être difficile de bien faire et pourrait également inclure accidentellement l'ajout d'une boucle infinie, nous déconseillons la modification de l'ordre de passage. Pour modifier l'ordre de passage, utilisez android:accessibilityTraversalBefore et android:accessibilityTraversalAfter.

Mise à l'échelle du texte

Les éléments de texte doivent utiliser des pixels évolutifs (sp) plutôt que des pixels indépendants de la densité (dp) pour permettre au texte de s'adapter au réglage de la taille de police du dispositif en matière d'accessibilité.

Taille de la cible tactile

Pour des recommandations et des conseils de remédiation concernant les zones visuelles et tactiles des contrôles actifs, consultez le Règle de taille de la cible tactile pour notre bibliothèque Android.

Faible contraste

Le contraste des couleurs entre le texte et son arrière-plan doit respecter les seuils minimums de ratio de la norme WCAG 2 AA. Apprenez-en plus sur ce ratio et trouvez des conseils de remédiation pour le faible contraste sous la Règle du contraste des couleurs pour notre bibliothèque Android.