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.
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.
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,APPLETeINPUT) 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].
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.
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:
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à.
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.
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.
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.
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>
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.)
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.
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.
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.
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...
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:
ALT:
"Sinistra ", "Destra ", "Indice ", "Configura "
ecc.,
è considerato in generale insoddisfacente, perché potrebbe generare confusione su dove si trovano i confini tra i collegamenti; notate inoltre che l'HTML4 ammonisce contro l'uso di "spazio bianco" iniziale/finale nei valori di attributo.
Le barre verticali costituiscono una popolare alternativa: per ottenere ad es.:
|Sinistra|Destra|Indice|Configura|
i testi ALT potrebbero essere rispettivamente:
"|Sinistra|", "Destra|", "Indice|", "Configura|"
Le parantesi rappresentano una soluzione ben bilanciata e riflettono un
uso idiomatico
di vecchia data, proprio dei browser testuali, di rappresentare IMG con [LINK],
[INLINE] ecc.: fornire testi ALT quali
"[L'Università]", "[La città]", "[Indice principale]",
ecc., produce l'ovvio risultato:
[L'Università][La città][Indice principale]
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.
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.
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.
Il colore del testo ALT è discusso separatamente. Vi è anche una distinta pagina su INPUT TYPE=IMAGE.
Un corrispondente suggerisce che molti degli usi erronei descritti qui siano causati dagli "strumenti di produzione" che gli autori sono soliti utilizzare per creare i loro documenti Web. Ma ciò suona tanto come una scusa, che ne dite? Il codice HTML è già di per sé abbastanza semplice: certamente ha senso adoperare adeguati strumenti software che consentano di evitare la parte più noiosa e pesante del lavoro: ed io sono in linea di principio del tutto a favore di ciò. Ma quando lo strumento vi impedisce di produrre documenti conformi ad un valido stile autoriale, allora dovreste mettere in discussione la vostra decisione iniziale di affidarvi a quel particolare strumento.
Un lettore chiede:
Qualcuno sta cercando di convincermi che il testo alt può realmente impedire
agli spider dei motori di ricerca di indicizzare un sito. È vero?
Mi riesce difficile crederlo. Omettere gli attributi ALT viola le
linee guida per l'accessibilità del Web,
il che sicuramente conta qualcosa anche per quelli che non considerano
seriamente le regole di sintassi dell'HTML. Una possibile fonte di informazioni
sui motori di ricerca può essere
Search
Engine Watch: come si può vedere, alcuni motori di ricerca tengono conto
dei testi ALT mentre alcuni non lo fanno (il che è un peccato).
Ma non vedo nulla lì a proposito di testi ALT che danneggiano
l'indicizzazione dei siti, e mi sembrerebbe davvero una cosa irrazionale (e tale
da suscitare commenti sfavorevoli in relazione all'accessibilità) se qualcuno di essi
lo facesse. Di sicuro non mi lascerei scoraggiare dall'usare gli ALT in modo corretto,
ed anzi aggiungerei subito la mia firma alla petizione
contro un simile motore di ricerca, qualora venisse trovato!
Per inciso, non ho mai preso alcuna iniziativa per registrare le mie pagine presso i motori di ricerca. Ma quando ricerco argomenti che mi interessano, vengono fuori le mie pagine in posizione relativamente alta nell'elenco. Perciò devo star facendo qualcosa di giusto.
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]
Benvenuti a... Stemma della Circoscrizione La Circoscrizione di On-Line Avete problemi ad accedere al nostro sito? [Cliccate qui]
[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.)
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"
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?
Un'immagine di un certo testo "auto-esplicativo", senza alcun
attributo ALT.
ALT="Inserisci il tuo testo alt qui"
¿Qué?
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/LCSINRIAKeioDARPACECDiamine! 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.
<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.
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 al
sommario
Scrivi a
info@diodati.org
Aggiornato Tuesday, 30-Jul-2002 13:41:54 CEST
2236 visite
dal 27/07/2002
