Scrivere testi alternativi: regole, esempi e aiuto dell'IA

Il testo alternativo mancante appartiene alle violazioni che qualsiasi strumento di verifica trova in pochi secondi. Proprio per questo compare in cima ai report di audit automatici: nelle scansioni dell'autorità tedesca di vigilanza come nei rapporti allegati alle lettere degli avvocati. La buona notizia: quasi nessuna violazione si corregge così in fretta, e le regole di un buon testo alternativo stanno su una scheda. Questa guida le presenta con esempi concreti buoni e cattivi, spiega il test del contesto, quello che la maggior parte dei testi alternativi non supera, e dice con onestà dove l'IA aiuta e dove sbaglia. La prima bozza per un'immagine reale si può generare subito qui.

Perché i testi alternativi saltano fuori per primi

La base sta nelle WCAG 2.2: il criterio di successo 1.1.1 «Contenuti non testuali» richiede per ogni immagine un'alternativa testuale che assolva lo stesso scopo dell'immagine stessa. Il criterio è di livello A, il più basso dei tre livelli di conformità. Chi lo manca, manca con ciò qualsiasi conformità WCAG, per quanto curato sia il resto del sito.

A questo si aggiunge il controllo. Se un'immagine ha l'attributo alt è banale da verificare per una macchina. In Germania l'autorità di vigilanza del mercato MLBF usa scansioni automatizzate per le sue verifiche preliminari ai sensi del BFSG, la legge tedesca sull'accessibilità, e i rapporti di verifica WCAG allegati ad alcune diffide tedesche (Abmahnung) elencano esattamente questi rilievi individuabili a macchina. La legge europea sull'accessibilità applica la stessa logica in tutta l'UE. Chi vende a consumatori tedeschi o europei trova nel testo alternativo mancante la parte più visibile dell'obbligo: la prima cosa che si scopre e l'ultima che si può contestare.

Tecnicamente il testo alternativo è un attributo dell'elemento img nell'HTML. Uno screen reader lo legge nel punto in cui i vedenti vedono l'immagine. Se l'attributo manca, molti screen reader ripiegano sul nome del file, e la foto prodotto diventa un «IMG_4032.jpg» letto ad alta voce. Chi lo ha sentito una volta in una demo con screen reader non lo dimentica più.

Le regole di base: buoni testi alternativi in sette punti

Il riferimento che fa testo è il tutorial sulle immagini della Web Accessibility Initiative del W3C. Le sue regole essenziali stanno in sette punti:

• La funzione prima dell'aspetto: descrivere ciò che l'immagine fa in quel punto, non ogni dettaglio visibile. Per un'icona a lente in un campo di ricerca è giusto «Cerca», non «lente d'ingrandimento su sfondo grigio».
• Breve e preciso: una frase concisa come regola generale. Ciò che richiede più spazio appartiene al testo circostante, non all'attributo alt.
• Eliminare «immagine di» e «foto di»: lo screen reader annuncia comunque le immagini come grafica. «Foto di una sneaker rossa» spreca le prime tre parole.
• Le immagini linkate descrivono la destinazione: se il logo porta alla home, il testo alternativo è «Vai alla home», non «Logo». Conta la meta, non il soggetto.
• Le immagini decorative ricevono un testo alternativo vuoto: alt="" fa sì che gli screen reader saltino del tutto l'immagine. Come tracciare il confine è spiegato più sotto.
• I nomi dei file non sono testi alternativi: «header-final-v3.jpg» non aiuta nessuno, ricerca immagini compresa.
• La grafica complessa richiede di più: un diagramma riceve un testo alternativo breve con il messaggio centrale più una descrizione completa nel testo circostante o in una tabella dati.

La tabella mostra come funziona in pratica. I cinque casi coprono i tipi di immagine più comuni, dalla foto prodotto al diagramma:

Lo schema dietro le cinque righe: un buon testo alternativo risponde alla domanda su che cosa un visitatore vedente ricava dall'immagine in quel punto. Niente di più, niente di meno. Per questo non esiste nemmeno un dizionario di testi alternativi da consultare: la risposta dipende dalla pagina, non dall'immagine.

Il test del contesto: una foto, tre testi alternativi corretti

L'errore di ragionamento più frequente è credere che un'immagine abbia una descrizione fissa e oggettiva. Non ce l'ha. Il tutorial del W3C fa espressamente del contesto il criterio determinante: la stessa foto richiede un testo alternativo diverso a seconda della pagina, e a volte nessuno.

Si prenda una foto: una donna con le cuffie a una scrivania. Nella pagina contatti di un servizio clienti è pura illustrazione, il testo alternativo resta vuoto. Nell'articolo del blog sulla nuova responsabile del supporto la stessa foto è informativa: «Anna Berger, responsabile del servizio clienti, alla sua postazione». E come riquadro cliccabile che porta al modulo di supporto, il testo alternativo descrive la destinazione: «Vai al modulo di supporto». Tre pagine, tre risposte corrette, una sola immagine.

