Scrivere testi alternativi per le immagini

Troverai l’articolo originale in lingua inglese su http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/image-alt-text2.shtml


Chiunque abbia una qualche conoscenza sull’accessibilità del Web sa bene che le immagini hanno bisogno di testi alternativi (attributo ALT). Questo perché gli screen readers non sono in grado di comprendere il contenuto di un’immagine, ma semplicemente leggono e pronunciano il testo alternativo a loro assegnato. In Internet Explorer il testo alternativo è visualizzabile anche semplicemente passando col mouse sull’immagine ed osservando il testo che appare su sfondo giallo. Altri browser – correttamente – non fanno ciò.

Il codice HTML per l’inserimento del testo ALT è:

<img src=”nomedelfile.gif” alt=”Testo descrittivo alternativo”>

Naturalmente è semplicissimo scrivere testi alternativi per le immagini… o no? Basta inserirvi una descrizioneed il gioco è fatto, giusto? Beh, non proprio… certo non è come conoscere le complesse leggi del cosmo, ma ci sono alcune regole che vanno seguite…

Immagini”spaziatrici” e testo alternativo mancante

Le immagini spaziatrici dovrebbero sempre avere assegnato un testo ALT nullo, alt=””. In questo modo la maggior parte degli screen readers ignorerà completamente l’immagine e non ne annuncerà nemmeno la presenza.

Questo tipo di immagini invisibili sono utilizzate in moltissimi siti web ed hanno lo scopo di creare spazio sulla pagina; talvolta, per  riprodurre certe visualizzazioni grafiche, molti sviluppatori inseriscono immagini (specificandone altezza e larghezza) ed ottengono la spaziatura desiderata.

Però non tutti utilizzano il testo alternativo nullo, e scrivono alt=”immagine spaziatrice”;   prova a pensare quanto questo possa risultare noioso per un utente che utilizza uno screen reader, specialmente in presenza di decine di immagini spaziatrici: di solito uno screen reader in presenza di immagini antepone e pronuncia la parola “immagine”, così esso finirebbe col leggere “immagine, immagine spaziatrice” decine di volte in una sola riga, e questo non rappresenta certo un aiuto per l’utente.

Altri sviluppatori semplicemente omettono l’attributo ALT per queste immagini (ma spesso anche per le altre!!!). In questo caso la maggior parte degli screen readers leggerà il nome del file contenente l’immagine (per esempio ‘newsite/images/onepixelspacer.gif’) e pronuncerà all’utente: “Immagine, newsite slash images slash one pixel spacer dot gif”… e se di queste immagini ce ne sono dieci per riga???

Punti elenco ed icone

I punti elenco e le icone dovrebbero essere trattati in maniera analoga alle immagini spaziatrici e quindi avere un testo alternativo nullo, alt=””. Prova a pensare ad un elenco di elementi con un punto elenco decorativo che precede ciascuno di essi. Se il testo alternativo “punto elenco” venisse assegnato a ciascuna immagine, gli screen readers leggerebbero e pronuncerebbero “immagine, punto elenco” prima di ogni elemento della lista, rendendo meno agevole lo scorrere lungo gli elementi.

Anche alle icone, di solito seguite da link complementari, dovrebbe essere assegnato un alt= ””. Immaginail seguente link con icona:

   Contattaci

In molti siti web viene utilizzato un testo ALT per questo tipo di immagini, per esempio “contattaci”. Uno screen reader leggerebbe prima il testo alternativo e poi il collegamento testuale, così finirebbe col pronunciare “contattaci” due volte, il che è evidentemente  inutile e dannoso.

(Idealmente i punti elenco e le icone dovrebbero essere gestite come le immagini di sfondo per mezzo dei CSS, il che li eliminerebbe completamente dal documento HTML e quindi eliminerebbe la necessità di qualsivoglia descrizione alternativa)

Immagini decorative

Anch’esse dovrebbero avere un testo alternative nullo, o alt=””. Se un’immagine è esclusivamente un elemento grafico e visuale, proprio non c’è necessità che l’utente di screen reader ne percepisca l’esistenza attraverso un aumento del “rumore” durante la navigazione. D’altra parte, si potrebbe obiettare che le immagini su un sito Web creano un’identità di marchio e nascondendone l’esistenza agli utenti di screen reader si priva questa categoria di utenti dell’”esperienza” ad esse associata.

Gli esperti di accessibilità tendono generalmente a privilegiare l’eliminazione di testo alternativo in caso di immagini decorativi, anche se l’obiezione appena vista non è priva di fondamento.

Navigazione e testo all’interno di immagini

I menu di navigazione basati su elementi grafici non possono che incapsulare il testo all’interno delle immagini. In questo caso il testo alternativo non dovrebbe essere utilizzato per ampliare il testo presente nell’immagine. In nessun caso l’alt dovrebbe dire “Leggi tutto sui nostri fantastici servizi, sviluppati per supportare ogni tua esigenza”; se l’elemento di menu dice “servizi”, il testo ALT dovrebbe anch’esso dire “servizi”.

Il testo ALT dove sempre descrivere il contenuto dell’immagine e, quindi, ripetere il testo in essa presente parola per parola. Se si desidera espandere il concetto presente nell’immagine – come in questo esempio – allora si potrà sempre utilizzare l’attributo “title”.

Lo stesso dicasi per ogni altro testo all’interno di un’immagine. Il testo ALT dovrebbe semplicemente ripetere, parola per parola, il testo contenuto dall’immagine.

Logo aziendale

