Esempio: una pagina della biografia con una foto della persona. L'immagine non contiene informazioni utili, tuttavia aggiunge un valore emotivo sufficiente alla pagina che semplicemente rimuoverla non è la soluzione.
Se si imposta il testo alternativo sulla stringa vuota "", ciò impedirebbe agli utenti che navigano con gli screen reader di dover ascoltare informazioni inutili come "un'immagine di John Doe, CEO" quando tali informazioni sono già presenti altrove nella pagina. Tuttavia, impedirebbe agli utenti con connessioni estremamente lente (come sui tablet nelle aree rurali) di sapere quale sarebbe l'immagine prima che finiscano di scaricarla.
Se dai il testo alternativo all'immagine, allora i problemi sarebbero invertiti. Gli utenti con connessioni estremamente lente saprebbero cosa stavano scaricando prima di caricarlo, ma gli utenti non vedenti dovrebbero ascoltare il testo che non trasmette ulteriori informazioni.
Supponendo che ciascuno dei due tipi di utenti detenga una partecipazione uguale nel tuo sito, le immagini dovrebbero essere contrassegnate con un testo alternativo quando non contengono ancora informazioni aggiuntive nel contenuto della pagina principale?
È necessario utilizzare un attributo alt vuoto per le immagini puramente decorative. Direi che nell'esempio che hai dato vale la pena fornire un attributo alt che descriva l'immagine ad es. alt="Portrait of Jane Doe"
. @KitGrose menziona che l'inclusione di questo testo renderà anche l'immagine ricercabile per i motori di ricerca di immagini come Google Image.
Riservo gli attributi alt vuoti per cose come avere un'icona di ricerca accanto al testo "cerca" su un pulsante di ricerca - è puramente decorativo e uno screen reader leggerebbe semplicemente "cerca" due volte se aggiungessi testo alternativo.
L'esempio che dai è contenuto aggiuntivo che può essere utile fare riferimento, anche se la persona non può vederlo.
Poiché la tua preoccupazione principale è che i contenuti vengano letti più volte da una tecnologia di supporto come gli screen reader, puoi aggiungi il aria-hidden
attributo al tuo elemento immagine (e/o imposta role="presentation"
) per informare la tecnologia di supporto che non deve essere letta ad alta voce.
L'immagine non contiene informazioni utili
Direi che contiene informazioni molto utili, perché, beh, descrive la persona della pagina.
Se l'unico motivo per utilizzare un valore alt
vuoto è dovuto alla duplicazione del contenuto (testo), dovresti chiederti: Gli utenti dello screen reader potrebbero comunque scaricare/identificare questa immagine?
Quando utilizzi un valore alt
vuoto per questa foto, gli utenti dello screen reader avrebbero difficoltà a scaricarlo:
alt
)