Che cos'è il testo alternativo?

Il testo alternativo è l'alternativa scritta di un'immagine, contenuta nell'attributo alt dell'elemento immagine in HTML. Le tecnologie assistive lo leggono al posto della figura, i browser lo mostrano quando l'immagine non si carica e i motori di ricerca lo usano come segnale per interpretare il contenuto visivo. In una vetrina l'attributo riguarda le fotografie di prodotto, i banner di categoria, le guide alle taglie in forma di immagine, le icone di pagamento e consegna e i visual di campagna. Benché venga spesso chiamato tag alt, si tratta di un attributo di un elemento e non di un tag autonomo.

Definizione

Le Web Content Accessibility Guidelines richiedono un'alternativa testuale per i contenuti non testuali nel criterio di successo 1.1.1, livello di conformità A. La regola non impone di descrivere ogni immagine, ma di trasmetterne lo stesso scopo: una foto informativa di prodotto richiede una descrizione specifica, un'immagine decorativa prende un attributo alt vuoto perché le tecnologie assistive la ignorino e un'immagine usata come collegamento descrive la destinazione anziché la figura. Nell'Unione Europea lo European Accessibility Act estende gli obblighi di accessibilità ai servizi di e-commerce rivolti ai consumatori. Accumulare parole chiave nell'attributo non serve a nessuno dei due pubblici.

Perché è importante

In una vetrina composable le immagini provengono da un PIM, da un DAM o da un CMS, quindi il testo alternativo appartiene all'asset in quel sistema e viaggia attraverso l'API insieme all'URL dell'immagine, localizzato per mercato come ogni altro campo di contenuto. I componenti di frontend dovrebbero trattare il valore come una proprietà obbligatoria invece di ricavarlo dal nome del file, e le immagini prive di testo fornito dovrebbero produrre un attributo vuoto anziché un segnaposto. Le pipeline di immagini responsive che generano più rendering mantengono una sola alternativa per asset, e il lazy loading non deve mai rinviare l'attributo.

Casi d'uso

Nelle schede prodotto ogni immagine della galleria descrive ciò che la distingue, come una vista posteriore, un dettaglio del tessuto o un riferimento di scala. Nelle pagine di listino l'alternativa ripete di norma il nome del prodotto e la variante raffigurata, mantenendo leggibile il markup della scheda. I banner che contengono un'offerta nella grafica richiedono la stessa offerta anche in testo, altrimenti il messaggio si perde quando le immagini non sono disponibili. Contenuti editoriali e gallerie generate dagli utenti seguono la stessa regola, mentre separatori e texture decorative restano muti con un attributo vuoto.

Vedi anche

Per approfondire: Image Optimization · SEO.