Giorno 23: Fornite testi equivalenti per le immagini
Questo è il giorno più importante, e dunque seguite con attenzione:
Ogni singola immagine, su ogni pagina del vostro sito, deve avere un equivalente testuale, il cosidetto “alt
text”, specificato nell’attributo alt
del tag <img>.
I lettori di schermo li leggono, i browser testuali li visualizzano, Google li rende indicizzabili, e i browser visuali possono visualizzarli come tooltip nella linea di stato (anche se come progettista potete evitarlo). Abbiamo già visto come inserire alt
text vuoti per le immagini con funzione spaziatrice, e i molti modi per creare elenchi accessibili con immagini come punti elenco. Cosa manca?
- l’icona Permalink [NdT link permanente ad un articolo di un weblog]
- l’icona “Powered by” (realizzato con)
- l’icona Mail-to
- l’icona XML
- gli elementi grafici sparsi all’interno degli articoli
- tutte le altre immagini che avete aggiunto al vostro modello.
Tutti necessitano di un alt text
appropriato
.
A chi serve?
- A Jackie. JAWSlegge gli
alt
text. Senza un validoalt
text, Jackie sentirebbe, invece, il nome del file che suona orribilmente. - A Marcus. Lynx, come browser testuale, non visualizza immagini, bensì solamente
alt
text. Senzaalt
text, Lynx visualizza il nome del file, con lo stesso effetto negativo come il suono in JAWS. - A Michael. Links, come browser testuale, non visualizza immagini, bensì solamente
alt
text. Senzaalt
text, Links non visualizza nulla per l’immagine (a meno che l’immagine non sia un link, in questo caso Links visualizza semplicemente “[IMG] “). Navigando con Opera in modalità ‘senza immagini’, Michael vede glialt
text al posto delle immagini. - A Lillian. Internet Explorer visualizza gli
alt
text come tooltip (anche se è possibile evitarlo). - A Google. Il Googlebot indicizza gli
alt
text, utilizzandoli non solo nell’accoppiare le parole chiavi nelle normali ricerche, ma anche nella ricerca di immagini. (Come pensate funzioni?)
Come fare
Il modello predefinito di Movable Type non include alcun tag <img>.
Se usate la grafica per “Powered by Movable Type” come immagine, assicuratevi che il tag <img>
includa l’attributo alt="Powered by Movable Type"
.
Il modello predefinito di Greymatter include solo una immagine, generata dalla variabile {{gmicon}}
. Questa genera un tag <img>
che include l’appropriato alt
text, “Powered by Greymatter”.
Radio genera automaticamente gli appropriati alt
text for per le seguenti icone standard:
- tazza da caffe XML:
alt="Subscribe to <site name> in Radio UserLand."
- icona XML:
alt="Click to see the XML version of this web page."
- icona Mailto:
alt="Click here to send an email to the editor of this weblog."
Però, gli utenti di Radio dovranno specificare manualmente gli alt
text per le immagini personalizzate. Andate a Prefs, poi Customized Images (sotto Templates), e aggiungete questi attributi alt
:
- permalink del giorno:
alt="Permanent link: <%longDate%>"
. - permalink dell’articolo:
alt="Permanent link"
. - icona Source :
alt="source"
. - icona Enclosure:
alt="enclosure"
.
Potete anche aggiungere title=""
per eliminare il tooltip nei browser visuali.
Ovviamente, a prescindere dallo strumento di pubblicazione, se avete aggiunto vostre immagini al modello, o se avete della grafica negli elementi di navigazione degli articoli, dovranno avere l’appropriato alt
text. Poichè ho sempre imparato meglio dagli esempi, eccone alcuni.
Ulteriori principi generali ed esempi sono presenti nella sezione “approfondimenti”.
Cattivi esempi di alt
text
- l’uso di qualsiasi marcatore HTML.
alt
text può contenere solamente del testo, nessun altro tag al suo interno. alt="filename.jpg"
. Non ci dice nulla. Quale è la funzione grafica dell’immagine? Come si chiami il file non ci interessa.alt="alt text"
. E’ inserito da alcuni editor HTML come promemoria, e lasciati là da progettisti incompetenti.alt="Click here!"
Non ha alcun scopo utile (a meno che non sia su una grafica che riporti “Click here!”).alt="Turn images on!"
Qui è come se a un non vedente che vi chiede l’ora, rispondeste “Ma apri gli occhi!” Le immagini possono non essere visualizzate per svariate ragioni (la banda di trasmissione limitata di Michael), possono essere indisponibili (il browser testuale di Marcus), o non possono essere escluse del tutto (lo screen reader di Jackie, che visualizza le immagini ma legge ad alta voce glialt
text).- Altri cattivi esempi di
alt
text.
Ottimi esempi di alt
text
- Jonathon Delacour ha un simbolo cinese nella grafica della sua testata.
alt="Site logo: xin, the Chinese character for heart"
. - Leslie Harpold ha una testata grafica che include il nome del sito, “The Historical Present”, e il motto, “Hypermodernism has a posse”.
alt="the historical present: hypermodernism has a posse"
. - Simon Willison ha l’etichetta “W3C XHTML 1.0”.
alt="Valid XHTML 1.0!"
- Jeffrey Zeldman ha una barra di navigazione testuale resa graficamente; passandoci con il mouse, ogni grafica visualizza un messaggio nella barra di stato, grazie al codice in Javascript. Ovviamente gli utenti non vedenti non li percepiscono, così Zeldman inserisce anche lo stesso testo nell’
alt
text di ogni elemento grafico. Scaltro. - Dean Allen ha una testata grafica che include il nome del sito ed il motto. Il suo
alt
text è abbastanza lungo e include un motto diverso (confonde un po’), ma Dean è abbastanza furbo da cavarserla.alt="Textism is an ephemeris focused on the composition, design, and reading of text. In addition, there will be pie"
.
Nota: probabilmente voi non siete abbastanza furbi da poterla fare franca. Fatelo semplice.
Approfondimenti
- A. J. Flavell: ALT texts in IMG.
- Jukka Korpela: Simple guidelines on using ALT texts in IMG elements.
- Ian Hickson: Mini-FAQ about the alternate text of images.
- Watchfire.com: Provide alternative text for all images.
- All My FAQs Wiki: ALT attribute.
- WebAIM: How to Create Accessible Graphics.
- Martin Schrode: On accessible advertising.
- Section 508 Federal Accessibility Guidelines: What is meant by a text equivalent?