Nom de l'ImageView

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Not for use with personal data

Les éléments d'image focalisables doivent fournir un nom accessible et significatif disponible pour les technologies d'assistance telles que VoiceOver et Voice Control.

Impact

Les personnes utilisant VoiceOver sont les plus touchées. Les images informatives doivent avoir leur contexte, leurs informations ou leur objectif lus lorsqu'elles sont focalisées par VoiceOver.

Confirmation

Activer VoiceOver
Essayez de focaliser l'image
L'une des situations suivantes se produira :
- Inaccessible : l'image est focalisable mais n'annonce pas de nom dans VoiceOver.
- Accessible : l'image n'est pas focalisable car elle ne véhicule pas d'informations uniques.
- Accessible : l'image est focalisable et possède un nom.

Comment corriger

UIKit

Un problème détecté par cette règle est causé par la non-utilisation de [missing term] ou par le marquage incorrect d'une image comme élément d'accessibilité. accessibilityLabel

Dans le storyboard :

Accéder à l'image
Confirmez que le panneau des inspecteurs est visible
Sélectionnez l'Identity Inspector
Si l'image présente des informations dont l'utilisateur a besoin, sous « Accessibilité », écrivez les informations dans le champ de texte « Étiquette ».
Si l'image ne présente pas les informations dont l'utilisateur a besoin, sous « Accessibilité », décochez la case « Activé ».

Dans le code :

Si l'image présente des informations dont l'utilisateur a besoin, donnez-lui une description détaillée accessibilityLabel pour relayer ces informations :

image.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 les informations dont l'utilisateur a besoin, comme un arrière-plan ou une image décorative, faites en sorte qu'elle ne soit pas focalisable :

image.isAccessibilityElement = false

tip

Dans les applications UIKit, une image sans accessibilityLabel n'est pas focalisable avec la technologie d'assistance par défaut.

Les propriétés que nous utilisons pour vérifier la focalisabilité d'Apple peuvent être inexactes lorsqu'un accessibilityIdentifier est défini sur l'image. En raison de ce comportement inattendu, les résultats des problèmes de nom ImageView dans les applications UIKit seront signalés comme Nécessite une révision. Un rapport de bogue a été déposé auprès d'Apple.

SwiftUI

Si une image fournit des informations dont l'utilisateur a besoin, vous pouvez soit définir .accessibility(label: Text("Accessibility Label Here")) un modificateur d'affichage sur l'image, soit utiliser l'initialiseur d'image, qui inclut le paramètre d'étiquette.

Image("format_info", label: Text("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 dont l'utilisateur pourrait avoir besoin, comme un arrière-plan ou une image décorative, masquez-la avec le modificateur de vue ci-dessous :

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

React Native

important

React Native n'ajoute pas automatiquement le rôle d'accessibilité à de nombreux éléments. Assurez-vous d'ajouter un texte alternatif accessibilityRole="image" à toutes les images que vous souhaitez rendre disponibles pour la technologie d'assistance. L'axe Accessibility Linter VSCode Extension et axe DevTools Linter incluent désormais la prise en charge de React Native qui peut vous aider à détecter des bugs comme ceux-ci avant les tests de l'interface utilisateur.

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 les informations dont l'utilisateur a besoin, 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>