Attributo alt

Ruoli dell’immagine

L’attributo alt su <img> fornisce equivalente testuale per chi non percepisce l’immagine: screen reader, browser con immagini disabilitate, assistenti vocali. Ogni immagine deve avere alt presente: stringa descrittiva, oppure stringa vuota alt="" quando l’immagine non aggiunge informazione. Mancanza dell’attributo è un errore; alt uguale al nome file è quasi sempre inutile.

Immagini decorative

Pattern, divisori grafici, foto di riempimento già descritte nel testo adiacente: usa alt="" così la tecnologia assistiva salta l’elemento. L’immagine resta nel DOM per layout ma non inquieta l’esperienza uditiva.

<img src="/img/pattern.svg" alt="" width="1200" height="400" loading="lazy">

Immagini informative

Descrivi il messaggio rilevante, non ogni dettaglio estetico. Grafico vendite: «Andamento vendite 2025, picco a marzo». Ritratto team: nome e ruolo se serve a identificare, non colore occhi. Se un didascalia accanto ripete tutto, alt può essere breve o vuoto per evitare ripetizione verbatim.

Immagini funzionali

Icona dentro un link o pulsante: l’alt descrive l’azione («Cerca», «Chiudi menu»), non l’aspetto dell’icona. Logo che linka home: alt con nome del sito. Mappe complesse possono richiedere descrizione lunga in testo separato con aria-describedby.

Workflow in redazione

Quando carichi un’immagine nel CMS, compila alt nello stesso passaggio, non «dopo». Per articoli con molte foto, usa template: prima immagine informativa con alt descrittivo, successive decorative se il testo copre già il messaggio. Per infografiche salva anche versione testuale o tabella dati sotto l’immagine: aiuta SEO e accessibilità. In team, evita di delegare alt al solo SEO: chi conosce il contenuto scrive descrizione più fedele.

Controlli QA: campione casuale di pagine con estensione o audit che segnala img senza alt. Per immagini migrate da vecchio sito, batch replace alt vuoti o filename-like prima del go-live.

Verifica periodica

Programma ogni trimestre un controllo su pagine ad alto traffico: applica i criteri di Attributo alt con la stessa procedura (browser, dispositivo, rete). Registra esito e responsabile in un foglio condiviso così il team non riparte da zero.

Se hai appena cambiato tema, plugin o builder, ripeti il controllo dopo 48 ore: cache CDN e minificazione possono mascherare errori finché non scade la vecchia versione. Coinvolgi chi scrive i contenuti, non solo chi sviluppa: molti problemi nascono da campi CMS lasciati vuoti.

Confronta i risultati con una pagina concorrente solo per capire gap di chiarezza, non per copiare testi. L’obiettivo è che un visitatore capisca in pochi secondi cosa offri e come contattarti.

Errori comuni

• Omettere alt del tutto.
• alt = nome file (IMG_4523.jpg).
• alt lunghissimo che ripete l’articolo intero.
• Decorativa con alt ridondante che distrae.
• Testo importante solo dentro immagine senza alt o caption.

In pratica, integra questo controllo nella routine di qualità del sito: una pagina campione al mese per categoria (home, servizio, articolo, checkout se presente), stesso profilo browser e rete. Annota nel registro interno data verifica e esito, così al prossimo redesign sai cosa è già stato validato. Quando il team cresce, una checklist condivisa evita che ognuno interpreti i criteri in modo diverso e riduce regressioni dopo deploy frettolosi.

Quando lavori con clienti o stakeholder non tecnici, traduci ogni raccomandazione in un esempio concreto sulla loro pagina: uno screenshot prima/dopo, una URL di prova, un tempo di caricamento misurato. Così le lezioni diventano azioni nel backlog invece di slide dimenticate. Riutilizza gli stessi criteri su ambienti preview prima della produzione e registra chi ha approvato il go-live, per tracciabilità in caso di regressione SEO o accessibilità.

Tieni un elenco di URL di riferimento nel tuo progetto e riapplicalo dopo ogni modifica al tema o al CMS, così non devi ricordare a memoria ogni regola.

In breve

• Sempre alt: descrittivo o vuoto.
• Decorativa → alt="".
• Informativa → messaggio essenziale.
• Funzionale → azione o destinazione.

Per immagini generate con l’AI, integra alt e licenze con la guida Immagini generate con l’AI nel percorso dedicato.