LEZIONE 5 HTML accessibile La presente lezione affronta le tematiche dell'accessibilit nell'HTML4. Vengono di seguito presentate alcune delle raccomandazioni base riguardo i documenti HTML, estrapolate dal W3C, rappresentanti le linee guida ufficiali relative all'accessibilit. HTML ACCESSIBILE I vantaggi di un sito web Accessibile I vantaggi di non escludere "nessuno" dal circuito informativo veicolato tramite la rete internet sono principalmente di due tipologie: da un lato , quello etico, diffondere"notizie o informazioni" senza ostacoli significa raggiungere tutti, significa non escludere le categorie deboli. Per "enti o istituzioni pubbliche" questo concetto alla base di un modo nuovo di comunicare, o erogare servizi, pi attento e vicino alle necessit del Cittadino e in grado di garantire a tutti pari opportunit. Come nella progettazione degli ambienti umani, ad esempio un giardino, un ufficio, un mercato, una citt etc, non sufficiente domandarsi che cosa si vuole progettare ma necessario chiedersi per chi si sta progettando. Nella realizzazione dei siti web si deve adottare la stessa regola. Trascurare la domanda "per chi si sta progettando" significa costruire luoghi inaccessibili che impediscono di avere accesso alle informazioni che, invece, un diritto che va garantito a tutti e soprattutto alle categorie pi svantaggiate. tempo invece di garantire a tutti l'accesso alle informazioni sviluppando progetti multiutente e in grado di abbattere le barriere informatiche ancora purtroppo presenti in moltissimi siti sia istituzionali sia commerciali. L'abbattimento delle barriere informatiche significa, soprattutto, un atteggiamento diverso, una sensibilit nuova da parte dei "webmaster" o comunque da parte di tutti coloro che realizzano prodotti web. L'abbattimento di tali barriere non significa, come erroneamente si portati a pensare, rinunciare all'aspetto estetico di un sito web creando pagine di solo testo ma calibrare in modo armonico ed equilibrato gli elementi grafici all'interno di una pagina web il cui contenuto sia distinto dal contenitore. Di seguito vengono esposte le norme che devono essere rispettate per garantire l'accesso alle informazioni contenute all'interno di pagine web. HTML Accessibile Il W3C pubblica le "Linee guida per l'accessibilit ai contenuti del Web" Raccomandazione del W3C del 5 maggio 1999, di cui si presenta un estratto: Fornire alternative equivalenti al contenuto audio e visivo. Bench alcune persone non possano usare immagini, film, suoni, applet ecc. direttamente, possono comunque usare pagine che includono un'informazione equivalente al contenuto visivo o audio. L'informazione equivalente deve servire allo stesso scopo del contenuto visivo e audio. Perci un testo equivalente all' immagine di una freccia verso l'alto che rinvia ad un sommario potrebbe essere "vai al sommario". Punti di controllo: * Usare "alt" per gli elementi IMG, INPUT e APPLET o fornire un equivalente testuale nel contenuto degli elementi OBJECT o APPLET. * Per contenuti complessi (per esempio un grafico) laddove un testo "alt" non fornisce un equivalente testuale completo, fornire una descrizione aggiuntiva usando, per esempio, "longdesc" con IMG o FRAME, un collegamento all'interno di un elemento OBJECT o a un collegamento descrittivo . * Per le immagini sensibili usare l'attributo "alt" con AREA oppure usare l'elemento MAP con gli elementi A (e altro testo) come contenuto. * Fornire una descrizione audio delle informazioni essenziali del filmato di una presentazione multimediale Non fare affidamento sul solo colore. Se viene usato il solo colore per veicolare informazione, le persone che non possono distinguere fra alcuni colori e utenti che hanno monitor in B&N o non visuali non riceveranno l'informazione. Quando i colori dello sfondo e degli oggetti in primo piano sono troppo simili per tonalit, potrebbero dare un contrasto non sufficiente se consultati usando un monitor monocromatico o da persone con varie disabilit percettive sul colore. Usare marcatori e fogli di stile e farlo in modo appropriato. Usare i marcatori in modo improprio -- non seguendo le specifiche -- impedisce l'accessibilit. Il cattivo uso di marcatori per un effetto di presentazione (p.es. usare una tabella per l'impaginazione o una intestazione per cambiare la dimensione dei caratteri) rende difficile, per l'utente con software specialistico, la comprensione dell'organizzazione della pagina o la navigazione attraverso questa. Inoltre, l'uso di marcatori di presentazione invece che di marcatori strutturali per veicolare una struttura (per es. costruire ci che sembra una tabella di dati con un elemento HTML PRE) rende difficile la comprensione di una pagina per chi ha altri strumenti di lettura. Punti di controllo: * Quando esiste un linguaggio di marcatori adatto, per veicolare informazione usare un marcatore piuttosto che le immagini. Per esempio, usare MathML per marcare le equazioni matematiche e i fogli di stile per formattare il testo e controllare l'impaginazione. Inoltre, evitare l'uso di immagini per rappresentare un testo: usare invece testo e fogli di stile. * Usare fogli di stile per controllare l'impaginazione e la presentazione. Per esempio, usare la propriet dei caratteri CSS invece che l'elemento HTML FONT per controllare gli stili di caratteri. * Usare unit relative e non assolute nei valori degli attributi del linguaggio dei marcatori e i valori della propriet del foglio di stile. In CSS, per esempio, usare "em" o misure di percentuale invece di "pt" o "cm", che sono misure assolute. * Usare elementi di intestazione per veicolare la struttura del documento e usarli in modo conforme alle specifiche. Per esempio, in HTML, usare H2 per indicare una sottosezione di H1. Non usare intestazioni per gli effetti di carattere. * Marcare le liste ed elencare le voci della lista in modo appropriato. In HTML, per esempio, inserire le liste OL, UL e DL in modo appropriato. * Marcare le citazioni. Non usare marcatura che definisca citazioni per ottenere effetti di formato come il rientro. In HTML, per esempio, usare gli elementi Q e BLOCKQUOTE per marcare rispettivamente le citazioni brevi e quelle pi lunghe. Chiarire l'uso di linguaggi naturali. Quando lo sviluppatore contrassegna in un documento i cambiamenti di linguaggio naturale, le sintesi vocali e le periferiche braille possono selezionare automaticamente la nuova lingua, rendendo il documento pi accessibile agli utenti multilingue. Gli sviluppatori dovrebbero identificare il linguaggio naturale principale del contenuto di un documento (mediante marcatori o intestazioni HTTP ). Gli sviluppatori dovrebbero anche sciogliere le abbreviazioni e gli acronimi. Punti di controllo: * Identificare con chiarezza i cambiamenti nel linguaggio naturale del testo di un documento e in ogni equivalente testuale (per es. nelle didascalie). Per esempio, in HTML usare l'attributo "lang". * Specificare lo scioglimento di ogni abbreviazione o acronimo nel documento laddove compare per la prima volta. Per esempio, in HTML usare l'attributo "title" degli elementi ABBR e ACRONYM. Anche fornire lo scioglimento nel corpo stesso del documento ne aiuta la fruibilit. * Identificare il linguaggio naturale principale di un documento. In HTML, per esempio, assegnare l'attributo "lang" all'elemento HTML. Creare tabelle che si trasformino in maniera elegante. Assicurarsi che le tabelle abbiano la marcatura necessaria per essere trasformate dai browser accessibili e da altri interpreti. Le tabelle dovrebbero essere usate per marcare informazioni realmente tabellari ("tabelle di dati"). Punti di controllo: * Per tabelle di dati, identificare le intestazioni di righe e colonne. Per esempio, in HTML, usare TD per identificare le celle di dati e TH per identificare le intestazioni. * Non usare tabelle per impaginazioni a meno che la tabella non sia comprensibile se letta in modo linearizzato. Altrimenti, se la tabella non risulta leggibile, fornire una alternativa equivalente. * Se per l'impaginazione viene usata una tabella non usare nessun marcatore di struttura per la formattazione della resa visiva. Per esempio, in HTML non usare l'elemento TH per determinare il contenuto di una cella (intestazione non tabellare) che debba essere mostrata centrata e in grassetto. * Per le tabelle, fornire sommari. Per esempio, in HTML usare l'attributo "summary" dell'elemento TABLE. * Fornire abbreviazioni per le etichette di intestazione. Per esempio, in HTML, usare l'attributo "abbr" sull'elemento TH. Assicurarsi che le pagine che danno spazio a nuove tecnologie si trasformino in maniera elegante. Assicurarsi che le pagine siano accessibili anche quando le tecnologie pi recenti non sono supportate o sono disabilitate. Sebbene gli sviluppatori siano incoraggiati a usare nuove tecnologie che risolvano problemi creati da tecnologie esistenti, essi dovrebbero sapere come far s che le loro pagine funzionino anche con browser pi vecchi e con persone che scelgono di disabilitare alcune caratteristiche. Punti di controllo: * Organizzare i documenti in modo che possano essere letti senza i fogli di stile. Per esempio, quando un documento HTML viene reso senza i fogli di stile associati, deve essere sempre possibile leggere il documento. Quando il contenuto sar organizzato logicamente, esso verr reso secondo un ordine significativo quando i fogli di stile sono disabilitati oppure non supportati. * Assicurarsi che le pagine siano utilizzabili quando script, applet, o altri oggetti di programmazione sono disabilitati oppure non supportati. Se questo non possibile, fornire informazione equivalente in una pagina accessibile alternativa. * Per quanto riguarda script e applet, assicurarsi che i gestori di eventi siano indipendenti dai dispositivi di input. * Assicurarsi che il contenuto dinamico sia accessibile oppure fornire una presentazione o pagina alternativa. Per esempio, in HTML, usare NOFRAMES alla fine di ogni insieme di frame. Assicurarsi che l'utente possa tenere sotto controllo i cambiamenti di contenuto nel corso del tempo. Assicurarsi che gli oggetti in movimento, lampeggianti, scorrevoli o che si autoaggiornano possano essere arrestati temporaneamente o definitivamente. Alcune persone con disabilit cognitive o visive non riescono a leggere testo in movimento con velocit sufficiente, oppure non sono in grado di leggerlo affatto. Il movimento pu anche causare una distrazione tale da rendere illeggibile il resto della pagina per persone con disabilit. I lettori di schermo non sono in grado di leggere testo in movimento. Persone con disabilit fisiche potrebbero non essere in grado di muoversi con velocit o precisione sufficienti ad interagire con oggetti in movimento. Assicurare l'accessibilit diretta delle interfacce utente incorporate. Assicurarsi che la progettazione delle interfacce utente segua i principi dell'accessibilit: accesso alle diverse funzionalit indipendente dai dispositivi usati, possibilit di operare da tastiera, comandi vocali, ecc. Quando un oggetto incorporato possiede una "sua propria interfaccia", l'interfaccia (cos come l'interfaccia dello stesso browser) deve essere accessibile. Se l'interfaccia dell'oggetto incorporato non pu essere resa accessibile, deve essere fornita una soluzione alternativa accessibile. Fare in modo che elementi di programmi come script e applet siano direttamente accessibili o compatibili con le tecnologie assistive. Progettare per garantire l'indipendenza da dispositivo. Usare caratteristiche che permettono di attivare gli elementi della pagina attraverso una molteplicit di dispositivi di input. Accesso indipendente da dispositivo significa che gli utenti possono interagire con l'interprete o con il documento con il dispositivo di input (output) preferito -- mouse, tastiera, voce, bacchette manovrate con la testa, o altro. Se, per esempio, il controllo di un modulo pu essere attivato solo con un mouse o un altro dispositivo di puntamento, qualcuno che sta usando la pagina senza usare la vista, con input vocale o con una tastiera, oppure chi sta usando qualche altro dispositivo di input non a puntamento non riuscir ad usare il modulo. Fornendo equivalenti testuali per immagini sensibili o per immagini usate come collegamento si d agli utenti la possibilit di interagire con esse senza un dispositivo di puntamento. In genere, le pagine che permettono di interagire tramite tastiera sono accessibili anche tramite input vocale o interfaccia a linea di comando. Fornire immagini sensibili sul lato client invece di immagini sensibili sul lato server, con l'eccezione dei casi nei quali le zone non possono essere definite con una forma geometrica valida. Usare soluzioni provvisorie. Usare soluzioni provvisorie in modo che le tecnologie assistive e i browser pi vecchi possano operare correttamente. Per esempio, i browser pi vecchi non permettono agli utenti di spostarsi su caselle per l'immissione di testo vuote. I lettori di schermo pi vecchi leggono liste di collegamenti consecutivi come se fossero un unico collegamento. quindi difficile se non impossibile accedere a questi elementi attivi. Ugualmente, cambiare la finestra attiva oppure far venir fuori nuove finestre pu disorientare notevolmente gli utenti che non possono vedere che ci successo. Punti di controllo: * Fino a quando gli interpreti non permetterano agli utenti di bloccare la generazione di nuove finestre, non fare apparire finestre a cascata o di altro tipo e non cambiare la finestra attiva senza informare l'utente. Per esempio, in HTML, evitare di usare un frame la cui destinazione una nuova finestra. * Fino a quando gli interpreti non supporteranno esplicite associazioni fra etichette e controlli dei moduli, assicurare, per tutti i controlli dei moduli che hanno etichette associate implicitamente, che l'etichetta sia posizionata correttamente. * Fino a quando gli interpreti (comprese le tecnologie assistive) non renderanno in modo corretto il testo affiancato, fornire un testo lineare alternativo (nella pagina attiva o in qualche altra) per tutte le tabelle che dispongono testo su colonne parallele e andando a capo. * Fino a quando gli interpreti non gestiranno in maniera corretta controlli vuoti, inserire caratteri di default come segnaposto nelle caselle per l'immissione di testo a una riga oppure a pi righe. Per esempio, in HTML, fare questo per TEXTAREA e INPUT. Usare le tecnologie e le raccomandazioni del W3C. Usare le tecnologie del W3C (in conformit con le specifiche) e seguire le raccomandazioni sull'accessibilit. Nei casi in cui non sia possibile usare una tecnologia del W3C, oppure se nell'utilizzarla si ottenesse materiale che non si trasforma in maniera elegante, fornire una versione alternativa del contenuto che sia accessibile. Fornire informazione per la contestualizzazione e l'orientamento. Fornire informazione per la contestualizzazione e l'orientamento, per aiutare gli utenti a comprendere pagine od elementi complessi. Il fatto di raggruppare gli elementi e di fornire informazione contestuale sulle relazioni fra gli elementi pu essere utile per tutti gli utenti. Relazioni complesse fra parti di una pagina possono essere difficili da interpretare per persone con invalidit cognitive o visive. Punti di controllo: * Dare un titolo a ogni frame per facilitare l'identificazione del frame e la navigazione. Per esempio, in HTML, usare l'attributo "title" con l'elemento FRAME. * Descrivere lo scopo dei frame e il modo in cui essi interagiscono se non evidente dai titoli dei frame da soli. Per esempio, in HTML, usare "longdesc," oppure un collegamento descrittivo. * Dividere grandi blocchi di informazione in gruppi pi maneggevoli quando naturale ed appropriato. Per esempio, in HTML, usare OPTGROUP per raggruppare gli elementi OPTION all'interno di un SELECT; raggruppare i controlli dei moduli con FIELDSET e LEGEND; usare liste annidate quando appropriato; usare intestazioni per strutturare i documenti, ecc. * Associare esplicitamente le etichette ai loro controlli. Per esempio, in HTML, usare LABEL e il suo attributo "for". Fornire chiari meccanismi di navigazione. Fornire chiari e coerenti meccanismi di navigazione -- informazione per l'orientamento, barre di navigazione, una mappa del sito, ecc. -- per aumentare le probabilit che una persona trovi quello che sta cercando in un sito. Chiari e coerenti meccanismi di navigazione sono importanti per persone con invalidit cognitive o per i non vedenti, e giovano a tutti gli utenti. Punti di controllo: * Identificare con chiarezza l'obiettivo di ogni collegamento. Un collegamento testuale dovrebbe essere abbastanza significativo da mantenere un senso se letto fuori contesto -- sia da solo che come parte di una sequenza di collegamenti. Un collegamento testuale dovrebbe anche essere sintetico. Per esempio, in HTML, scrivere "Informazione sulla versione 4.3" invece che "clicca qui". * Fornire informazione sulla configurazione generale di un sito (per es., una mappa oppure un indice del sito). * Nel descrivere la configurazione di un sito, evidenziare e spiegare le caratteristiche di accessibilit che sono disponibili. * Usare meccanismi di navigazione in modo coerente. * Fornire barre di navigazione per evidenziare e dare accesso ai meccanismi di navigazione. * Raggruppare i collegamenti correlati, identificare i gruppi (per gli interpreti) e, fino a quando gli interpreti non lo fanno, fornire un modo per saltare il gruppo. * Se sono fornite funzionalit di ricerca, rendere possibili diversi tipi di ricerca per differenti livelli di abilit e per preferenze diverse. * Posizionare l'informazione pi significativa all'inizio delle intestazioni, dei paragrafi, delle liste, ecc. * Fornire un mezzo per saltare arte ASCII multilinea. Assicurarsi che i documenti siano chiari e semplici. Assicurarsi che i documenti siano chiari e semplici in modo che possano essere compresi pi facilmente. Una disposizione coerente della pagina, una grafica riconoscibile e un linguaggio facile da capire giovano a tutti gli utenti. In particolare essi aiutano persone con disabilit cognitive o con difficolt di lettura. (Tuttavia assicurarsi che le immagini abbiano equivalenti testuali per i non vedenti, gli ipovedenti, o per qualsiasi utente che non possa o abbia scelto di non visualizzare la grafica.) L'uso di un linguaggio chiaro e semplice promuove una comunicazione efficace. L'accesso all'informazione scritta pu essere difficile per persone con disabilit cognitive o dell'apprendimento. Per consultare la guida completa visitare l'indirizzo http://www.aib.it/aib/cwai/WAI-trad.htm ESERCITAZIONE Creazione di una pagina web accessibile. Inizieremo con il creare una pagina vuota che rispetti le norme riguardo l'accessibilit: Eraclito - inserire titolo Da notare: l'inserimento della direttiva DOCTYPE che dichiara al browser come interpretare i TAG contenuti nelle pagine e l'esplicitazione della lingua relativa al documento . Questi elementi devono essere presenti nel documento. Inserire nel tre link ad altri siti web. Qualora questi risltassero "adiacenti" dovranno essere separati da un carattere (esempio barra |) oppure inseriti in un elenco: Vai al sito UIC | Vai al sito CDG | Vai al sito IRiFoR Inserire nel la seguente tabella:
Caption tabella: Inserire il titolo generale per la tabella
Titolo Descrizione Azione
titolo del documento descrizione dettagliata del documento visualizza
Da notare: l'inserimento dell'attributo summary nel tag , per le tabelle che contengono dati come quella dell'esempio sostituire il
della prima riga con , titpico delle intestazioni, associando ad esso un identificativo (id="nome id"). Su tutte le altre righe includere: headers="nome id" all'interno del tag . Inserire nel il seguente testo:

Un documento a parte, intitolato "Techniques for Web Content Accessibility Guidelines 1.0", spiega come implementare i vari punti di controllo definiti in questo documento. Il Documento sulle Tecniche si occupa dettagliatamente di ogni punto di controllo fornendo esempi attraverso l'utilizzo di: Hypertext Markup Language, Cascading Style Sheets. Il Documento riguardante le tecniche descrive inoltre tecniche per la validazione e il test di documenti, oltre a comprendere un indice di elementi e attributi HTML (e delle tecniche che li utilizzano). Il Documento riguardante le tecniche stato progettato per tenere traccia dei cambiamenti della tecnologia e dovrebbe essere aggiornato pi frequentemente del presente.

Da notare: l'inserimento di sulle variazioni di lingua. Inserire nel una immagine, attenzione nel definire ALT="descrizione dell'immagine" nel tag .