Decorativa o informativa? Come decidere

Le immagini decorative ricevono un testo alternativo vuoto: alt="". Non è trascuratezza, è la marcatura corretta. Lo screen reader salta allora del tutto l'immagine e nessuno perde tempo con il riempitivo. Conta la differenza rispetto all'attributo mancante: senza attributo alt molti screen reader annunciano comunque l'immagine, spesso con il nome del file. Vuoto significa espressamente vuoto, non omesso.

• L'immagine è linkata o attiva un'azione? Allora serve sempre un testo alternativo che nomini la destinazione.
• L'immagine mostra del testo, per esempio un banner con un codice sconto? Allora il testo completo appartiene al testo alternativo.
• Togliendo l'immagine si perderebbe informazione? Allora è informativa e richiede una descrizione.
• Il messaggio dell'immagine è già tutto nel testo circostante? Allora l'immagine è di solito decorativa.
• È una foto d'atmosfera, un motivo, un separatore senza messaggio proprio? Testo alternativo vuoto, chiuso.

Testi alternativi nel negozio online: dove sono in gioco i soldi

Nei negozi online il testo alternativo conta due volte. Giuridicamente, perché i negozi B2C che vendono a consumatori tedeschi rientrano nel BFSG come servizi di commercio elettronico, la legge europea sull'accessibilità estende lo stesso dovere a tutta l'UE, e le foto prodotto senza testi alternativi sono tra i rilievi tipici degli audit automatici. E commercialmente, perché un cliente cieco senza testo alternativo semplicemente non sa che cosa compra: colore, taglio e materiale spesso stanno solo nell'immagine, non nella descrizione del prodotto.

In pratica: il testo alternativo di una foto prodotto integra i dati del prodotto invece di ripeterli. Se «Sneaker modello Vento, bianca» compare già come titolo accanto, il testo alternativo descrive ciò che l'immagine aggiunge, per esempio la vista laterale con la suola rossa. Con cinque immagini in galleria dello stesso prodotto, ogni testo alternativo nomina la propria prospettiva: primo piano della cucitura, suola vista da sotto, indossata al piede. Cinque volte la stessa frase aiuterebbe chi usa uno screen reader quanto cinque volte la stessa foto aiuta un vedente.

L'effetto SEO è reale, ma non è un lasciapassare: i motori di ricerca usano i testi alternativi per capire le immagini, quindi buoni testi migliorano le possibilità nella ricerca immagini. Chi però infila «comprare sneaker economiche sneaker uomo sneaker bianche» nell'attributo alt non aiuta nessun utente e non fa accessibilità, fa spam letto ad alta voce. Il testo alternativo si scrive per le persone. Il motore di ricerca legge da sopra la spalla e premia esattamente questo.

Quando l'IA aiuta e quando sbaglia

Il riconoscimento delle immagini con l'IA è bravo in ciò che sfianca le persone: riconosce gli oggetti in modo affidabile, produce una prima frase utilizzabile e lo fa per 500 foto prodotto alla stessa velocità che per cinque. Per un negozio con un catalogo cresciuto negli anni è la differenza tra un progetto da weekend e uno da trimestre.

Ciò che l'IA non sa fare è il contesto. Vede la foto, ma non la pagina: non sa se la donna con le cuffie è decorazione, la nuova responsabile del supporto o un link a un modulo. È esattamente questa mancanza di contesto che Aktion Mensch, una delle maggiori organizzazioni tedesche per l'inclusione, critica negli strumenti generalisti completamente automatici, e la critica è fondata. Vale anche per gli overlay di accessibilità che provano a indovinare i testi alternativi mancanti al volo.

Il metodo onesto ha quindi tre passi, e quello di mezzo non è facoltativo:

1. Generare una bozza IA: caricare l'immagine nel generatore di testo alternativo e ricevere una proposta. Questo risolve il riconoscimento degli oggetti e la prima formulazione.
2. Verificare contro il contesto della pagina: perché l'immagine sta su questa pagina? È decorativa, informativa o linkata? La descrizione corrisponde alla funzione? A queste domande risponde una persona, non un modello.
3. Adattare e adottare: aggiungere la funzione, tagliare il superfluo e solo dopo pubblicare.

Questo vale espressamente anche per il nostro generatore. Produce bozze, non testi alternativi finiti, e di proposito non lo presentiamo in altro modo. Uno strumento che promette di sbrigare i testi alternativi in modo completamente automatico, senza sguardo umano, promette qualcosa che con la tecnica attuale non funziona.

Domande frequenti sui testi alternativi

Il testo alternativo è quel raro tema di accessibilità in cui sforzo ed effetto vanno d'accordo: le regole stanno su una scheda, le lacune si trovano in fretta e si chiudono in fretta. Conviene far scansionare il sito una volta, smaltire la lista con bozza IA più sguardo al contesto e controllare già che ci si è anche i documenti PDF. Chi naviga con uno screen reader noterà la differenza alla prima visita.