La scelta appropriata dei testi ALT

Ha osservato Callie nella Pagina dei commenti:

Molti autori non hanno capito esattamente cosa stanno cercando di presentare; essi non sanno che cosa c’è di importante nell’immagine per il pubblico al quale è destinata la loro pagina. La ragione per cui non comprendono perché i loro [testi] alt non funzionano, è che essi non sanno perché le immagini si trovano lì. Ogni elemento grafico ha una ragione per essere su quella pagina: o perché valorizza l’argomento/lo stato d’animo/l’atmosfera o perché ha un ruolo critico rispetto a ciò che la pagina sta tentando di spiegare. Sapere a cosa serve l’immagine … rende più semplice scriverne l’etichetta.

Quando scrivete in HTML del materiale prevalentemente testuale, vi state rivolgendo a tre differenti tipi di utilizzatori:

I. Quelli con il caricamento delle immagini abilitato.

Esempio: un qualsiasi browser grafico

II. Quelli che navigano in modalità testuale, ma che possono visualizzare le immagini se lo desiderano.

Esempi: browser grafici con l’autocaricamento delle immagini disabilitato; Lynx con un visualizzatore grafico disponibile come applicazione ausiliare

III. Quelli che dispongono della sola modalità testuale e non possono visualizzare immagini in nessun caso.

Esempi: un terminale in modalità carattere; lettori che usano un sintetizzatore vocale. Robot di indicizzazione!

Il sintetizzatore vocale non serve soltanto per i lettori non vedenti [4], benché io non riesca ad immaginare per quale motivo la gente si diverta ad aumentare le difficoltà dei non vedenti nell’accedere al loro materiale testuale; un lettore dotato della vista potrebbe usare un sintetizzatore vocale mentre riposa i propri occhi o è altrimenti occupato. La disabilità motoria può anche significare che una persona per altri versi normale non possa adoperare un’interfaccia utente convenzionale (come quelle dotate della precisione necessaria per una tipica mappa immagine).

Quando usate un’immagine in riga, il testo ALT è il vostro strumento – non molto preciso, ma nondimeno uno strumento utile – per far capire il vostro messaggio ai lettori dei tipi II e III. Vi sono numerose differenti ragioni per cui potreste rendere disponibili delle immagini ai vostri lettori, così non sorprende che vi siano numerosi differenti approcci alla scelta di un testo alt. Ho trovato utile suddividere le immagini in quattro categorie principali. Queste non sono presentate secondo alcun ordine di priorità: ogni uso ha il proprio campo di applicabilità.

a) Decorazioni di pagina

Se il vostro lettore non le visualizza, non c’è nulla che un testo alt possa utilmente aggiungere all’argomento del discorso, ed è improbabile che un lettore che stia navigando in modalità testo voglia vedere o scaricare la decorazione. Perciò, nella maggioranza dei casi usate il codice ALT="". Se state usando una decorazione come àncora di un collegamento, assicuratevi di includere anche del testo nel contenuto dell’ancora (fa parte di un buono stile autoriale trasformare in collegamento un testo significativo piuttosto che qualche insignificante pallino o – peggio che mai! – “clicca qui”). Le immagini spaziatrici (almeno finché questo sgradevole puntello non sia stato del tutto eliminato) dovrebbero avere un attributo ALT che funga anch’esso da spaziatore (forse  ).

Per le icone di avviso, di domanda, ecc., la scelta naturale rivolta ai browser di tipo testuale dovrebbe essere qualcosa come “[!]” o “[?]”, mentre per i pallini ALT="*" ecc.; tuttavia l’arte ASCII in generale può produrre effetti fastidiosi su un sintetizzatore vocale. Può essere degno di considerazione qualcosa del genere:

    <EM><IMG ... ALT="Avviso: "></EM>

