Nome ImageView

Cosa Controlliamo

Gli elementi immagine che possono ricevere focus devono avere un nome accessibile affinché VoiceOver possa annunciare informazioni significative sull'immagine. Le immagini che trasmettono informazioni necessitano di un'etichetta di accessibilità; le immagini puramente decorative non dovrebbero ricevere focus.

A Colpo d'Occhio

• Questa regola ha un impatto critico per gli utenti
• Le immagini informative devono avere un accessibilityLabel che descrive accuratamente ciò che l'immagine trasmette
• Le immagini decorative non dovrebbero ricevere focus — nascondile alle tecnologie assistive
• Evita descrizioni vaghe come "immagine" o "icona" — descrivi il significato o lo scopo dell'immagine
• VoiceOver legge ad alta voce il accessibilityLabel; se manca, l'immagine è silenziosa per gli utenti di screen reader

Esempio Errato ❌

name = {nessuno}

VoiceOver annuncia solo il ruolo
"Immagine"

L'utente non riceve le informazioni trasmesse dall'immagine

Esempio Corretto ✅

name = "Skyline del centro città al tramonto"

VoiceOver annuncia the name and role

L'utente è informato sul contenuto dell'immagine

Impatto sugli Utenti

Le persone che utilizzano VoiceOver sono maggiormente colpite dai problemi individuati da questa regola. Quando un'immagine trasmette informazioni visive ma non ha un nome accessibile, VoiceOver non annuncerà nulla. Gli utenti che si affidano ai screen reader perderanno completamente quelle informazioni.

Le immagini decorative che ricevono focus in modo errato possono creare un'esperienza disturbante, generando rumore durante la navigazione senza comunicare nulla di significativo.

Le immagini informative dovrebbero usare accessibilityLabel per fornire qualsiasi contesto e dettaglio necessario tramite VoiceOver.

Conferma il Problema del Nome ImageView

1. Attiva VoiceOver
2. Scorri verso destra per navigare all'immagine, o trascina il dito sullo schermo per esplorare col tocco
3. Si verificherà una delle seguenti cose:
   • Per immagini informative:
     • Inaccessibile: L'elemento riceve focus ma VoiceOver non annuncia nulla di significativo, o annuncia solo un nome file
     • Accessibile: Riceve focus e annuncia una descrizione significativa
   • Per immagini decorative:
     • Inaccessibile: L'immagine riceve focus individualmente e VoiceOver non annuncia nulla di utile
     • Accessibile: Non riceve focus individualmente (all'interno di un gruppo è accettato)

Correggi i Problemi

Per risolvere i problemi del Nome ImageView, fornisci un accessibilityLabel per le immagini che trasmettono informazioni e rimuovi il focus dalle immagini puramente decorative. La descrizione dovrebbe trasmettere le stesse informazioni che un utente vedente ottiene dall'immagine. Come best practice, descrivi il significato dell'immagine nel contesto, non solo il suo aspetto visivo.

UIKit

Un problema individuato da questa regola è causato dal non utilizzo di accessibilityLabel, o dal contrassegnare erroneamente un'immagine come elemento di accessibilità.

Nello storyboard:

1. Naviga all'immagine
2. Conferma che il Pannello degli Ispettori sia visibile
3. Seleziona l'Ispettore Identità
4. Se l'immagine trasmette informazioni di cui l'utente ha bisogno, sotto "Accessibilità", scrivi le informazioni nel campo di testo "Etichetta"
5. Se l'immagine non trasmette informazioni di cui l'utente ha bisogno, sotto "Accessibilità", deseleziona la casella di controllo "Abilitato"

Nel codice:

Se l'immagine trasmette informazioni di cui l'utente ha bisogno, dagli un accessibilityLabel descrittivo per trasmettere quelle informazioni.

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

Per le immagini decorative che non trasmettono significato, imposta isAccessibilityElement su 'false' in modo che non siano focalizzabili.

image.isAccessibilityElement = false

SwiftUI

Se un'immagine trasmette informazioni di cui l'utente ha bisogno, imposta .accessibility(label: Text("<meaningful description>")) sull'immagine. In alternativa, usa l'inizializzatore Image, che include il parametro di etichetta.

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

Se l'immagine non fornisce informazioni necessarie all'utente - quando è decorativa, o uno sfondo, ad esempio - nascondila alla tecnologia assistiva.

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

React Native

Se un'immagine fornisce informazioni necessarie all'utente, contrassegnala come accessible={true} e fornisci un valore descrittivo per il accessibilityLabel.

<Image
    ...
    accessible={true}
    accessibilityRole="image"
    accessibilityLabel="Promotional banner: Ask your travel agent about our latest deals!"
/>

Contrassegna le immagini decorative che non trasmettono significato come accessible={false} affinché non siano focalizzabili.

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

.NET MAUI

Le immagini che non sono state dotate di una descrizione del contenuto in .NET MAUI sono automaticamente contrassegnate come non importanti per l'accessibilità. Questo significa che qualsiasi immagine non intenzionalmente dotata di una descrizione passa in axe DevTools Mobile come immagine decorativa, quando potrebbe non essere stata intesa come tale. Assicurati che tutte le immagini che trasmettono informazioni o contesto siano dotate di una descrizione appropriata.

Se l'immagine fornisce informazioni all'utente, imposta una SemanticProperties.Description descrittiva per comunicare quelle informazioni.

<Image
    ...
    SemanticProperties.Description="Promotional banner: Ask your travel agent about our latest deals!"
/> 

In alternativa, fornisci un elemento Label visibile sotto l'elemento Image per trasmettere quella informazione.

<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

Avvolgi le immagini significative in un elemento Semantics con image: true e un label descrittivo così il lettore di schermo può annunciare cosa comunica l'immagine.

  // 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'),
  )

Per le immagini decorative che non trasmettono significato, escludile interamente dall'albero dell'accessibilità in modo che i lettori di schermo le ignorino:

ExcludeSemantics(
    child: Image.asset('assets/decorative_divider.png'),
)

Posso ignorare questa regola?

ImageView Name ha un Impatto critico per gli utenti, e raccomandiamo fortemente di correggere tutti i problemi trovati. Un'immagine informativa senza un nome accessibile è completamente invisibile agli utenti di VoiceOver, e non ricevono alcuna informazione su cosa comunica l'immagine. Ignora questa regola solo quando hai verificato che l'immagine è veramente decorativa e non riceve focus indipendente. Scopri di più su ignorare le regole.

Risorse

Pagine dei Corsi di Deque University

• 1.1.1 Contenuto non testuale (A)

Nota: L'accesso completo alle risorse di Deque University richiede un abbonamento.

Altre Risorse

• Linee Guida per l'Accessibilità dei Contenuti Web (WCAG) 2.0, Raccomandazione W3C
  • Criterio di Successo 1.1.1 - Contenuto non testuale
• Documenti di Comprensione WCAG 2.0
  • Comprendere 1.1.1 A - Contenuto non testuale