L Le i im mm ma ag gi in ni

Lezione 09 Accessibilità Le immagini
Immagini Le immagini sono una parte costituiva della pagine web. Si poterebbe aprire una lunga discussione sul fatto che oggi siti Internet e anche nelle e­mail ci siano troppe immagini, spesso assolutamente inutili che rallentano il download della pagina e rendono praticamente inutilizzabile la pagina per gli utenti non vedenti o anche quelli che per vari motivi, scelgono di navigare senza visualizzare le immagini. Potremmo anche aggiungere che una pagina costituita solo di immagini risulta difficilmente indicizzabile dai motori di ricerca, ma evitiamo volutamente di affrontare questo argomento che rischierebbe di distrarci dall’argomento principale. Diamo dunque per scontato che sappiate comporre con criterio le vostre pagine usando le immagini quando servono, senza abusarne. Del resto non bisogna nemmeno cadere nella tentazione di eliminare del tutto le immagini. Questa sarebbe una soluzione che porta un notevole impoverimento di una pagina web. Questa spiaggia rosa (Figura 1) la posso descrivere con mille parole, ma una foto aiuta a decidere di partire subito . Figura 1
Alessandra Salvaggio ­ Merlin Wizard DMC © 2007 Tutti i diritti riservati 1
Accessibilità Lezione 09 Per la cronaca si tratta della spiaggia di Elafonissi a Creta, magari vi fosse veramente venuta voglia di partire… Scherzi a parte è evidente che non si possono eliminare le immagini. Del resto molti degli utenti ipovedenti sono in grado, almeno parzialmente di fruire delle immagini stesse. Il discorso è diverso per gli utenti totalmente ciechi o chi sceglie di navigare senza immagini. In questo caso dobbiamo fornire una alternativa in modo che l’utente con disabilità possa comunque fruire la nostra pagina. Il minimo che possiamo, o meglio dobbiamo fare, è corredare ciascuna immagine di un testo alternativo che lo screen readre o la barra braille potranno leggere. Il testo alternativo viene inserito accanto all’immagine usando il tag ALT. In questo modo. <IMG SCR=”elafonissi.jpg” ALT=”la spiaggia rosa di Elafonissi a sud di Creta”> Il tag ALT non solo viene letto dagli strumenti assistivi, ma se passate il mouse su una immagine che ne dispone, vi comparirà un rettangolo giallo con la descrizione che avete fornito (Figura 2). Questo effetto si ottiene anche con l’attributo TITLE che però non viene letto dagli screen reader. Figura 2 Naturalmente la ampiezza del testo alternativo deve essere proporzionata allo scopo dell’immagine nella pagina. Più l’immagine è significativa per comprendere la pagina, più il testo alternativo dovrà essere descrittivo. In questo caso, senza comunque omettere il testo alternativo, potete aggiungere una didascalia all’immagine stessa.
Alessandra Salvaggio ­ Merlin Wizard DMC © 2007 Tutti i diritti riservati 2 Accessibilità Lezione 09 La descrizione o didascalia se non è indispensabile anche per gli utenti senza problemi di vista può essere scritta anche nello stesso colore dello sfondo come abbiamo spiegato nella scorsa lezione. Oltre alla didascalia, che sembra la soluzione più comoda, quando la descrizione fosse veramente troppo lunga potete ricorre a pagine esterne con la descrizione dell’immagine. Questo è anche la direttiva specifica WCAG http://www.w3.org/TR/WCAG10­ HTML­TECHS/#long­descriptions. Questo può essere ottenuto tramite l’attributo LONGDESC. Così <IMG SCR=”elafonissi.jpg” ALT=”la spiaggia rosa di Elafonissi a sud di Creta” LONGDESC=”elafonissi.html”> Nel file indicato come LONGDESC (elafonissi.html, in questo caso) potete scrivere tutta la descrizione dell’immagine. Non tutti i dispositivi, però, supportano questo attributo e può risultare macchinoso dover seguire un link e poi ritornare indietro. Per ovviare al fatto che non tutti i dispositivi gestiscono questo attributo, le WCAG suggeriscono di ovviare con un link descrittivo, in questo modo <IMG SCR=”elafonissi.jpg” ALT=”la spiaggia rosa di Elafonissi a sud di Creta” LONGDESC=”elafonissi.html”> <A href="elafonissi.html" title="Descrizione della spiaggia di Elafonissi">[D]</A> Il browser mostrerà una D fra parentesi quadre [D] accanto o sotto all’immagine (Figura 3). Attivando il collegamento associato a questa D si può acceder alla pagina con descrizione dell’immagine. Figura 3
Alessandra Salvaggio ­ Merlin Wizard DMC © 2007 Tutti i diritti riservati 3 Accessibilità Lezione 09 Contro a questa soluzione, potremmo dire che alcuni utenti potrebbero avere difficoltà a capire il significato di quella D. Forse potrebbe essere meglio un testo del link più descrittivo tipo <IMG SCR=”elafonissi.jpg” ALT=”la spiaggia rosa di Elafonissi a sud di Creta” LONGDESC=”elafonissi.html”> <A href="elafonissi.html" title="Descrizione della spiaggia di Elafonissi">Seguite questo collegamento per la descrizione completa della pagina</A> Un’altra soluzione che è stata adottata spesso è l’uso di un D­Link applicato a una immagine trasparente delle dimensioni di 1px X 1px il cui attributo alt è “D­Link” o “D”, in questo modo. <IMG SCR=”elafonissi.jpg” ALT=”la spiaggia rosa di Elafonissi a sud di Creta” LONGDESC=”elafonissi.html”> <A href="elafonissi.html" alt="D­Link"><img src=”trasp.gif”></A> Si tratta, però, di una soluzione deprecate dalle WCAG Alcuni autori suggeriscono di introdurre un file sonoro accanto alle immagini. Il file sonore fungerà da didascalia parlata. Naturalmente dovete avvisare in qualche modo l’utente della presenza di questi file in modo che possa interrompere momentaneamente lo screen reader e avviare il file sonoro. Questo file non deve essere caricato automaticamente, ma deve essere predisposto un collegamento verso il file sonoro nella pagina in modo che si possa decidere se e quando ascoltarlo. L’indicazione può essere scritta nel colore dello sfondo se volete nasconderla agli utenti che non fanno uso di screen reader. A me sembra una soluzione un po’ macchinosa e poco pratica per diversi motivi: ­ L’utente disabile deve disabilitare temporaneamente lo screen reader per ascoltare il commento sonoro ­ I file audio tendono ad essere piuttosto pesanti e possono rallentare notevolmente i tempi di caricamento ­ Questo file può risultare ridondante. Se il testo è messo nell’attributo ALT sarà lo screen reader stesso a leggerlo senza bisogno di un file esterno. Concludiamo questa riflessione sui testi alternativi per le immagini i, ricordando che non è facile “trovare” le parole giusta per descrivere una immagine. Per capire meglio come lavorare, vi consigliamo di leggere l’interessante articolo Use of ALT texts in I MGs di Alan J. Flavell del Dipartimento di Fisica ed Astronomia dell'Università di Glasgow. Potete trovare gli articoli in lingua originale alla pagina http://www.htmlhelp.com/feature/art3.htm e tradotti in italiano da Michele Diodati alla pagina http://www.diodati.org/scritti/2002/g_alt/index.asp.
Alessandra Salvaggio ­ Merlin Wizard DMC © 2007 Tutti i diritti riservati 4 Lezione 09 Accessibilità La dimensione delle immagini Una altra considerazione da fare in rapporto alle immagini, è relativa alla loro dimensione. Molti ipovedenti usano basse risoluzioni del monitor (640 x 480 o 800 x 600) in modo che il contenuto delle pagine risulti “più grande”, per cui è una norma di buona progettazione inserire nelle pagine web delle immagini non più grandi di queste dimensioni (che, a mio parare, sono comunque eccessive per una immagine) in modo che siano visibili interamente all’interno di una schermata. Anche per gli utenti senza problemi di vista è assolutamente fastidioso dover scrollare la pagina, soprattutto in orizzontale, per vedere una immagine per intero. Un po’ di spazio, per favore Potete corredare le vostre immagini dei migliori testi ALT in assoluto, ma, se le inserite nelle pagine appiccicando tutto il testo intorno, otterrete una pagina difficile da leggere. Abbiamo già parlato della necessità di spazi vuoti trattando della impaginazione del testo. Lo stesso discorso vale anche per le immagini. Un po’ di spazio vuoto intorno, poi aiuta anche a mettere meglio a fuoco l’immagine. Per inserire un po’ di spazio vuoto intorno alle immagini, potete ricorrere agli attributi HSPACE e VSPACE del tag IMG, come nell’esempio che segue. <IMG SRC="immagine.gif" vspace="10"> width="112" height="19" hspace="10" Potete anche ricorrere all’attributo Margin dei CSS <style> img { margin­top: 12px ; margin­right: 10px ; margin­bottom: 11px; margin­left: 9px; } </style> Potete anche elencare una dietro l’altra le dimensioni dei margini ricordando che l’ordine è superiore­destro­inferiore­sinistro <style> img {margin: 12px 10px 11px 9px;} </style> Se i quattro margini sono uguali, basta specificarne uno <style>
Alessandra Salvaggio ­ Merlin Wizard DMC © 2007 Tutti i diritti riservati 5 Accessibilità Lezione 09 img {margin: 12px;} </style> GIF Animate e altri elementi in movimento Concludiamo con qualche riflessione sulle gif animate. Il quinto requisito previsto per la realizzazione di siti accessibili dalla legge italiana (trovate tutti i 22 requisiti nella lezione 3 oppure, in versione integrale, alla pagina http://www.pubbliaccesso.gov.it/biblioteca/documentazione/studio_lineeguida/ 3_requisiti_tecnica.htm prevede quanto segue. Requisito n. 5 Enunciato: Evitare oggetti e scritte lampeggianti o in movimento le cui frequenze di intermittenza possano provocare disturbi da epilessia fotosensibile, disturbi della concentrazione o che possano causare il malfunzionamento delle tecnologie assistive utilizzate. Qualora esigenze informative richiedano comunque il loro utilizzo, avvisare l’utente del possibile rischio prima di presentarli e predisporre metodi che consentano di evitare tali elementi. Anche le WCAG 1 (http://www.w3.org/TR/WCAG10­HTML­TECHS/#animated­ images) si esprimono contro le animazioni nelle pagine “Until user agents allow users to freeze moving content, avoid movement in pages” (Finchè i dispositivi non permetteranno di bloccare il contenuto in movimento, evitate di inserire movimento delle pagine) Queste osservazioni farebbero pensare che è opportuno evitare l’uso di gif animate o comunque limitarne il più possibile l’uso. Se vi occorrono, potete comunque cercare di renderle “più accessibili” possibile ad esempio impostando un tempo abbastanza lungo per lo scambio delle immagini in modo da evitare questo effetto di “abbagliamento”. Anche le gif animate devono essere corredate dal testo alternativo. Sono critiche anche le scritte in movimento ottenute con Javascript o applet, perché solo gli strumenti assistivi più recenti sono in grado di leggerli. Sono invece, assolutamente da evitare le scritte lampeggianti ottenute coi tag BLINK e MARQUEE che sono deprecati. Addirittura in una nota delle WCAG 1 (http://www.w3.org/TR/WAI­ WEBCONTENT­TECHS/#gl­movement) leggiamo “The BLINK and MARQUEE elements are not defined in any W3C HTML specification and should not be used.” (Gli elementi BLINK e MARQUEE non sono definite in nessuna specifica HTML del W3C e, per tanto, non dovrebbero essere usati)
Alessandra Salvaggio ­ Merlin Wizard DMC © 2007 Tutti i diritti riservati 6 Accessibilità Lezione 09 In questa lezione abbiamo volutamente omesso ogni considerazione relativa alle animazioni Flash alla quali dedicheremo un intero modulo del corso.
Alessandra Salvaggio ­ Merlin Wizard DMC © 2007 Tutti i diritti riservati 7