I siti web variano la modalità di applicazione del testo alternative in corrispondenza del logo aziendale. Inalcuni è presente la dicitura “Nome dell’azienda”, in altri “Logo dell’azienda” ed altri ancora descrivono la funzionalità dell’immagine (solitamente un link di ritorno all’home page) “Torna all’home page”.

Ricorda, il testo alternativo dovrebbe sempre descrivere il contenuto dell’immagine, quindi il primo esempio alt=”nome dell’azienda” è probabilmente il migliore. Se poi il logo rappresenta anche un link che permette di tornare all’home page, questo può essere comunicato efficacemente con l’attributo title.

Conclusioni

Scrivere testi alternative efficacy non è troppo difficile.

Se si tratta di immagini decorative si dovrebbe applicare un alt nullo, ma mai omettere l’attributo ALT.

Se l’immagine contiene testo, allora l’ALT dovrebbe semplicemente riportare tale testo, parola per parola.

Ricorda inoltre che il testo alternativo ha come scopo esclusivo quello di descrivere il contenuto dell’immagine e non altro.

Assicurati inoltre che i tuoi testi alternativi si mantengano per quanto possibile brevi e concisi. Ascoltare una pagina Web con uno screen reader richiede molto tempo in più rispetto ai “metodi tradizionali”, quindi cerca di non rendere la navigazione un’esperienza noiosa per gli utenti di screen readers con testi alternativi ridondanti ed inutili.

Potrebbero interessarti anche i seguenti articoli

  • L’elemento image in HTML 5L’elemento image in HTML 5 Traduzione dell'articolo "The HTML 5 Image Element" di Gez Lemon del 29 agosto 2007 L’attributo longdesc Uno degli aspetti rimarchevoli riguardanti […]
  • Grafici a barre accessibiliGrafici a barre accessibili Ogni volta che si fruisce un insieme di statistiche, la documentazione è corredata da grafici che ne agevolano la comprensione; su internet molti sono i siti che […]
  • Ipovisione e accessibilità e fruibilità del webIpovisione e accessibilità e fruibilità del web Questa categoria di disabili è infatti particolarmente svantaggiata nell'attuale panorama di siti Internet, costruiti per la stragrande maggioranza con criteri per loro […]
  • Rendere accessibile Macromedia FlashRendere accessibile Macromedia Flash Macromedia Flash e Shockwave hanno rivoluzionato il modo con cui molti sviluppatori creano contenuti per il web. Queste tecnologie permettono la creazione di […]
  • L’accessibilità di AJAXL’accessibilità di AJAX Traduzione dell'articolo "Ajax accessibility" di John Resig Una diffusa preoccupazione sulla maggior parte delle applicazioni Ajax riguarda la loro accessibilità. E' […]
Condividi:

Informazioni sull'autore

Roberto Castaldo
Roberto Castaldo
Sono nato e vivo a Napoli, ed opero professionalmente nel mondo dell'informatica da più di vent'anni. In realtà l'informatica, insieme alla musica e ad altre poche cose, è stato da sempre un mio chiodo fisso, e la buona sorte mi ha aiutato a trasformarlo in un mestiere. Sin dalle mie primissime esperienze lavorative - insegnavo dattilografia ed i primi rudimenti di informatica in una scuola privata - mi sono trovato a mio agio nel settore della formazione e della divulgazione, certamente aiutato dai miei studi classici. Nel 1987 ho iniziato la mia attività come insegnante d'informatica in un Istituto Professionale Statale - per circa due anni sono stato il più giovane insegnante di ruolo d'Italia. Ho avuto svariate esperienze anche nel settore privato come sviluppatore (TPascal - lo ricordate? - VB, ASP e, più di recente VB.NET ed ASP.NET), ma soprattutto come docente e come divulgatore. Ho effettuato attività di formazione presso le più grandi realtà imprenditoriali italiane (IBM, Omnitel, Telecom Italia, TIM, Unicredito, Ekip, BNL, SSGRR), ma anche all'estero in qualità di docente e/o progettista di percorsi formativi; gli argomenti spaziano dal mondo Office fino al multimedia ed alla programmazione avanzata ASP ed ASP.NET. Ho collaborato con l'Istituto Italiano per gli Studi Filosofici di Napoli, ho redatto articoli/tutorial per un'importante rivista informatica (Win98 Magazine), ed ho partecipato allo sviluppo di CD-Rom Multimediali (IBM, Selfin, BNL) curando personalmente la registrazione dei commenti audio ed il montaggio delle musiche (CoolEdit), l'eventuale connessione a database remoti, l'assemblaggio degli elementi testuali, grafici e multimediali (Director 8) fino alla creazione del master definitivo. Negli anni 1998-2000 ho collaborato con la Gazzetta dello Sport Online curando, in occasione dei più importanti avvenimenti sportivi (Mondiali ed Europei di calcio, Giro d'Italia, Campionato di Serie A) le pagine contenenti la traduzione in inglese e francese degli articoli in italiano. Il mio compito consisteva nell'inviare ai miei traduttori la cronaca in italiano, riceverne la traduzione, creare le pagine inglesi e francesi del sito www.gazzetta.it e pubblicarle sul server, il tutto entro 90 minuti dalla fine dell'evento. Nel frattempo, mi avvicinavo in maniera sempre più approfondita alle problematiche legate all'accessibilità di siti web, progettando percorsi di formazione ad hoc, ed aderendo entusiasticamente al progetto webaccessibile.org. Sono stato per diversi mesi membro del XML Protocol Working Group del W3C, ed attualmente partecipo ai lavoro del WAI Web Content Accessibility Guidelines (WCAG) Working Group e del E&O Education ad Outreach Working Group.

Commenti

Nessun commento

    Rispondi

    Link e informazioni