Testo alternativo per le immagini

Un ghirigoro decorativo e un grafico delle vendite usano entrambi l'elemento img, ma il testo alternativo giusto per il primo è una stringa vuota e per il secondo una frase completa.

A che cosa serve il testo alternativo

Un lettore di schermo trasforma una pagina in voce o in braille. Quando arriva a un'immagine non può guardare i pixel, quindi legge l'attributo alt. Lo stesso testo compare quando un'immagine non si carica, ed è ciò che riceve un motore di ricerca o un browser solo testo. Le WCAG 2.2 mettono questo punto prima di tutti: il criterio di successo 1.1.1 Contenuti non testuali, di livello A, chiede che ogni immagine, icona o grafico che porta informazioni abbia un'alternativa testuale che serva allo stesso scopo.

Le parole chiave sono «lo stesso scopo». Il testo alternativo non è una didascalia né un elenco di tutto ciò che c'è nell'inquadratura. Chiediti che cosa ricava dall'immagine, in quel punto, chi la vede, e scrivi quello. La foto di una pagnotta sulla home page di un forno potrebbe richiedere solo «Pagnotta a lievitazione naturale, affettata». La stessa foto in un articolo sul colore della crosta potrebbe richiedere «Pagnotta a lievitazione naturale con crosta scura, quasi nera, e mollica alveolata». Stesso file, compito diverso, testo diverso.

Quattro casi comuni

Il tutorial del W3C sulle immagini divide la maggior parte delle immagini in pochi gruppi. Le immagini informative, come una foto o un semplice diagramma, ricevono una breve descrizione di ciò che mostrano. Le immagini decorative, come una linea divisoria o una texture di sfondo, ricevono un alt vuoto, scritto alt="", che dice alle tecnologie assistive di saltarle. Le immagini funzionali, come un logo che porta alla home o una lente d'ingrandimento che avvia una ricerca, ricevono un testo che dice che cosa succede: «Corner Bakery home» o «Cerca», non «logo» o «lente d'ingrandimento». Le immagini di testo ricevono le parole dell'immagine.

Omettere l'attributo non è come lasciarlo vuoto. Senza alcun alt, alcuni lettori di schermo ripiegano sulla lettura del nome del file, e chi ascolta può sentire qualcosa come «IMG trattino basso 4032 punto jpeg». Un alt vuoto è una scelta deliberata che dice «qui non c'è niente da vedere». Per un grafico complesso, tieni l'alt breve («Grafico a barre delle vendite mensili, descritto sotto») e metti i numeri in una tabella o in un paragrafo accanto, dove tutti possono leggerli.

Immagini che non sono elementi img

Le immagini possono arrivare anche come SVG in linea o come immagini di sfondo CSS. Uno sfondo CSS non ha alcuno spazio per il testo alternativo, quindi va usato solo per decorare; tutto ciò che ha un significato va nell'HTML. Un svg in linea puramente decorativo si può nascondere con aria-hidden="true", come spiega l'unità 6. Le WCAG non fissano un limite di caratteri per il testo alternativo, ma il tutorial del W3C torna sempre allo stesso consiglio: sii breve e dai ciò che conta in quel contesto. Se ti ritrovi a scrivere tre frasi, probabilmente quel contenuto va nel testo della pagina, dove tutti possono leggerlo.

Puoi controllare le tue pagine senza software speciali. Visualizza il sorgente della pagina e cerca <img: ogni risultato deve avere un attributo alt, vuoto o no. Gli strumenti per sviluppatori dei principali browser includono anche un pannello di accessibilità che mostra il nome che riceve ogni immagine. Leggere quei nomi uno dopo l'altro, fuori contesto, è una buona prova. Se un elenco dice «immagine, immagine, grafico, logo», chi usa un lettore di schermo sente esattamente questo.