Nel caso si tratti di loghi societari, bene: se il nome della società è già sulla pagina come testo in chiaro, come è spesso il caso, allora il logo può essere trattato come una decorazione, e ALT="" è la scelta adatta; se invece il logo fosse usato in sostituzione del nome dell’azienda, “Ditta Tizio”, allora raccomando ALT="Ditta Tizio" come scelta appropriata; per correttezza, va chiarito che su questo argomento esistono differenti opinioni, e solo l’autore può davvero sapere se il logo deve essere inteso come un segno di riconoscimento visivo, tale che nessun rimpiazzo testuale potrebbe renderne il senso, oppure come un elemento significativo che dovrebbe essere portato all’attenzione dei lettori che non visualizzano immagini. (Ma, se vendete loghi e state mostrando esempi del vostro lavoro, allora i loghi sono il vostro contenuto!)

Le comuni variazioni sul tema, del tipo ALT="Logo societario", ALT="Logo della Ditta Tizio" o anche ALT="GIF di media grandezza del logo" (!), sono incomprensibili: si suppone che l’autore debba fornire al lettore delle informazioni, non delle meta-informazioni (descrizioni di informazioni). Una descrizione testuale del logo è avvertita generalmente come inappropriata per un testo ALT: per quei lettori che la desiderano [4], esistono delle convenzioni accettate per offrire una descrizione separata.

b) Icone di navigazione

Si tratta, naturalmente, di collegamenti ad altri documenti. L’equivalente testuale è di solito abbastanza semplice, essendo una breve descrizione della destinazione (“Avventura”, “Fantascienza”) o della funzione (“Sommario”, “Capitolo successivo”, “Precedente”, “Home page della ditta Tizio”). Tenete a mente, per favore, che i browser hanno già un loro significato per termini quali “Indietro”, “Home”, “Avanti”, perciò è meglio evitare la potenziale confusione che viene fuori quando l’autore attribuisce un differente significato a questi termini. Evitate anche, per favore, quei collegamenti del tipo “Ritorna a (qualsiasi)”, che sono così irritanti per qualcuno che arriva direttamente sulla vostra pagina senza aver mai visitato in precedenza (qualsiasi). Personalmente preferisco scrivere semplicemente “xxx”, ma inserite pure “Ritorna a (qualsiasi)”, se ritenete di doverlo fare.

Aiutate in ogni caso i vostri lettori a comprendere l’impaginazione del vostro sito usando termini quali “Precedente”, “Su”, “Successivo”, o testi che definiscano esplicitamente la destinazione (“A proposito dei quark”); ma, lo ripeto ancora, evitate la confusione dei termini “Ritorna” o “Indietro”.

Alcuni autori preferiscono offrire collegamenti alternativi in modalità testo separati dagli equivalenti collegamenti grafici, nel qual caso ALT="" risulterebbe ragionevole; io evito solitamente questa soluzione, a causa della confusione di avere due insiemi di collegamenti che puntano alle medesime risorse. Inoltre, i verificatori di accessibilità come Bobby protestano quando trovano un’immagine usata come collegamento ed a cui è dato ALT="", mentre alcuni browser annullano comunque l’ALT="", nell’interesse dell’accessibilità, quando trovano l’immagine usata come collegamento.

Le miniature, usate per “navigare” verso un’immagine a dimensione piena di uno stesso oggetto, sono discusse sotto (c).

Le mappe immagine sono un caso speciale di questa categoria. In alcune situazioni, le mappe immagine svolgono una funzione che non può essere direttamente sostituita con null’altro (le cartine geografiche, per esempio), ma alcuni strumenti alternativi di navigazione, quali un indice A-Z o una casella di ricerca, possono risultare utili per qualsiasi tipo di utenti: non dovreste perciò svalutarli considerandoli un fastidioso lavoro extra, destinato soltanto ai lettori che usano la modalità testo. Spesso, per altro, si vedono sul Web mappe immagine usate al posto di semplici collegamenti, presumibilmente a causa del fatto che sono più complesse e servono così a dimostrare la bravura dell’autore. Questo è un peccato, soprattutto se l’autore non possiede anche la bravura per rendere la propria pagina usabile da tutti i lettori in modalità testo.

Le mappe immagine sul lato cliente, per le quali il supporto dei browser è ormai generalizzato, sono più adatte all’uso da parte dei lettori di solo testo di quanto lo fossero le più antiche mappe sul lato server, a condizione che le forniate con testi ALT all’interno dei loro elementi AREA. Nondimeno, come strumento di navigazione, una riga di semplici IMG con testi ALT può svolgere il medesimo compito in una maniera efficace, che si adatta meglio ai cambiamenti di dimensione delle finestre.

