Nom de l'ImageView

Ce que nous vérifions

Les éléments d'image focalisables doivent avoir un nom accessible afin que TalkBack puisse annoncer des informations significatives sur l'image. Les images qui véhiculent des informations ont besoin d'une description de contenu ; les images purement décoratives ne doivent pas recevoir de focus du tout.

En un coup d'œil

• Cette règle a un impact critique pour les utilisateurs
• Les images informatives doivent avoir un contentDescription qui décrit avec précision ce que l'image véhicule
• Les images décoratives ne doivent pas recevoir de focus individuellement — cachez-les des technologies d'assistance
• Évitez les descriptions vagues comme “image” ou “icône” — décrivez la signification ou l'objectif de l'image
• TalkBack lit à haute voix le contentDescription ; s'il est absent, l'image est silencieuse pour les utilisateurs de lecteurs d'écran

Exemple d'échec ❌

name = {aucun}

TalkBack n'annonce que le rôle
“Image”

L'utilisateur ne reçoit pas l'information transmise par l'image

Exemple réussi ✅

name = “Skyline du centre-ville au coucher du soleil”

TalkBack annonce the name and role

L'utilisateur est informé du contenu de l'image

Impact sur les utilisateurs

Les personnes utilisant TalkBack sont les plus touchées par les problèmes détectés par cette règle. Lorsqu'un ImageView transmet des informations visuellement mais n'a pas de nom accessible, TalkBack n'annoncera rien. Les utilisateurs qui dépendent des lecteurs d'écran manqueront complètement cette information.

Les images décoratives qui reçoivent incorrectement le focus peuvent créer une expérience perturbante, créant du bruit pendant la navigation sans rien communiquer de significatif.

Les images informatives doivent utiliser contentDescription pour fournir tout contexte et détail nécessaires via TalkBack.

Confirmer le Problème de Nom de l'ImageView

1. Activez TalkBack
2. Effectuez un geste de "touch to explore" sur l'image
3. L'une des choses suivantes se produira :
   • Pour les images informatives :
     • Inaccessible : L'élément reçoit le focus mais TalkBack n'annonce rien de significatif, ou annonce seulement un nom de fichier
     • Accessible : Reçoit le focus et annonce une description significative
   • Pour les images décoratives :
     • Inaccessible : L'image reçoit le focus individuellement et TalkBack n'annonce rien d'utile
     • Accessible : Ne reçoit pas le focus individuellement (dans un groupe, c'est accepté)

Corriger les Problèmes

Pour résoudre les problèmes de Nom de l'ImageView, fournissez un contentDescription pour les images qui véhiculent des informations, et retirez le focus des images purement décoratives. La description doit véhiculer la même information qu'un utilisateur voyant obtient de l'image. En tant que bonne pratique, décrivez le sens de l'image dans le contexte, pas seulement son apparence visuelle.

XML

Pour les images informatives, définissez contentDescription directement dans votre mise en page.

  <ImageView
      android:id="@+id/promo_banner"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:contentDescription="Promotional banner: Ask your travel agent about our latest deals!"
      android:src="@drawable/promo_banner" />

Pour les images décoratives, définissez importantForAccessibility="no" pour les masquer à TalkBack.

  <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:importantForAccessibility="no"
      android:src="@drawable/background" />

Pour une association programmée, utilisez setContentDescription dans le code :

  ImageView image = findViewById(R.id.promo_banner);
  image.setContentDescription("Promotional banner: Ask your travel agent about our latest deals!");

Compose

Pour les images informatives, définissez un contentDescription descriptif sur Image.

  Image(
      painter = painterResource(id = R.drawable.promo_banner),
      contentDescription = "Promotional banner: Ask your travel agent about our latest deals!"
  )

Pour les décoratives, définissez le contentDescription sur Image comme null pour les masquer à TalkBack.

  Image(
      painter = painterResource(id = R.drawable.background),
      contentDescription = null
  )

Android natif

Définissez un contentDescription sur les images informatives pour décrire leur but.

ImageView image = .......;
image.setContentDescription("Promotional banner: Ask your travel agent about our latest deals!");

React Native

Si une image transmet une information dont l'utilisateur a besoin, marquez-la comme accessible={true} et fournissez une valeur descriptive pour le accessibilityLabel.

<Image
    ...
    accessible={true}
    accessibilityRole="image"
    accessibilityLabel="Promotional banner: Ask your travel agent about our latest deals!"
/>

Si l'image est décorative et ne transmet pas d'information unique, marquez-la comme accessible={false} afin qu'elle ne soit pas focalisable.

<Image
    ...
    accessible={false}
/>

.NET MAUI

Les images qui n'ont pas reçu de description de contenu dans .NET MAUI sont automatiquement marquées comme non importantes pour l'accessibilité. Cela signifie que toute image à laquelle on n'a pas intentionnellement donné une description est considérée par axe DevTools Mobile comme une image décorative, alors qu'elle n'avait peut-être pas vocation à être décorative. Assurez-vous que toutes les images véhiculant des informations ou un contexte reçoivent une description appropriée.

Si l'image transmet des informations, définissez un SemanticProperties.Description descriptif pour communiquer cette information.

<Image
    ...
    SemanticProperties.Description="Promotional banner: Ask your travel agent about our latest deals!"
/> 

Sinon, fournissez un élément Label visible sous l'élément Image pour relayer cette information.

<StackLayout
    HorizontalOptions="FillAndExpand"
    VerticalOptions="StartAndExpand">        
    <Image
        BindingContext="{x:Reference imageLabel}"
        SemanticProperties.Description="{Binding Path=Text}"
        ...
    /> 

    <Label
         x:Name="imageLabel"
         Text="Promotional banner: Ask your travel agent about our latest deals!"
         ...
    />
</StackLayout>

Flutter

Enveloppez les images significatives dans un élément Semantics, avec image: true et un label descriptif afin que le lecteur d'écran puisse annoncer ce que l'image véhicule.

  // Failing — image has no accessible name
  Semantics(
    image: true,
    child: Image.asset('assets/company_logo.png'),
  )

  // Passing — descriptive label provided
  Semantics(
    label: 'Deque company logo',
    image: true,
    child: Image.asset('assets/company_logo.png'),
  )

Pour les images décoratives qui ne transmettent pas de sens, excluez-les entièrement de l'arbre d'accessibilité afin que les lecteurs d'écran les ignorent :

ExcludeSemantics(
    child: Image.asset('assets/decorative_divider.png'),
)

Puis-je ignorer cette règle ?

Le nom ImageView a un impact critique pour les utilisateurs, et nous recommandons fortement de corriger tous les problèmes identifiés. Une image informative sans nom accessible est totalement invisible pour les utilisateurs de TalkBack, et ils ne reçoivent aucune information sur ce que l'image communique. Ignorez cette règle uniquement quand vous avez vérifié que l'image est véritablement décorative et ne reçoit aucune concentration indépendante. En savoir plus sur ignorer les règles.

Ressources

Pages de Cours Deque University

• 1.1.1 Contenu non textuel (A)

Remarque : Un abonnement est requis pour un accès complet aux ressources de Deque University.

Autres ressources

• Directives pour l'accessibilité du contenu Web (WCAG) 2.0, Recommandation du W3C
  • Critère de succès 1.1.1 - Contenu non textuel
• Documents de compréhension de WCAG 2.0
  • Comprendre 1.1.1 A - Contenu non textuel