ACCESSIBILITÀ: PROBLEMI E SOLUZIONI

Transcript

1 Autore: Classe: Nicola Ceccon QUINTA INFORMATICA (5IA) Anno scolastico: 2003/2004 Scuola: Itis Euganeo ACCESSIBILITÀ: PROBLEMI E SOLUZIONI Dispensa In questa dispensa si affrontano alcuni problemi tipici dell'accessibilità e le relative soluzioni tecniche che si possono adottare utilizzando il linguaggio HTML. Per esempio si affrontano la linearizzazione delle tabelle, la skip navigation e la descrizione testuale delle immagini.

2 Premessa Accessibilità: 2 Gli screen reader e altre tecnologie assistive utilizzano una tecnica nota come linearizzazione per convertire una pagina web in una sequenza di parole e linee. Questo processo di linearizzazione prevede: 1. conversione delle immagini nell alternativa testuale specificata con l attributo ALT oppure, in caso di mancanza dell attributo, la sostituzione con il testo INLINE; 2. linearizzazione delle tabelle una cella alla volta partendo da sinistra verso destra riga per riga. Nel caso di una tabella di tre righe e tre colonne la linearizzazione comporta la presentazione del contenuto nella seguente sequenza 1 > 2 > 3 > 4 > 5 > 6 > 7 > 8 > 9. Questo processo incide in moto rilevante sulla accessibilità del sito per non vedenti o ipovedenti poiché la mancanza di alternativa testuale rende l eventuale informazione veicolata dall immagine inaccessibile e l utilizzo delle tabelle per la rappresentazione di dati rende le informazioni incomprensibili. Per esempio nel caso di una mappa stradale la mancanza dell alternativa testuale cancella l informazione presentando solamente l informazione INLINE che avverte che c è una immagine. Vedente Non vedente INLINE

3 3 Per esempio nel caso di una tabella statistica è impossibile associare le frequenze ai caratteri misurati. Vedente Sesso Iscritti Presenti Ritirati M F Non vedente sesso iscritti presenti ritirati m f La linearizzazione delle tabelle incide in modo rilevante anche sulla fruizione dei contenuti della pagina web quando (e sino ad ora è la norma) il layout della pagina è realizzata utilizzando tabelle in modo più o meno sofisticato. Tipicamente il layout dominante prevede l organizzazione della pagina in tre zone a cui sono assegnate specifiche informazioni e compiti: I. nella prima zona, posta in alto, si inserisce un banner contenente il logo, la tagline, il menu supplementare e alla fine del banner la navigazione principale che fornisce l accesso alle diverse sezioni del sito; II. nella seconda zona, posta a sinistra si inserisce la navigazione locale all interno della sezione attiva; III. nella terza zona, posta a destra della navigazione locale e che occupa il resto della pagina si inserisce il contenuto della pagina.

4 4 In questo caso lo screen reader rende disponibile in sequenza la zona del banner, della navigazione locale e alla fine il contenuto. Vedente Non vedente logo navigazione supplementare navigazione principale link 1 link 2 link 3 link 4 titolo titolo paragrafo 1 paragrafo 1.1 paragrafo 1.2 titolo paragrafo 2 paragrafo 2.1 Queste scelte comportano problemi di accessibilità poiché mentre un non vedente accede all area del contenuto con una operazione di scanning rapido (la cui rapidità dipende dall interfaccia progettata) il non vedente, invece, non potendo fare questa operazione deve aspettare lo scorrimento di informazioni meno importanti e in alcuni casi tempi molto lunghi tali da rendere la pagina totalmente inaccessibile.

5 5 Il layout La soluzione del problema dell utilizzo delle tabelle per la costruzione dell interfaccia della pagina può essere risolta continuando a utilizzare le tabelle modificando, però, il posizionamento degli elementi oppure passare ai CSS 2.0 per il posizionamento degli elementi (oltre che per lo stile). Rimandiamo l utilizzo dei CSS 2.0 ad un altra dispensa e affrontiamo la prima soluzione basata sulle tabelle. Le soluzioni sono: 1. scambiare l area del contenuto con l area della navigazione locale mantenendo la navigazione principale e supplementare nell area del banner; Vedente Non vedente logo navigazione supplementare navigazione principale titolo titolo paragrafo 1 paragrafo 1.1 paragrafo 1.2 titolo paragrafo 2 paragrafo 2.1 link 1 link 2 link 3 link 4 2. scambiare l area del contenuto con l area della navigazione locale spsotando la navigazione principale nell area locale e mantenedo la navigazione supplementare nell area del banner; 3. Mantenere l impostazione dominate introducendo dei collegamenti interni alla pagina che permettono di saltare all area del contenuto saltando la navigazione (skip navigation) ed eventualmente di muoversi all interno delle diverse aree. In questo caso i collegamenti possono essere resi invisibili o visibili al normodato e si utilizzano diverse tecniche.

