Nome ImageView

Cosa Controlliamo

Gli elementi immagine focalizzabili devono avere un nome accessibile affinché TalkBack possa annunciare informazioni significative sull'immagine. Le immagini che trasmettono informazioni necessitano di una descrizione del contenuto; le immagini puramente decorative non dovrebbero ricevere alcun focus.

In Sintesi

• Questa regola ha un impatto critico per gli utenti
• Le immagini informative devono avere un contentDescription che descriva accuratamente ciò che l'immagine trasmette
• Le immagini decorative non dovrebbero ricevere focus individualmente — nascondile dalla tecnologia assistiva
• Evita descrizioni vaghe come "immagine" o "icona" — descrivi il significato o lo scopo dell'immagine
• TalkBack legge ad alta voce il contentDescription; se manca, l'immagine è silenziosa per gli utenti del lettore di schermo

Esempio di Errore ❌

name = {nessuno}

TalkBack annuncia solo il ruolo
"Immagine"

L'utente non riceve le informazioni trasmesse dall'immagine

Esempio Corretto ✅

name = "Skyline del centro al tramonto"

TalkBack annuncia the name and role

L'utente è informato sul contenuto dell'immagine

Impatto sugli Utenti

Le persone che usano TalkBack sono maggiormente influenzate dai problemi rilevati da questa regola. Quando un ImageView trasmette informazioni visivamente ma non ha un nome accessibile, TalkBack non annuncerà nulla. Gli utenti che si affidano ai lettori di schermo perderanno completamente quelle informazioni.

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

Le immagini informative dovrebbero utilizzare contentDescription per fornire il contesto e i dettagli necessari tramite TalkBack.

Conferma Problema Nome ImageView

1. Attiva TalkBack
2. Esegui un gesto "tocca per esplorare" sull'immagine
3. Si verificherà una delle seguenti eventualità:
   • Per immagini informative:
     • Inaccessibile: L'elemento riceve focus ma TalkBack 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 TalkBack non annuncia nulla di utile
     • Accessibile: Non riceve focus individualmente (all'interno di un gruppo è accettato)

Correggi i Problemi

Per risolvere i problemi di Nome ImageView, fornisci un contentDescription 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 migliore pratica, descrivi il significato dell'immagine nel contesto, non solo il suo aspetto visivo.

XML

Per le immagini informative, imposta direttamente contentDescription nel tuo layout.

  <ImageView
      android:id="@+id/promo_banner"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:contentDescription="Promotional banner: Ask your travel agent about our latest deals!"
      android:src="@drawable/promo_banner" />

Per le immagini decorative, imposta importantForAccessibility="no" per nasconderle da TalkBack.

  <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:importantForAccessibility="no"
      android:src="@drawable/background" />

Per l'associazione programmatica, usa setContentDescription nel codice:

  ImageView image = findViewById(R.id.promo_banner);
  image.setContentDescription("Promotional banner: Ask your travel agent about our latest deals!");

Compose

Per immagini informative, imposta un contentDescription descrittivo su Image.

  Image(
      painter = painterResource(id = R.drawable.promo_banner),
      contentDescription = "Promotional banner: Ask your travel agent about our latest deals!"
  )

Per le decorative, imposta il contentDescription su Image come null per nasconderle da TalkBack.

  Image(
      painter = painterResource(id = R.drawable.background),
      contentDescription = null
  )

Android Nativo

Imposta un contentDescription sulle immagini informative per descrivere il loro scopo.

ImageView image = .......;
image.setContentDescription("Promotional banner: Ask your travel agent about our latest deals!");

React Native

Se un'immagine trasmette informazioni necessarie all'utente, segnalala 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!"
/>

Se l'immagine è decorativa e non trasmette informazioni uniche, segnalala come accessible={false} in modo che non sia focalizzabile.

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

.NET MAUI

Le immagini a cui non è stata data una descrizione del contenuto in .NET MAUI vengono automaticamente contrassegnate come non importanti per l'accessibilità. Ciò significa che qualsiasi immagine a cui non è stata deliberatamente data una descrizione viene considerata in axe DevTools Mobile come un'immagine decorativa, anche se potrebbe non essere stata intesa come tale. Assicurati che tutte le immagini che trasmettono informazioni o contesto siano fornite di una descrizione appropriata.

Se l'immagine trasmette informazioni, imposta un SemanticProperties.Description descrittivo 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 quelle informazioni.

<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 in modo che il lettore di schermo possa annunciare ciò che l'immagine trasmette.

  // 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 completamente 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 risolvere tutti i problemi riscontrati. Un'immagine informativa senza un nome accessibile è completamente invisibile agli utenti di TalkBack, che non ricevono alcuna informazione su ciò che l'immagine comunica. Ignora questa regola solo quando hai verificato che l'immagine è veramente decorativa e non riceve alcuna attenzione indipendente. Scopri di più su ignorare le regole.

Risorse

Pagine dei Corsi Deque University

• 1.1.1 Contenuto non testuale (A)

Nota: Il pieno accesso 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
• Documentazione di comprensione WCAG 2.0
  • Comprensione 1.1.1 A - Contenuto non testuale