Ho dedicato una pagina alle mappe immagini progettate per il testo. Ho detto forse che dovreste fornire pagine separate con grafica o con solo testo? – No, non l’ho detto: non credo in generale che ciò sia necessario, e quella gente che va sbraitando cose come “Non ho il tempo per creare delle versioni separate solo testuali delle mie pagine” sta semplicemente accampando delle scuse per la propria incapacità di produrre una pagina web che sia allo stesso tempo visivamente attraente e accessibile agli utenti in modalità testo.

c) Accessorie o interessanti

Queste sono immagini che l’utente può trovare d’aiuto per la comprensione del testo, ma che non sono indispensabili a tal fine. Riguardo ad esse vi ricordo che esistono due modi di procedere.

1. Fornite dei semplici collegamenti alle immagini; mostrate al lettore per mezzo di una breve descrizione cosa offrite. In verità il principio generale dice di non creare seccature con troppi dettagli, ma in questo caso, considerando che vi è chi dispone di limitata ampiezza di banda e che esiste la possibilità che non tutti i formati d’immagine siano accettati da tutti i browser, possiamo fare un’eccezione e spiegare al lettore cos’è che gli stiamo offrendo. Così un esempio potrebbe essere
   <a href="...">Fregata, 1800 circa, 560kB PNG</a>

2. Fornite un IMG in riga, con un testo ALT che riassuma la principale caratteristica che volete portare all’attenzione del lettore, ad es.
   ALT="Le navi da guerra in quell'epoca avevano di solito due file di cannoni"

Dovreste riuscire a comporre il corpo dei vostri testi in modo che non pressuponga che il lettore stia vedendo insieme con esso anche l’immagine. Nella misura in cui i lettori di “tipo II” sono informati che c’è un’immagine disponibile, possono decidere liberamente se caricarla oppure no. Dare ai lettori di “tipo III” l’impressione che gli stiate imponendo di caricare un’immagine, servirà soltanto a frustrarli e ad annoiarli.

Naturalmente potreste combinare un IMG in riga, con il suo proprio testo ALT, insieme con un collegamento ad un’immagine esterna (tipicamente una versione più grande e più dettagliata dell’altra immagine). In questo caso, abbiate cura di inserire le informazioni nei posti adatti, sia come testo in chiaro visibile da tutti i lettori, sia come testo ALT indirizzato principalmente a quelli che non stanno caricando le immagini. Ma questi sono dettagli minori, se paragonati con la pratica errata dominante sul Web.

Se avete la sensazione che l’IMG necessiti di un testo alt aggiuntivo, fornitelo; se no, inserite pure ALT="". Questo testo alt potrebbe offrire tipicamente l’elemento informativo principale, in ragione del quale avevate inserito l’immagine. Continuando con l’esempio precedente, potreste descrivere la più importante tra le caratteristiche distintive del vascello riprodotto nell’immagine. La verifica dell’idoneità [della descrizione], come sempre, consiste nell’immaginare il documento HTML visto senza l’immagine — o di immaginare di leggere il documento a qualcuno per telefono — e di domandare a voi stessi se il testo ALT fornisce informazioni utili circa l’argomento del discorso. (Informazioni di tipo tecnico sulle immagini mancanti sono, come io sostengo, tollerate se vi è una buona ragione, ma in un articolo sulle navi d’epoca il lettore vuole soprattutto informazioni sulle navi, non paroloni specialistici che trattano del Web.)

d) Critiche per la comprensione della pagina

In alcuni campi questa situazione si verifica raramente. In altri (ad es. nelle scienze e nell’ingegneria, nonché nella matematica, almeno finché avremo bisogno di inserire equazioni come immagini in riga) è un fenomeno assolutamente comune. In questo caso – posto che abbiate informato in qualche modo il lettore che il documento risulterà purtroppo privo di significato, a meno che non vengano caricate le immagini in riga – non c’è nulla di utile che possiate fare con il testo ALT.