6 Skip navigation Accessibilità: 6 Il collegamento che permette di saltare la navigazione posta nella zona del banner può essere invisibile oppure visibile e viene comunque inserito come primo elemento della pagina o secondo dopo il logo. L invisibilità si può ottenere in due modi 1 : 1. Si associa il collelgamento ad una immagine di 1x1 pixel trasparente o dello stesso colore dello sfondo e si utilizza l attributo ALT del tag <A HREF > per specificare la label del collegamento del tipo Salta al contenuto oppure Salta la navigazione tra le sezioni. Il codice è il seguente: <a href= #contenuto > <img src= immagini/salta.gif border= 0 alt= Salta al contenuto > </a> e all inizio del contenuto: <a name= contenuto ></a> 2. Si inserisce un link testuale utilizzando come colore di primo piano lo stesso del colore dello sfondo. Il codice è il seguente: <a href= #contenuto >Salta al contenuto</a> e all inizio del contenuto: <a name= contenuto ></a> Nel caso di collegamento visibile si inserisce il collegamento con un carattere molto piccolo per ridurre lo spazio. Si tratta comunque di una soluzione meno elegante della precedente. 1 L alternativa con i fogli di stile CSS non è affrontata in questo documento.

7 7 Testo alternativo La mancanza del testo alternativo è una delle principali barriere digitali per i non vedenti, ma anche per chi ha problemi di ipovisione o difficoltà varie nella visualizzazione, e infatti la prima regola WCAG 1.0 consiste nel fornire una alternativa testuale alle immagini dato che si deve fornire, se ritenuto pertinente, al non vedente le informazioni rappresentate o associate all immagine invece del semplice testo INLINE che fornisce come unica informazione la presenza. Le immagini assolvo a molteplici compiti in una pagina web a seconda del tipo di immagine che si utilizza. I tipi sono: 1. Foto, grafico e disegno 2. Icona 3. Immagine di collegamento 4. Mappa di immagini 5. Punti elenco 6. Elementi per la realizzazione dell interfaccia come le linee Indipendentemente dal tipo l accessibilità si affronta utilizzando l attributo ALT del tag dell immagine <IMG SRC> con l aggiunta in alcuni casi di altre tecniche. Analizziamo le soluzioni per ogni tipo di immagine. Foto, grafico e disegno Per questa tipologia di immagini si deve fornire una descrizione testuale dell immagine che risulta essere particolarmente importante nel caso dei grafici o per tutte quelle immagini che veicolano informazioni fondamentali. L accessibilità si garantisce utilizzando: 1. l attributo ALT associato al tag <IMG SRC> con la descrizione testuale dell immagine se lo spazio disponibile, pari a 150 caratteri è sufficiente. Il codice è il seguente: <img src= immagini/quadro.gif border= 0 alt= Descrizione: testo descrittivo in modo da avere un equivalente testuale. > 2. l attributo ALT associato al tag <IMG SRC> con la sintesi testuale dell immagine e un collegamento testuale ad una pagina di descrizione estesa. Questo collegamento, noto come D-Link, può avere come etichetta Descrizione dell immagine posto prima o dopo l immagine oppure semplicemente D posto sulla destra, seguendo uno standard de facto americano. Il codice è il seguente: <img src= immagini/quadro.gif border= 0 alt= Quadro di Magritte Ceci n est pas une pipe > <a href= descrizionemag.html title= Descrizione testuale del quadro >Descrizione del quadro</a> oppure: <img src= immagini/quadro.gif border= 0 alt= Quadro di Magritte Ceci n est pas une pipe > <a href= descrizionemag.html title= Descrizione testuale del quadro >D</a>

8 8 Vedente Non vedente descrizione testuale del quadro D Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. torna indietro 3. l attributo ALT associato con la sintesi testuale dell immagine e l attributo LONGDESC che contiene la descrizione estesa associati tag <IMG SRC>. Questo ultimo attributo serve per superare i limiti della lunghezza del testo in ALT e consiste nel definire un file di testo che contiene la descrizioneil codice è il seguente: <img src= immagini/quadro.gif border= 0 alt= Quadro di Magritte Ceci n est pas une pipe longdesc= descrizionemag1.html > Il problema dell utilizzo di LONGDESC consigliato dalle linee guida WCAG, è che non tutte le tecnologie assistive lo supportano. La soluzione consiste nell utilizzare oltre a LONGDESC anche il D-link sino a che non ci sarà una uniformità. Esempi nel web

9 9 Icona Nel caso delle icone si specifica la descrizione testuale dell imamgine utilizzando l attributo ALT associato al tag <IMG SRC> solo se questa veicola una informazione o un servizio. Se invece non ha questo ruolo si nasconde l immagine al software assistivo assegando ad ALT uno spazio oppure la stringa vuota con. E importante sottolineare che l eventuale testo alternativo non deve descrivere l icona ma specificare la funzione o servizio. Per esempio nel caso dell icona del carrello in un sito di vendita online è meglio specificare Inserisci il prodotto nel carrello piuttosto di Carrello. Il codice per nascondere l immagine è il seguente: <img src= icone/pdf.gif border= 0 alt= > Immagine di collegamento Nel caso di una immagine di collegamento, tipicamente utilizzata per la navigazione principale come pulsanti o etichette, si utilizza sempre l attributo ALT associato al tag <IMG SRC> senza specificare nel testo alternativo che si tratta di un collegamento, dato che il software assistivo lo specifica. Per esempio nel caso del pulsante Collegamento a contatto. si utilizza il testo Contatto invece di

