Nom de l'ImageView

Ce que nous vérifions

Les éléments d'image focalisables doivent avoir un nom accessible pour que VoiceOver puisse annoncer des informations significatives sur l'image. Les images qui véhiculent des informations ont besoin d'une étiquette d'accessibilité ; les images purement décoratives ne devraient pas être mises au point.

En résumé

• Cette règle a un impact critique pour les utilisateurs
• Les images informatives doivent avoir un accessibilityLabel qui décrit précisément ce que l'image véhicule
• Les images décoratives ne doivent pas recevoir de focus — 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
• VoiceOver lit le accessibilityLabel à haute voix ; s'il manque, l'image est silencieuse pour les utilisateurs de lecteurs d'écran

Exemple d'échec ❌

name = {aucun}

VoiceOver annonce uniquement le rôle
« Image »

L'utilisateur ne reçoit pas l'information véhiculée par l'image

Exemple correct ✅

name = « Skyline du centre-ville au coucher du soleil »

VoiceOver annonce the name and role

L'utilisateur est informé sur le contenu de l'image

Impact pour les utilisateurs

Les personnes utilisant VoiceOver sont les plus affectées par les problèmes détectés par cette règle. Lorsqu'une image véhicule des informations visuelles mais n'a pas de nom accessible, VoiceOver n'annonce rien. Les utilisateurs qui dépendent des lecteurs d'écran manqueront complètement ces informations.

Les images décoratives qui reçoivent incorrectement le focus peuvent créer une expérience perturbatrice, créant du bruit lors de la navigation sans communiquer quoi que ce soit de significatif.

Les images informatives devraient utiliser accessibilityLabel pour fournir tous les contextes et détails nécessaires via VoiceOver.

Confirmez le problème du nom de l'ImageView

1. Activez VoiceOver
2. Balayez vers la droite pour naviguer vers l'image, ou faites glisser votre doigt sur l'écran pour explorer par le toucher
3. L'un des cas suivants se produira :
   • Pour les images informatives :
     • Inaccessible : L'élément reçoit le focus mais VoiceOver n'annonce rien de significatif, ou annonce uniquement 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 VoiceOver n'annonce rien d'utile
     • Accessible : Ne reçoit pas le focus individuellement (dans un groupe est accepté)

Corriger les problèmes

Pour résoudre les problèmes de nom de l'ImageView, fournissez un accessibilityLabel pour les images qui véhiculent des informations, et retirez le focus des images purement décoratives. La description doit transmettre la même information qu'un utilisateur voyant obtient de l'image. Comme bonne pratique, décrivez la signification de l'image en contexte, pas seulement son apparence visuelle.

UIKit

Un problème détecté par cette règle est causé par le non-usage de accessibilityLabel, ou par le marquage inexact d'une image comme élément d'accessibilité.

Dans le storyboard :

1. Accédez à l'image
2. Assurez-vous que le panneau des inspecteurs est visible
3. Sélectionnez l'inspecteur d'identité
4. Si l'image véhicule des informations nécessaires à l'utilisateur, sous « Accessibilité », écrivez l'information dans le champ texte « Étiquette »
5. Si l'image ne véhicule pas des informations nécessaires à l'utilisateur, sous « Accessibilité », désélectionnez la case « Activé »

Dans le code :

Si l'image véhicule des informations nécessaires à l'utilisateur, donnez-lui un accessibilityLabel descriptif pour relayer cette information.

image.accessibilityLabel = "Promotional banner: Ask your travel agent about our latest deals!"

Pour les images décoratives qui ne véhiculent pas de signification, marquez isAccessibilityElement comme 'faux' afin qu'elles ne soient pas focalisables.

image.isAccessibilityElement = false

SwiftUI

Si une image véhicule des informations nécessaires à l'utilisateur, définissez .accessibility(label: Text("<meaningful description>")) sur l'image. Alternativement, utilisez l'initialisateur Image, qui inclut le paramètre d'étiquette.

Image("format_info", label: Text("Promotional banner: Ask your travel agent about our latest deals!"))

Si l'image ne transmet pas d'informations nécessaires à l'utilisateur - lorsqu'elle est décorative ou en arrière-plan, par exemple - masquez-la pour les technologies d'assistance.

Image("background_blue")
    .accessibility(hidden: true)

React Native

Si une image transmet des informations nécessaires à l'utilisateur, 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!"
/>

Marquez les images décoratives qui n'ont pas de signification comme accessible={false} afin qu'elles ne soient pas focalisables.

<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 non intentionnellement décrite est considérée par axe DevTools Mobile comme une image décorative, alors qu'elle n'était peut-être pas destinée à l'être. Assurez-vous que toutes les images fournissant des informations ou un contexte aient une description appropriée.

Si l'image fournit des informations à l'utilisateur, 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 transmettre ces informations.

<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 pour que le lecteur d'écran puisse annoncer ce que l'image communique.

  // 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 n'ont pas de signification, 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 ?

ImageView Name a un impact critique pour les utilisateurs, et nous recommandons fortement de corriger tous les problèmes découverts. Une image informative sans nom accessible est entièrement invisible pour les utilisateurs de VoiceOver, qui ne reçoivent aucune information sur ce que l'image communique. Ignorez cette règle uniquement après avoir vérifié que l'image est réellement décorative et ne reçoit pas de mise en évidence indépendante. En savoir plus sur ignorer les règles.

Ressources

Pages de cours Deque University

• 1.1.1 Contenu non textuel (A)

Remarque : L'accès complet aux ressources de Deque University nécessite un abonnement.

Autres ressources

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