Giorno 23 – Fornite testi equivalente per le immagini

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. JAWSlegge gli alttext. 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

Potrebbero interessarti anche i seguenti articoli

Condividi:

Informazioni sull'autore

Franco Carcillo
Franco Carcillo
Sono nato (1956) e vivo a Torino.  Da oltre 26 anni lavoro ('da sempre') presso il Comune di Torino, presso il Sistema Informativo. Mi occupo di web.  Sono infatti Direttore Responsabile dei siti internet della Città, sin dalla loro nascita, nel 1994. Prima del 1994 mi sono occupato di informatica gestionale classica, anche se in ambiente distribuito (mini e pc, sin dal loro apparire nella Civica Amministrazione).  Negli anni 80 mi sono appassionato, nel tempo libero, di telematica.  Mio è stato il primo nodo della rete Fidonet in Torino città (Fido_Torino e  TO_news) nel 1987.  Sono stato anche coordinatore nazionale della rete amatoriale, anche se solo per 6 mesi. Poi ho abbandonato:  troppe le pressioni intorno a quello che doveva essere, alla fine, un semplice hobby. Quando non ci si diverte più, meglio spegnere. Ma la passione telematica è rimasta.  Ed ecco che ho tenuto ogni settimana (sino alla chiusura del giornale!) la prima rubrica di telematica pubblicata  su un quotidiano italiano "StampaSera"; a quei tempi di internet se ne parlava vagheggiandola nei meandri universitari e militari americani. Ho pubblicato il primo speciale pubblicato in Italia riguardante i bbs su BIT della Jackson;  ho collaborato, con altre riviste, tra cui PCWORLD dove ho avuto per lungo tempo una rubrica fissa. Di interner e dei siti, che dire? C'è ancora tanta strada da percorrere: l'accessibilità ne è un'esempio. Ma anche rendere i siti davvero fruibili così come far 'trovare' la montagna di informazioni memorizzate tra le pagine, sono sfide  non da poco. Vi pare? All'Università di Torino, quest'anno, molti studenti hanno partecipato, interessatissimi, ad un mio breve seminario su 'Progettare siti web per la Pubblica Amministrazione, la sfida dell'accessibiltià e usabilità'.  E' stupefacente notare come le persone che usano tutti i giorni la rete e a cui spieghi come e perchè i siti non sono nè usabili nè accessibili si rendano immediatamente conto e capiscano: quasi un velo, un sipario sia stato loro svelato. Ecco perchè ho deciso di tradurre 'Dive into accessibility':  perchè affrontare l'accessibilità non è così difficile. Certo nei siti mastodontici le operazioni possono essere lunghe, ma non vi sono più scuse per partire con nuovi progetti 'alla cieca'.

Commenti

Nessun commento

    Rispondi

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Link e informazioni