10 10 Mappa di immagini Le mappe di immagini, molto diffuse per la costruzione del banner, costituiscono un serio problema di accessibilità perché i collegamenti sono incorporati nell immagine ed individuati da aree sensibili. Un vedente individua i collegamenti sulla base del contesto e delle scelte grafiche che evidenziano i collegamenti, mentre un non vedente se non specificato diversamente assume la sola informazione USEMAP che specifica che si è in presenza di una mappa senza possibilità di accedere ai collegamenti. La soluzione consiste semplicemente nello specificare per ogni tag <AREA> il testo alternativo con l attributo ALT. Nel caso di questa mappa: il codice è il seguente: <img src="immagini/bannerehome.jpg" width="760" height="75" border="0" alt="banner con logo e navigazione supplementare (mappa di immagini)" usemap="#bannerehome"> <map name="bannerehome"> <area shape="rect" coords="702,4,743,18" href="euganeo/mappa.html" title="accesso alle pagine mediante la mappa del sito" alt="mappa del sito"> <area shape="rect" coords="634,4,694,19" href="euganeo/contatto.htm" title="indirizzo, recapiti telefonici, " alt="contatto"> </map> Vedente Non vedente contatto mappa

11 11 Punti elenco Il ruolo dei punti elenco è quello di evidenziare del contenuto o specificare un menu di collegamenti e le immagini, che risultano essere ridondanti, si nascondono assegnando uno spazio oppure stringa vuota all attributo ALT del tag dell immagine <IMG SRC>. Il codice è il seguente: <img src="evidceleste.gif" width="22" height="8" border="0" alt=""> <a href="euganeo/elet.htm" title="descrizione e informazioni">elettronica e telecomunicazioni<br></a> <img src="evidceleste.gif" width="22" height="8" border="0" alt=""> <a href="euganeo/ele.htm" title="descrizione e informazioni">elettrotecnica e automazione<br></a> <img src="evidceleste.gif" width="22" height="8" border="0" alt=""> <a href="euganeo/inf.htm" title="descrizione e informazioni">informatica<br></a> Vedente Non vedente Elettronica e telecomunicazioni Elettrotecnica e automazione elettronica e telecomunicazioni elettrotecnica e automazione informatica Informatica Elementi per la realizzazione dell interfaccia come le linee In questo caso si nasconde l immagine assegnando uno spazio o la stringa vuota all attributo ALT del tag dell immagine <IMG SRC>.

12 12 Tabelle Il problema della fruizione del contenuto di una tabella è legato al processo di linearizzazione dei browser e le soluzioni consistono nella riscrittura, quando possibile, della tabella tenendo conto della linearizzazione oppure nel mantenimento della tabella agendo su alcuni attributi 2 supportati dall ultima versione (4) dell HTML. Gli attributi sono: 1. CAPTION 2. SUMMARY 3. TH In particolare si utilizza SUMMARY per presentare una descrizione testuale della tabella e TH per specificare che la cella è una cella di intestazione della tabella, mentre con TD si identifica la cella come cella dati. Consideriamo il seguente codice di esempio 3 : <TABLE border="1" summary="this table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar."> <CAPTION>Cups of coffee consumed by each senator</caption> <TR> <TH id="header1">name</th> <TH id="header2">cups</th> <TH id="header3" abbr="type">type of Coffee</TH> <TH id="header4">sugar?</th> <TR> <TD headers="header1">t. Sexton</TD> <TD headers="header2">10</td> <TD headers="header3">espresso</td> <TD headers="header4">no</td> <TR> <TD headers="header1">j. Dinnen</TD> <TD headers="header2">5</td> <TD headers="header3">decaf</td> <TD headers="header4">yes</td> </TABLE> Tratto da:

13 13 Il browser assistivo presenta: Caption: Cups of coffee consumed by each senator Summary: This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar. Name: T. Sexton, Cups: 10, Type: Espresso, Sugar: No Name: J. Dinnen, Cups: 5, Type: Decaf, Sugar: Yes Approfondimento nel web Traduzione del libro "Dive into Accessibility", semplici suggerimenti per rendere un sito più accessibile, a tutti:

14 Titolo: Autore: Classe: Accessibilità: Nicola Ceccon QUINTA INFORMATICA (5IA) Anno scolastico: 2003/2004 Scuola: Note legali: Itis Euganeo Via Borgofuro, 6 Via Borgofuro Este (PD) - Italy Telefono Fax [email protected] Diffusione consentita con obbligo di citarne le fonti