Nom de l'ImageView

Les éléments d'image pouvant recevoir le focus doivent fournir un nom accessible et significatif disponible pour les technologies d'assistance telles que TalkBack et Voice Access.

Impact

Les personnes qui utilisent TalkBack seront les plus touchées par les problèmes détectés. Si un ImageView fournit des informations aux utilisateurs avec des problèmes de vision et ne fournit pas de nom, TalkBack n'annoncera rien et ces informations sont manquantes pour les expériences utilisateur avec TalkBack.

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

Confirmation

1. Activer TalkBack
2. Effectuez un geste « toucher pour explorer » sur la commande
3. Pour des images informatives :
   
   • Accessible : reçoit le focus et annonce une description significative.
   
   
   Pour les images décoratives :
   
   • Accessible : Ne reçoit pas le focus individuellement. Au sein d'un groupe est accepté.

Comment corriger

Android natif

ImageView image = .......;
image.setContentDescription("A form highlighting the name field in a red box with an error message below that reads Invalid name: special characters are not accepted.");

React Native

Si l'image présente des informations dont l'utilisateur a besoin, donnez-lui une légende descriptive accessibilityLabel pour relayer ces informations et définissez la propriété accessible sur true :

<Image
    ...
    accessible={true}
    accessibilityLabel="A form highlighting the name field in a red box with an error message below that reads Invalid name: special characters are not accepted."
/>

Si l'image ne présente pas d'informations uniques, comme un arrière-plan ou une image décorative, faites en sorte 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 aucune description n'est intentionnellement attribuée passe dans axe DevTools Mobile comme une image décorative, alors qu'elle n'était peut-être pas destinée à être une image décorative. Assurez-vous que toutes les images qui transmettent des informations ou un contexte reçoivent une description appropriée.

Option 1 : Si l'image présente des informations dont l'utilisateur a besoin, donnez-lui une description SemanticProperties.Description pour relayer ces informations.

<Image
    ...
    SemanticProperties.Description="A form highlighting the name field in a red box with an error message below that reads Invalid name: special characters are not accepted."
/> 

Option 2 : Si l'image présente des informations dont l'utilisateur a besoin, fournissez un élément Label sous l'élément Image pour soutenir ces informations.

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

    <Label
         x:Name="imageLabel"
         Texte = « Un formulaire mettant en évidence le champ du nom dans une case rouge avec un message d'erreur en dessous indiquant Nom non valide : les caractères spéciaux ne sont pas acceptés. »
         ...
    />
</StackLayout>