Come scrivere il testo alternativo sulle immagini

La realizzazione di un sito accessibile passa anche per gli attributi alt delle immagini: ecco come rispettare legge Stanca e WCAG 2.0

Uno dei primi punti da osservare per la realizzazione di un sito accessibile è l’utilizzo di testi alternativi sui contenuti non testuali come le immagini. Potrebbe sembrare un compito facile da assolvere, ma non è sempre così, soprattutto perchè a seconda delle situazioni le soluzioni possibili cambiano radicalmente.

Legge Stanca e WCAG 2.0

La normativa italiana e le linee guida del W3C sono molto precise a riguardo, questi sono gli enunciati:

Legge Stanca, requisito n°3

Fornire una alternativa testuale equivalente per ogni oggetto non di testo presente in una pagina e garantire che quando il contenuto non testuale di un oggetto cambia dinamicamente vengano aggiornati anche i relativi contenuti equivalenti predisposti. L’alternativa testuale equivalente di un oggetto non testuale deve essere commisurata alla funzione esercitata dall’oggetto originale nello specifico contesto.

WCAG 2.0, linea guida 1.1

Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

Per ogni immagine presente sulla pagina è quindi necessario fornire un’alternativa testuale: il cosiddetto alt text.

Come usare l’attributo alt

Prima di tutto è d’obbligo tenere presente che ogni immagine inserita nel codice HTML di una pagina, soprattutto con doctype di tipo XHTML 1.0 Strict, necessita dell’attributo alt. Questo serve non solo quando l’attributo ha un valore, perchè è sempre utile indicare (ad esempio agli screen reader) che l’immagine non ha un significato rilevante e può essere saltata (usando alt=””). Questo accade spesso con le immagini puramente decorative, che sarebbe comunque meglio inserire tramite il foglio di stile.

Per eliminare ogni dubbio su cosa scrivere nell’attributo alt, la soluzione migliore è porsi una semplice domanda:

“Se dovessi illustrare al telefono la pagina che stai visitando, descriveresti l’immagine e il suo contenuto?”

Se la risposta è sì, allora è bene che quell’immagine abbia un testo alternativo, altrimenti non servirà a niente. Il metodo viene direttamente da Roger Johansson, e lo trovo perfetto per casi come questi.

L’importante è ricordarsi sempre di non esagerare, perchè è facile cadere nell’errore opposto: inserire troppe informazioni (inutili) in una pagina. Rendere accessibili le immagini di un sito non significa usare testi alternativi esageratamente lunghi e descrittivi: creerebbero solamente problemi. La cosa migliore è inserirli solo dove necessario, ad esempio in immagini che contengono del testo, per far arrivare all’utente lo stesso identico messaggio.

Conclusioni

Non è sempre facile trovare il giusto testo alternativo per le immagini di una pagina web. Le soluzioni variano a seconda dei casi, ma la regola fondamentale è ricordarsi che il testo alternativo deve servire per veicolare lo stesso messaggio dell’immagine, non per descriverla.

La differenza tra le due cose in certi casi potrebbe essere sottile, ma l’importante è essere coscienti del problema e cercare di risolverlo. Un sito accessibile passa anche per questi dettagli.

Vuoi far crescere il tuo progetto online?

Tommaso Baldovino

UX/UI Designer, professionista del web con più di 15 anni di esperienza su WordPress. Sono disponibile a seguire nuovi progetti dall'ideazione alla realizzazione finale. Scrivo ogni 2 settimane la mia newsletter.