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?

  1. A Jackie . JAWS legge gli alt text. Senza un valido alt text, Jackie sentirebbe, invece, il nome del file che suona orribilmente.
  2. A Marcus . Lynx, come browser testuale, non visualizza immagini, bensì solamente alt text. Senza alt text, Lynx visualizza il nome del file, con lo stesso effetto negativo come il suono in JAWS.
  3. A Michael . Links, come browser testuale, non visualizza immagini, bensì solamente alt text. Senza alt 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 gli alt text al posto delle immagini.
  4. A Lillian . Internet Explorer visualizza gli alt text come tooltip (anche se è possibile evitarlo).
  5. 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 gli alt 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

 
<< Giorno 22: Usate liste vere (o fatele sembrare tali)| Indice | Giorno 24: Fornite testi equivalenti per mappe di immagini >>