[Salta il menu][L'elefantino con la matita, logo del sito]

Diodati.org | Accessibilità e traduzioni dal W3C      Leggi Omega Centauri!

01 Uso dei testi ALT all'interno di IMG

Ho notato sul Web una gran confusione circa l'uso appropriato dei testi ALT nell'HTML. Benché si potrebbe discutere sui dettagli più sottili, io credo che i princìpi generali corrispondano più o meno a quelli che ho esposto in queste note. Comunque sia, ve li sottopongo ed attendo con impazienza delle argomentazioni ragionevoli, nel caso non siate d'accordo.

Il testo ALT è destinato a fornire un testo alternativo, da usare principalmente quando l'immagine non viene visualizzata. L'errore più comune (a parte il non fornirlo per niente) consiste nell'offrire una descrizione dell'immagine, senza valutare quale funzione l'immagine stesse svolgendo nella pagina, con risultati che possono spaziare dall'incongruo all'assurdo. Il testo ALT è stato pensato per essere una conveniente alternativa testuale in relazione allo scopo dell'immagine: talvolta potrebbe risultare conveniente una descrizione dell'immagine, ma nella pratica questa scelta sembra essere molto più spesso quella sbagliata piuttosto che quella giusta.

Alcuni lettori preferiscono dare prima uno sguardo alla mia collezione di castronerie.

"Fornire l'attributo ALT non fa scomparire l'immagine!"

 Princìpi 

Mi sembra che il primo principio autoriale dell'HTML sia di trasmettere al lettore informazioni su un certo "argomento di discussione". Che è un modo enfatico per dire che qualcuno sta scrivendo una storia, pubblicizzando un prodotto, offrendo dei risultati scientifici, regalando una guida per intrecciare panieri, ricette per cucinare i funghi selvatici, o qualunque cosa accada che sia l'"argomento di discussione". (Non sto considerando il caso particolare di scrivere sull'HTML o sul WWW, il che confonde un po' le cose.)

Riferimenti alla meccanica del World Wide Web o ad un particolare browser rappresentano normalmente una sgradevole distrazione. Esistono differenze tra i browser e tra le piattaforme, e cercare di dire agli utenti come adoperare il browser con cui voi, gli autori, avete confidenza, serve giusto a confonderli, se essi stanno usando un differente browser/versione/piattaforma. Raccomando agli autori, come regola generale, di presumere che gli utenti abbiano già familiarità con le operazioni dei loro browser, o che possano apprenderle da soli (file di Aiuto, ecc.), e che siano piuttosto avidi di informazioni circa il vostro "argomento di discussione". [1]

Queste note riguardano quelle pagine web che hanno un sostanziale contenuto testuale, le cui immagini rappresentano un'aggiunta piuttosto che lo scopo complessivo della pagina. In altre parole, il contenuto è intrinsecamente accessibile ai lettori solo testuali ed è compito dell'autore di facilitare tali lettori nell'ottenere il massimo possibile dal documento, a dispetto dell'assenza di immagini. Non intendo occuparmi di quei documenti web le cui informazioni siano, per qualsivoglia ragione, essenzialmente dipendenti dalle immagini, come nel caso, ad esempio, di una galleria di foto.

Queste note non vi stanno chiedendo enfaticamente di "far tacere" i vostri documenti allo scopo di renderli funzionali per i browser in modalità testuale. Ciò che vi stanno chiedendo è di riflettere su come i vostri documenti appariranno in un'ampia varietà di situazioni di navigazione, e di seguire uno stile di scrittura che faccia il miglior uso di qualsivoglia combinazione di risorse ciascun lettore abbia a propria disposizione. Questa è la grande differenza tra l'idea del Web e la maggior parte degli altri modi di pubblicare informazioni.

Attenzione: se vi è stato dato mandato di produrre documenti pienamente accessibili, allora ovviamente la vostra guida all'accessibilità ha la precedenza. Visitate anche, per favore, le pagine della Web Accessibility Initiative presso il W3C.

Una tabella riassuntiva, per quelli che non hanno tempo.

ALT non è più l'unico attributo disponibile per trasmettere informazioni in modalità testo. Con l'HTML 4.0 abbiamo tre o quattro differenti attributi a disposizione, il che riduce la necessità di ricorrere a compromessi nel modo in cui ciascuno di essi è usato. Le recenti versioni di Microsoft Internet Explorer, come pure un certo numero di browser specializzati o di minoranza, hanno integrato il supporto per alcune di queste caratteristiche, e anche Netscape 6, riguardo ad esse, è ora della partita. Consigli su come sfruttare tali caratteristiche (pensate per situazioni di disabilità, ma largamente utili anche nella comune navigazione in modalità testo) possono essere reperiti presso il W3C WAI: incoraggio gli autori a prendere gradualmente confidenza fin da subito con l'uso di queste caratteristiche, ma, essendo supportate solo in misura limitata dai browser/versioni attualmente in uso, sembrerebbe opportuno non fare completo affidamento su di esse. Ciò potrebbe essere argomento di un successivo aggiornamento di questo articolo.

Pensate al testo ALT come ad un'opportunità per rafforzare il vostro messaggio, così come discusso in questo testo tratto dagli archivi del W3C WAI, su cui raccomando di riflettere accuratamente: si tratta di un'alternativa vincente-vincente, che non danneggia quelli che hanno già afferrato il vostro concetto, ma ritiene di aiutare quei lettori che potrebbero essere meno efficacemente raggiunti senza di essa. Si veda anche IMG, uno degli "Eviltest" di Ian Hickson, ed in particolare la sua mini FAQ sul testo ALT.

 Meccanismi HTML per presentare immagini 

In HTML potete presentare un IMG in riga o un regolare collegamento (àncora) che punta all'immagine. Potete decidere di usare l'uno o l'altro di questi meccanismi, o entrambi. Se state presentando un collegamento ad un'immagine, allora avete la possibilità di includere, all'interno del contenuto di quell'ancora, sia un IMG sia del normale testo, o entrambe le cose. Esiste quindi un'ampia gamma di combinazioni, ciascuna delle quali potrebbe essere appropriata in particolari circostanze. [2]

L'attributo ALT dell'elemento IMG è destinato ad essere utilizzato come testo alternativo in situazioni in cui l'elemento IMG non viene visualizzato. L'idea è espressa con chiarezza nelle specifiche HTML 4 ( sezione 13.8):

"Numerosi elementi di tipo non testuale (IMG, AREA, APPLET e INPUT) consentono agli autori di specificare un testo alternativo, che serva come contenuto quando l'elemento non può essere riprodotto normalmente."

Notate la frase chiave: "...che serva come contenuto...". Nella sezione 13.2 appare un'osservazione molto sciatta riportata tra i commenti della DTD, la quale dice che "è necessario fornire una descrizione tramite ALT": vedremo nel seguito di questa discussione che una descrizione dell'immagine è spesso, quale testo alternativo, una misera scelta, precisamente perché non "serve come contenuto" in un certo particolare contesto. Un penetrante suggerimento che ho appreso dalle discussioni WAI era: invece di considerare il testo ALT come una rappresentazione alternativa di un'immagine, considerate il testo e l'immagine come rappresentazioni alternative di un contenuto.

Al testo ALT in se stesso non è permesso di contenere marcatura per mezzo dell'inclusione di codice HTML all'interno del testo; d'altra parte, l'elemento IMG (e perciò il suo testo ALT) è sottoposto a qualsiasi marcatore che lo racchiuda; così, per esempio, se il vostro IMG è un'intestazione, o parte di un'intestazione, assicuratevi che sia incluso tra i marcatori <Hn>...</Hn>. L'uso di meccanismi &nomedientità; e &#numero; è legale e supportato ora da qualsiasi browser di medio livello. I browser in modalità testo faranno scorrere la stringa di testo corrente, se necessario, su due o più righe visualizzate, per cui questo non rappresenta un problema. I browser grafici, invece, non svolgono - temo - un lavoro particolarmente buono con i testi ALT, e per anni le cose sono sembrate peggiorare ad ogni edizione dei browser 'popolari'; ma riguardo a ciò non c'è molto che possiate fare, come autori di un documento. Opera, ed ora anche i browser della serie Mozilla, stanno lodevolmente capovolgendo questa tendenza.

Suggerimento: evitate di inserire interruzioni di riga nei vostri sorgenti HTML all'interno dei testi ALT, poiché alcuni browser le visualizzano in modo scorretto (o mostrando in quel punto un blocco rettangolare o mostrando il testo tutto attaccato). Se necessario, cominciate una nuova riga inserendo l'attributo ALT= e concludetela con gli apici di chiusura, ma non interrompete la riga nel mezzo.

Alcuni hanno tentato il trucco plausibile di includere nel loro testo ALT riferimenti di tipo &#numero; per il ritorno a capo e/o l'avanzamento di riga, nella speranza di ottenere interruzioni di riga nella visualizzazione a schermo, ma ho paura che ciò non faccia parte delle specifiche e non funzioni realmente.

L'HTML 4.0 ha introdotto l'attributo LONGDESC, per creare un collegamento ad un documento contenente una descrizione lunga, che può essere supportato almeno dai browser specializzati: se vi interessa fornire questo servizio, c'è una consolidata consuetudine per offrire in modo non intrusivo un simile collegamento usando meccanismi esistenti, che risulterebbe utile per i lettori ciechi [4].

  Perché gli autori dovrebbero preoccuparsi dei testi ALT? 

Bene, per il fatto che state leggendo questo articolo spero che voi pensiate già che questa sia una buona idea, ma ho scritto comunque alcune note [3] in proposito.

Tra le maggiori "vittime" del sentiero accidentato dell'informazione vi sono quei documenti, i cui autori non prendono seriamente in considerazione i robot di indicizzazione. Ogni passo che voi percorrete verso l'accessibilità in modalità testo è, allo stesso tempo, un passo che vi rende amichevoli verso quei robot di indicizzazione; pertanto (che vi preoccupiate oppure no di un pubblico di minoranza come quello dei ciechi o degli utenti di terminali solo testuali), direi che è nel vostro proprio interesse prestare la dovuta attenzione all'accessibilità in modalità testo.

 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 ciechi [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 &nbsp;).

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.

'L'informazione è indipendente dal browser. I pasticci no' - norm@andrew

 Ulteriori approfondimenti e riflessioni 

Non credo davvero che i casi (a) e (b) richiedano un grande approfondimento. (c) e (d) sono invece più ambigui e non sempre risulta ovvio con quale dei due abbiamo a che fare. Illustrazioni ritenute essenziali da un lettore sono degli extra facoltativi per un altro lettore, e in certi casi limite è addirittura possibile che una stessa immagine sembri essenziale o integrativa semplicemente in base a come venga formulato il testo (come Toby Speight ha evidenziato).

In una situazione nella quale esiste un sistema concordato di rappresentazione testuale, potreste dunque usare quel sistema come testo ALT. Se il vostro pubblico è abituato a leggere equazioni matematiche in notazione LATEX , potreste usare quella come testo alt per l'immagine dell'equazione. Se vi state occupando di araldica, potreste usare l'appropriata descrizione araldica o "blasone": D'oro a tre brache di leone d'azzurro, poste l'una sull'altra in fascia. In tutta onestà, vi sono casi in cui un elemento grafico è assolutamente essenziale per la comprensione, e non vi è descrizione testuale che possa oggettivamente rimpiazzarlo. Ma non è giustificabile fornire testi alt inefficaci in quelle situazioni in cui potrebbero esserne forniti di utili.

È capitato un esempio, qualche tempo fa, in cui qualcuno aveva suggerito (nel contesto di offerte per le vacanze) un testo alt che diceva ALT="Un'immagine dell'albergo". Ritengo che tale testo sia inadatto perché non ci dice nulla sull'argomento del discorso - ci dice invece qualcosa più che altro sulla meccanica del Web. Ciò che il lettore, in particolare un lettore di "tipo III", vuole sapere è: cosa mostra l'immagine di significativo rispetto all'argomento del discorso? L'immagine potrebbe mostrare, ad esempio: ALT="L'Albergo dei Pini, un'antica e raffinata costruzione in pietra posta tra ampi terreni". Questo è da consigliarsi come testo alt piuttosto che come didascalia, perché quei lettori che possono vedere l'immagine saranno già in grado di vedere da soli ciò che viene descritto. Se volete offrir loro anche un collegamento all'immagine, fatelo pure, in uno dei modi più sopra menzionati. (Anche un lettore cieco potrebbe voler scaricare l'immagine, per mostrarla in seguito ad un amico.)

I lettori di "tipo II" possiedono già degli appositi strumenti nei browser che consentono loro di recuperare l'immagine, se decidono di farlo (Lynx rende disponibili gli oggetti in riga grazie ad una semplice pressione del tasto "*"); non c'è davvero nulla di più che l'autore debba fare riguardo a ciò - e dopo numerose discussioni su cosa l'autore potrebbe fare, nessuno sembra essersi presentato con qualcosa che effettivamente fornisca un valido aiuto addizionale all'utente in modalità solo testo senza distrarre inutilmente l'utente in modalità grafica. (Come capita molto spesso sul Web, la cosa importante è evidenziare l'informazione onestamente per ciò che essa è, piuttosto che cercare di prevenire le intenzioni del progettista del browser; se vi sono limitazioni negli strumenti che questo o quel browser offre, il luogo per rimediarvi è in sede di progettazione del browser, non nel sorgente HTML dell'autore.) Quando ho menzionato in una discussione su Usenet la mia insoddisfazione per il testo precedente, "Un'immagine dell'albergo", qualcuno premurosamente suggerì "Scarica un'immagine dell'albergo". Spero a questo punto di essere riuscito a chiarire perché, lungi dall'essere un miglioramento, questo mi sembri addirittura un peggioramento: concentra infatti ancor più l'attenzione sulla meccanica del Web piuttosto che sull'"argomento del discorso".

Un suggerimento era di trarre vantaggio dalla tipica notazione [IMMAGINE] dei browser in modalità testo, inserendo il testo ALT tra parentesi quadre, in modo che gli utenti in modalità testo cominciassero ad associare ciò con un'immagine: ALT="[L'Albergo dei Pini, un'antica e raffinata costruzione in pietra...]". Questa sembra una buona idea per gli utenti vedenti, ma di nuovo la punteggiatura extra potrebbe risultare invadente per i browser vocali.

Come detto in precedenza: se l'immagine è indispensabile per la vostra presentazione, allora ditelo chiaramente. In caso contrario, non importunate i lettori affinché la carichino: indicate loro quali informazioni significative essa contiene in relazione all'argomento del discorso, e lasciate che intraprendano qualsiasi azione essi considerino appropriata.

Come per le semplici decorazioni, i vostri lettori non voglion vedere [IMMAGINE] (o qualcosa di equivalente) disseminato da tutte le parti! Perciò assicuratevi di inserire nel codice un esplicito ALT="" per le vostre immagini decorative.

"Questa pagina è stata visitata [Immagine del contatore] volte"
"[Un numero in forma di bitmap] accessi a partire dal 1/12/95"
(e numerose variazioni su questo tema).

Bene, questo non ha nulla a che fare con l'"argomento del discorso". Credo che nessuna delle variazioni potrebbe essere dichiarata come una buona soluzione (non dimenticando che 1/12/95 significa per i lettori europei qualcosa di differente da ciò che significa per i lettori statunitensi). Ma io non sono in grado di suscitare alcun entusiasmo per i contatori di pagina, perciò non intendo suggerire un modo migliore per risolvere il problema. Se siete degli appassionati dei contatori di pagina, sono sicuro che riuscirete a tirar fuori qualcosa di valido con un po' di inclusioni lato server o di CGI.

 Il testo ALT come "suggerimento a comparsa" 

Versione dopo versione, i popolari browser grafici sono andati sempre peggiorando la loro visualizzazione dei testi ALT, quando è disabilitato l'autocaricamento delle immagini. Sembra così che ci si sia imbattuti casualmente nell'idea di visualizzare i testi ALT come "suggerimenti a comparsa", quando il puntatore del mouse veniva a trovarsi nella posizione dell'immagine. Schiere di autori sembrano aver reagito utilizzando il testo ALT per specificare il loro testo a comparsa desiderato, senza nessun riguardo al fatto che il testo fosse del tutto inidoneo ad essere usato come il "testo alternativo" descritto nelle specifiche HTML.

Bene, l'HTML4 ha una risposta per questo: l'attributo TITLE. Le specifiche HTML4 dicono esplicitamente che sarebbe appropriato visualizzare l'attributo TITLE come un "suggerimento a comparsa": in questo modo ogni cosa va al suo posto. Usate il testo ALT allo scopo di fornire un testo alternativo, per esempio sulla falsariga di quanto discusso in quest'articolo, ed usate l'attributo TITLE per dare un titolo all'immagine, in un modo che sarebbe appropriato per un suggerimento a comparsa. Supporto per l'attributo TITLE era stato introdotto in MSIE4, in Opera ed in altri browser: il problema principale era con le versioni 4.* di Netscape, ma Netscape 6 finalmente lo supporta.

Di più su questo tema in testi ALT a comparsa: una risposta critica.

 La linea orizzontale decorativa 

Gli autori chiedono, abbastanza ragionevolmente, di poter usare nella visualizzazione grafica un IMG raffigurante una linea decorativa, che si riduca in modalità solo testo ad una sorta di separatore: sono stati suggeriti numerosi modi per ottenere ciò, ma nessuno privo di inconvenienti.

I fogli di stile rappresentano la via meno dannosa: si veda una mia precedente proposta, usare gli stili con un HR.

In teoria, inserire la vostra immagine decorativa per mezzo di OBJECT, e fornire HR come ripiego, sarebbe un'altra soluzione completamente in linea con la filosofia dell'HTML, ma malaugaratamente risulta non ben implementata persino tra i browser di ultima generazione.

La discussione sulle varie soluzioni ha condotto su Usenet ad un numero di opinioni fortemente sostenute ma mutualmente incompatibili; così se nessuna di queste soluzioni vi attrae, potrebbe essere consigliabile rimaneggiare l'aspetto della pagina, cosicché il problema non necessiti di essere risolto...

 La spaziatura tra i testi ALT 

Considerate alcune immagini ammucchiate insieme, per esempio come pulsanti di navigazione:

<IMG SRC=univ.gif ALT="L'Università"><IMG SRC=citta.gif ALT="La città">...

Quando esaminate da un browser in modalità solo testo, questo prenderà a leggere:

L'UniversitàLa città...

Si possono considerare varie soluzioni:

Le idee precedenti sono utilizzabili in una vasta gamma di situazioni di navigazione. Tuttavia, attualmente un approccio più produttivo potrebbe consistere nel fornire dei collegamenti testuali come meccanismo primario di navigazione, e di usare i fogli di stile CSS per proporre una loro presentazione decorativa.

Per una navigazione amichevole in modalità testo ed accessibile

Alcune linee guida per l'accessibilità raccomandano di avere qualcosa in più di uno o più spazi per separare collegamenti testuali adiacenti. Ma la maggior parte degli utilizzatori di browser grafici non necessita o non vuole tali separatori. Ecco dunque un suggerimento: come testi ALT all'interno del contenuto dei collegamenti, usate i testi appropriati senza separatori aggiuntivi. Poi, tra quelle immagini, all'esterno del contenuto dei collegamenti, posizionate delle GIF trasparenti da un pixel con i loro testi alt impostati su " | ", in modo che fungano da separatori per la modalità solo testo. Si veda la barra di navigazione posta a fondo pagina, dove questo sistema è usato praticamente.

Notate che per i pulsanti l'altezza e la larghezza non sono specificate, mentre per i pixel di separazione l'altezza e la larghezza (=1) sono specificate. Mi sono messo a giocherellare con tutto ciò su una serie di browser, e mi sembra di aver raggiunto un buon compromesso. Quando il caricamento delle immagini è abilitato, i browser grafici producono un risultato che è praticamente indistinguibile dai precedenti costrutti. Con browser/versioni di tipo grafico, con il caricamento delle immagini disabilitato, alcuni hanno dato buoni risultati, mentre altri sono stati visualmente piuttosto scadenti, ma tutti sono stati per lo meno utilizzabili. I risultati con i browser testuali (Lynx ed emacs-w3) sono stati del tutto accettabili.

Bene, questa è solo una delle soluzioni possibili: forse altri autori troveranno un compromesso migliore; e, con lo sviluppo in futuro di browser specializzati, la necessità di ricorrere a stratagemmi di questo tipo potrà diminuire.

 HEIGHT e WIDTH? 

C'è stata una lunga discussione su c.i.w.a.html sull'opportunità di fornire gli appropriati attributi HEIGHT e WIDTH per gli elementi IMG. L'idea è che il browser può riservare dello spazio per l'immagine prima che l'immagine sia recuperata, e per conseguenza può presentare il normale testo correttamente formattato sulla pagina non appena esso sia disponibile, facendo semplicemente scivolare le immagini al loro posto più tardi, così come arrivano.

Le versioni dei browser differiscono nel modo in cui supportano ciò quando il caricamento delle immagini è disabilitato. Alcuni (ad es. le versioni di Netscape 4.*) visualizzeranno il testo ALT solo parzialmente, oppure no del tutto se il rettangolo specificato è troppo piccolo. MSIE versione 5 può visualizzare il testo ALT completamente, ma questa non è l'impostazione predefinita (Strumenti/ Opzioni Internet/ Avanzate / Accesso facilitato/ "Espandi sempre testo alternativo per le immagini"). Il comportamento mentre si è in attesa di completare il caricamento delle immagini (alcuni browser visualizzano il testo ALT durante questo intervallo) può essere uguale o differente da quello che si ha quando il caricamento delle immagini è disabilitato. Troppo numerose sono le variazioni di comportamento che sono state osservate, tra i browser e tra le relative versioni, per poterne dare conto qui. A conti fatti penso che il solo consiglio che io possa offrire sia di includere normalmente gli appropriati valori di HEIGHT e WIDTH; ma se questi sono presumibilmente troppo piccoli in relazione al testo, allora potreste decidere di omettere deliberatamente tali attributi.

 Argomenti correlati 

Il colore del testo ALT è discusso separatamente. Vi è anche una distinta pagina su INPUT TYPE=IMAGE.

 Commenti dei lettori e domande 

 Alcuni errori madornali 

Prova della verità - alcuni tipici scenari con un browser in modalità testuale:
   Sentiti ringraziamenti ai nostri sponsor, [LINK] e [LINK]
   Cliccate sul browser che state adoperando:
           [LINK]    [LINK]    [LINK]

(le alternative erano in effetti IE4, IE5 e NN4: il sito in questione non lasciava nessun'altra possibilità. Evidentemente non volevano vendere nulla agli utenti di Netscape 6! Di certo il mistero più grande, per me, non è il ristretto elenco di scelte, ma perché mai la gente pensi che occorra chiedere una cosa simile.)

O questo, visto su un sistema unix per il quale il browser da loro raccomandato non è in effetti disponibile:

   Il nostro sito è navigabile al meglio con: [LINK]Clicca per scaricarlo!

Poi c'era questo gran pezzo di autopromozione:

   Un'altra graziosa scena Web da parte di [Logo societario]
Un Consiglio di Circoscrizione britannico per farsi notare:
   Benvenuti a...
   Stemma della Circoscrizione
   La Circoscrizione di
   On-Line
   Avete problemi ad accedere al nostro sito? [Cliccate qui]
Un estratto reso anonimo dalla prima pagina del sito web di una società di servizi tedesca:
   [LINK]-visual fubarGmbH direct rubriken
   [space.gif] [space.gif] [space.gif] [space.gif] [space.gif]
   [space.gif] [space.gif]
   [space.gif] [space.gif] Privat [space.gif] [space.gif] [space.gif]
   [space.gif] [space.gif] [space.gif] [space.gif] [space.gif]
   [space.gif] Aktuell [space.gif] [space.gif] [space.gif] [space.gif]
   [spitze-links.gif]

(Il mio informatore mi ha detto che li hanno immediatamente tagliati fuori da un potenziale contratto.)

Licenza poetica (?):
   requisitidelsito.jpg
   avviso.jpg
   alfinedi.jpg
   scaricaquicktime.jpg scaricaflash.jpg collaudaplugin.jpg
   contratto.jpg

Non si tratta di un artefatto del browser che sta tentando di supplire ai testi ALT mancanti! - questo artista aveva adoperato un intero lotto di immagini (quasi esclusivamente immagini di testo), ciascuna di esse solennemente corredata da un testo ALT che ripeteva il nome del file immagine; qualcosa del tipo:

   img src="immagini_richieste_per_il_sito/alfinedi.jpg" alt="alfinedi.jpg"
"Questo sito è [LINK]etscape [INLINE]"

Impiegai un bel po' di minuti a navigare tra i risultati di una ricerca sul Web per la stringa "etscape" e trovai alcuni sorgenti HTML che variavano dal leggermente idiota alla pazzia più completa!

ALT="Pallino giallo grande"

In questo modo otteniamo di leggere (o i lettori ciechi ottengono di ascoltare):

    Pallino giallo grande Introduzione
    Pallino giallo grande Il problema
          Pallino rosso piccolo Analisi storica
          Pallino rosso piccolo La situazione attuale
    Pallino giallo grande La soluzione

Il sito web dell'Ambasciata USA a Belgrado recava questo esempio degno di vincere un premio:

    Pallino rosso piccolo Risposta al terrorismo (*)
ALT="Questa immagine contiene una mappa, per favore scaricatela"

Per i browser in modalità testo, ciò non aiuta. Ho già dato in precedenza alcuni suggerimenti per un uso più appropriato. Vedete la mia pagina di accompagnamento sulle mappe immagine per maggiori dettagli e riferimenti.

ALT="Attivate il caricamento delle immagini, dannazione!"

C'è da chiedersi quanti potenziali visitatori abbia perduto questo sito a causa di un "benvenuto" dato ai robot di indicizzazione in un modo così brusco e disinformativo.

ALT="Mappa immagine di varie bandiere"

Cosa dovrebbe farsene un utente in modalità solo testo di un'immagine di alcune non meglio identificate bandiere? Si suppone che questo sia uno strumento di navigazione, non un gioco a quiz!

Alt="(Scusate, non disponibile con il vostro browser)"

Senza senso! Stavo usando Netscape con il caricamento delle immagini disabilitato. Ma anche se mi fossi trovato ad utilizzare Lynx, chi sei tu per dire che io non posso avviare un'applicazione ausiliaria per vedere questa immagine?

[LINK]-- Auto-esplicativo

Un'immagine di un certo testo "auto-esplicativo", senza alcun attributo ALT.

ALT="Inserisci il tuo testo alt qui"

¿Qué?

"L'Università di Oldtown arma il Dipartimento di Fisica"

Perbacco! Siamo arrivati a questo punto? Ah ecco: questa è la pagina web del Dipartimento di Fisica, decorata sulla sinistra con lo stemma (**) dell'Università (non la nostra: ma il nome è stato cambiato per proteggere il colpevole...).

"Foto di un toro nell'acqua in canoa"

Cosa, puoi ripetere per favore? Ah, ecco cos'è andato storto:

<IMG SRC="toro.jpg" ALT="Foto di un toro nell'acqua">
<IMG SRC="canoa.jpg" ALT="in canoa">

Il sito originale, che presentava un pittoresco fiume canadese, mostrava due immagini perfettamente ragionevoli, ma senza alcun nesso tra loro: in seguito un lettore di questo articolo, "Michael T.", mi inviò una graziosa illustrazione di questa castroneria!

"I dipartimenti accademici sono indicati da pallini rosa"

Inutilizzabile in modalità testo o su un monitor monocromatico. Scegliete un'icona grafica che possa convogliare il messaggio tramite la sua forma - in questo caso potrebbe essere un piccolo tocco (nessun danno nel farlo anche colorato); e scegliete simboli testuali distintivi da usare per i testi ALT, ad es.:

I dipartimenti accademici sono indicati
con: <IMG SRC="tocco.gif" ALT="[*]">

(facendo naturalmente i corrispondenti aggiustamenti anche all'elenco).

Questa era una "perdita" vera e propria, dove l'autore aveva fatto l'errore di far riferimento nel testo ad alcuni aspetti della presentazione (i "pallini rosa"), che sarebbero stati percepiti solo da un sottoinsieme di lettori. Il Web, per quella che è la sua vera natura, tende a separare il contenuto dalla presentazione in questo modo: un autore attento può scegliere uno stile autoriale che non cade in tale genere di trappole.

ALT="Sto caricando... Aspettate, per favore"

Un tentativo grazioso! Ma chi garantisce che il browser stia effettivamente caricando le immagini in questo momento? Come dice Jukka K, Dovrei aspettare fino a quando non mi venga un disordine mentale tale da farmi cliccare sul pulsante "mostra le immagini"?

ALT="Diagramma della popolazione ittica in base alla data"

Questo è un problema più sottile, ma il povero lettore in modalità testo è lasciato a domandarsi: cosa diavolo è questo diagramma che si suppone mi stia parlando? Un testo più utile potrebbe essere: "Grafico: la popolazione ittica decrebbe drammaticamente durante gli anni '80 fino a che non fu deliberata una moratoria sulla pesca", o qualsiasi altra cosa il grafico effettivamente illustri.

MIT/LCSINRIAKeioDARPACEC

Diamine! Sicuro che non sia niente di sacro? - questo proveniva da (una precedente versione della) pagina di benvenuto del W3C medesimo! Numerose immagini erano state presentate insieme, senza fornire alcuna spaziatura o punteggiatura tra i loro testi ALT.

Il mio errore favorito era qualcosa di questo tipo:
<CENTER>
<FONT SIZE=6>Our Classrooms and Staff
[in italiano: "Le nostre aule ed il personale"]
</FONT>
<IMG SRC="rule.gif" ALT="fancy horizontal rule"
[in italiano: "una estrosa linea orizzontale"]
>
</CENTER>

Invece di usare <H1> per questo titolo di primo livello, lo hanno semplicemente evidenziato ingrandendo il carattere: non vi era sottintesa alcuna interruzione di riga tra il testo e l'immagine. Con il caricamento delle immagini attivo, nessun problema: la "estrosa linea orizzontale" era così grande che andava a finire automaticamente su una nuova riga. Tuttavia, con i browser in modalità testo il tutto veniva riprodotto curiosamente come:

Our Classrooms and Staff fancy horizontal rule 
[in italiano: "Le nostre aule ed il personale hanno un debole per una linea orizzontale"]

Certamente avrebbero dovuto usare per il titolo il marcatore H1. Un modo per trattare una linea orizzontale decorativa è menzionato più sopra.

(Commento: potreste riuscire a trovare alcuni degli esempi con motori di ricerca come Altavista; altri sono stati adattati, o alcuni esempi presi e assemblati in uno "strafalcione" composito. I motori di ricerca che indicizzano i testi ALT tuttora non hanno problemi a trovare una grande quantità di pagine contenenti "pallino rosso piccolo" o simili, e sfortunatamente non tutte sono guide autoriali per il Web che vi dicono di non scrivere così.)

Non credo che occorresse alcuna particolare familiarità con un browser testuale e tantomeno con un sintetizzatore vocale, per riuscire a scegliere un testo ALT utile nella maggior parte degli esempi. Se il documento fosse stato marcato dando la giusta considerazione al contenuto che si voleva comunicare al lettore, piuttosto che lasciandosi distogliere dalla meccanica del Web, allora esso avrebbe potuto "funzionare" su qualsiasi browser - e strumento di ricerca e indicizzatore. E senza subire alcun degrado del proprio aspetto visivo nelle comuni situazioni di navigazione grafica.

 Per riassumere 

Una considerazione finale. Quando viene pubblicata l'edizione economica di un vostro libro, include essa per caso un "testo ALT" che dice al lettore che avrebbe dovuto acquistare l'edizione con copertina rigida, dotata di otto illustrazioni extra e di una splendida sopraccoperta? Penso di no. E allora, per favore, non rivolgetevi neppure ai vostri lettori che usano la modalità testo sul Web come se fossero cittadini di seconda classe.

I miei ringraziamenti ed i migliori saluti a tutti quelli che hanno contribuito alle discussioni sulle precedenti bozze di questi appunti.

"Il plagio è la forma più sincera di adulazione"? A parte una versione di questo articolo che era stata presentata sul sito WDG con il mio consenso e la mia piena cooperazione, ed alcuni estratti che sono stati usati con il mio permesso in un paio di altri posti, i motori di ricerca hanno trovato numerosi altri siti che hanno "grattato" parti sostanziali di questo articolo senza chiedere il permesso e senza dichiarare la loro fonte, incluso uno che ha applicato il proprio avviso di copyright sopra il mio materiale. Suppongo che dovrei essere gratificato dal fatto che le mie idee stanno trovando una tale eco, ma...


(*) L'involontario gioco di parole nel testo originale inglese non è traducibile in italiano ricorrendo ai termini solitamente adoperati. Il testo inglese recita infatti: Small red bullet Response to Terrorism, dove bullet significa letteralmente proiettile. La traduzione letterale suonerebbe dunque Proiettile rosso piccolo Risposta al terrorismo, frase nella quale l'effetto comico è evidente. Però nell'uso italiano comune il segnaposto colorato che in inglese si chiama bullet viene detto solitamente pallino, mai proiettile.

(**) In inglese stemma è coat-of-arms. Il testo inglese dello strafalcione - Oldtown University arms Physics Department - recava solo arms: da qui l'equivoco con il verbo to arm, equivalente dell'italiano armare.

*Leggi: Tabella riassuntiva e materiali accessori
*Vai a: Diodati.org > Guide, articoli, scritti > Uso dei testi ALT all'interno di IMG
*Scrivi: info@diodati.org
*Ultima modifica: 15/7/2004 ore 15:25