Nome ImageView

Gli elementi immagine focalizzabili dovrebbero fornire un nome accessibile e significativo, disponibile per tecnologie assistive come TalkBack e Voice Access.

Impatto

Le persone che utilizzano TalkBack saranno le più colpite dai problemi riscontrati. Se un ImageView fornisce informazioni agli utenti con disabilità visive e non fornisce un nome, TalkBack non annuncerà nulla e tali informazioni mancheranno per l'esperienza utente con TalkBack.

Le immagini informative dovrebbero utilizzare contentDescription per fornire qualsiasi contesto e dettaglio necessario tramite TalkBack.

Conferma

1. Attiva TalkBack
2. Esegui un gesto "tocca per esplorare" sul controllo
3. Per immagini informative:
   
   • Accessibile: riceve il focus e annuncia una descrizione significativa.
   
   
   Per immagini decorative:
   
   • Accessibile: non riceve il focus individualmente. All'interno di un gruppo è accettato.

Come risolvere

Android nativo

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

Se l'immagine ritrae informazioni di cui l'utente ha bisogno, assegnale una descrizione accessibilityLabel per trasmettere tali informazioni e imposta la proprietà accessibile su 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."
/>

Se l'immagine non raffigura informazioni uniche, come uno sfondo o un'immagine decorativa, rendila non focalizzabile:

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

.NET MAUI

Le immagini a cui non è stata assegnata una descrizione del contenuto in .NET MAUI vengono automaticamente contrassegnate come non importanti per l'accessibilità. Ciò significa che qualsiasi immagine a cui non sia stata intenzionalmente fornita una descrizione viene considerata in axe DevTools Mobile un'immagine decorativa, anche se in origine non era destinata a esserlo. Assicurarsi che tutte le immagini che trasmettono informazioni o contesto siano corredate da una descrizione appropriata.

Opzione 1: se l'immagine raffigura informazioni di cui l'utente ha bisogno, forniscile una descrizione SemanticProperties.Description per trasmettere quelle informazioni.

<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."
/> 

Opzione 2: se l'immagine contiene informazioni di cui l'utente ha bisogno, fornire un Label elemento sotto l' Image elemento per trasmettere quelle informazioni.

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

    <Label
         x:Name="imageLabel"
         Text="Un modulo che evidenzia il campo nome in una casella rossa con un messaggio di errore sottostante che recita Nome non valido: i caratteri speciali non sono accettati."
         ...
    />
</StackLayout>