L'immagine ha un'etichetta di accessibilità

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
Free Trial
Not for use with personal data

ID regola: image-has-accessibility-label

WCAG 2.1 (A) 1.1.1

Tutte le immagini devono avere un testo alternativo per comunicare il loro scopo e significato agli utenti di lettori di schermo.

Perché è importante

Di default, gli screen reader non hanno la possibilità di tradurre un'immagine in parole. Le versioni più recenti di VoiceOver e TalkBack dispongono di funzionalità avanzate che tentano di fornire testo per le immagini, ma non sempre ciò è accurato. Di conseguenza, è necessario che le immagini abbiano un testo alternativo breve e descrittivo, in modo che gli utenti di lettori di schermo possano comprendere chiaramente il contenuto e lo scopo dell'immagine.

Per chi non può vedere, tutti i tipi di informazioni visive, come le immagini, sono completamente inutili a meno che non venga fornita un'alternativa testuale digitale che consenta ai lettori di schermo di convertire tale testo in suono o Braille. Lo stesso vale in varia misura per le persone ipovedenti o daltonizzate.

Come risolvere il problema

Assicurarsi che tutti i Image componenti con un accessible prop impostata su true includano anche un accessibilityLabel prop. Inoltre, assicurati che tutti i Image componenti con un accessibilityLabel prop abbiano anche la accessible prop impostata su true per essere disponibili per gli screen reader.

Esempi positivi

<Image
  source={require("pug.jpg")}
  style={styles.image}
  accessible
  accessibilityLabel="A small fawn pug"
/>
<Image
  source={require("pug.jpg")}
  style={styles.image}
  accessible={true}
  accessibilityLabel="A small fawn pug"
/>
<Image
  source={require("pug.jpg")}
  style={styles.image}
  accessible="true"
  accessibilityLabel="A small fawn pug"
/>
<Image
  source={require("pug.jpg")}
  style={styles.image}
  accessible={false}
/>
<Image
  source={require("pug.jpg")}
  style={styles.image}
/>

Esempi negativi

Il componente Image ha una accessible proprietà ma nessuna accessibilityLabel proprietà.

<Image
  source={require("pug.jpg")}
  style={styles.image}
  accessible
/>
<Image
  source={require("pug.jpg")}
  style={styles.image}
  accessible={true}
/>

Il componente Image ha una accessibilityLabel proprietà ma nessuna accessible proprietà.

<Image
  source={require("pug.jpg")}
  style={styles.image}
  accessibilityLabel="A small fawn pug"
/>

Il componente Image con una accessible proprietà non dovrebbe avere una accessibilityLabelproprietà vuota.

<Image
  source={require("pug.jpg")}
  style={styles.image}
  accessible
  accessibilityLabel=""
/>

Risorse