Nome ImageView

Gli elementi dell'immagine focalizzabili dovrebbero fornire un nome accessibile e significativo, disponibile per tecnologie assistive come VoiceOver e Controllo vocale.

Impatto

Le persone più colpite sono quelle che utilizzano VoiceOver. Le immagini informative devono avere un contesto, informazioni o scopo letti quando vengono visualizzate da VoiceOver.

Conferma

1. Attiva VoiceOver
2. Prova a mettere a fuoco l'immagine
3. Si verificherà una delle seguenti situazioni:
   • Inaccessibile: l'immagine è focalizzabile ma non pronuncia un nome in VoiceOver.
   • Accessibile: l'immagine non è focalizzabile perché non rappresenta informazioni univoche.
   • Accessibile: l'immagine è focalizzabile e ha un nome.

Come risolvere

UIKit

Un problema riscontrato da questa regola è causato dal mancato utilizzo di [missing term] accessibilityLabel o dalla marcatura errata di un'immagine come elemento di accessibilità.

Nello storyboard:

1. Vai all'immagine
2. Verificare che il pannello degli ispettori sia visibile
3. Selezionare l'Identity Inspector
4. Se l'immagine raffigura informazioni di cui l'utente ha bisogno, nella sezione "Accessibilità", scrivi le informazioni nel campo di testo "Etichetta".
5. Se l'immagine non raffigura le informazioni di cui l'utente ha bisogno, deseleziona la casella di controllo "Abilitato" nella sezione "Accessibilità".

Nel codice:

Se l'immagine ritrae informazioni di cui l'utente ha bisogno, fornisci una descrizione accessibilityLabel per trasmettere tali informazioni:

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

Se l'immagine non raffigura le informazioni di cui l'utente ha bisogno, come uno sfondo o un'immagine decorativa, rendila non focalizzabile:

image.isAccessibilityElement = false

SwiftUI

Se un'immagine fornisce le informazioni necessarie all'utente, è possibile impostare .accessibility(label: Text("Accessibility Label Here")) il modificatore di visualizzazione sull'immagine oppure utilizzare l'inizializzatore di immagine, che include il parametro etichetta.

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

Se l'immagine non raffigura informazioni di cui l'utente potrebbe aver bisogno, come uno sfondo o un'immagine decorativa, nascondila con il modificatore di visualizzazione seguente:

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

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 le informazioni di cui l'utente ha bisogno, 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>