TESI DI LAUREA. Accessibilità dei siti Internet Analisi, tecniche di progetto e riparazione

Transcript

1 POLITECNICO DI TORINO Facoltà di Ingegneria dell Informazione Corso di Laurea in Ingegneria Elettronica TESI DI LAUREA Accessibilità dei siti Internet Analisi, tecniche di progetto e riparazione Relatori prof. Fulvio Corno prof.ssa Laura Farinetti Candidato Aprile 2003

2 Ringraziamenti Ringrazio Dio per avermi concesso di arrivare a questo traguardo. Ringrazio la mia famiglia: mi ha sostenuto ed incoraggiato. Grazie a Marianna che ha sempre creduto in me. Grazie a Paolo e Carmelo che mi hanno sopportato in questi anni. Un grazie particolare al prof. Fulvio Corno: i suoi consigli ed il suo aiuto sono stati preziosi per la realizzazione di questo lavoro.

3 Introduzione Internet è il simbolo della modernità, della libertà e anche dell uguaglianza: ogni persona che vi naviga è identica ed indistinguibile da un altra. Questo è uno dei maggiori risultati conseguiti dalla nostra società così culturalmente e tecnologicamente progredita. Ad una analisi più attenta, però, si può notare che non tutti possono accedere alle informazioni che cercano, oppure, a differenza di altri, hanno notevoli difficoltà nel farlo. Le persone disabili hanno delle particolari esigenze che in larga misura non sono tenute in conto nella progettazione dei siti Internet. Il risultato è l inaccessibilità dei contenuti per questi individui che di fatto sono discriminati. Il problema è assai diffuso e coinvolge la stragrande maggioranza siti presenti in rete; esso diventa ancora più grave se si pensa ad una pubblica istituzione che dovrebbe comunicare e rivolgere i suoi servizi Web ad ogni cittadino senza distinzione. Il lavoro svolto nella presente Tesi di Laurea ha come scopo quello di poter aiutare i progettisti a riparare o a progettare nuovamente i loro siti tenendo in considerazione i problemi legati all accessibilità dei contenuti da parte di persone portatrici di handicap o con altre esigenze particolari. Nel primo capitolo, dal titolo Accessibilità, vengono introdotti i concetti fondamentali su quest ultima, sull usabilità di una pagina e sulle disabilità. Si spiega il perché realizzare un sito Web accessibile e quale sia la normativa in materia prodotto nel nostro paese per i servizi Internet pubblici. Infine vengono riportate le Linee Guida per l Accessibilità ai Contenuti Web del World Wide Web Consortium, la Lista dei Punti di Controllo che da esse deriva e i tre livelli di priorità (e quindi di accessibilità) da poter raggiungere. Si farà riferimento proprio a queste ultime cose per lo sviluppo del lavoro nei capitoli successivi. Il secondo capitolo, dal titolo Metodologie di valutazione e riparazione, indica i passi da compiere per valutare l accessibilità di un sito Internet già esistente, scoprire le violazioni ai Punti di Controllo e porvi rimedio. Vengono inoltre accennate le operazioni da compiere nel caso di contesti specifici quali il monitoraggio e la valutazione durante il processo di sviluppo di un progetto totalmente nuovo. Visto che per l applicazione delle Linee Guida si farà riferimento al linguaggio CSS (Cascading Style Sheets) al fine di presentare i contenuti di una pagina Web, il terzo capitolo, dal titolo Fogli di Stile, traccia una breve panoramica introduttiva sui vantaggi del loro utilizzo per realizzare documenti accessibili. Nel quarto capitolo, Tecniche per i Punti di Controllo, vengono riportate le pratiche, suggerite dal World Wide Web Consortium, da applicare nella realizzazione di una pagina rispettosa di ogni regola dettata dai Punti di Controllo in materia di accessibilità. Esse sono 1

4 Introduzione 2 corredate da numerosi esempi che mostrano il codice HTML e CSS per la loro implementazione e mettono in luce i vantaggi di questo tipo di soluzioni. L ultimo capitolo, dal titolo Caso di Studio, si riferisce all applicazione di quanto descritto ad una situazione reale. Vengono analizzate le pagine del nuovo sito Internet del Politecnico di Torino per via del suo carattere di sito istituzionale. Si cerca di individuare la presenza di barriere all accessibilità e si fornisce una possibile soluzione per la loro eliminazione, cercando di spiegare le scelte di progetto effettuate e riportando il codice utilizzato per la loro realizzazione.

5 CAPITOLO 1 Accessibilità 1. Introduzione Nonostante la società moderna abbia compiuto passi importanti verso uno sviluppo tecnologico tale da poter migliorare la qualità della vita di ogni individuo, si nota di fatto l esistenza di barriere che ancora non permettono a tutte le persone di poter vivere bene ed avere le stesse opportunità. Basta semplicemente pensare all esistenza di barriere architettoniche in varie strutture che non consentono ad esempio a persone con disabilità motorie di potervi accedere, escludendole di fatto dalla fruizione di servizi per loro natura rivolti a tutti. Questa è solo una delle facce della stessa medaglia, forse la più visibile, perché tanti sono i contesti dai quali chi ha un qualche tipo di handicap può venire tagliato fuori: uno di questi è l utilizzo delle risorse Web. 2. Accessibilità ai contenuti Web Per disabilità si intende qualsiasi restrizione o impedimento nel normale svolgimento di un'attività derivante da una menomazione. Le disabilità possono essere: a) fisiche, che comprendono le disabilità motorie, relative al controllo dei movimenti degli arti, e sensoriali, che riguardano limitazioni della vista e dell'udito; b) cognitive, che possono eventualmente associarsi a menomazioni motorie o sensoriali. Le limitazioni delle funzioni intellettive possono assumere caratteristiche diverse (disturbi della parola, del linguaggio, della coordinazione del pensiero ecc.), tali da ridurre i livelli di comunicazione, attenzione e risposta agli stimoli esterni. Le soluzioni tecniche, hardware e software, che permettono di superare o ridurre le condizioni di svantaggio dovute ad una specifica disabilità, vengono di seguito denominate tecnologie assistive o ausili. Inoltre un utente disabile può disporre di una dotazione hardware e software che può andare da computer molto vecchi, obsoleti, con connessioni Internet lente, fino ad arrivare alle tecnologie più nuove quali la fibra ottica o i moderni ausili. In uno scenario così variegato, i criteri di chi progetta e realizza pagine Web, soprattutto se di pubblica utilità, dovrebbero 3

6 Cap. 1 Accessibilità 4 essere rivolti a garantire che i siti soddisfino a due condizioni fondamentali: l accessibilità e l usabilità. Per accessibilità Web si intende la possibilità di fruire delle informazioni presenti nelle pagine, da parte del maggior numero possibile di persone, indipendentemente dalle disabilità psico-fisiche e dalle dotazioni hardware e software disponibili. Il concetto di usabilità si riferisce invece alla semplicità d uso del sito, cioè alla facilità con cui l utente esplora il sito, capisce come è strutturato e trova le informazioni che cerca. La definizione dei criteri da fornire ai progettisti per la realizzazione di siti che soddisfino i requisiti di accessibilità e usabilità, necessita di competenze e informazioni diverse: informazioni legate al lavoro di psicologi, ingegneri, consulenti di usabilità (forniscono consigli su come realizzare siti dall uso facile ed intuitivo), sviluppatori ed esperti nelle tecnologie Web, consulenti di accessibilità, operatori nel settore della disabilità e infine, ma non ultime, informazioni provenienti dall esperienza diretta dei disabili con il Web. Un gruppo di esperti costituito dal World Wide Web Consortium (W3C), il WAI (Web Accessibility Initiative), ha prodotto tutta una serie di documenti (WCAG, Web Content Accessibility Guidelines) contenenti principi e linee guida cui attenersi per realizzare siti Web accessibili al maggior numero di utenti, in particolare a quelli con vari gradi di disabilità motorie e cognitive. Si farà riferimento a queste linee guida per lo sviluppo del lavoro svolto nella presente Tesi. 3. Perché l accessibilità Un sito Web accessibile è sicuramente un sito di qualità. Molti progettisti affermano il contrario, dicendo che tutto ciò pone un limite alla creatività e al progetto. Ma non è così, perché si può realizzare la versione accessibile di una pagina in maniera graficamente identica a quella non accessibile; inoltre non ci si deve scoraggiare ad usare tutti i nuovi elementi multimediali, anzi gli autori devono essere invitati a sfruttarli per assicurare l accesso alle informazioni ad una sempre più vasta platea di utenti. Il motivo principale per realizzare un sito Web accessibile è di ordine morale: tutti gli uomini sono uguali, con i medesimi diritti e gli stessi doveri. Pertanto, in ottemperanza a questo, è impensabile escludere chiunque dalla fruizione dei servizi in rete. Ancora, però, si possono individuare altre ragioni di ordine economico, legale o di opportunità. Quasi sempre lo scopo di un sito è la vendita di un bene o un servizio. È stato dimostrato che maggiore è il numero di visitatori, maggiore sarà la probabilità di trovarne di assidui: sono questi che molte volte si trasformano in clienti abituali, e tra di essi, gli utenti disabili si dimostrano clienti particolarmente affezionati a chi cura le loro esigenze. Un sito accessibile risulta maggiormente usabile anche da utenti che non hanno disabilità. Infatti se si applicano i principi della progettazione universale (design for all) ciò che si ottiene sarà facilmente fruibile sia da utenti con esigenze particolari sia da tutti gli altri. I principi a cui ci si riferisce sono: Equità d uso. Flessibilità d uso. Uso semplice ed intuitivo. L uso del progetto sia facile da capire, indipendentemente dall esperienza dell utente, conoscenza, perizia di linguaggio o capacità di concentrazione.

7 Cap. 1 Accessibilità 5 Informazione accessibile. Tolleranza agli errori. Sforzo fisico minimo. Dimensione e spazio per l uso adatto a qualsiasi utente, senza limiti per la capacità di movimento, la postura e la dimensione del corpo. Infine in alcuni stati, la legge obbliga le amministrazioni pubbliche a rispettare determinate norme in riferimento all accessibilità dei loro siti Web, in nome proprio del principio di uguaglianza di tutti gli uomini. 4. La normativa in Italia La normativa prodotta nel nostro paese in materia è piuttosto scarsa. Ad oggi, quello che è stato prodotto può riassumersi in due circolari ed una direttiva: Circolare del Dipartimento della Funzione Pubblica (Circ., 13 marzo 2001, n. 3/2001) che detta le Linee guida per l organizzazione, l accessibilità e l usabilità dei siti Web della Pubblica Amministrazione. Il provvedimento è stato elaborato tenendo conto delle indicazioni del World Wide Web Consortium e con l intenzione di fornire delle puntuali regole per garantire ai portatori di handicap l accesso ai servizi e alle informazioni che le pubbliche amministrazioni erogano in rete. Circolare dell Aipa (n. Aipa / CR / 32) del 6 settembre 2001 che descrive Criteri e strumenti per migliorare l accessibilità dei siti Web e delle applicazioni informatiche a persone disabili. Nel documento vengono specificati i criteri da rispettare nella progettazione e manutenzione dei sistemi informatici pubblici per favorire l accesso ai siti Web che mettono a disposizione di cittadini e imprese informazioni e servizi interattivi mediante tecnologie e protocolli Internet. Inoltre si fa anche riferimento alle tecnologie assistive, definite come quelle soluzioni tecniche, hardware e software, che permettono di superare o ridurre le condizioni di svantaggio dovute ad una specifica disabilità. Direttiva emanata dal Governo in data 30 maggio Essa stabilisce i criteri di qualità che dovranno rispettare i siti con dominio.gov.it e ha come obiettivo quello di aggregare i siti e i portali delle amministrazioni statali che erogano già servizi istituzionali, adeguando e rendendo omogeneo il livello di qualità, sicurezza e aggiornamento dei servizi stessi. All art. 2.2 si dice che tutti i siti devono essere conformi al livello A di accessibilità previsto dal WAI del consorzio W3C, ma non è chiaro il significato di quel devono e inoltre tale direttiva limita l azione ai domini all interno di.gov.it. Il problema di queste circolari è che sono di natura non vincolante, solo semplici raccomandazioni. A distanza di mesi dalla loro pubblicazione, la maggior parte degli enti di pubblica amministrazione si è dimostrata incurante delle indicazioni fornite, spesso portando a giustificazione della scarsa accessibilità dei loro siti proprio questa natura delle circolari.

8 Cap. 1 Accessibilità 6 Ciò che si può fare è promulgare una legge di natura vincolante e creare un organismo al di sopra delle parti che vigili sulla sua applicazione. A tal proposito il 16 dicembre 2002 in un convegno dal tema Internet: un diritto per tutti è stata presentata una Proposta di legge d iniziativa dei deputati Cesare Campa e Antonio Palmieri dal titolo: Norme per il diritto di accesso ai servizi e alle risorse info-telematiche pubbliche e di pubblica utilità da parte dei disabili e per favorire la loro integrazione con le nuove tecnologie. Per servizi e risorse info-telematiche pubbliche e di pubblica utilità si intendono tutte le forme di comunicazione di dati, informazioni, contenuti, servizi e forme di dialogo utilizzate dalle pubbliche amministrazioni e da soggetti ad essa correlati. In particolare le disposizioni di legge si applicano a tutte le pubbliche amministrazioni, agli enti pubblici economici, alle società pubbliche legate al mondo dell'informazione, alle biblioteche pubbliche, alle aziende private concessionarie di servizi pubblici, agli enti di assistenza pubblici, alle aziende di telecomunicazione pubbliche, alle aziende esercenti servizi in convenzione con enti pubblici, alle aziende municipalizzate regionali e a partecipazione pubblica e a tutti gli organismi che beneficiano di finanziamenti pubblici nazionali o dell Unione Europea. Le regole che la legge indica come normative sono quelle delle WAI Recommendations del W3C, in particolare si fa riferimento a quattro di esse: Web Content Accessibility Guidelines (WCAG): regole che descrivono come rendere i contenuti delle pagine Web accessibili; XML Accessibility Guidelines (XAG): indirizzate a chi sviluppa applicazioni XML; User Agent Accessibility Guidelines (ATAG): per chi sviluppa software per la navigazione (browser, plug-in, player multimediali, ecc.). Authoring Tool Accessibility Guidelines (UAAG): per i programmatori di software che permette la creazione di pagine Web o documenti multimediali, perché siano realizzati in maniera accessibile anche per utenti disabili che vogliono produrre a loro volta dei documenti accessibili. La legge stabilisce inoltre delle agevolazioni fiscali sia per l acquisto di computer e accessori d uso da parte di utenti disabili, che per gli investimenti operati da aziende di pubblica utilità per rendere i loro siti accessibili. Viene garantito il diritto ai portatori di handicap di poter operare con tecnologie infotelematiche, attraverso l'ausilio di tecnologie assistive, compatibilmente con il tipo di patologia e il grado della disabilità. L Autorità Garante per l applicazione della legge è stabilita nel Ministro per l'innovazione e le Tecnologie di concerto con il Ministro della Funzione Pubblica. Infine, sono soggetti a sanzione amministrativa tutte le aziende o enti che non provvederanno entro sei mesi dall'entrata in vigore della legge all'avvio dell'adeguamento dei propri servizi info-telematici, con particolare riferimento ai servizi tramite Web. Questa iniziativa è un buon punto di partenza anche se in essa non mancano degli aspetti da discutere, chiarire se non addirittura da correggere, per poter giungere ad un miglioramento sostanziale della situazione. Esso potrebbe giungere a breve, dato che si prevede la presentazione di un ulteriore disegno di legge direttamente da parte del Ministro per

9 Cap. 1 Accessibilità 7 l Innovazione e le Tecnologie, il quale partendo dalla bozza in questione dovrebbe rielaborare e approfondire tutti gli aspetti connessi con un provvedimento del genere per colmare le eventuali lacune esistenti. Della proposta di questo nuovo disegno di legge si parla nel cosiddetto Libro Bianco sul rapporto tra disabili e innovazione, presentato nel marzo Esso è il risultato del lavoro della Commissione interministeriale sullo sviluppo e l impiego delle tecnologie dell informazione per le categorie deboli, costituita nel maggio 2002 dal Ministro per l Innovazione e le Tecnologie di concerto con il Ministro della Salute e il Ministro del Lavoro e delle Politiche Sociali. Le indicazioni e le proposte suggerite dal Libro, sono tutte mirate e rendere le tecnologie dell informazione più accessibili. Nelle sue pagine sono riportati i concetti generali riguardo la disabilità, l accessibilità, le barriere all uso delle tecnologie e le opportunità che la loro eliminazione determina. Si descrive la situazione dei disabili in Italia, facendo riferimento alle statistiche elaborate dall ISTAT, e si traccia un quadro delle principali iniziative normative e progettuali in ambito internazionale e soprattutto europeo. Importante è stata la ricognizione, effettuata a livello nazionale tramite una serie di audizioni con un campione di soggetti appartenenti a Ministeri, Enti ad Amministrazioni e attraverso un questionario online diretto agli enti locali, sullo stato di sviluppo delle tecnologie a favore dei disabili. Le indicazioni emerse da tutte queste statistiche ed elaborazioni sono state utili per identificare i problemi esistenti a livello italiano. Un dato su tutti che emerge è la presenza nel Paese di soltanto il 3% di siti Web accessibili. A fronte di tutti questi elementi, sono state indicate delle raccomandazioni o iniziative per il raggiungimento di obiettivi quali una società dell informazione per tutti, l accesso alle comunicazioni elettroniche, la e- partecipazione e la e-inclusione, la promozione del design universale e il coordinamento per un impegno comune a livello nazionale. Tra queste iniziative si trovano l introduzione di misure legislative appunto, la stesura di linee guida e la promozione di studi e ricerche. A proposito di linee guida, nel Libro Bianco, si fa riferimento a quelle della Web Accessibility Initiative (WAI) del W3C il che fa supporre che queste possano essere adottate come standard di riferimento. Il Governo si è impegnato a far proprie le raccomandazioni del Libro Bianco e a determinarne l attuazione nell arco della legislatura: ciò porrebbe l Italia in una posizione privilegiata e avanzata rispetto a tutti gli altri paesi europei che ancora non hanno una legislazione in materia e faticano ad adattarsi e a rispettare i tempi imposti dall Unione per il piano di azione eeurope 2002, il cui scopo principale è quello di creare un Europa digitalmente alfabetizzata dove ogni cittadino, scuola, impresa, amministrazione sia portato nella società dell informazione e online. 5. Il progetto WAI del World Wide Web Consortium Da quanto esposto emerge che sia nelle circolari, sia nella proposta di legge, che nel Libro Bianco, si fa riferimento alle Linee Guida in materia di accessibilità dettate dal progetto WAI (Web Accessibility Initiative) del W3C (World Wide Web Consortium). Anche le legislazioni di altri stati fanno riferimento in maniera più o meno marcata ad esse, per cui si ritiene necessario darne delle delucidazioni. Da queste Linee Guida e dalla Lista dei Punti di Controllo che da esse deriva, si trae lo spunto per il lavoro svolto nei capitoli successivi della presente Tesi. Il W3C è l organismo fondato nel 1994 da Tim Berners-Lee allo scopo di sviluppare protocolli standard per il Web. Il consorzio nasce da una collaborazione tra il MIT (Massachusetts Institute of Technology) ed il CERN (European Organisation for Nuclear Research) con i supporti del DARPA (U.S. Defence Advanced Research Project Agency) e

10 Cap. 1 Accessibilità 8 della Commissione Europea. Il W3C è attualmente composto da circa 500 membri, tra cui anche lo Stato Italiano, ed è dislocato fisicamente in tre università: il MIT, l Istituto di Ricerca Nazionale di Francia e l Università di Keio in Giappone. La missione del consorzio è essenzialmente quella di portare il Web al massimo delle sue potenzialità, e per questo i suoi membri studiano e mettono in atto tutti quei protocolli che possano facilitare ogni tipo di comunicazione, qualunque sia il tipo di hardware, software, lingua, posizione geografica oppure abilità fisica e mentale dell utente. Uno dei principali atti del W3C risale al 1999 con la nascita del progetto WAI il cui scopo è di rendere universalmente accessibile la potenza di Internet. Si pensa ad un nuovo modo di concepire lo sviluppo di pagine Web ispirato ai principi di progettazione universale, per permettere anche agli utenti disabili di accedere ai contenuti dei siti Web. Il WAI ha generato il WCAI (Web Content Accessibility Initiative) cui è stato demandato il compito di rilasciare documenti contenenti principi e linee guida cui attenersi per realizzare contenuti Web che siano accessibili al maggior numero di persone possibile. Nel maggio 1999 vengono pubblicate le Web Content Accessibility Guidelines 1.0 (WCAG 1.0): si tratta di un documento che definisce degli standard per la costruzione di pagine Web che siano accessibili nella loro struttura e nel loro contenuto. Lo scopo a cui mirano queste regole è quello della creazione di documenti in cui la struttura dei loro contenuti possa essere separata dalla modalità di presentazione: si avranno così notevoli vantaggi di accessibilità migliorata, ma anche di portabilità e di facilità nella manutenzione. Infatti un utente con particolari esigenze, che utilizza un modo di presentazione adatto ad esse, evidenzierà in maniera diversa i cambi nella struttura del documento rispetto ad un altro con bisogni differenti; nessuno dei due, però, perderà le informazioni ad essa legate anche se dovesse disabilitare del tutto le varie tipologie di presentazione. L identificazione della struttura deve essere fatta a livello di progetto prima di pensare a come il documento apparirà all utente finale. Dopo aver compiuto questo passo, il documento così realizzato potrà essere presentato con le modalità più consone alle esigenze di ognuno senza doverlo più modificare a tal proposito. HTML e CSS serviranno per realizzare questa separazione. Nei file HTML saranno inseriti tutti i contenuti e sarà marcata la struttura del documento. Si definiranno le varie sezioni e il loro ordine logico di successione; si metteranno intestazioni per distinguere parti diverse, marcatura identificativa di gruppi di entità dello stesso tipo e ogni altro genere di elemento necessario a strutturare il documento. A questo punto interverranno i file CSS che specificheranno come le varie sezioni dovranno essere impaginate e rappresentate: i loro colori, il loro ordine grafico, le grandezze dei font; come dovranno essere stampate, pronunciate o rese con particolari tipi di tecnologie assistive. Su questi concetti di tipo generale si basano le raccomandazioni delle Linee Guida. Esse sono quattordici e vengono di seguito riportate. Linee Guida 1 Fornire alternative equivalenti al contenuto audio e visivo. 2 Non fare affidamento sul solo colore. 3 Usare marcatori e fogli di stile e farlo in modo appropriato. Fornire un contenuto che, quando viene presentato all'utente, gli trasmetta essenzialmente la stessa funzione o scopo del contenuto audio o visivo. Assicurarsi che il testo e la parte grafica siano comprensibili se consultati senza il colore. Marcare i documenti con i corretti elementi strutturali. Controllare la presentazione con fogli di stile piuttosto che con elementi e attributi di presentazione.

11 Cap. 1 Accessibilità 9 4 Chiarire l'uso di linguaggi naturali. 5 Creare tabelle che si trasformino in maniera elegante. 6 Assicurarsi che le pagine che danno spazio a nuove tecnologie si trasformino in maniera elegante. 7 Assicurarsi che l'utente possa tenere sotto controllo i cambiamenti di contenuto nel corso del tempo. 8 Assicurare l'accessibilità diretta delle interfacce utente incorporate. 9 Progettare per garantire l'indipendenza da dispositivo. Utilizzare marcatori che facilitino la pronuncia o l'interpretazione di testi stranieri o abbreviati. Assicurarsi che le tabelle abbiano la marcatura necessaria per essere trasformate dai browser accessibili e da altri interpreti. Assicurarsi che le pagine siano accessibili anche quando le tecnologie più recenti non sono supportate o sono disabilitate. Assicurarsi che gli oggetti in movimento, lampeggianti, scorrevoli o che si auto-aggiornano possano essere arrestati temporaneamente o definitivamente. 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. Usare caratteristiche che permettono di attivare gli elementi della pagina attraverso una molteplicità di dispositivi di input. 10 Usare soluzioni provvisorie. Usare soluzioni provvisorie in modo che le tecnologie assistive e i browser più vecchi possano operare correttamente. 11 Usare le tecnologie e le raccomandazioni del W3C. 12 Fornire informazione per la contestualizzazione e l'orientamento. 13 Fornire chiari meccanismi di navigazione. 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, per aiutare gli utenti a comprendere pagine od elementi complessi. 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.

12 Cap. 1 Accessibilità Assicurarsi che i documenti siano chiari e semplici. Assicurarsi che i documenti siano chiari e semplici in modo che possano essere compresi più facilmente. Ciascuna Linea Guida è approfondita da dei Punti di Controllo (checkpoint) che analizzano le situazioni tipiche delle pagine Web. Ad ogni Punto di Controllo è stato assegnato dal Gruppo di Lavoro un livello di priorità basato sull'impatto che esso possiede sull'accessibilità. Priorità 1 Lo sviluppatore di contenuti Web deve conformarsi a questi Punti di Controllo. In caso contrario, a una o più categorie di utenti viene precluso l'accesso alle informazioni presenti nel documento. La conformità a questi Punti di Controllo costituisce un requisito base affinché alcune categorie di utenti siano in grado di utilizzare documenti Web. Punti di controllo per Priorità 1 In generale 1 Fornire un equivalente testuale per ogni elemento non di testo (per esempio, mediante alt, longdesc o contenuto nell'elemento stesso). Questo comprende: immagini, rappresentazioni grafiche di testo (compresi i simboli), zone di immagini sensibili, animazioni (ad es. GIF animate), applet e oggetti programmati, arte ASCII, frame, script, immagini usate come richiamo per elenchi, spaziatori, bottoni grafici, suoni (azionati con o senza l'intervento dell'utente), file di solo audio, tracce audio di video e video. 2 Assicurarsi che tutta l'informazione veicolata dal colore sia disponibile anche senza, per esempio grazie al contesto o ai marcatori. 3 Identificare con chiarezza i cambiamenti nel linguaggio naturale del testo di un documento e in ogni equivalente testuale (per es. nelle didascalie). 4 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. 5 Assicurarsi che gli equivalenti del contenuto dinamico vengano aggiornati quando il contenuto dinamico cambia. 6 Fino a quando gli interpreti non permetteranno agli utenti di controllare lo sfarfallìo, evitare il verificarsi di questi eventi sullo schermo. 7 Usare il linguaggio più chiaro e semplice possibile che sia adatto al contenuto di un sito. Se si usano immagini e immagini sensibili 8 Fornire collegamenti di testo ridondanti per ogni zona attiva di una immagine sensibile sul lato server.

13 Cap. 1 Accessibilità 11 9 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. Se si usano tabelle 10 Per tabelle di dati, identificare le intestazioni di righe e colonne. 11 Per tabelle di dati che hanno due o più livelli logici di intestazioni di righe o colonne, usare marcatori per associare le celle di dati e le celle di intestazione. Se si usano frame 12 Dare un titolo a ogni frame per facilitare l'identificazione del frame e la navigazione. Se si usano applet e script 13 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. Se si usano contenuti multimediali 14 Fino a quando gli interpreti non potranno leggere automaticamente ad alta voce l'equivalente testuale di un filmato, fornire una descrizione audio delle informazioni essenziali del filmato di una presentazione multimediale. 15 Per ogni presentazione multimediale temporizzata (per es. un film o una animazione), sincronizzare alternative equivalenti (per es. didascalie o descrizioni parlate del filmato) con la presentazione. Se tutto il resto fallisce 16 Se, nonostante ogni sforzo, non si può creare una pagina accessibile, fornire un collegamento a una pagina alternativa che usi le tecnologie W3C, sia accessibile, contenga informazioni (o funzionalità) equivalenti, e sia aggiornata con la stessa frequenza della pagina (originale) inaccessibile. Priorità 2 Lo sviluppatore di contenuti Web dovrebbe conformarsi a questi Punti di Controllo. In caso contrario per una o più categorie di utenti risulterà difficile accedere alle informazioni nel documento. La conformità a questi punti consente di rimuovere barriere significative per l'accesso a documenti Web.

14 Cap. 1 Accessibilità 12 Punti di controllo per Priorità 2 In generale 1 Assicurarsi che le combinazioni fra colori dello sfondo e del primo piano forniscano un sufficiente contrasto se visti da qualcuno con deficit percettivi sul colore o se visti su uno schermo in bianco e nero. [Priorità 2 per le immagini, Priorità 3 per il testo]. 2 Quando esiste un linguaggio di marcatori adatto, per veicolare informazione usare un marcatore piuttosto che le immagini. 3 Creare documenti che facciano riferimento a grammatiche formali pubblicate. 4 Usare fogli di stile per controllare l'impaginazione e la presentazione. 5 Usare unità relative e non assolute nei valori degli attributi del linguaggio dei marcatori e i valori della proprietà del foglio di stile. 6 Usare elementi di intestazione per veicolare la struttura del documento e usarli in modo conforme alle specifiche. 7 Marcare le liste ed elencare le voci della lista in modo appropriato. 8 Marcare le citazioni. Non usare marcatura che definisca citazioni per ottenere effetti di formato come il rientro. 9 Assicurarsi che il contenuto dinamico sia accessibile oppure fornire una presentazione o pagina alternativa. 10 Fino a quando gli interpreti non permetteranno agli utenti di controllare il lampeggiamento, evitare di far lampeggiare il contenuto (cioè di cambiare la presentazione a intervalli regolari, come se si accendesse e spegnesse). 11 Fino a quando gli interpreti non forniranno la possibilità di bloccare l'aggiornamento automatico, non creare pagine che periodicamente si aggiornino automaticamente. 12 Fino a quando gli interpreti non forniranno la capacità di bloccare l'autoreindirizzamento, non usare marcatura per reindirizzare le pagine automaticamente. Piuttosto, configurare il server in modo che esegua i reindirizzamenti. 13 Fino a quando gli interpreti non permetteranno 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. 14 Usare le tecnologie W3C quando sono disponibili e sono appropriate per un certo compito e usare le versioni più recenti quando sono supportate. 15 Evitare le caratteristiche delle tecnologie W3C che sono disapprovate.

15 Cap. 1 Accessibilità Dividere grandi blocchi di informazione in gruppi più maneggevoli quando è naturale ed appropriato. 17 Identificare con chiarezza l'obiettivo di ogni collegamento. 18 Fornire metadati per aggiungere informazione di tipo semantico alle pagine e ai siti. 19 Fornire informazione sulla configurazione generale di un sito (per es., una mappa oppure un indice del sito). 20 Usare meccanismi di navigazione in modo coerente. Se si usano tabelle 21 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 (che può essere una versione linearizzata). 22 Se per l'impaginazione viene usata una tabella non usare nessun marcatore di struttura per la formattazione della resa visiva. Se si usano frame 23 Descrivere lo scopo dei frame e il modo in cui essi interagiscono se non è evidente dai titoli dei frame da soli Se si usano moduli 24 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. 25 Associare esplicitamente le etichette ai loro controlli. Se si usano applet e script 26 Per quanto riguarda script e applet, assicurarsi che i gestori di eventi siano indipendenti dai dispositivi di input. 27 Fino a quando gli interpreti non permetteranno agli utenti di bloccare il contenuto in movimento, evitare il movimento nelle pagine. 28 Fare in modo che elementi di programmi come script e applet siano direttamente accessibili o compatibili con le tecnologie assistive [Priorità 1 se la funzionalità è importante e non presentata altrove, altrimenti Priorità 2.] 29 Assicurarsi che ogni elemento che possiede una sua specifica interfaccia possa essere gestito in una modalità indipendente da dispositivo. 30 Negli script, specificare gestori di evento logici piuttosto che gestori di evento dipendenti da dispositivo.

16 Cap. 1 Accessibilità 14 Priorità 3 Lo sviluppatore di contenuti Web può tenere in considerazione questi Punti di Controllo. In caso contrario, una o più categorie di utenti sarà in qualche modo ostacolata nell'accedere alle informazioni presenti nel documento. La conformità a questi punti migliora l'accesso ai documenti Web. Punti di controllo per Priorità 3 In generale 1 Specificare l espansione di ogni abbreviazione o acronimo nel documento laddove compare per la prima volta. 2 Identificare il linguaggio naturale principale di un documento. 3 Creare un ordine logico di tabulazione fra i collegamenti, i controlli dei moduli, e gli oggetti. 4 Fornire scorciatoie da tastiera per i collegamenti importanti (compresi quelli nelle immagini sensibili sul lato client), per i controlli dei moduli, e per i gruppi di controlli dei moduli. 5 Fino a quando gli interpreti (comprese le tecnologie assistive) non renderanno in modo distinto collegamenti adiacenti, inserire caratteri stampabili (delimitati da spazi), non facenti parte dei collegamenti, per separare i collegamenti adiacenti. 6 Fornire agli utenti l'informazione necessaria perché possano ricevere i documenti in maniera che si adattino alle loro preferenze (per es. lingua, tipo di contenuto ecc.). 7 Fornire barre di navigazione per evidenziare e dare accesso ai meccanismi di navigazione. 8 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. 9 Se sono fornite funzionalità di ricerca, rendere possibili diversi tipi di ricerca per differenti livelli di abilità e per preferenze diverse. 11 Posizionare l'informazione più significativa all'inizio delle intestazioni, dei paragrafi, delle liste, ecc. 12 Fornire informazione sulle raccolte di documenti (cioè documenti composti da più pagine). 13 Fornire un mezzo per saltare arte ASCII multilinea. 14 Integrare il testo con presentazioni grafiche o uditive nei casi in cui esse possano facilitare la comprensione della pagina. 15 Creare uno stile di presentazione coerente fra le pagine.

17 Cap. 1 Accessibilità 15 Se si usano immagini e immagini sensibili 16 Fino a quando gli interpreti non renderanno disponibili equivalenti testuali per collegamenti di immagini sensibili sul lato client fornire collegamenti di testo ridondanti per ogni zona attiva di una immagine sensibile sul lato client. 17 Per le tabelle, fornire sommari. Se si usano tabelle 18 Fornire abbreviazioni per le etichette di intestazione. 19 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. Se si usano moduli 20 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. In base al rispetto di questi punti di controllo da parte di una pagina o documento, si stabiliscono conseguentemente tre livelli di conformità. Livello di Conformità A : conforme a tutti i Punti di Controllo di Priorità 1. Livello di Conformità Doppia-A : conforme a tutti i Punti di Controllo di Priorità 1 e 2. Livello di Conformità Tripla-A : conforme a tutti i Punti di Controllo di Priorità 1, 2 e 3. Una pagina siffatta potrà così essere contraddistinta con le rispettive icone di dichiarazione di conformità collegate all opportuna spiegazione del W3C. Queste icone hanno anche un equivalente testuale in modo da poter essere comprensibili se espresse tramite sintesi vocale. 6. WCAG 2.0 Dal momento della pubblicazione delle Linee Guida, il Gruppo di Lavoro che si è occupato della loro stesura ha raccolto tutta una serie di note e commenti sulla loro usabilità, applicabilità e comprensibilità. Tutti questi elementi stanno guidando lo sviluppo di una nuova versione delle raccomandazioni: le WCAG 2.0. L obiettivo di questo nuovo lavoro, ancora presentato sotto forma di bozza, è lo stesso delle WCAG 1.0. Oltre a questo, ne sono stati aggiunti degli altri. I principali sono: Assicurare l applicabilità dei requisiti attraverso diversi tipi di tecnologie. Mentre le Linee Guida nella versione precedente sono state scritte principalmente per i documenti HTML, adesso le regole della nuova edizione sono scritte in termini generici così da

18 Cap. 1 Accessibilità 16 assicurare la loro applicabilità a più di un linguaggio di marcatura o tipo di formato dei contenuti. Assicurare che i requisiti per la conformità siano chiari. La nuova versione deve specificare chiaramente quali sono le richieste minime per la conformità dei documenti alle linee guida e queste devono essere verificabili; tutto ciò comporterà la fornitura, da parte del Gruppo di Lavoro, di tutta una serie di liste di punti di controllo specifici per ogni tecnologia, esempi e metodi per determinare la conformità. Assicurare la facilità nell uso delle nuove pubblicazioni. Per questo scopo saranno inclusi dei test sull usabilità delle nuove raccomandazioni. Rivolgersi ad una platea di lettori sempre più eterogenea. Oltre agli sviluppatori di siti Web accessibili ci si vuole indirizzare anche a coloro che vogliono creare politiche particolari di accessibilità Web, agli sviluppatori di strumenti di pubblicazione, di valutazione e riparazione, di interpreti oppure ancora a coloro che vogliono insegnare i principi di realizzazione di contenuto Web accessibile. Identificare chiaramente chi saranno i beneficiari del contenuto Web accessibile. Si procederà ad una scoperta delle categorie di persone disabili che trarranno vantaggi dalle varie soluzioni tecniche implementate. Assicurare la compatibilità con le precedenti raccomandazioni. Una gran quantità di strumenti di valutazione e pubblicazione, di politiche di governi e di organizzazioni fa riferimento alla versione 1.0 delle Linee Guida : la nuova edizione non dovrà cambiare completamente la definizione di contenuto Web accessibile per poter garantire una certa continuità. Altra caratteristica delle WCAG 2.0 è la scomparsa delle priorità assegnate ai vari punti di controllo. Adesso essi sono catalogati secondo uno di tre livelli di implementazione: minimo, livello 2 e livello 3. Le nuove linee guida mirano, infine, a garantire la creazione di contenuti Web percepibili, utilizzabili, navigabili, comprensibili e robusti. La prima caratteristica riguarda la possibilità di presentare i contenuti in forme che devono poter essere capite da ogni utente eccetto per quegli aspetti che non possono essere espressi tramite le parole. La seconda si riferisce alla utilizzabilità degli elementi di interfaccia da parte di tutti. La terza coinvolge la facilità di orientarsi attraverso i contenuti, mentre le ultime due mirano a rendere i contenuti e i comandi dei documenti semplici da capire e capaci di adattarsi e lavorare con le tecnologie correnti e future. 7. Conclusioni In questo primo capitolo si sono affrontati i temi generali riguardo l accessibilità e l usabilità. Si è posto l accento sul fatto che le risorse Web sono un patrimonio di tutti e tutti devono poterle utilizzare. Si ribadisce che è un dovere morale indirizzare ogni sforzo per fare in modo che le persone disabili siano in grado di poter accedere come ogni altro individuo a questo bene prezioso. Inoltre, ma non meno importante, si può notare che con il progressivo invecchiamento della popolazione mondiale, quello che oggi può essere fatto per risolvere i problemi inerenti le condizioni dei portatori di handicap, tornerà utile domani per tutte quelle

19 Cap. 1 Accessibilità 17 persone che, proprio per la loro anzianità si potranno trovare in situazioni simili di disabilità psico-fisica. In questa ottica, l Italia si troverà ad avere la popolazione, mediamente, più anziana d Europa e una situazione in cui sono pochissimi i siti sia istituzionali, sia privati che hanno intrapreso la strada della eliminazione delle barriere all accessibilità non è certo confortante. Al contrario, nei siti sono molto frequenti la non omogeneità delle pagine e la non persistenza della barra di navigazione, la mancanza di elementi di orientamento quali mappe e indici, l uso di javascript che spesso non rende possibile la navigazione ad utenti disagiati ed infine uno sforzo di organizzare gli argomenti per temi di interesse per l utente, pressoché nullo. A fronte di ciò, quello che si vuole fare nella presente Tesi è fornire una metodologia di valutazione e riparazione che possa aiutare gli autori ad eliminare le barriere dai siti già esistenti oppure a sviluppare nuovi progetti con riguardo a queste problematiche. Si parte dai Punti di Controllo introdotti con la descrizione delle Linee Guida per i Contenuti Web (WCAG1.0) del W3C, ed in base ad essi, si cercherà di analizzare opportunamente i siti per individuare le possibili violazioni. Si presenteranno poi delle tecniche per permetterne la loro riparazione.

20 CAPITOLO 2 Metodologie di valutazione e riparazione 1. Introduzione Esiste una varietà di approcci e strumenti per valutare l accessibilità dei siti Web al fine di poterne rimuovere le barriere, ma l utilizzo di uno soltanto di essi non fornisce una informazione comprensiva o riesce a cogliere tutti i problemi. Per questo una valutazione efficace combina una serie di interventi, richiedendo modi diversi di agire. Una valutazione di conformità alle Linee Guida per l Accessibilità ai contenuti Web del W3C può: Trovare la maggior parte dei problemi che un sito possiede. Determinare o dimostrare che esso già soddisfa un livello di conformità alle WCAG 1.0. Dopo aver individuato questi elementi si può procedere ad una riparazione, al fine di rendere il sito accessibile (secondo un determinato livello), se non lo era, oppure di aumentarne il livello ad uno superiore. Il punto di partenza e arrivo di questa parte sarà la lista dei Punti di Controllo presentata nella sezione precedente che permetterà appunto di controllare i documenti sotto diversi aspetti e di registrare le violazioni riguardo ai problemi di accessibilità che in essi occorrono. Infine si ricorda che la revisione delle procedure di monitoraggio e controllo del sito in funzione di queste problematiche assicurerà il mantenimento del livello di accessibilità raggiunto. 2. Valutazione di conformità alle WCAG 1.0 Una valutazione efficace per determinare i problemi del sito Web combina una serie di test che sono semi-automatici, manuali e di usabilità. Inoltre viene richiesta una familiarità con i linguaggi di marcatura, l uso almeno iniziale di strumenti di valutazione, le impostazioni di configurazione dei browser e un coordinamento con degli utenti revisori che hanno diversi tipi di disabilità. Quest ultimo punto è importante perché aiuta ad identificare i problemi nei modi in cui sono state applicate le varie soluzioni tecniche. 18

21 Cap. 2 Metodologie di Valutazione e riparazione 19 I passi obbligatori da seguire sono indicati di seguito ad eccezione di quelli etichettati come alternativi oppure opzionali: 2.1. Identificare l estensione del sito da valutare e il livello di conformità da tenere come obiettivo Identificare una selezione di pagine che ne contenga almeno una per ciascun tipo di quelle presenti nel sito (home page, mappa, indice, motore di ricerca, news, contatti con l utente, versione alternativa), e tutte le pagine iniziali o pagine di ingresso al sito Identificare chiaramente uno tra: L intero sito Web che include tutte le pagine a partire dalla URL di base. Oppure una selezione estesa di pagine. L inclusione in questa selezione può riguardare: pagine da differenti sezioni del sito, pagine che presentano aspetti diversi rispetto a quello tipico del sito, pagine costruite con differenti strumenti di sviluppo o tramite processi particolari, incluse quelle generate da database, pagine prodotte sotto differenti linee guida, pagine dei contatti con gli autori e l ente del sito, pagine importanti per lo scopo del sito ecc. Se qualche area del sito è esclusa dalla valutazione, assicurarsi di scoprirlo Identificare il livello di conformità alle WCAG 1.0 da tenere come obiettivo Valutazione automatica e semi-automatica Validare il codice di marcatura con l inclusione della sintassi e dei fogli di stile, usando tutti i validatori, di seguito indicati, applicabili alla selezione di pagine. Lanciare almeno uno strumento di validazione sull intero sito Web o sulla selezione estesa di pagine. HTML Validation service. CSS Validation service. MathML Validator. Il risultato di queste operazioni fornisce delle liste di errori trovati nel codice nonché una loro spiegazione. Essendo la tipologia di questi errori riconducibile al mancato rispetto delle specifiche correnti per HTML, CSS e MathML del W3C, essi si possono registrare come violazioni de: Punto di Controllo 3 per il livello di priorità 2. Può stupire il fatto che questi errori, pur essendo veramente frequenti nelle pagine Web, siano riconducibili al non rispetto di soltanto un punto e addirittura del secondo livello. Inoltre, visto che le tecnologie W3C hanno integrate al loro interno caratteristiche di accessibilità, questi validatori possono anche indicare altre violazioni di tipo sintattico che le riguardano molto da vicino. Ad esempio HTML Validator rileva la mancanza dell attributo alt nei tag IMG: questa è una violazione del Punto di Controllo 1 per il livello di priorità 1.

22 Cap. 2 Metodologie di Valutazione e riparazione 20 Si noti, però, che una sintassi corretta aiuta ad eliminare un certo numero di problemi di accessibilità, tuttavia essa soltanto non garantisce che il documento sia accessibile. Infatti, nonostante la correttezza sintattica, può succedere che si stiano utilizzando elementi disapprovati, oppure obsoleti, violando altri Punti di Controllo, primi tra tutti: Punto di Controllo 14 per il livello di priorità 2. Punto di Controllo 15 per il livello di priorità 2. Per questo si rimanda alle fasi successive per scoprire le altre violazioni dovute ad un codice che è corretto ma crea comunque barriere all accessibilità. Quando, alla fine della fase di valutazione, tutti i problemi saranno stati rilevati e registrati in una lista, ognuno come violazione di un ben preciso Punto di Controllo, si potrà fare riferimento alle tecniche suggerite nel capitolo 4 per la loro correzione Usare almeno due strumenti per la valutazione dell accessibilità sulla selezione di pagine, lanciandone almeno uno sull intero sito Web. Si possono selezionare questi strumenti dalla lista seguente: WAVE: uno strumento che segna ogni oggetto in una pagina Web che dovrebbe essere esaminato per potenziali barriere all accessibilità, e fornisce una descrizione di quale potrebbe essere il problema. BOBBY: è uno strumento informatico che verifica la rispondenza dei siti ai requisiti di accessibilità agli utenti disabili, facendo riferimento a quanto stabilito nelle apposite Linee Guida pubblicate dal WAI-W3C. A-PROMPT: oltre a fornire la lista dei problemi, fornisce una guida interattiva per la loro risoluzione intervenendo direttamente e automaticamente sul codice per la loro correzione. TORQUEMADA: nasce da sviluppatori italiani all interno dell iniziativa Webxtutti della Fondazione Ugo Bordoni con l intenzione di fornire un concreto supporto agli utenti che vogliano rendere accessibile il proprio sito, anche non avendo una conoscenza specifica dell argomento; HTML TIDY: si tratta di una utility gratuita che permette di trovare e correggere automaticamente gli errori che si possono commettere nel codice HTML e può aiutare ad identificare i punti dove c è bisogno di porre maggiore attenzione per rendere le pagine accessibili. L output di questi strumenti consiste proprio nell indicazione delle violazioni dei Punti di Controllo per i vari livelli di priorità. C è da far notare che essi non riescono, però, a realizzare una verifica completa di tutta la lista. Per questo avvertono l utente su cosa deve ancora essere controllato oppure genericamente di effettuare delle valutazioni manuali Valutazione manuale Esaminare la selezione delle pagine usando la Lista dei Punti di Controllo, relativa al livello di priorità scelto come obiettivo, per registrarne le violazioni. I Punti di

23 Cap. 2 Metodologie di Valutazione e riparazione 21 Controllo da esaminare sono soprattutto quelli che non possono essere valutati dagli strumenti automatici e quelli che si applicano al particolare contesto del sito Esaminare la selezione delle pagine usando un browser ad interfaccia grafica (GUI, grafical user interface) selezionando almeno tre configurazioni tra le seguenti: Internet Explorer, Opera, Mozilla, in versioni vecchie e nuove, su piattaforme diverse (Win, Linux, Mac). Per ognuna queste configurazioni operare come segue: Disabilitare le immagini e assicurarsi che sia disponibile del testo alternativo appropriato. I possibili Punti di Controllo violati sono: Punti di Controllo 1, 8, 9 e 16 per il livello 1. Punti di Controllo 1, 2, 4, e 7 per il livello 2. Punto di Controllo 15 per il livello 3. Spegnere i suoni e assicurarsi che il contenuto audio sia ancora disponibile attraverso il testo equivalente. I possibili Punti di Controllo violati sono: Punti di Controllo 1, 14, 15 e 16 per il livello 1. Punto di Controllo 9 per il livello 2. Cambiare la grandezza del font (dal più piccolo al più grande) nel browser ed osservare se la pagina è ancora leggibile ed usabile. I possibili Punti di Controllo violati sono: Punti di Controllo 4, 5 e 15 per il livello 2. Impostando differenti risoluzioni dello schermo e/o tramite ridimensionamento della application window, vedere se questo forza o no la pagina a scorrere orizzontalmente. La prova può essere fatta esaminando direttamente il codice per verificare l uso del dimensionamento assoluto e assicurarsi che sia quindi un problema di contenuto e non di browser. I possibili Punti di Controllo violati sono: Punti di Controllo 4, 5 e 15 per il livello 2. Cambiare il colore dello schermo a bianco e nero (oppure stampare la pagina con una stampante in bianco e nero) e notare se il contrasto dei colori è adeguato. I possibili Punti di Controllo violati sono: Punto di Controllo 2 per il livello 1. Punto di Controllo 1 per il livello 2. Usando il tasto TAB passare attraverso i collegamenti e i controlli dei moduli nella pagina: assicurarsi di potervi accedere e che i collegamenti indichino chiaramente cosa essi caricheranno. I possibili Punti di Controllo violati sono:

24 Cap. 2 Metodologie di Valutazione e riparazione 22 Punto di Controllo 1 per il livello 1. Punti di Controllo 17, 24, 25, 26, 28, 29 e 30 per livello 2. Punti di Controllo 3 e 4 per il livello 3. Esaminare la pagina con script, fogli di stile e applet non caricate. I possibili Punti di Controllo violati sono: Punti di Controllo 4 e 13 per il livello 1. Punti di Controllo 8 e 15 per il livello 2. Nota : per gli utenti revisori che hanno certe disabilità bisogna che alcuni dei passi precedenti siano fatti con l ausilio di un altra persona che non ha lo stesso tipo di handicap Esaminare la selezione delle pagine con un browser testuale (ad es. Lynx) e con un browser vocale (ad es. Home Page Reader) e porsi le seguenti domande: Con il browser testuale, l informazione e le funzioni sono disponibili in maniera equivalente così come lo sono con un browser GUI? L informazione è presentata in maniera significativa quando letta serialmente? I possibili Punti di Controllo violati sono: Tutti i Punti di Controllo di qualsiasi livello dove il testo equivalente è necessario per rendere l informazione, di qualsiasi tipo essa sia, ancora disponibile. Punti di Controllo 1, 2, 4, 7, 8, 10, 11 e 13 per il livello 1. Punti di Controllo 2, 4, 6,7, 8, 9, 16, 17, 18, 19, 20, 21, 22, 24, 25, 26, 28, 29 e 30 per il livello 2. Punti di Controllo 1, 3, 4, 5, 7, 8, 10, 14, 15, 16, 17, 18 e 19 per il livello 3. Con il browser vocale, l informazione è equivalente a quella disponibile con il browser GUI? L informazione è presentata in maniera significativa quando pronunciata serialmente? I possibili Punti di Controllo violati sono: Tutti i Punti di Controllo di qualsiasi livello dove il testo equivalente è necessario per rendere l informazione, di qualsiasi tipo essa sia, ancora disponibile. Punti di Controllo 3, 10 e 11 per il livello 1. Punti di Controllo 4, 5, 6, 7, 21 e 22 per il livello 2. Punti di Controllo 1, 2, 5, 6, 8, 10, 16, 17, 18 e 19 per il livello 3. Tutti i Punti di Controllo di qualsiasi livello dove si indica che un equivalente audio può fornire dell informazione equivalente. Il testo è chiaro e semplice al livello appropriato allo scopo del sito? È corretto? Una persona che legge una pagina con un sintetizzatore vocale può non essere in grado di decifrare il tentativo del sintetizzatore di leggere una parola che ha un errore di ortografia al suo interno. I controlli sulla grammatica aiutano a rendere corretto il contenuto testuale del documento, e anche i lettori per i quali la lingua in cui esso è scritto, non è la loro, oppure quelli che hanno appena cominciato ad impararla.

25 Cap. 2 Metodologie di Valutazione e riparazione 23 Rivedere il testo del documento con, ad esempio, statistiche di leggibilità come quelle generate da alcuni word processor può essere un utile indicatore di chiarezza e semplicità. Ancora meglio, chiedere ad un esperto di revisionarlo per verificarne la chiarezza. Si può, così, migliorare anche l'utilizzabilità dei documenti, identificando problemi culturali potenzialmente rilevanti che possono sorgere a causa dell'uso del linguaggio o delle icone. I possibili Punti di Controllo violati sono: Punto di Controllo 7 per il livello 1. Nota : per gli ambienti dove c è una scelta limitata di tecnologie assistive svolgere la valutazione manuale anche per questi tipi di tecnologia. Gli utenti esperti di screen reader (lettori di schermo possono sostituirli con un browser vocale o testuale, ma se sono non vedenti potrebbero aver bisogno di un partner vedente per comparare l informazione disponibile visualmente; se invece i revisori sono dotati di vista possono ascoltare con gli occhi chiusi e quindi aprirli per confermare se l informazione è equivalente. Nonostante si siano fornite delle indicazioni precise circa le possibili violazioni che si possono riscontrare effettuando le valutazioni ai punti e 2.3.3, è bene controllare comunque se altri punti non indicati siano stati violati : l esperienza in queste pratiche aiuterà a capire senza ulteriori indicazioni quali controllare. Dopo aver annotato tutte le violazioni dei Punti di Controllo trovate con la valutazione manuale la lista degli errori riguardo l accessibilità è pressoché completa. Prima di effettuare le riparazioni necessarie si può ancora svolgere una valutazione di usabilità del sito per raccogliere dell informazione addizionale Valutazione dell usabilità. Mediante l aiuto di persone con disabilità differenti, diversi livelli di esperienza tecnica, differenti livelli di familiarità con il sito e usando una varietà di tecnologie assistive e strategie adattive, rivedere la selezione di pagine ed esplorare liberamente l intero sito Web o la selezione estesa di pagine. Certe volte queste prove sono svolte nel contesto di un laboratorio di test in cui vengono replicati gli scenari tipici delle condizione di disabilità. Si tenga ben presente, però, che questi scenari non simulano l esperienza piena che un disabile potrebbe avere. Negli ambienti reali, le pagine sviluppate secondo certi criteri potrebbero essere meno usabili di quanto si pensi. Per questo è importante far valutare e osservare direttamente come utenti con handicap diversi provano ad usare una pagina oppure un sito. Bisogna porre attenzione, infine ma non ultimo, al fatto che una persona disabile che sta testando una pagina, svolgendo certi compiti, non si senta anch egli sotto test. Le valutazioni che si possono effettuare in questa sede possono riguardare diversi aspetti di una pagina. Ad esempio, un documento con un notevole affollamento di collegamenti può risultare poco usabile, soprattutto perché, la maggior parte delle volte essi puntano alla stessa risorsa ma hanno un testo diverso e anche un titolo diverso: la loro riduzione e la coerenza dei testi migliorerà la situazione. Importantissima risulta l organizzazione logica dei contenuti in temi di interesse per gli utenti. Si aumenterà così la facilità di comprensione e d uso del documento oltre che la probabilità di far rimanere sempre orientato chi sta navigando all interno del sito. La mescolanza di argomenti o la loro posizione in una sezione devono essere attentamente valutate, perché qualsiasi utente è abituato ad usare le pagine Web in un certo modo, e si aspetta, magari, di trovare degli elementi particolari sempre nello stesso posto o che essi gli

26 Cap. 2 Metodologie di Valutazione e riparazione 24 vengano presentati ogni volta alla stessa maniera. Il discorso è ancora più vero per un utente disabile che ha l impossibilità di vedere o delle difficoltà di tipo cognitivo. Per questo, ad esempio, è utile che la presenza di una barra di navigazione risulti sempre all inizio della pagina sia se presentata da un interprete grafico sia da uno vocale. Inoltre, al suo interno, gli utenti si aspettano di trovarvi un indice oppure una mappa del sito che andranno a cercare nel medesimo posto, qualora ne avessero bisogno. Da ciò discende anche la necessità di valutare la coerenza nella tipologia delle varie pagine: tante e diverse possono aumentare la bellezza grafica del sito, ma ridurre notevolmente la sua praticità d uso, perché l utente è costretto ad adattarsi ogni volta a qualcosa di diverso, non strettamente necessario, con il risultato di un aumento della probabilità di abbandono della navigazione. Si noti, infine, che la familiarità con l uso del sito, da parte dei tester, andrà crescendo durante il periodo di revisione: la velocità con cui questo avviene può essere un ulteriore indicazione riguardo la sua usabilità. La annotazione di tutti questi elementi renderà, pressoché completo, il quadro di valutazione di una pagina Web, si potrà quindi avanzare con i passi successivi del processo. 3. Riparazione, validazione e monitoraggio La valutazione della conformità alle WCAG 1.0 ha prodotto, come suggerito nei vari passi, una lista composta per una parte dai Punti di Controllo, precedentemente introdotti, per ciascun livello di priorità, per l altra dalle indicazioni della loro applicabilità alla pagina, dalle loro violazioni, dal posto in cui esse sono state rilevate e infine dal metodo con cui esse sono state trovate. Un'altra operazione che si consiglia di svolgere è l annotazione delle soluzioni tecniche, rispettose delle Linee Guida per l accessibilità, che sono già presenti ed adottate nelle varie pagine. Quindi operare come segue: 3.1. Riparazione Eliminazione delle barriere all accessibilità identificate precedentemente, attraverso le tecniche, riportate nel capitolo 4. Si noti che per i casi in cui si tratti della selezione estesa invece che dell intero sito Web bisogna applicare alle pagine non direttamente analizzate quanto si è appreso per le altre Espandere l applicazione delle soluzioni tecniche rispettose delle Linee Guida per l accessibilità già adottate nel sito Validazione Validare il lavoro fatto, servendosi delle stesse tecniche usate per valutarne l accessibilità, al fine di appurare se esso ha prodotto gli effetti sperati.

27 Cap. 2 Metodologie di Valutazione e riparazione Monitoraggio Continuare la manutenzione e il monitoraggio del sito con procedure rivolte all accessibilità per assicurarne il mantenimento del livello raggiunto. 4. Considerazioni per contesti specifici 4.1. Valutazione durante il processo di sviluppo Valutare un sito Web durante il suo sviluppo è essenziale, ma può essere difficile, perché alcune volte, gli sviluppatori preferiscono stabilire il progetto del sito e dimostrare i loro progressi prima di effettuare dei controlli. Tuttavia, i problemi di accessibilità identificati precocemente sono più facili da correggere e da evitare. Una valutazione efficace durante la fase di progetto può includere : Stabilire chiari requisiti per il livello di accessibilità che ci si aspetta. Trattare le questioni di accessibilità del sito già dalle prime riunioni di progettazione. Concordare un programma di revisione durante la fase di sviluppo. Fornire delle informazioni sugli approcci di valutazione dell accessibilità in modo che gli sviluppatori possano almeno effettuare una revisione preliminare in proprio Monitoraggio Per massimizzare la probabilità che un sito Web mantenga un dato livello di conformità in futuro, si dovrebbero prendere i seguenti provvedimenti: Definizione chiara del livello di conformità atteso e a quali parti del sito esso si applica; Identificazione dei responsabili del monitoraggio e delle procedure che essi possono usare per portare rapidamente alla conformità una pagina che non lo è. Indicazione precisa riguardo la frequenza, il metodo e la portata delle valutazioni. Definizione dei processi di valutazione e validazione di tutti i nuovi tipi di pagine prima di aggiungerle al sito. Utilizzazione di software per facilitare la valutazione dell accessibilità. Inclusione nel sito di indirizzi per avere del feedback sulla sua accessibilità.

28 CAPITOLO 3 Fogli di Stile 1. Introduzione CSS (Cascading Style Sheets, Fogli di Stile a Cascata) rappresenta uno dei linguaggi standard fondamentali del W3C. La sua storia cammina su binari paralleli rispetto a quelli di HTML, di cui vuole essere l'ideale complemento. Da sempre infatti, nelle intenzioni del World Wide Web Consortium, HTML, così come la sua recente evoluzione, XHTML, dovrebbe essere visto semplicemente come un linguaggio strutturale, alieno da qualunque scopo attinente la presentazione di un documento. Per questo obiettivo, ovvero arricchire l'aspetto visuale ed estetico di una pagina, lo strumento designato sono appunto i CSS. La prima specifica ufficiale di CSS risale al 1996, si è poi andati avanti con CSS2, nel 1998, il quale aggiunge sostanzialmente delle nuove caratteristiche alla prima versione ed attualmente al W3C si sta lavorando su CSS3 di cui sono già state pubblicate alcune parti. 2. Cosa sono i fogli di stile I fogli di stile sono essenzialmente un insieme di regole per istruire il browser su come debba essere presentata la pagina Web. Le regole dei CSS possono essere specificate in una pagina esterna al documento a cui esse devono essere applicate, nel documento stesso, oppure incorporate nei tag HTML. Le regole definite nei fogli di stile sono specifiche per ogni selettore, che può essere un tag HTML (come body, p, div) una classe (ad esempio <div class="nome della classe">) o un identificatore (ad esempio <div id="nome identificatore">). Per ogni elemento, possono essere definite diverse proprietà. Ogni proprietà può avere uno o più valori che, descrivono come il browser debba rappresentare il selettore. 3. A cosa serve CSS Il linguaggio HTML ha limiti notevoli sul lato della pura presentazione. In verità, non si può parlare di limiti: HTML non è stato progettato per questo. È stato però piegato a fare cose che 26

29 Cap. 3 Fogli di Stile 27 intrinsecamente non era in grado di fare. A tal proposito sono stati creati i fogli di stile i quali permettono il controllo su ogni elemento riguardante l aspetto delle pagine Web. Dai colori agli sfondi, dai font allo stile delle intestazioni o dei paragrafi, all impaginazione generale del documento. L uso di CSS semplifica anche la gestione di un sito, perché, ad esempio, per sostituire anche solo lo sfondo delle pagine basta cambiare una volta per tutte il codice del foglio di stile ad esse associato, senza bisogno di modificarle una per una. Il risultato è una facilità di manutenzione dei documenti ad una maggior leggerezza del codice che si traduce in un risparmio di banda per le connessione o in tempi più brevi per il download. Caratteristica importante dei fogli di stile, infine, è che tramite essi si riescono ad implementare tutte quelle raccomandazioni delle Linee Guida per abbattere le barriere all accessibilità dei documenti Web, grazie alla possibilità di riuscire a separare struttura dei contenuti dalla modalità di presentazione. 4. Sintassi dei fogli di stile Il modo in cui le regole sono specificate nei file CSS dipende dal tipo di selettore. Se in un tag non è stata definita una classe o un identificatore, allora la regola da specificare nel foglio di stile sarà del tipo nometag{proprietà: valore;}. Ad esempio p{font-size:1em;}; bisogna notare, in questo caso, che lo stile sarà applicato a tutti i tag p che non sono diversamente identificati. Se ci si vuole riferire solo ad un determinato insieme di elementi della pagina si dovranno utilizzare le classi: <div class = nome-della-classe > e la regola potrà essere.nome-della-classe{proprietà:valore;} oppure div.nomedella-classe{proprietà:valore;}. Se si vuole che l elemento a cui applicare le regole di stile sia uno soltanto, si userà un identificatore. In questo caso, però, deve essere garantita l unicità di quest ultimo in tutto il codice HTML: <div id= identificatore > e la regola sarà #identificatore{proprietà:valore;}. Sono possibili, inoltre, combinazioni dei precedenti: per riferirsi ad un elemento che non è stato identificato in alcun modo ma che ne segue un altro in cui è stato impostato l attributo class, nella regola di stile, basterà far seguire il nome della classe da quello dell elemento. Un esempio di ciò può essere <div class= nomeclasse ><a href= ></a> con il seguente foglio di stile associato: div.nomeclasse a {proprietà:valore;}. Per riferirsi infine a tutti gli elementi di una pagina Web la regola da usare sarà: *{proprietà:valore;}. Una proprietà importante dei CSS è che essi lasciano il controllo finale sullo stile all utente. Infatti grazie alla proprietà!important, inserita nelle regole del foglio di stile dell utente si può fare in modo che queste abbiano la precedenza su quelle definite dall autore della pagina. Inoltre, l utilizzo di!inherit permette che le regole contrassegnate con un particolare valore e definite per un certo elemento siano ereditate anche da altri. Ad esempio body{background:black! important;} specifica uno sfondo nero per body e sovrascrive la regola di stile definita, sempre per body, nel CSS dell autore. Se inoltre si specifica anche *{background:inherit!important;} lo sfondo di colore nero sarà ereditato da tutti gli elementi della pagina in cui compare la stringa!important.

30 5. CSS nei documenti HTML Cap. 3 Fogli di Stile 28 I modi per includere i fogli di stile nelle pagine Web sono diversi. Il primo riguarda la possibilità di collegare un CSS esterno tramite l elemento link inserito nella sezione head della pagina (stili collegati): <link rel= stylesheet type= text/css href= stile.css >. Il secondo permette di incorporare un foglio di stile interno servendosi dell elemento style inserito sempre nella sezione head (stili incorparati): <style type="text/css"> body{background: #FFFFCC;}</style>. Con questo metodo è anche possibile specificare un CSS esterno servendosi della <style>@import url(stile.css);</style>. Il terzo, infine, consiste nell inserimento delle regole di stile all interno dei tag HTML (stile in linea): <elemento style="regole_di_stile">. Gli stili in linea vanno a sovrascrivere quelli incorporati che a loro volta prevalgono su quelli collegati. 6. Cascata Se in una pagina sono presenti diversi modi in cui è specificato lo stile, l ordine in cui le regole verranno interpretate ed applicate dipende dai meccanismi di cascata (CSS, Cascading Style Sheets vuol dire appunto: Fogli di Stile a Cascata). Questo concetto si basa su quello di peso che è la maggiore o minore importanza da assegnare a ciascuna regola. Esso viene valutato analizzando diversi fattori. Il primo è la specificità della regola ed in linea generale il metodo per calcolarla è quello di attribuire più valore prima agli id, poi alle classi ed infine ai singoli elementi. Un altro fattore è l origine che tiene conto, invece, della provenienza della regola: se essa si trova nel foglio di stile dell autore avrà priorità su una definita in quello dell utente e infine su quelle predefinite del browser. Il meccanismo di cascata riguarda il procedimento con il quale questi elementi sono elaborati al fine di presentare una pagina Web. Un interprete comincia ad ordinare prima per origine e poi per specificità. Se dovesse trovare perfetta coincidenza tra il peso delle regole, passa a valutare l ordine con cui esse sono incontrate: gli stili in linea prevalgono su quelli incorporati che a loro volta prevalgono su quelli collegati. In questo caso se l ordine di definizione delle regole è quello corretto e logico i conflitti o le coincidenze si dovrebbero risolvere. Tutto questo meccanismo può essere alterato, infatti, se una dichiarazione viene accompagnata da!important essa sale subito al primo posto nell ordine di applicazione a prescindere da origine, specificità e ordine. 7. Tipi di media Fra le opportunità offerte dai fogli di stile, troviamo quella di poter specificare come un documento dovrà apparire su un determinato media: schermo, carta, palmare o dispositivo braille. I tipi di media supportati da CSS sono: all: tutti i dispositivi.

31 Cap. 3 Fogli di Stile 29 aural: sintetizzatori vocali. braille: dispositivi braille a lettura tattile. embossed: stampanti braille. handheld: dispositivi palmari. print: per le stampanti. projection: proiettori per presentazioni. screen: lo schermo di un PC. tty: dispositivi con caratteri a larghezza fissa. tv: televisori. Certamente, se una pagina è ben progettata e il codice HTML ben strutturato, non sarà necessario associare un foglio di stile per ogni dispositivo, ma in linea di principio ciò è possibile. Si potranno così controllare i tempi, i suoni, le voci, e diverse altre caratteristiche dei sintetizzatori vocali anche in maniera molto elaborata. Si potranno stampare le pagine diversamente da come esse appaiono sullo schermo o ridimensionare tutti gli elementi di un documento e trasformare i colori in bianco e nero per la loro presentazione su un dispositivo palmare. 8. CSS e tabelle Come si può notare dal significato dell acronimo del tag td che sta per table data, le tabelle sono state create per rappresentare dati di natura tabellare. Esse però possono contenere altri tipi di dati, diversi da parole e numeri: è stato per questo motivo che si è diffusa tra i progettisti Web la pratica, poco raccomandabile, di utilizzarle per scopi di impaginazione di un sito. Con l avvento poi dei software per la pubblicazione di tipo WYSIWYG (What You See Is What You Get: ciò che vedi è ciò che otterrai) la situazione è peggiorata maggiormente perché essi si basano quasi esclusivamente sulle tabelle. I progettisti disegnano le pagine senza accorgersi che il software sta producendo del codice che è ridondante, disorganizzato e spesso anche errato. Le pagine ottenute hanno dimensioni dei file eccessive (aumentano i tempi di download), sono difficili da elaborare ed inutilizzabili da utenti come, ad esempio, i non vedenti che utilizzano dei lettori di schermo. Infatti, il testo viene letto da questi strumenti dall inizio alla fine nell ordine in cui compare nel codice, ed essendo il contenuto informativo indissolubilmente legato al codice per la grafica, capita spesso che l ordine in cui sia letta l informazione non è corretto. Come spesso si è detto per risolvere questo problema di accessibilità è necessario separare grafica e contenuti. I fogli di stile in questo caso sono la soluzione ideale perché permettono di realizzare qualsiasi tipo di impaginazione senza coinvolgere minimamente la struttura dei contenuti che resterà sempre la stessa. Si avrà in più la flessibilità, non offerta dalle tabelle, di poter cambiare il tipo di presentazione a secondo del tipo di media e di realizzare presentazioni anche più complesse. Il codice sarà più ordinato, non ridondante e diverrà più

32 Cap. 3 Fogli di Stile 30 semplice cambiare l aspetto anche di un intero sito modificando un solo file. Lo svantaggio potrebbe essere che gli interpreti più datati hanno una cattiva interpretazione dei CSS, ma questo richiede soltanto un po più di attenzione in sede di progetto, visto che il linguaggio permette dei meccanismi tali per cui i fogli di stile possono essere nascosti ai browser più datati e se la struttura del codice HTML è ben organizzata, come deve, non si perderà alcun contenuto informativo. 9. Contenuto generato tramite CSS I fogli di stile offrono anche la possibilità di aggiungere dell informazione addizionale oltre a quella già presente nel codice HTML. Infatti esistono nel linguaggio degli oggetti che permettono di identificare degli elementi che non sono rappresentati da nessun tag particolare. Essi sono chiamati pseudo-elementi e permettono, ad esempio, di riferirsi alla prima lettera (:first-letter) o alla prima riga di un paragrafo, oppure al prima (:before) e al dopo (:after) di un frammento particolare del documento. Quest ultima caratteristica può essere sfruttata a favore degli utenti che utilizzano dei browser vocali in quanto si può far generare allo strumento una frase prima o dopo certi elementi per aggiungere informazioni sul contesto o altro che magari sono evidenti per chi utilizza un interprete grafico ma potrebbero non esserlo per gli altri. 10. Conclusioni Questa brevissima introduzione sulle caratteristiche principali dei fogli di stile, ben lungi dall essere esaustiva, cerca di tracciare un quadro d insieme su ciò che si può fare con il linguaggio e come, con esso, si possano implementare delle pratiche per migliorare l accessibilità dei documenti. Si rimanda al capitolo successivo, dove vengono riportate le tecniche suggerite dal W3C per il rispetto dei Punti di Controllo relativi ai vari livelli di priorità, per gli esempi concreti. Si ricorda comunque che questo lavoro non vuole essere in alcun modo sostitutivo delle specifiche del linguaggio a cui si prega di riferirsi per ogni ulteriore delucidazione.

33 CAPITOLO 4 Tecniche per i Punti di Controllo 1. Introduzione In questo capitolo si riportano tutte le tecniche suggerite nei documenti del W3C per il rispetto dei Punti di Controllo di ogni livello di priorità. Gli esempi mostrano tratti di codice che riguardano sia il linguaggio HTML che CSS. 2. Punti di controllo generali per il livello Punto di controllo 1 Fornire un equivalente testuale per ogni elemento non di testo (per esempio, mediante alt, longdesc o contenuto nell'elemento stesso). Questo comprende: immagini, rappresentazioni grafiche di testo (compresi i simboli), zone di immagini sensibili, animazioni (ad es. GIF animate), applet e oggetti programmati, arte ASCII, frame, script, immagini usate come richiamo per elenchi, spaziatori, bottoni grafici, suoni (azionati con o senza l'intervento dell'utente), file di solo audio, tracce audio di video e video. A. Testo equivalente Il testo è considerato accessibile per quasi tutti gli utenti, dal fatto che esso può essere manipolato da uno screen-reader, un browser non visuale o un lettore braille. Lo si può visualizzare, ingrandire, sincronizzare con un video per creare dei sottotitoli ecc. Se si sta costruendo un documento contenente dell informazione non testuale (immagini, applet, presentazioni multimediali, suoni, ecc.) si deve aggiungere ad essa un equivalente testuale dovunque possibile. Quando un testo equivalente è presentato all utente, svolge essenzialmente la stessa funzione del contenuto originale. Per contenuti semplici, il testo può servire soltanto a descriverne le funzioni o gli scopi; per contenuti complessi (come grafici, cartine, ecc.) esso può essere più lungo e contenere delle informazioni descrittive. 31

34 Cap. 4 Tecniche per i Punti di Controllo 32 Il testo equivalente deve essere fornito per loghi, fotografie, bottoni di submit, applet, ASCII art, immagini usate per creare liste puntate o numerate, e per tutti i collegamenti dentro una immagine sensibile così come per le immagini invisibili usate per scopi di impaginazione. Il modo in cui specificare del testo equivalente dipende dal linguaggio del documento. HTML, ad esempio, in base all elemento, permette di specificare il testo equivalente attraverso gli attributi (alt o longdesc ) oppure nel contenuto dell elemento stesso (l elemento OBJECT ). I formati video, come QuickTime, permetteranno di includere una varietà di tracce audio e video alternative. SMIL permette di sincronizzare non solo audio alternativo e clip video, ma anche file di testo con ciascuno di due. Alcuni formati delle immagini permettono del testo all interno del file di dati con le informazioni sull immagine. Se un formato supporta anche il testo (ad es. PNG) si potrebbe fornire informazione anche qui. Infine, quando si progettano pagine Web, si devono considerare i problemi di compatibilità con strumenti vecchi, e ciò perché: Certi interpreti non supportano tutte le caratteristiche di HTML. Gli utenti possono usare dei browser e dei player vecchi. Possono sorgere problemi di compatibilità tra software. Quando si progetta per tecnologie più vecchie si devono considerare queste tecniche: Fornire del testo equivalente in linea. Ad esempio, la descrizione di un immagine subito dopo l immagine stessa. Fornire collegamenti a descrizioni testuali equivalenti lunghe o in un file differente, o nella stessa pagina. Questi sono chiamati collegamenti descrittivi o d-link. Il testo del collegamento dovrebbe spiegare che esso si riferisce ad una descrizione e dove possibile indicarne la natura. Per chi fosse interessato però alla resa visuale della pagina si può usare un testo del collegamento più discreto come [D]. In questo caso però, si deve fornire più informazione (ad es. tramite l attributo title) sull obiettivo del collegamento affinché si possa distinguere tra i collegamenti che condividono la stessa [D]. B. Immagini usate per creare liste puntate o numerate Nella creazione di liste con i tag DL, DT e DD si deve evitare l uso di immagini come indicatori degli elementi della lista. Tuttavia, se questo metodo fosse usato, bisogna assicurarsi di fornire un testo equivalente per le immagini. Inoltre gli sviluppatori devono evitare l utilizzo di stili di lista dove gli indicatori per gli elementi della lista forniscono informazione (visuale) addizionale; se ciò non fosse possibile bisogna fornire del testo equivalente che spieghi il significato degli indicatori. Esempio disapprovato. <HEAD> <TITLE>Esempio disapprovato per l uso di immagini in liste realizzate tramite DL</TITLE> </HEAD>

35 Cap. 4 Tecniche per i Punti di Controllo 33 <BODY> <DL> <DD><IMG src="star.gif" alt="* ">Andrea <DD><IMG src="star.gif" alt="* ">Laura <DD><IMG src="star.gif" alt="* ">Alice </DL> Esempio disapprovato. <DL> <DD><IMG src="rosso.gif" alt="nuovo:">roth IRA</DD> <DD><IMG src="giallo.gif" alt="vecchio:">401(k)</dd> </DL> C. Testo per immagini usate come collegamenti Quando si usa una immagine come contenuto di un collegamento, si deve specificare del testo equivalente per l immagine. <A href="strade.html"> <IMG src="topog.gif" alt="strade che arrivano al Boulders Climbing Gym"> </A> Se invece si fornisce un testo per il collegamento, bisogna usare uno spazio come valore dell attributo alt dell elemento IMG. Questo testo apparirà vicino all immagine. <A href="strade.html"> <IMG src="topog.gif" alt=" "> Strade che arrivano al Boulders Climbing Gym</A> D. Equivalente testuale sintetico per le immagini (alt-text) Quando si usa l elemento IMG, si deve specificare un testo equivalente breve con l attributo alt. Ci si riferisce al valore di tale attributo come alt-text. <IMG src="magnifyingglass.gif" alt="cerca"> Usando OBJECT, il testo equivalente deve essere inserito nel corpo dell elemento. <OBJECT data="magnifyingglass.gif" type="image/gif">cerca</object>

36 Cap. 4 Tecniche per i Punti di Controllo 34 E. Descrizione lunga delle immagini Quando un testo equivalente breve non è sufficiente a svolgere adeguatamente il ruolo o la funzione di una immagine, bisogna fornire dell informazione addizionale in un file designato tramite l attributo longdesc. <IMG src="97sales.gif" alt="vendite nel 1997" longdesc="sales97.html"> In sales97.html: Un grafico che mostra l andamento delle vendite nel Si tratta di un istogramma che mostra gli incrementi delle vendite mese per mese. In gennaio l incremento è stato del 10%, rispetto a dicembre 1996, mentre in febbraio Per gli interpreti che non supportano l attributo longdesc, si fornirà anche un d-link vicino all immagine. <IMG src="97sales.gif" alt= Vendite nel 1997 longdesc="sales.html"> <A href="sales.html" title="descrizione del grafico delle vendite nel 1997">[D]</A> Quando si usa l elemento OBJECT il testo equivalente lungo va inserito nel contenuto dell elemento: <OBJECT data="97sales.gif" type="image/gif"> Le vendite nel 1997 si abbassano in conseguenza all <A href="anticipated.html">acquisto anticipato</a>... </OBJECT> Si noti che OBJECT, a differenza di alt-text, può contenere del codice di marcatura. Per questo motivo gli sviluppatori possono fornire un collegamento ad informazione aggiuntiva anche dall interno dell elemento OBJECT: <OBJECT data="97sales.gif" type="image/gif"> Grafico delle vendite nel <A href="desc.html">desctrizione testuale</a> disponibile. </OBJECT> Nota: I d-link invisibili sono disapprovati in favore dell attributo longdesc. Un d-link invisibile è un immagine piccola (1-pixel) o trasparente il cui valore dell attributo alt è D-link o D ed è parte del contenuto di un elemento A. Come gli altri dlink, essi si riferiscono a del testo equivalente dell immagine associata, e come gli altri, gli

37 Cap. 4 Tecniche per i Punti di Controllo 35 utenti possono navigarci attraverso. I d-link invisibili forniscono quindi una soluzione temporanea per quei progettisti che per ragioni stilistiche vogliono evitare i d-link visibili. F. Testo equivalente per immagini sensibili dal lato client Questi oggetti sono delle immagini con delle regioni attive. Quando l utente seleziona una di queste regioni viene svolta una azione: si segue un collegamento, dell informazione viene inviata ad un server ecc. Per rendere una immagine sensibile accessibile si deve assicurare che ogni azione associata ad una regione visuale della mappa possa essere attivata senza un dispositivo di puntamento. HTML permette di creare due tipi di immagini sensibili (tramite l elemento MAP) : lato client (il browser dell utente processa una URI), lato server (il server processa le coordinate di dove è avvenuto il clic del mouse). Gli sviluppatori devono creare delle immagini sensibili lato client (tramite l attributo usemap) invece che lato server (tramite ismap) perché queste ultime richiedono un particolare tipo di dispositivo di input. Se ciò non potesse essere fatto (ad es. perché la geometria di una regione non può essere rappresentata tramite valori dell attributo shape), gli autori devono fornire la stessa funzionalità o informazione in formato alternativo accessibile. Un modo per farlo è fornire un collegamento testuale per ciascuna regione attiva così che ciascuno di essi sia navigabile con la tastiera. In ogni caso bisogna fornire testo equivalente per immagini usate come mappe dal momento che esse portano informazione visuale. Gli utenti potrebbero inoltre desiderare delle scorciatoie da tastiera per accedere più velocemente ai collegamenti che seguono più frequentemente. Se si usa l elemento AREA per creare la mappa, si utilizzi l attributo alt. <IMG src="welcome.gif" alt="immagine delle aree della libreria" usemap="#map1"> <MAP name="map1"> <AREA shape="rect" coords="0,0,30,30" href="reference.html" alt="consultazione"> <AREA shape="rect" coords="34,34,100,100" href="media.html" alt="laboratorio audiovisivi"> </MAP> L esempio seguente mostra la stessa idea, ma si usa OBJECT invece di IMG per inserire l immagine e fornire più informazione su di essa: <OBJECT data="welcome.gif" type="image/gif" usemap="#map1"> Nella libreria ci sono diverse aree. La sezione<a href="reference.html">consultazione</a>ed il <A href="media.html">laboratorio audiovisivi</a>. </OBJECT> <MAP name="map1"> <AREA shape="rect" coords="0,0,30,30" href="reference.html" alt="consultazione"> <AREA shape="rect" coords="34,34,100,100" href="media.html" alt="laboratorio audiovisivi"> </MAP>

38 Cap. 4 Tecniche per i Punti di Controllo 36 G. Equivalenti testuali e non per applet e oggetti programmati Le applet possono essere inserite nei documenti sia tramite l elemento APPLET, sia tramite OBJECT, ma l utilizzo di quest ultimo è il metodo preferito. Se è usato OBJECT, fornire un equivalente testuale nel contenuto dell elemento: <OBJECT classid="java:press.class" width="500" height="500"> Al crescere della temperatura, le molecole </OBJECT> Un esempio più complesso mostra il vantaggio che diversi elementi OBJECT possono essere annidati per fornire rappresentazioni alternative dell informazione: <OBJECT classid="java:press.class" width="500" height="500"> <OBJECT data="pressure.mpeg" type="video/mpeg"> <OBJECT data="pressure.gif" type="image/gif"> Al crescere della temperatura, le molecole </OBJECT> </OBJECT> </OBJECT> Se si usa APPLET, fornire del testo equivalente non solo tramite l attributo alt ma anche nel contenuto dell elemento. Questo permette al contenuto di trasformarsi elegantemente in tutti quegli user agent che supportano soltanto uno dei due meccanismi (alt o contenuto) : Esempio disapprovato. <APPLET code="press.class" width="500" height="500" alt="applet Java: influenza della temperatura sulla pressione"> Al crescere della temperatura, le molecole </APPLET> H. Equivalente testuale per elementi multimediali Quando necessario si dovrebbe fornire del testo equivalente all informazione visuale per permettere la comprensione della pagina. Se esistono degli altri oggetti multimediali caricati nella pagina, si dovrebbe usare ancora l elemento OBJECT. Tuttavia, per la compatibilità con i vecchi browser Netscape, bisogna usare l elemento proprietario EMBED dentro all elemento OBJECT come segue: Esempio disapprovato. <OBJECT classid="clsid:a12bcd3f-gh4i-56jk-xyz" codebase=" width=100 height=80> <PARAM name="movie" value="moviename.swf"> <EMBED src="moviename.swf" width=100 height=80 pluginspage=" </EMBED>

39 Cap. 4 Tecniche per i Punti di Controllo 37 <NOEMBED> <IMG alt="still from Movie" src="moviename.gif" width=100 height=80> </NOEMBED> </OBJECT> I. Descrivere le relazioni tra frame <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <HTML> <HEAD> <TITLE>Notizie di oggi</title> </HEAD> <FRAMESET cols="10%,*,10%"> <FRAMESET rows="20%,*"> <FRAME src="promo.html" name="promo" title="promozioni"> <FRAME src="sitenavbar.html" name="navbar" title="barra di navigazione" longdesc="frameset-desc.html#navbar"> </FRAMESET> <FRAME src="story.html" name="story" title="contenuto principale-storia selezionata" longdesc="frameset-desc.html#story"> <FRAMESET rows="*,20%"> <FRAME src="headlines.html" name="index" title="indice delle altre testate nazionali" longdesc="frameset-desc.html#headlines"> <FRAME src="ad.html" name="adspace" title="pubblicità"> </FRAMESET> <NOFRAMES> <p><a href="noframes.html">versione senza frame</a></p> <p><a href="frameset-desc.html">descrizione dei frame.</a></p> </NOFRAMES> </FRAMESET> </HTML> frameset-desc.html: #Navbar questo frame fornisce collegamenti alle altre parti del sito: notizie dal mondo, nazionali, locali, tecnologiche e di intrattenimento. #Story - questo frame mostra la storia selezionata. #Index - Questo frame collegamenti alle altre testate nazionali. Inoltre, nell elemento NOFRAME di un FRAMESET dovrebbero essere fornite collegamenti a descrizioni del frame insieme ad altro contenuto alternativo. J. Scrivere codice per i browser che non supportano i frame Nell esempio seguente, se l utente sta leggendo il file top.html, e il suo browser non supporta i frame, allora avrà accesso (tramite un collegamento) ad una versione senza frame della medesima informazione.

40 Cap. 4 Tecniche per i Punti di Controllo 38 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <HTML> <HEAD> <TITLE>Questo è top.html</title> </HEAD> <FRAMESET cols="50%, 50%" title="il nostro documento"> <FRAME src="main.html" title="dove si mostra il contenuto"> <FRAME src="table_of_contents.html" title="tabella dei contenuti"> <NOFRAMES> <A href="table_of_contents.html">tabella dei contenuti.</a> <! altri collegamenti disponibili in main.html sono disponibili anche qui. --> </NOFRAMES> </FRAMESET> </HTML> Un approccio totalmente diverso può essere quello di rendere la stessa funzione che hanno i frame in una pagina, creando un alternativa ad essi tramite l utilizzo delle proprietà di HTML 4.01 e di CSS. Nel seguente esempio ne verrà data una dimostrazione. Uno degli usi più comuni dei frame è quello di dividere la finestra del browser dell utente in due parti : una finestra di navigazione e una per i contenuti. Come alternativa a ciò si può fare quanto segue : 1. Creare un documento per il meccanismo di navigazione chiamandolo ad esempio nav.html. Se lo si crea separatamente dagli altri esso può essere condiviso da più di un documento. 2. Inserirlo in fondo a ciascun documento che richiede il meccanismo di navigazione tramite il seguente (oppure simile) marcatore OBJECT: <P> <OBJECT data="nav.html"> Vai alla <A href="nav.html">tabella dei contenuti</a> </OBJECT> Così facendo, quando i fogli di stile sono disattivati, gli utenti hanno accesso per prima cosa all informazione importante del documento. 3. Servirsi dei fogli di stile per posizionare il meccanismo di navigazione dove si vuole nello schermo. La seguente regola CSS, ad esempio, trasporta la barra di navigazione a sinistra della pagina e fa sì che essa occupi il 25% dello spazio disponibile. OBJECT { float: left; width: 25% } Quest altra invece, attacca la barra all angolo inferiore sinistro della pagina e la mantiene ferma anche se l utente scorre in basso la pagina. OBJECT { position: fixed; left: 0; bottom: 0 }

41 Cap. 4 Tecniche per i Punti di Controllo 39 Si noti che i meccanismi di navigazione possono anche essere inseriti nelle pagine tramite inclusioni gestite dai server. K. Bottoni grafici L uso di immagini per decorare bottoni permette agli sviluppatori di rendere i loro moduli unici e più facili da capire. L utilizzo di queste immagini (tramite gli elementi INPUT o BUTTON) non crea necessariamente barriere all accessibilità se si assume di fornire del testo equivalente. Tuttavia un bottone grafico di invio di un modulo creato con INPUT, type= image, realizza una particolare immagine sensibile di tipo lato server: quando il bottone è premuto con un mouse, le coordinate X e Y di dove è avvenuto il clic del mouse sono inviate al server come parte del modulo. Si è discusso precedentemente il motivo per cui è meglio usare immagini sensibili lato client invece che lato server; adesso, in HTML 4.01, i bottoni grafici possono essere immagini sensibili lato client. Per preservare le funzionalità offerte dal server e tenendo conto che se il server compie azioni differenti a seconda della regione selezionata, gli utenti con browser non grafici saranno svantaggiati, gli sviluppatori dovranno considerare approcci alternativi: usare bottoni multipli di invio (ciascuno con la sua immagine) al posto di un singolo bottone, servendosi dei fogli di stile per il loro posizionamento; usare immagini sensibili lato client con dello script aggiuntivo. Riguardo alla compatibilità, bisogna ricordare che nei browser HTML 3.2, l elemento BUTTON non appare, e l elemento INPUT con type= button apparirà come campo di inserimento testo. L. Presentazioni alternative degli script Un modo per fare ciò è servirsi dell elemento NOSCRIPT. Il contenuto di questo elemento è presentato quando gli script sono disattivati. <SCRIPT type="text/tcl">...alcuni script Tcl per mostrare i risultati sportivi... </SCRIPT> <NOSCRIPT> <P>Risultati di ieri:</p> <DL> <DT>Bulls 91, Sonics 80. <DD><A href="bullsonic.html">bulls-sonics gioco duro</a>...altri risultati... </DL></NOSCRIPT> 2.2. Punto di controllo 2 Assicurarsi che tutta l'informazione veicolata dal colore sia disponibile anche senza, per esempio grazie al contesto o ai marcatori.

42 Cap. 4 Tecniche per i Punti di Controllo 40 A. Separare la struttura dalla presentazione Nel progetto di una pagina o di una serie di pagine gli sviluppatori dovrebbero sforzarsi, per prima cosa, di identificare la struttura del documento e non di come esso apparirà all utente finale. Distinguere la struttura da come il documento apparirà, offre notevoli vantaggi tra cui una accessibilità migliorata, ma anche più portabilità e facilità nella manutenzione. Il colore in particolare riveste un ruolo importante, ma è un elemento per la presentazione dei documenti e non per dare loro struttura. I cambi strutturali in un documento devono essere fatti con l opportuno codice di marcatura mentre della marcatura per la presentazione li renderà più evidenti visualmente o acusticamente. Il vantaggio sta nel fatto che se l utente ha particolari esigenze ed utilizza un modo di presentazione adatto ad esse, evidenzierà in maniera diversa i cambi di struttura, ma anche se dovesse disabilitare del tutto le tipologie di presentazione non perderà mai l informazione legata alla struttura del documento. B. Assicurarsi che l informazione non sia soltanto nel colore Per vedere se un documento continuerà a fornire la stessa informazione anche senza colori si può provare a presentarlo su un monitor monocolore, disabilitare i colori del browser, usare solo il bianco, il nero e le quattro tonalità di grigio di default (four browser safe greys). Inoltre per provare se il contrasto tra i colori è adeguato quando il documento è letto da persone con deficienze nella visione dei colori o da coloro che hanno monitor con bassa risoluzione, si può stamparlo con una stampante in bianco e nero (con sfondi e colori che appaiono in una scala di grigi). Si potrà poi copiare il risultato della stampa due o tre volte per vedere dove si hanno le maggiori degradazioni. Tutto ciò mostrerà dove c è bisogno di aggiungere elementi ridondanti per evidenziare meglio le cose (ad es. un collegamento oltre ad essere presentato tramite un cambio di colore del testo è usualmente anche sottolineato). Evidentemente ci si servirà dei fogli di stile per aggiungere bordi, sottolineature, cambio dei colori di sfondo e quant altro dovesse essere necessario, oltre a delle frasi di testo aggiuntivo normalmente nascoste (proprietà dei CSS display:hidden) ma che appariranno per non far perdere informazione nel caso in cui i fogli di stile dovessero essere disabilitati del tutto Punto di controllo 3 Identificare con chiarezza i cambiamenti nel linguaggio naturale del testo di un documento e in ogni equivalente testuale (per es. nelle didascalie). A. Identificare i cambi del linguaggio Se si usano un certo numero di linguaggi diversi nella stessa pagina ci si deve assicurare che ogni cambio sia chiaramente indicato tramite l attributo lang : <P>E con un certo <SPAN lang="fr">je ne sais quoi</span>, lei entrò nella stanza, e nella sua vita, per sempre. <Q>Il mio nome è Natasha,</Q> disse. <Q lang="en">welcome,</q> rispose lui in un inglese impeccabile. Tutto questo è importante per una serie di ragioni:

43 Cap. 4 Tecniche per i Punti di Controllo 41 Gli utenti che stanno leggendo il documento in braille saranno capaci di sostituire l appropriato codice di controllo (markup) dove avviene il cambio per assicurarsi che il software di traduzione in braille genererà i caratteri corretti (ad esempio i caratteri accentati). Questi codici di controllo prevengono inoltre la generazione di contrazioni braille, che potrebbero confondere l utente. Le contrazioni braille mettono i gruppi di caratteri più comunemente usati, che altrimenti apparirebbero in celle multiple, in una singola cella. Ad esempio ing che occupa normalmente tre celle (una per ciascun carattere) nella lingua inglese sarà contratto in una singola cella. In maniera simile i sintetizzatori vocali che parlano molte lingue saranno capaci di generare il testo nell accento tipico della sua pronuncia. Se i cambi di linguaggio non sono marcati appropriatamente il sintetizzatore proverà a pronunciare, come meglio può, le parole nel linguaggio primario con cui lavora. Gli utenti che non sono capaci di tradurre tra i vari linguaggi potranno farseli tradurre tramite un traduttore automatico Punto di controllo 4 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. A. Contenuto generato Fornire un equivalente testuale per ogni immagine importante o per del testo generato dal foglio di stile (ad es. tramite le proprietà background-image, list-style, oppure content). Assicurarsi che il contenuto importante appaia nel documento oggetto. Il testo generato dal foglio di stile non è parte del documento sorgente e non sarà disponibile alle tecnologie assistive che accedono al contenuto tramite il Document Object Model Level 1 ( DOM 1). Le specifiche CSS2 contengono diversi meccanismi che permettono la generazione di contenuto da parte del foglio di stile: I pseudo-elementi :before e :after e la proprietà content. Quando usati insieme permettono di inserire marcatori (come contatori, stringhe costanti ecc.) prima e dopo il contenuto di un elemento. Le proprietà cue, cue-before e cue-after. Esse permettono la riproduzione di un suono prima o dopo il contenuto di in elemento. Stili di liste che possono essere numeri, glifi, o immagini (usualmente associate con l elemento HTML <LI>). CSS2 aggiunge stili di lista internazionali a quelli già definiti in CSS1, basta utilizzare le proprietà list-style-type e content. Il contenuto generato può servire come marcatore per aiutare gli utenti a navigare in un documento oppure a rimanere orientati anche quando essi non possono accedere a elementi visuali come scroll-bar proporzionali, frame di indici ecc.

44 Cap. 4 Tecniche per i Punti di Controllo 42 Ad esempio, il seguente foglio di stile dovrebbe far sì che le parole Fine Eesempio siano generate dopo la fine di ciascun esempio contrassegnato con un particolare valore di class nel documento: DIV.example:after {content: Fine esempio } Gli utenti possono inoltre numerare i paragrafi, ad esempio, per poter localizzare la loro posizione corrente di lettura nel documento : P:before { content: counter(paragraph) ". " ; counter-increment: paragraph } B. Righe e bordi Essi possono comunicare la nozione di separazione per tutti gli utenti capaci di una interpretazione visuale ma non possono essere considerati significativi fuori da un contesto visuale. Gli autori devono usare i fogli di stile per creare righe e bordi. CSS fornisce le seguenti proprietà per specificare diversi stili di bordi: border, border-width, border-style, border-color. border-spacing e border-collapse per le tabelle. outline, outline-color, outline-style, e outline-width per contorni. Nell esempio seguente, l elemento H1 avrà un bordo superiore spesso 2 pixel, rosso, e separato dal contenuto di 1em: <HEAD> <TITLE>Linea rossa</title> <STYLE type="text/css"> H1 { padding-top: 1em; border-top: 2px red } </STYLE> </HEAD> <BODY><H1>Capitolo 8 Display tattili</h1></body> Se si usa una riga (l elemento HR) per indicare una struttura, assicurarsi di indicare la struttura anche in maniera non visuale (utilizzando del codice di marcatura strutturale): In questo esempio, l elemento DIV e utilizzato per creare una barra di navigazione, che include un separatore orizzontale.

45 Cap. 4 Tecniche per i Punti di Controllo 43 <DIV class="navigation-bar"> <HR> <A rel="next" href="next.html">[pagina successiva]</a> <A rel="previous" href="previous.html">[pagina precedente]</a> <A rel="first" href="first.html">[prima pagina]</a> </DIV> C. Usare il posizionamento tramite i fogli di stile e il codice di marcatura per ottenere delle trasformazioni eleganti Usando le proprietà di posizionamento di CSS2, il contenuto può essere visualizzato in qualsiasi posizione della viewport dell utente. L ordine nel quale le varie voci appaiono sullo schermo può essere diverso da quello che esse hanno nel documento sorgente. L esempio seguente mostra alcuni principi: Il testo appare visualmente nel browser in un ordine differente da quello che ha nel codice di marcatura. Il posizionamento tramite CSS può essere utilizzato per creare un effetto tabellare. Si può usare l elemento TABLE per creare lo stesso effetto. Si noti che si è definita una classe per ciascun oggetto che è stato posizionato. L uso di id potrebbe sostituire quello di class, quest ultimo è stato usato perché gli oggetti sono stati replicati e quindi non sono unici. Esempio disapprovato. <head><style type="text/css">.menu1 { position: absolute; top: 3em; left: 0em; margin: 0px; font-family: sans-serif; font-size: 120%; color: red; background-color: white }.menu2 { position: absolute; top: 3em; left: 10em; margin: 0px; font-family: sans-serif; font-size: 120%; color: red; background-color: white }.item1 { position: absolute; top: 7em; left: 0em; margin: 0px}.item2 { position: absolute; top: 8em; left: 0em; margin: 0px}.item3 { position: absolute; top: 9em; left: 0em; margin: 0px}.item4 { position: absolute; top: 7em; left: 14em; margin:0px}.item5 { position: absolute; top: 8em; left: 14em; margin:0px} #box { position: absolute; top: 5em; left: 5em } </style></head> <body> <div class="box"> <span class="menu1">products</span> <span class="menu2">locations</span> <span class="item1">telephones</span> <span class="item2">computers</span> <span class="item3">portable MP3 Players</span> <span class="item5">wisconsin</span> <span class="item4">idaho</span> </div> </body>

46 Cap. 4 Tecniche per i Punti di Controllo 44 Quando il foglio di stile è applicato viene visualizzata la seguente immagine : Figura 1 Risultato dell'applicazione del foglio di stile Quando il foglio di stile è disattivato tutto il testo appare in una sola riga e quelle che erano intestazioni di colonna adesso sono le prime parole della riga perché sono state definite prima nel codice sorgente. Si veda per questo l immagine d esempio.

47 Cap. 4 Tecniche per i Punti di Controllo 45 Figura 2 Immagine senza l'applicazione del foglio di stile Questo nuovo esempio mostra che lo stesso effetto visuale può essere creato in un browser che supporta i fogli di stile realizzando così una presentazione più significativa anche quando i fogli di stile sono disattivati. È stato applicato al contenuto del codice di marcatura strutturale (DL definizione di liste). Si noti che i margini sono stati impostati a 0 dal momento che nei browser HTML, gli elementi DL sono visualizzati con un margine impostato per l elemento DD: <head><style type="text/css">.menu1 { position: absolute; top: 3em; left: 0em; margin: 0px; font-family: sans-serif; font-size: 120%; color: red; background-color: white }.menu2 { position: absolute; top: 3em; left: 10em; margin: 0px; font-family: sans-serif; font-size: 120%; color: red; background-color: white }.item1 { position: absolute; top: 7em; left: 0em; margin: 0px}.item2 { position: absolute; top: 8em; left: 0em; margin: 0px}.item3 { position: absolute; top: 9em; left: 0em; margin: 0px}.item4 { position: absolute; top: 7em; left: 14em; margin:0px}.item5 { position: absolute; top: 8em; left: 14em; margin:0px} #box { position: absolute; top: 5em; left: 5em } </style></head> <body>

48 Cap. 4 Tecniche per i Punti di Controllo 46 <div class="box"> <dl> <dt class="menu1">products</dt> <dd class="item1">telephones</dd> <dd class="item2">computers</dd> <dd class="item3">portable MP3 Players</dd> <dt class="menu2">locations</dt> <dd class="item4">idaho</dd> <dd class="item5">wisconsin</dd> </dl> </div> </body> Quando il foglio di stile è applicato, tutto appare come prima. Ma adesso, quando il foglio di stile è disattivato, il testo appare in una lista invece che in una stringa di parole. Viene anche rispettata l idea di intestazioni che hanno i termini dt. Ciò è visibile nell immagine seguente: Figura 3 Immagine ottenuta tramite il solo codice HTML 2.5. Punto di controllo 5 Assicurarsi che gli equivalenti del contenuto dinamico vengano aggiornati quando il contenuto dinamico cambia.

49 Cap. 4 Tecniche per i Punti di Controllo 47 A. Equivalenti testuali e non per applet e oggetti programmati Riferirsi al paragrafo 2.1 alla sezione G. B. Sorgenti dei frame Si devono fornire degli equivalenti testuali dei frame in maniera che i loro contenuti e le relazioni tra di essi abbiano senso. Si noti che se cambia il contenuto di un frame, deve cambiare conseguentemente ogni sua descrizione. Tutto ciò non è possibile se un elemento IMG è direttamente inserito nel frame. Quindi si deve sempre fare in modo che il sorgente di un frame (src) sia un file HTML; le immagini possono essere inserite dentro questo file e il loro testo alternativo evolverà correttamente. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <HTML> <HEAD> <TITLE>Un documento con frame corretto</title> </HEAD> <FRAMESET cols="100%" title="frame dinamici"> <FRAME name="goodframe" src="apples.html" title="mele"> </FRAMESET> </HTML> <!-- In apples.html --> <P><IMG src="apples.gif" alt="mele"> Il seguente esempio disapprovato mostra perché inserire direttamente IMG in un frame deve essere evitato: Esempio disapprovato. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <HTML> <HEAD> <TITLE>Un documento con frame non corretto</title> </HEAD> <FRAMESET cols="100%" title="frame statici"> <FRAME name="badframe" src="apples.gif" title="mele"> </FRAMESET> </HTML> Si noti che se, per esempio, un collegamento comporta che una nuova immagine sia caricata nel frame: <P>Visita un bellissimo giardino di alberi di<a target="badframe" href="oranges.gif" title="arance">arance</a> il titolo iniziale del frame ( Mele ) non descriverà più correttamente il contenuto del frame ( Arance ).

50 Cap. 4 Tecniche per i Punti di Controllo 48 C. Presentazioni alternative degli script Riferirsi al paragrafo 2.1 alla sezione L Punto di controllo 6 Fino a quando gli interpreti non permetteranno agli utenti di controllare lo sfarfallìo, evitare il verificarsi di questi eventi sullo schermo. A. Sfarfallìo dello schermo Un fenomeno del genere può scatenare degli attacchi in soggetti con epilessia fotosensitiva. Gli attacchi possono essere scatenati da uno sfarfallìo o lampeggiamento in cui i flash si hanno nell intervallo tra 5 e 49 per secondo (5 49 Hertz) con un picco di sensibilità a 20 Hertz. Questi fenomeni possono anche verificarsi nei cambi repentini tra buio e luce (ad es. lampade stroboscopiche). Gli script, le applet, le gif animate o le tracce video possono essere responsabili di quanto detto sopra, per cui si deve porre attenzione a realizzarle con meccanismi tali da poter bloccare il verificarsi di questi eventi potenzialmente pericolosi Punto di controllo 7 Usare il linguaggio più chiaro e semplice possibile che sia adatto al contenuto di un sito. A. Modo di scrivere I suggerimenti seguenti sullo stile di scrittura possono aiutare a rendere il contenuto di un sito più facile da leggere per chiunque; in particolare per quelle persone con disabilità nella lettura e/o di tipo cognitivo. Sforzarsi di rendere chiare e accurate le intestazioni e le descrizioni dei collegamenti. Questo comporta l uso di frasi concise e precise per i collegamenti e che abbiano senso quando lette al di fuori del contesto oppure come parte di una serie di collegamenti (alcuni utenti navigano saltando da un collegamento ad un altro e ascoltando soltanto i collegamenti di testo). Utilizzare delle intestazioni informative permette agli utenti di scandire velocemente una pagina per la ricerca di informazioni invece di leggerla in dettaglio. Specificare l argomento di un periodo o di un paragrafo all inizio dello stesso aiuterà non solo le persone che stanno sfogliando visualmente le pagine, ma anche quelle che lo fanno usando dei sintetizzatori vocali. Sfogliare le pagine usando dei sintetizzatori vocali significa che l utente salta da una intestazione ad un altra o da un paragrafo ad un altro, ascoltando appena le parole sufficienti per capire se quel frammento di informazione (paragrafo, collegamento, ecc.) gli potrebbe interessare. Se l idea principale del paragrafo si trova in mezzo o alla fine, questo lo costringerà ad ascoltare la maggior parte del documento prima di trovare quello che cerca. In base a ciò che l utente sta cercando e a

51 Cap. 4 Tecniche per i Punti di Controllo 49 quanto conosce dell argomento, dei particolari tipi di ricerca potranno infine aiutarlo a trovare più rapidamente il contenuto. Limitare ogni paragrafo soltanto ad una idea principale. Evitare il gergo, lo slang o dei significati particolari di alcune parole familiari senza averle definite nel documento. Favorire l utilizzo delle parole più comunemente usate. Usare verbi attivi invece che passivi. Evitare strutture di periodo complesse. B. Equivalenti multimediali Per chi non legge bene o del tutto, degli equivalenti multimediali (non-testuali) possono facilitare la comprensione. Bisogna porre attenzione al fatto che non sempre le presentazioni multimediali rendono il testo più facile da comprendere: certe volte lo rendono più confuso. Esempi di queste cose possono essere: Una traduzione del testo in una clip in linguaggio dei segni. Si noti che quest ultimo è molto differente dai linguaggi parlati: persone che sanno comunicare tramite linguaggio dei segni potrebbero non essere capaci di leggere. Dell audio preregistrato di musica, linguaggio parlato, effetti sonori, può aiutare coloro che non sanno leggere ma possono ascoltare le descrizioni audio. Sebbene il testo possa essere generato attraverso la sintesi vocale, i cambiamenti nella voce registrata dello speaker possono veicolare dell informazione che si perderebbe attraverso la sintesi. 3. Punti di controllo particolari Se si usano immagini e immagini sensibili 3.1. Punto di controllo 8 Fornire collegamenti di testo ridondanti per ogni zona attiva di una immagine sensibile sul lato server. A. Testo equivalente Riferirsi al paragrafo 2.1 alla sezione A.

52 Cap. 4 Tecniche per i Punti di Controllo 50 B. Immagini sensibili lato server Se si deve utilizzare una immagine del genere, si dovrebbe fornire una lista di scelte alternative ad essa. Principalmente ci sono tre tecniche per fare questo: Includere un collegamento alternativo nel corpo di un elemento OBJECT. <OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"> <MAP name="map1"> <P>Navigare il sito. [<A href="guide.html" shape="rect" coords="0,0,118,28">guida all accesso</a>] [<A href="shortcut.html" shape="rect" coords="118,0,184,28">go</a>] [<A href="search.html" shape="circle" coords=" ,60">cerca</a>] [<A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0"> Top Ten</A>] </MAP> </OBJECT> Si noti che l elemento MAP è il contenuto di OBJECT cosicché i collegamenti alternativi saranno visualizzati solo se non lo sarà la mappa immagine (navbar.gif). Inoltre i collegamenti sono separati da parentesi quadre, questo eviterà agli screen-reader più vecchi di leggere più collegamenti adiacenti come uno singolo e agli utenti una migliore distinzione visuale. Se per inserire l immagine si usa l elemento IMG, fornire una lista di collegamenti alternativi dopo di esso e indicarne l esistenza e il posto dove trovarla (ad es. tramite l attributo alt): <A href=" <IMG src="welcome.gif" alt="benvenuto! (Seguono collegamenti testuali)" ismap></a> <P>[<A href="reference.html">consultazioni</a>] [<A href="media.html">laboratorio audiovisivi</a>] Se con gli altri approcci non si riesce a rendere l immagine sensibile accessibile, si crei una pagina alternativa che lo sia Punto di controllo 9 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.

53 Cap. 4 Tecniche per i Punti di Controllo 51 A. Immagini sensibili lato client e lato server Riferirsi al paragrafo 2.1 alla sezione F. Se si usano tabelle 3.3. Punti di controllo 10 e 11 Per tabelle di dati, identificare le intestazioni di righe e colonne. Per tabelle di dati che hanno due o più livelli logici di intestazioni di righe o colonne, usare marcatori per associare le celle di dati e le celle di intestazione. A. Identificare le informazioni su righe e colonne Identificare i gruppi strutturali di righe (THEAD e TFOOT per intestazioni e piè di tabella ripetuti e TBODY per gli altri gruppi di righe) e colonne (COLGROUP e COL).Usando questa pratica si hanno problemi di compatibilità con i browser HTML 3.2; infatti in essi le righe di un elemento TFOOT appariranno prima del corpo della tabella. Etichettare gli elementi di una tabella con gli attributi scope, headers e axis in modo che i futuri browser e le prossime tecnologie assistive saranno capaci di selezionare dati da una tabella filtrando le varie categorie. Non usare PRE per ottenere una disposizione di tipo tabellare; servirsi piuttosto dell elemento TABLE cosicché la tecnologia assistiva possa capire che si tratta di una tabella. Questo esempio mostra come associare celle di dati (create con TD) con le loro corrispondenti intestazioni per mezzo dell attributo headers. Quest ultimo specifica una lista di celle di intestazione (righe e colonne di etichetta) associata con la cella dati corrente. Tutto ciò richiede che ogni cella di intestazione abbia un attributo id. <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> <TR> <TD headers="header1">t. Sexton</TD> <TD headers="header2">10</td> <TD headers="header3">espresso</td> <TD headers="header4">no</td></tr>

54 Cap. 4 Tecniche per i Punti di Controllo 52 <TR> <TD headers="header1">j. Dinnen</TD> <TD headers="header2">5</td> <TD headers="header3">decaf</td> <TD headers="header4">yes</td></tr> </TABLE> Un sintetizzatore vocale potrebbe rendere la tabella come segue: 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 Mentre un interprete visuale potrebbe farlo così: Il prossimo esempio associa le stesse intestazioni e celle di dati come prima, ma adesso viene usato l attributo scope invece di headers. Scope deve avere uno dei seguenti valori: row, col, rowgroup oppure colgroup. Scope specifica l insieme di celle di dati che devono essere associate con la cella di intestazione corrente. Questo metodo è particolarmente utile per tabelle semplici. La resa della tabella con un sintetizzatore vocale dovrebbe essere identica quella dell esempio precedente. La scelta tra scope e headers dipende dalla complessità della tabella. Questa non dovrebbe influenzare il risultato purché le relazioni tra celle di intestazioni e dati siano state fatte in maniera chiara nel codice di marcatura. <TABLE border="1" summary="this table charts..."> <CAPTION>Cups of coffee consumed by each senator</caption> <TR> <TH scope="col">name</th> <TH scope="col">cups</th> <TH scope="col" abbr="type">type of Coffee</TH> <TH scope="col">sugar?</th></tr> <TR> <TD>T. Sexton</TD> <TD>10</TD> <TD>Espresso</TD> <TD>No</TD></TR> <TR> <TD>J. Dinnen</TD> <TD>5</TD> <TD>Decaf</TD> <TD>Yes</TD></TR> </TABLE> Questo ulteriore esempio mostra come creare delle categorie in una tabella usando l attributo axis:

55 Cap. 4 Tecniche per i Punti di Controllo 53 <TABLE border="1"> <CAPTION>Travel Expense Report</CAPTION> <TR> <TH></TH> <TH id="header2" axis="expenses">meals</th> <TH id="header3" axis="expenses">hotels</th> <TH id="header4" axis="expenses">transport</th> <TD>subtotals</TD></TR> <TR> <TH id="header6" axis="location">san Jose <TH></TH> <TH></TH< <TH></TH> <TD> <TR> <TD id="header7" axis="date">25-aug-97 <TD headers="header6 header7 header2">37.74 <TD headers="header6 header7 header3"> <TD headers="header6 header7 header4">45.00 <TD></TR> <TR> <TD id="header8" axis="date">26-aug-97 <TD headers="header6 header8 header2">27.28 <TD headers="header6 header8 header3"> <TD headers="header6 header8 header4">45.00 <TD></TR> <TR> <TD>subtotals <TD>65.02 <TD> <TD>90.00 <TD> </TR><TR> <TH id="header10" axis="location">seattle <TH></TH> <TH></TH> <TH></TH> <TD> <TR> <TD id="header11" axis="date">27-aug-97 <TD headers="header10 header11 header2">96.25 <TD headers="header10 header11 header3"> <TD headers="header10 header11 header4">36.00 <TD></TR> <TR> <TD id="header12" axis="date">28-aug-97 <TD headers="header10 header12 header2">35.00 <TD headers="header10 header12 header3"> <TD headers="header10 header12 header4">36.00 <TD></TR> <TR> <TD>subtotals <TD> <TD> <TD>72.00 <TD> </TR><TR> <TH>Totals</TH> <TD> <TD> <TD>162.00

56 Cap. 4 Tecniche per i Punti di Controllo 54 <TD>800.27</TR> </TABLE> L immagine mostra come un interprete visuale potrebbe rendere la tabella: Figura 4 Tabella Se si usano frame 3.4. Punto di controllo 12 Dare un titolo a ogni frame per facilitare l'identificazione del frame e la navigazione. A. Fornire un titolo del frame Si usa l attributo title per dare un nome ai frame. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <HTML> <HEAD> <TITLE>Un documento con frame</title> </HEAD> <FRAMESET cols="10%, 90%" title="la libreria di documenti elettronici"> <FRAME src="nav.html" title="barra di navigazione"> <FRAME src="doc.html" title="documenti"> <NOFRAMES> <A href="lib.html" title="collegamento alla libreria"> Selezionare per entrare nella libreria elettronica/a> </NOFRAMES> </FRAMESET>

57 Cap. 4 Tecniche per i Punti di Controllo 55 Se si usano applet e script 3.5. Punto di controllo 13 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. A. Equivalenti testuali e non per applet e oggetti programmati Riferirsi al paragrafo 2.1 alla sezione G. B. Script direttamente accessibili Un gestore di eventi è uno script che viene invocato quando avviene un certo evento (ad es. si muove il mouse, viene premuto un tasto, si carica un documento ecc.). In HTML 4.01 i gestori di eventi sono associati agli elementi attraverso i cosiddetti attributi gestori di eventi (tutti gli attributi che iniziano con on come onkeyup, onfocus, ecc.). Alcuni gestori di eventi, quando invocati, producono degli effetti puramente decorativi come evidenziare un immagine o cambiare il colore del testo di un elemento. Altri invece producono effetti più sostanziali, come eseguire un calcolo, fornire dell informazione importante o inviare i dati di un modulo. Per i gestori di evento che realizzano solo un cambio di presentazione degli elementi si deve: Usare event trigger a livello applicazione invece di quelli a livello di interazione utente. In HTML 4.01 gli attributi per gli eventi a livello applicazione sono: onfocus, onblur (opposto di onfocus) e onselect. Si noti che questi attributi sono stati progettati per essere indipendenti dal dispositivo usato, ma nei browser correnti sono stati implementati come eventi specifici per la tastiera. Se si devono usare attributi dipendenti dal dispositivo, si devono fornire meccanismi di input ridondanti (ad es. specificare due gestori per lo stesso elemento): - Usare onmousedown con onkeydown. - Usare onmouseup con onkeyup. - Usare onclick con onkeypress. Si noti che in HTML 4.01 non ci sono equivalenti per la tastiera al doppio click (ondblclick). Non scrivere gestori di eventi basati sulle coordinate del mouse dal momento che essi violano il principio di indipendenza dal dispositivo.

58 Cap. 4 Tecniche per i Punti di Controllo 56 Se si usano contenuti multimediali 3.6. Punto di controllo 14 Fino a quando gli interpreti non potranno leggere automaticamente ad alta voce l'equivalente testuale di un filmato, fornire una descrizione audio delle informazioni essenziali del filmato di una presentazione multimediale. A. Informazione visuale e movimento Una descrizione audio di una traccia video fornisce la narrazione degli elementi visuali chiave senza interferire con l audio o i dialoghi del video. Questi elementi chiave includono azioni, ambienti, linguaggio del corpo, grafica e testo a video. Queste descrizioni sono usate primariamente da utenti ciechi per seguire l azione ed altre informazioni non audio nel materiale video. Questo è un esempio di collated text transcript di un clip da Il Re Leone. Si noti che il Describer fornisce la descrizione audio del video ed essa è stata integrata nella trascrizione. Simba: Yeah! Describer: Simba corre fuori, seguito dai genitori. Sarabi ride e da una colpetto di gomito a Simba. I due siedono fianco a fianco, ammirando l alba dorata. Mufasa: Guarda Simba, ogni posto che tocca la luce è il tuo regno. Simba: Wow. Se l informazione visuale non è importante non è necessaria una descrizione audio. Per i film, la descrizione audio da fornire deve essere sincronizzata con l audio originale. Collated text transcript : permette l accesso agli utenti con disabilità sia visive che uditive. Inoltre fornisce la possibilità di indicizzare e cercare l informazione contenuta nel materiale audio/video. Questo testo include sia i dialoghi, sia ogni altro suono significativo inclusi quelli dentro e fuori campo, la musica, gli applausi, ecc. In altre parole, tutto il testo che appare nei sottotitoli o nelle didascalie e tutte le descrizioni fornite con la descrizione audio di cui si parlava sopra Punto di controllo 15 Per ogni presentazione multimediale temporizzata (per es. un film o una animazione), sincronizzare alternative equivalenti (per es. didascalie o descrizioni parlate del filmato) con la presentazione. A. Informazioni audio Le presentazioni audio devono essere accompagnate da delle trascrizioni di testo, equivalente testuale dell evento audio. Quando queste trascrizioni sono presentate sincronizzate con la

59 Cap. 4 Tecniche per i Punti di Controllo 57 presentazione video sono dette didascalie o sottotitoli e sono utili per coloro i quali non possono ascoltare la traccia audio del materiale video. Alcuni formati di media permettono di aggiungere didascalie e descrizioni del video alla clip multimediale. Il seguente esempio mostra che le didascalie dovrebbero includere non solo la voce ma anche gli altri suoni dell ambiente circostante per aiutare gli spettatori a capire cosa sta succedendo. Sottotitoli da una scena di "E.T.". Il telefono squilla tre volte, quindi c è una risposta [il telefono squilla] [squillo] [squillo] Pronto? Se il formato che si sta usando supporta tracce alternative, devono essere rese disponibili due versioni, una con didascalie e video descrittivo e una senza. Alcune tecnologie permettono di combinare file separati audio/video con file di testo tramite un file di sincronizzazione per creare audio e video sottotitolati. Altre tecnologie permettono agli utenti di scegliere tra insiemi multipli di didascalie per adattarsi meglio alle loro esigenze di lettura. Gli equivalenti per i suoni possono essere forniti sotto forma di frasi di testo nella pagina che collega la trascrizione o la descrizione del file di suono. Il collegamento alla trascrizione deve essere in una posizione altamente visibile come ad esempio in cima alla pagina. Inoltre uno script o applet sta caricando automaticamente un suono, deve essere capace anche di dare una indicazione visuale che avverte del suono che si sta sentendo e deve fornire una trascrizione oppure una descrizione del suono. Se tutto il resto fallisce 3.8. Punto di controllo 16 Se, nonostante ogni sforzo, non si può creare una pagina accessibile, fornire un collegamento a una pagina alternativa che usi le tecnologie W3C, sia accessibile, contenga informazioni (o funzionalità) equivalenti, e sia aggiornata con la stessa frequenza della pagina (originale) inaccessibile. A. Pagine alternative Sebbene sia sempre possibile rendere il contenuto sempre più accessibile, può succedere che parte o tutta la pagina rimanga inaccessibile. Tecniche addizionali per creare delle alternative accessibili includono: Permettere agli utenti di navigare in una pagina separata che è accessibile, contiene la stessa informazione dell originale ed è aggiornata con la stessa frequenza di quella inaccessibile. Invece di pagine alternative statiche, installare degli script lato server che generino on demand versioni accessibili della pagina.

60 Cap. 4 Tecniche per i Punti di Controllo 58 Fornire un numero di telefono, fax, o indirizzo postale dove l informazione è disponibile e accessibile preferibilmente 24 ore su 24. Scrivere codice per browser che non supportano i frame (paragrafo 2.1 sezione J) e/o fornire presentazioni alternative degli script (paragrafo 2.1 sezione L). Ci sono due tecniche per il collegamento ad una pagina alternativa accessibile: Fornire i collegamenti in cima sia alla pagina principale che a quella alternativa per permettere agli utenti di muoversi avanti e indietro tra le due. Ad esempio in cima ad una pagina grafica mettere un collegamento alla pagina solo-testo e viceversa. Assicurarsi che questi collegamenti siano una delle prime cose nell ordine di tabulazione ponendoli prima di tutti gli altri. Usare le meta-informazioni per indicare dei documenti alternativi. I browser dovrebbero caricare automaticamente la pagina alternativa basandosi sulle preferenze e sul tipo di browser dell utente. Non tutti gli utenti hanno un ambiente grafico con un mouse o un altro dispositivo di puntamento. Alcuni si servono di tastiere usuali, alternative o di un ingresso vocale per navigare, attivare dei controlli di moduli ecc. Quindi bisogna assicurare che essi possano interagire con la pagina con dispositivi diversi da quelli di puntamento. Una pagina realizzata per l accesso da tastiera (in aggiunta all accesso tramite mouse) sarà generalmente accessibile anche agli utenti con altri dispositivi di ingresso. Inoltre creare un pagina per l accesso da tastiera migliorerà il progetto nella sua globalità. L accesso da tastiera può essere specificato in alcuni modi: Collegamenti ad immagini sensibili Fornire del testo equivalente per le aree con immagini sensibili lato client, oppure dei collegamenti testuali ridondanti per quelle lato server. Riferirsi ai paragrafi 2.1 e 3.1 per i vari esempi. Scorciatoie da tastiera Fornire scorciatoie da tastiera cosicché l utente può combinare pressioni di tasti per navigare tra i collegamenti o i controlli dei moduli nella pagina. Si noti in particolare che il tasto usato per attivare la scorciatoia, può essere gestito in maniera differente da sistemi operativi diversi. Sulle macchine Windows, sono usati più comunemente i tasti ALT e CTRL mentre su un Macintosh, è il tasto apple o clover leaf. Ordine di tabulazione L ordine di tabulazione descrive un ordine logico per navigare da un collegamento ad un altro, da un controllo di un modulo ad un altro (premendo usualmente il tasto TAB). Controllo Indipendente da Dispositivo per interfacce importate Alcuni elementi importano oggetti (applet o lettori multimediali) la cui interfaccia non può essere controllata attraverso il linguaggio di marcatura. In questi casi, si dovrebbero fornire alternative equivalenti con interfacce accessibili se lo stesso oggetto importato non la fornisce.

61 4. Punti di controllo generali per il livello Punto di controllo 1 Cap. 4 Tecniche per i Punti di Controllo 59 Assicurarsi che le combinazioni fra colori dello sfondo e del primo piano forniscano un sufficiente contrasto se visti da qualcuno con deficit percettivi sul colore o se visti su uno schermo in bianco e nero. [Priorità 2 per le immagini, Priorità 3 per il testo]. A. Colore nelle immagini Controllare sempre che ci sia adeguato contrasto tra i colori nelle immagini e tra di esse e il resto dei colori nel documento. B. Contrasto tra i colori Per indicare i colori servirsi dei numeri e non dei loro nomi, questo offre un miglior controllo sulle varie tonalità. H1 {color: #808000} H1 {color: rgb(50%,50%,0%)} Esempio disapprovato. H1 {color: red} Servirsi di queste proprietà di CSS per specificare i colori : color, per il colore del testo in primo piano. background-color, per lo sfondo. border-color e outline-color per i bordi. Per i collegamenti fare riferimento alle pseudo-classi :link, :visited, :active. Assicurarsi sempre che i colori di sfondo e del primo piano contrastino bene. Se si specifica un colore per lo sfondo, indicarne sempre uno anche per il primo piano e viceversa Punto di controllo 2 Quando esiste un linguaggio di marcatori adatto, per veicolare informazione usare un marcatore piuttosto che le immagini. A. Struttura e presentazione Riferirsi al paragrafo 2.2 sezione A.

62 Cap. 4 Tecniche per i Punti di Controllo 60 B. Marcatori e fogli di stile invece delle immagini Utilizzando questi elementi dove possibile, si promuove l accessibilità. Le ragioni sono le seguenti: Il testo può essere ingrandito o interpretato come voce o braille. I motori di ricerca possono usare un informazione testuale. Si considerino come esempi queste tecniche per delle espressioni matematiche sul Web. Assicurarsi che l utente conosca cosa indicano le variabili in una equazione. Per equazioni semplici usare i caratteri, come ad esempio in x + y = z. Per equazioni più complesse, servirsi di MathML o di TeX. MathML può essere usato per creare documenti molto accessibili, ma tuttora non è ampiamente supportato come TeX. Fornire una descrizione testuale dell equazione e, dove possibile usare i riferimenti numerici ai caratteri per creare simboli matematici. Un testo equivalente deve essere fornito se l equazione è rappresentata da una o più immagini. TeX è usato correntemente per creare documenti tecnici che sono poi convertiti in HTML per la pubblicazione su Web. Tuttavia i convertitori tendono a usare delle immagini, del codice di marcatura disapprovato o delle tabelle per scopi di impaginazione. Per questo si dovrebbe: Rendere direttamente disponibile il documento TeX originale su Web. Esistono inoltre degli strumenti automatici che creano una resa audio di questo tipo di documenti. Assicurarsi che il codice HTML generato sia accessibile. Fornire una descrizione singola di tutta l equazione invece di servirsi dell attributo alt di ogni singola immagine generata perché qualcuna di esse potrebbe rappresentare solo pezzi dell equazione. C. Altri elementi strutturali Le specifiche HTML 4.01 definiscono degli elementi strutturali per scopi di marcatura diversi. CITE indica una citazione o un riferimento ad altre sorgenti. DFN indica che questa è l istanza di definizione di un termine allegato. CODE designa un frammento di codice. SAMP designa un campione di output di un programma, uno script, ecc.. KBD indica testo che deve essere inserito dall utente. VAR indica l istanza di una variabile.

63 Cap. 4 Tecniche per i Punti di Controllo 61 INS indica testo inserito dentro al documento. DEL indica testo cancellato dal documento. D. Contenuto generato Riferirsi al paragrafo 2.4 sezione A Punto di controllo 3 Creare documenti che facciano riferimento a grammatiche formali pubblicate. A. Dichiarazione del!doctype Includere all inizio della pagina una dichiarazione del tipo di documento (ad es. la DTD HTML 4.0 strict oppure transitional) che si riferisce a una grammatica formale pubblicata fornisce non solo agli utenti la possibilità di conoscere la struttura del documento, ma indica anche agli interpreti i luoghi dove cercare informazioni sulla semantica. È preferibile riferirsi alle grammatiche pubblicate dal W3C che offre anche dei sevizi di validazione automatica dei documenti Punto di controllo 4 Usare fogli di stile per controllare l'impaginazione e la presentazione. A. Struttura e presentazione Riferirsi al paragrafo 2.2 sezione A. B. Enfasi Usare gli elementi HTML appropriati, EM e STRONG, per marcare l enfasi. Gli elementi B e I non dovrebbero essere usati perché creano un effetto di presentazione visuale. Al contrario, EM e STRONG sono stati creati per indicare un enfasi strutturale che può essere resa in una varietà di modi: cambi nella grandezza dei font, nelle inflessioni della voce, ecc. C. Testo invece delle immagini Usare i fogli di stili per dare uno stile al testo invece di farlo con delle immagini renderà l informazione disponibile ad un più grande numero di utenti (con sintetizzatori vocali, display braille, grafici, ecc.). Inoltre questa pratica permetterà ad essi di sovrascrivere gli stili degli autori per poter cambiare la grandezza dei font o i colori, secondo le necessità di ognuno molto più facilmente.

64 Cap. 4 Tecniche per i Punti di Controllo 62 Se comunque dovesse essere necessario usare un immagine per creare un effetto sul testo (font speciali, ombreggiature o trasformazioni), essa dovrà essere accessibile (riferirsi alle regole sul testo equivalente o sulle pagine alternative dei Punti di controllo per il livello 1). L immagine usata per rendere la parola con dei caratteri particolari è commentata opportunamente tramite il valore dell attributo alt. <P>Questo è un <IMG src="bigredexample.gif" alt="esempio"> di quello che stiamo dicendo. </P> D. Formattazione e posizionamento del testo Le seguenti proprietà di CSS2 possono essere usati per controllare questi elementi: Indentazione: text-indent. Non usare BLOCKQUOTE o qualsiasi altro elemento strutturale per indentare il testo. Spaziatura tra lettere o parole: letter-spacing, word-spacing. Ad esempio invece di scrivere: C I A O (che gli utenti recepiscono come la parola ciao ma che vorrebbero ascoltare pronunciata a lettere separate), si può creare lo stesso effetto visuale applicando la proprietà word-spacing alla parola CIAO. Il testo senza spazi sarà così opportunamente trasformato a voce. Spazio bianco: white-space. Questa proprietà controlla lo spazio bianco a partire dal contenuto di un elemento. I pseudo-elementi :first-letter e :first-line permettono di far riferimento alla prima lettera o riga di un paragrafo di testo. Il seguente esempio mostra l applicazione di un foglio di stile per creare un effetto maiuscoletto sulla prima lettera di un paragrafo. <HEAD> <TITLE>Maiuscoletto</TITLE> <STYLE type="text/css">.dropcap { font-size : 120%; font-family : Helvetica } </STYLE> </HEAD> <BODY> <P><SPAN class="dropcap">u</span>na volta... </BODY> Si noti che a tutt oggi lo pseudo-elemento :first-letter non è ampiamente supportato.

65 Cap. 4 Tecniche per i Punti di Controllo 63 E. Impaginazione, posizionamento e allineamento La formattazione generale dovrebbe esser fatta usando i fogli di stile e in particolare tramite l utilizzo delle proprietà di posizionamento assoluto e flottante: text-indent, text-align, word-spacing, font-stretch. Ciascuna di queste proprietà permette di controllare la spaziatura senza l utilizzo di altri spazi addizionali. Usare text-align : center invece dell elemento disapprovato CENTER. margin, margin-top, margin-top, margin-right, margin-bottom, margin-left, permettono di creare lo spazio ai quattro lati del contenuto di un elemento invece di aggiungere non-breaking spaces (&nbsp). float, position, top, right, bottom, left. Con queste proprietà si controlla la posizione visuale di quasi ogni elemento in maniera indipendente dalla posizione che essi hanno nel documento. Si deve fare attenzione a creare però dei documenti che abbiano senso se letti senza foglio di stile (scritti cioè con un ordine logico) e solo dopo applicare il foglio di stile. Le proprietà di posizionamento possono essere anche usate per creare note a margine (le quali possono essere numerate automaticamente), side-bar, effetti simili a frame, semplici intestazioni o piè di pagina e molto altro. empty-cell è una proprietà che permette di lasciare vuote le celle dati delle tabelle ma continuare comunque a impostare loro i bordi appropriati sullo schermo o sulla carta. Una cella dati di una tabella che deve rimanere vuota non deve essere riempita con spazi bianchi oppure non-breaking spaces solo per ottenere l aspetto visuale. F. Immagini usate come spaziatori. Fornire un testo equivalente per tutte le immagini, comprese quelle invisibili o trasparenti. Se non si possono usare i fogli di stile e si deve far ricorso a questi oggetti (ad es. con IMG) per l impaginazione di altre immagini nella pagina, si dovrà specificare per essi : alt =. Esempio disapprovato. Non si dovrebbero usare gli spazi come valore dell attributo per evitare che le parole stiano vicine anche quando l immagine non è caricata : Il mio poema richiede un grande spazio<img src="10pttab.gif" alt=" ">qui Nel prossimo esempio un immagine è utilizzata per forzare un elemento grafico ad apparire in una determinata posizione : <IMG src="spacer.gif" alt="spaziatore"> <IMG src="colorfulwheel.gif" alt="la ruota della fortuna">

66 Cap. 4 Tecniche per i Punti di Controllo Punto di controllo 5 Usare unità relative e non assolute nei valori degli attributi del linguaggio dei marcatori e i valori della proprietà del foglio di stile. A. Unità di misura Usare le unità em per impostare la misura dei font. H1 { font-size: 2em } invece di: H1 { font-size: 12pt } Usare unità di lunghezza relative e percentuali. CSS permette di usare le unità relative perfino nel posizionamento assoluto. Quindi si può posizionare, ad esempio, un immagine che è distanziata di 3em dalla cima dell elemento che la contiene. Questa è una distanza fissa ma è relativa alla grandezza del font corrente, così può essere scalata elegantemente di conseguenza. BODY { margin-left: 15%; margin-right: 10%} Usare le unità di lunghezza assolute solo se si conoscono le dimensioni fisiche del mezzo di uscita..businesscard { font-size: 8pt } Infine particolare attenzione si deve porre quando si usano i frame. La loro grandezza deve essere specificata in unità percentuali, cosicché se l utente dovesse ridimensionare la finestra, il frame si aggiusterà di conseguenza e rimarrà leggibile. Stesso discorso può essere fatto per le applet che tra l altro devono essere direttamente accessibili (vedi Punti di controllo per il livello 1). OBJECT { float: left; width: 25% } 4.6. Punto di controllo 6 Usare elementi di intestazione per veicolare la struttura del documento e usarli in modo conforme alle specifiche.

67 Cap. 4 Tecniche per i Punti di Controllo 65 A. Intestazioni delle sezioni di un documento I documenti lunghi sono divisi in capitoli che a loro volta sono divisi in argomenti, sezioni, paragrafi ecc. Tutto ciò costituisce la struttura del documento. Tutte le varie sezioni dovrebbero essere introdotte dagli elementi di intestazione H1-H6. Altro codice di marcatura può complementare questi elementi per migliorare la presentazione (ad es. HR per creare una linea orizzontale di divisione) ma la presentazione visuale non è sufficiente ad individuare le sezioni del documento. Molti utenti sfogliano un documento navigando attraverso le sue intestazioni quindi è importante usarle appropriatamente per veicolare la struttura del documento. Gli elementi di intestazione devono essere usati ordinatamente: H2 dovrebbe seguire H1 oppure H5, H4 e così via. Soprattutto non si dovrebbero saltare dei livelli o peggio usare questi elementi per creare degli effetti sui font : servirsi dei fogli di stile! In HTML gli elementi di intestazione iniziano soltanto le varie sezioni ma non hanno loro stessi come elementi contenuti. L esempio seguente mostra come usare i fogli di stile per controllare l aspetto delle intestazioni e del contenuto che le segue: <HEAD> <TITLE>Tecniche di cottura</title> <STYLE type="text/css"> /* Indenta le intestazioni e il contenuto seguente*/ DIV.section2 { margin-left: 5% } </STYLE> </HEAD> <BODY> <H1>Tecniche di cottura</h1>... testo... <DIV class="section2"> <H2>Cottura con olio</h2>... testo della sezione... </DIV> <DIV class="section2"> <H2>Cottura con burro</h2>... testo della sezione... </DIV> 4.7. Punto di controllo 7 Marcare le liste ed elencare le voci della lista in modo appropriato. A. Liste Gli elementi HTML DL, UL e OL, dovrebbero essere usati soltanto per creare delle liste e non per ottenere effetti di impaginazione come l indentazione. Le liste ordinate aiutano gli utenti non-visuali a navigare, ma essi potrebbero perdersi in liste annidate e soprattutto in quelle dove il livello di annidamento dei vari elementi non è indicato. Fino a quando gli interpreti non forniranno il modo per identificare chiaramente il contesto di una lista (ad esempio supportando i pseudo-elementi di tipo :before) si dovranno fornire delle tracce per identificare il contesto.

68 Cap. 4 Tecniche per i Punti di Controllo 66 Per le liste numerate, i numeri composti offrono una informazione maggiore che i numeri semplici. Le liste numerate come : 1, 1.1, 1.2, 1.2.1, 1.3, 2, 2.1 forniscono l identificazione migliore del contesto rispetto ad una lista numerata con numeri semplici del tipo: che verrebbe poi pronunciata come 1, 1, 2, 1, 3, 2, 1 non portando alcuna informazione sulla profondità della lista. CSS1 e CSS2 permettono di controllare per tutte le liste, non solo per quelle ordinate, lo stile di questi numeri. Il seguente foglio di stile CSS2 mostra come specificare i numeri composti per le liste annidate create sia con gli elementi UL che OL. Gli oggetti sono numerati come , 1.1.1, ecc. <STYLE type="text/css"> UL, OL { counter-reset: item } LI { display: block } LI:before { content: counters(item, "."); counter-increment: item } </STYLE> Fino a quando CSS2 non sarà ampiamente supportato o gli interpreti non permetteranno di controllare la resa delle liste attraverso altri modi, si dovranno fornire degli elementi per individuare il contesto soprattutto, nelle liste annidate e anche in quelle non ordinate. Gli utenti con strumenti non visuali potrebbero avere difficoltà a capire dove una lista inizia oppure finisce o dove comincia un elemento ecc. Il seguente meccanismo CSS1 mostra come nascondere la fine della lista quando il foglio di stile è attivato e come la rivela quando esso non è attivo, non supportato o l utente lo ha sovrascritto con una regola di stile propria. <STYLE type="text/css">.endoflist { display: none } </STYLE> <UL> <LI>Carta: <UL> <LI>per copertine <LI> da appunti <LI>da lettera <LI>cartoncino <span class="endoflist">(fine carta)</span> </UL> <LI>Penne: <UL> <LI>Blu <LI>Rosse

69 Cap. 4 Tecniche per i Punti di Controllo 67 <span class="endoflist">(fine delle penne)</span> </UL> <LI>Cancelletti: <UL> <LI>liquido <LI>adesivo <span class="endoflist">(fine cancelletti)</span> </UL> <span class="endoflist">(fine materiali d ufficio)</span> </UL> B. Fogli di stile per cambiare gli indicatori degli elementi di lista Nelle liste non ordinate create con l elemento LI lo stile di questi indicatori può essere cambiato. In CSS può essere specificata una serie di stili per questi elementi (ad es. disc) se l immagine che si vuole utilizzare non può essere caricata. <HEAD> <TITLE>Fogli di stile per cambiare gli indicatori di lista</title> <STYLE type="text/css"> UL { list-style: url(star.gif) disc } </STYLE> </HEAD> <BODY> <UL> <LI>Andrea <LI>Laura <LI>Alice </UL> Per assicurare maggiormente che gli utenti riescano a capire le differenze tra gli elementi di lista indicati in maniera visuale, si potrebbe fornire un etichetta di testo dopo la frase che indica l elemento. In questo esempio, della nuova informazione è comunicata attraverso testo (New), stile del font (bold), e colore(indicatore giallo, testo rosso su sfondo giallo). <HEAD> <TITLE>Esempio di stile di indicatori</title> <STYLE type="text/css">.newtxt { font-weight: bold; color: red; background-color: yellow }.newbullet { list-style : url(yellow.gif) disc } </STYLE> </HEAD> <BODY> <UL> <LI class="newbullet">roth IRA <SPAN class="newtext">new</span></li>

70 Cap. 4 Tecniche per i Punti di Controllo 68 <LI> 401(k)</LI> </UL> </BODY> 4.8. Punto di controllo 8 Marcare le citazioni. Non usare marcatura che definisca citazioni per ottenere effetti di formato come il rientro. A. Citazioni Gli elementi Q e BLOCKQUOTE servono rispettivamente come marcatori per citazioni di tipo in linea e di tipo blocco. BLOCKQUOTE viene utilizzato per una citazione più lunga rispetto a ciò che si farebbe con Q. <BLOCKQUOTE cite=" <P>Remuneration! O! that's the Latin word for three farthings. --- William Shakespeare (Love's Labor Lost). </P> </BLOCKQUOTE> 4.9. Punto di controllo 9 Assicurarsi che il contenuto dinamico sia accessibile oppure fornire una presentazione o pagina alternativa. A. L elemento LINK e le pagine alternative Questo elemento può essere usato per indicare documenti alternativi. I browser potrebbero caricare le pagine alternative basandosi sul tipo di browser dell utente e sulle sue preferenze. Gli interpreti che supportano LINK caricheranno le pagine alternative per tutti quegli utenti per cui si può identificare che i loro browser supportano un tipo di resa aural, braille, oppure tty. <HEAD> <TITLE>Benvenuti</TITLE> <LINK title="text-only version" rel="alternate" href="text_only" media="aural, braille, tty"> </HEAD> <BODY><P>...</BODY>

71 Cap. 4 Tecniche per i Punti di Controllo 69 B. Trasformazioni eleganti degli script Assicurarsi che la pagina rimanga accessibile se gli script sono disattivati oppure il browser non li supporta. Evitare di creare del contenuto on the fly presso il client: se il browser dell utente non tratta gli script non sarà mostrato o generato nessun contenuto. Tuttavia, ciò è diverso dal mostrare o nascondere del contenuto già esistente tramite una combinazione di fogli di stile e script; se non c è script il contenuto sarà sempre mostrato. Tutto questo non deve comunque evitare di generare pagine on the fly dal lato server e mandarle al client. Non creare collegamenti che usano javascript come URI, perché se un utente non sta usando gli script, essi non saranno capaci di collegarlo dal momento che il browser non può creare il contenuto di un collegamento. Esempio disapprovato. Questo è un collegamento che non conduce a nulla per un interprete dove gli script non sono supportati o non attivati. <A href="javascript:">...</a> C. Pagine alternative Riferirsi al paragrafo 3.8 sezione A. D. Scrivere per i browser che non supportano i frame Riferirsi al paragrafo 2.1 sezione J. E. Applet direttamente accessibili Se una applet (creata con gli elementi OBJECT oppure APPLET), richiede l interazione dell utente e quest ultima non può essere duplicata in un formato alternativo, si dovrà costruire la applet direttamente accessibile. Inoltre se la applet crea del movimento, si deve fornire un meccanismo tale da poterlo fermare. F. Informazione audio Riferirsi al paragrafo 3.7 sezione A Punto di controllo 10 Fino a quando gli interpreti non permetteranno agli utenti di controllare il lampeggiamento, evitare di far lampeggiare il contenuto (cioè di cambiare la presentazione a intervalli regolari, come se si accendesse e spegnesse).

72 Cap. 4 Tecniche per i Punti di Controllo 70 A. Script che creano movimento e lampeggiamento Fornire sempre un meccanismo che permetta di fermare il fenomeno. B. Applets direttamente accessibili Riferirsi al paragrafo 4.9 sezione E. C. Effetti stilistici sul testo CSS2 fornisce alcune proprietà per dare stile al testo: text-transform: per maiuscolo, minuscolo ecc. text-shadow: per l ombreggiatura. text-decoration: per sottolineare, far lampeggiare o aggiungere delle linee sopra le parole. Si noti che se viene usato text-decoration: blink il contenuto lampeggerà (appare e scompare ad intervalli regolari), ma l utente potrà fermare questo effetto disattivando il foglio di stile oppure sovrascrivendo la regola con un suo foglio di stile. Non usare gli elementi BLINK e MARQUEE: essi non fanno parte di nessuna specifica HTML del W3C, cioè sono elementi non-standard Punti di controllo 11 e 12 Fino a quando gli interpreti non forniranno la possibilità di bloccare l'aggiornamento automatico, non creare pagine che periodicamente si aggiornino automaticamente. Fino a quando gli interpreti non forniranno la capacità di bloccare l'auto-reindirizzamento, non usare marcatura per reindirizzare le pagine automaticamente. Piuttosto, configurare il server in modo che esegua i reindirizzamenti. A. Aggiornamento automatico delle pagine Le pagine che si aggiornano o cambiano senza che l utente lo abbia richiesto, possono disorientarlo, perché non si può prevedere quali capacità e velocità di lettura possiede. Si dovrebbero evitare queste pratiche con le tecniche seguenti. In ordine di preferenza: Configurare il server per usare l appropriato HTTP status code (301). È preferibile usare le intestazioni HTTP perché ciò riduce il traffico Internet e i tempi di download, può essere applicato anche ai documenti non-html e può essere usato dagli interpreti che richiedono soltanto una HEAD request. Inoltre gli status code di tipo 30x forniscono delle informazioni come moved permanently oppure moved temporarily che non può essere data con l aggiornamento tramite META.

73 Cap. 4 Tecniche per i Punti di Controllo 71 Rimpiazzare la pagina che si vorrebbe fosse rediretta con una pagina statica contenente un normale collegamento alla nuova pagina. B. L elemento META Con questo elemento si possono specificare dei metadati per un documento comprese parole chiavi, e informazioni sull autore. Gli esempi seguenti mostrano come questo elemento non deve essere usato. Il primo esempio cambia la pagina dell utente nella stessa ad intervalli regolari. Esempio disapprovato. <META http-equiv="refresh" content="60"> <BODY> <P>...Informazione... </BODY> Il seguente esempio fa avanzare l utente da una pagina all altra dopo un timeout. Tuttavia, non si deve usare questo codice perché è non-standard, può disorientare gli utenti e spezzare la cronologia delle pagine visitate dal browser. Esempio disapprovato. <HEAD> <TITLE>Non usare!</title> <META http-equiv="refresh" content="5; </HEAD> <BODY> <P>Se il tuo browser supporta Refresh, sarai trasportato al nostro <A href=" sito</a> tra 5 secondi, altrimenti, seleziona il collegamento manualmente. </BODY> Se il valore dell attributo content è una URI si è in presenza di una pagina con reindirizzamento: bisognerà permettere di rimuovere questo fenomeno e aggiungere un collegamento alla nuova pagina. Si noti che la situazione è ancora più grave se oltre ad avere un reindirizzamento o aggiornamento automatico la pagina dovesse aprirsi in una nuova finestra senza informare l utente. Infine bisogna porre attenzione che questi fenomeni non siano generati da applet o script ed eventualmente porvi rimedio Punto di controllo 13 Fino a quando gli interpreti non permetteranno 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.

74 Cap. 4 Tecniche per i Punti di Controllo 72 A. Ancore e target Gli elementi da controllare sono A e AREA. Per essi il valore dell attributo target non deve essere _blank oppure _new. Si può usare come obiettivo dell ancora una finestra già esistente, ma se questa tecnica non può essere evitata si può fornire un messaggio del genere: Questo collegamento [ testo del collegamento] aprirà una nuova finestra e ciò potrebbe disorientare alcuni utenti. B. Frame Anche qui è il valore dell attributo target deve essere diverso da _blank. C. Script Se si usa questo elemento, esso non dovrebbe contenere codice del tipo: window.open(). Se ciò non può essere evitato fornire un messaggio che informi che lo script aprirà una nuova finestra. Un controllo ulteriore deve esserci anche per le applet che potrebbero avere questo comportamento. D. Aggiornamenti delle pagine Evitare che le pagine si aggiornino automaticamente e anche che la nuova pagina si apra in una nuova finestra Punto di controllo 14 Usare le tecnologie W3C quando sono disponibili e sono appropriate per un certo compito; usare le versioni più recenti quando sono supportate. A. Tecnologie progettate per scopi di accessibilità Le Web Content Accessibility Guidelines 1.0 suggeriscono di usare le tecnologie del W3C in quanto hanno elementi di accessibilità integrati. Inoltre le specifiche del W3C subiscono una revisione preliminare per assicurarsi che questi elementi siano presi in considerazione fin dalla fase progettuale. Infine esse sono state sviluppate all interno di un progetto aperto con il consenso dell industria del settore. Una breve lista delle tecnologie correnti del W3C comprende: MathML per le equazioni matematiche. HTML, XML e XHTML, per i documenti strutturati. RDF per i metadati. SMIL per le presentazioni multimediali. CSS e XSL per definire fogli di stile.

75 Cap. 4 Tecniche per i Punti di Controllo 73 XSLT per creare trasformazioni nello stile. PNG per la grafica (sebbene alcune volte può essere preferibile JPG, che non è una tecnologia W3C) Punto di controllo 15 Evitare le caratteristiche delle tecnologie W3C che sono disapprovate. A. Elementi ed attributi HTML Elementi ed attributi non standard, obsoleti oppure disapprovati rendono un documento inaccessibile. Riferirsi alle specifiche del W3C per quanto riguarda le indicazioni su quali utilizzare. Essendo la maggior parte di loro utilizzati a scopi di presentazione, li si deve essere sostituire in favore dei fogli di stile. Di seguito si propongono alcune tecniche particolari in questo senso. B. Controllo dello stile da parte dell utente Per questi scopi in CSS2 è stata cambiata la semantica dell operatore!important definito in CSS1. Nelle specifiche CSS1 l autore aveva sempre il controllo finale sullo stile. Adesso se il foglio di stile dell utente contiene!important esso ha la precedenza su qualsiasi regola applicabile del foglio di stile dell autore. Una caratteristica del genere è importante per tutti quegli utenti che devono avere particolari contrasti di colori oppure dei font più grandi ecc. Il seguente esempio mostra una regola che imposta un font grande per un paragrafo e sovrascrive una regola di ugual peso nel foglio di stile dell autore. P { font-size: 24pt! important } In CSS2 il valore inherit, disponibile per ogni proprietà, rafforza la regola di stile!important che governa la maggior parte o tutto il documento. Ad esempio la seguente regola di stile forza tutti i colori di sfondo a bianco e tutti i colori in primo piano a nero. BODY { color: black! important ; background: white! important } /* Il codice seguente fa sì che i valori di color e background siano ereditati da tutti gli altri elementi che hanno la stringa!important. Si noti che tutto ciò può essere sovrascritto da un altro stile dell utente più specifico. */ * { color: inherit! important ; background: inherit! important } CSS2 fornisce anche altre caratteristiche per il controllo da parte dell utente.

76 Cap. 4 Tecniche per i Punti di Controllo 74 Per i colori e i font di sistema : color, background-color, border-color, outline-color, font. La proprietà outline permette di creare dei contorni dinamici attorno al contenuto che non coinvolgono l impaginazione ma forniscono informazione evidenziata. Si può usare la seguente regola per disegnare una sottile linea nera attorno ad un elemento quando ha il focus oppure rossa quando è attiva. :focus { outline: thick solid black } :active { outline: thick solid red } C. Font Ci sono molte proprietà CSS per dare stile ai caratteri. Le tecniche sono: Specificare sempre un font generico di default. Invece di usare elementi ed attributi di presentazione disapprovati, servirsi delle proprietà CSS per controllare le caratteristiche dei font: font-family, font-size, font-sizeadjust, font-stretch, font-style, font-variant, e font-weight. Le seguenti proprietà CSS2 servono per controllare l informazione sui font: font, fontfamily, font-size, font-size-adjust, font-stretch, font-style, fontvariant, e font-weight. Tutto questo invece degli elementi e attributi HTML disapprovati: FONT, BASEFONT, face, e size. Se dovessero essere usati degli elementi HTML per controllare i font, si usino BIG e SMALL che non sono disapprovati Specificare sempre un font generico: BODY { font-family: "Gill Sans", sans-serif } <STYLE type="text/css"> P.important { font-weight: bold } P.less-important { font-weight: lighter; font-size: smaller } H2.subsection { font-family: Helvetica, sans-serif } </STYLE>

77 Cap. 4 Tecniche per i Punti di Controllo Punto di controllo 16 Dividere grandi blocchi di informazione in gruppi più maneggevoli quando è naturale ed appropriato. A. Raggruppamento strutturale HTML 4.01 mette a disposizioni diversi meccanismi per raggruppare i contenuti e renderli più semplici da comprendere. Usare l elemento FIELDSET per raggruppare i controlli dei moduli in unità semantiche (unità logiche) e descrivere questi gruppi con l elemento LEGEND. <FORM action=" method="post"> <FIELDSET> <LEGEND>Informazioni personali</legend> <LABEL for="firstname">nome: </LABEL> <INPUT type="text" id="firstname" tabindex="1"> <LABEL for="lastname">cognome: </LABEL> <INPUT type="text" id="lastname" tabindex="2">...altre informazioni personali... </FIELDSET> <FIELDSET> <LEGEND>Cure passate</legend>...informazioni sulle cure passate... </FIELDSET> </FORM> Per lunghe liste di menu di selezione, che possono essere difficili da seguire, si dovrebbero raggruppare le voci di tipo SELECT (definite tramite OPTION) in una gerarchia usando l elemento OPTGROUP, e specificare un etichetta tramite l attributo label sempre in OPTGROUP. <FORM action=" method="post"> <P> <SELECT name="comos"> <OPTGROUP label="portmaster 3"> <OPTION label="3.7.1" value="pm3_3.7.1">portmaster 3 with ComOS 3.7.1</OPTION> <OPTION label="3.7" value="pm3_3.7">portmaster 3 with ComOS 3.7</OPTION> <OPTION label="3.5" value="pm3_3.5">portmaster 3 with ComOS 3.5</OPTION> </OPTGROUP> <OPTGROUP label="portmaster 2"> <OPTION label="3.7" value="pm2_3.7">portmaster 2 with ComOS 3.7</OPTION> <OPTION label="3.5" value="pm2_3.5">portmaster 2 with ComOS 3.5</OPTION> </OPTGROUP>

78 Cap. 4 Tecniche per i Punti di Controllo 76 <OPTGROUP label="irx"> <OPTION label="3.7r" value="irx_3.7r">irx with ComOS 3.7R</OPTION> <OPTION label="3.5r" value="irx_3.5r">irx with ComOS 3.5R</OPTION> </OPTGROUP> </SELECT> </FORM> Usare le tabelle solo per dati di tipo tabellare e darne una descrizione con l elemento CAPTION. Annidare le liste con gli elementi UL, OL e DL. Usare le intestazioni di sezione, H1-H6, per creare documenti strutturati e spezzare lunghi periodi di testo. Utilizzare P per spezzare il testo in paragrafi. Raggruppare i collegamenti correlati tra loro. Questi meccanismi di raggruppamento dovrebbero essere usati quando naturale e appropriato, quando cioè l informazione si presenta da se stessa in raggruppamenti logici. Creare raggruppamenti in maniera casuale confonderà tutti gli utenti Punto di controllo 17 Identificare con chiarezza l'obiettivo di ogni collegamento. A. Collegamenti testuali (link text) Un buon testo per un collegamento non dovrebbe essere parzialmente generale. Non usare frasi del tipo clicca qui : non soltanto dipende dal dispositivo che si sta usando (implica che ci sia un dispositivo di puntamento), ma non dice niente su cosa si troverà se si segue il collegamento. Invece il testo dovrebbe indicare la natura dell obiettivo del collegamento, come ad esempio: maggiori informazioni sui leoni marini oppure Versione solo-testo della pagina. In quest ultimo caso (o nei casi di documenti in linguaggi specifici o in atri formati) si dovrebbe usare piuttosto la negoziazione del contenuto, cosicché gli utenti che desiderano la versione solo testo la otterranno automaticamente. In aggiunta a queste cose si deve specificare un valore per l attributo title che descrive chiaramente e accuratamente l obiettivo di ciascun collegamento. Se più di un collegamento nella stessa pagina condivide lo stesso testo, allora essi devono puntare alla stessa risorsa. Una tale consistenza aiuterà non solo il progetto della pagina ma anche la sua accessibilità. Se invece due o più collegamenti condividono lo stesso testo ma puntano a risorse diverse, bisogna distinguerli specificando due valori diversi per l attributo title di ciascun elemento A. Le persone cieche, che hanno difficoltà nel vedere, oppure che non usano schermi o li hanno di dimensioni ridotte, sono incapaci di scandire la pagina rapidamente con gli occhi. Per avere una visione di insieme o per cercare rapidamente un collegamento, essi spesso si

79 Cap. 4 Tecniche per i Punti di Controllo 77 servono della tabulazione per passare da un link al successivo oppure esaminano la lista dei collegamenti disponibili nella pagina. Quindi, per dei collegamenti correlati tra loro, bisogna fornire un informazione introduttiva nel primo collegamento, e poi informazione particolare in quelli seguenti. Questa pratica darà informazioni sul contesto a quegli utenti che li stanno leggendo in sequenza. <A href="my-doc.html">il mio documento è disponibile in HTML</A>, <A href="my-doc.pdf" title="il mio documento in PDF">PDF</A>, <A href="my-doc.txt" title="il mio documento in testo">plain text</a> Punti di controllo 18, 19 e 20 Fornire metadati per aggiungere informazione di tipo semantico alle pagine e ai siti. Fornire informazione sulla configurazione generale di un sito (per es., una mappa oppure un indice del sito). Usare meccanismi di navigazione in modo coerente. A. Metadati Alcuni elementi strutturali forniscono informazioni riguardanti il documento stesso. Questi sono chiamati metadati del documento: i metadati sono informazioni riguardanti i dati. Metadati ben costruiti possono fornire importanti informazioni di orientamento agli utenti. Gli elementi HTML che forniscono informazioni utili su un documento includono: 1) TITLE : il titolo del documento. Si noti che l elemento TITLE, che appare solo una volta nel documento, è diverso dall attributo title il quale si applica a quasi tutti gli elementi HTML Questo attributo deve essere usato in accordo con quelle specifiche. 2) L elemento ADDRESS : è usato per fornire informazioni sul creatore della pagina. 3) L elemento META : riferirsi al paragrafo 4.11 sezione B. 4) Dichiarazione del!doctype : riferirsi al paragrafo 4.3 sezione A. 5) L elemento LINK e gli strumenti di navigazione : usare questo elemento e le varie tipologie di collegamento per descrivere l organizzazione e i meccanismi di navigazione del documento. Alcuni interpreti potrebbero sintetizzare tramite voce questi strumenti di navigazione oppure permettere la stampa di un insieme di documenti basati su un tale codice di marcatura. Questi elementi LINK dovrebbero essere posizionati all inizio del secondo capitolo di un libro:

80 Cap. 4 Tecniche per i Punti di Controllo 78 <LINK rel="next" href="capitolo3.html"> <LINK rel="prev" href="capitolo1.html"> <LINK rel="start" href="cover.html"> <LINK rel="glossary" href="glossary.html"> 6) L elemento LINK e le pagine alternative : riferirsi al paragrafo 4.9 sezione A. B. Navigazione Uno stile di presentazione coerente in ciascuna pagina permette agli utenti non solo di localizzare i meccanismi di navigazione più facilmente, ma anche di saltarli se stanno cercando del contenuto importante. Questo aiuterà gli utenti con disabilità cognitive e della lettura e renderà la navigazione più facile a tutti. La prevedibilità incrementerà la facilità con la quale la gente troverà l informazione nel sito oppure la eviterà se lo desidera. Esempi di strutture che possono apparire sempre nello stesso posto: Barre di navigazione. Contenuto primario della pagina. Pubblicità. Un meccanismo di navigazione crea una serie di percorsi che un utente può prendere in un sito. Fornire barre di navigazione, mappa del sito e modi per effettuare ricerche aumenterà la probabilità che un utente raggiunga l informazione che sta cercando. Se il sito ha una natura altamente visuale, potrebbe essere difficile da navigare se l utente non può crearsi un schema mentale di dove sta andando o di dove è stato. Per aiutarlo si dovrebbe fornire una descrizione degli strumenti di navigazione. È cruciale che la descrizione e la guida del sito siano accessibili dal momento che chi si è perso farà forte affidamento su di essi. Quando si forniscono funzionalità di ricerca si dovrebbero anche offrire meccanismi di ricerca che soddisfino varie preferenze e livelli di capacità. La maggior parte di facilitazioni nelle ricerche richiedono all utente di inserire delle parole chiave come termini di ricerca. Gli utenti con disabilità nello scrivere o che non hanno familiarità con il linguaggio del sito, avranno difficoltà a trovare ciò che gli serve se la ricerca richiede un ortografia perfetta. I motori di ricerca dovrebbero fornire un controllo ortografico, offrire tentativi alternativi, ricerche query by example, ecc. 5. Punti di controllo particolari Se si usano tabelle 5.1. Punti di controllo 21 e 22 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 (che può essere una versione linearizzata).

81 Cap. 4 Tecniche per i Punti di Controllo 79 Se per l impaginazione viene usata una tabella non usare nessun marcatore di struttura per la formattazione della resa visiva. A. Struttura e presentazione Riferirsi al paragrafo 2.2 sezione A. B. Tabelle per l impaginazione Per questo scopo e per il posizionamento si dovrebbero usare i fogli di stile. Ma quando è necessario usare una tabella per l impaginazione allora essa deve risultare con un ordine leggibile quando linearizzata. Quando una tabella è linearizzata il contenuto delle celle diventa una serie di paragrafi uno dopo l altro. Le celle dovrebbero avere senso quando lette in ordine di riga e dovrebbero includere elementi strutturali (che creano paragrafi, intestazioni, liste, ecc.) cosicché la pagina abbia senso dopo la linearizzazione. Inoltre, quando le tabelle sono usate per l impaginazione, non si deve usare del codice di marcatura strutturale per creare un tipo di formattazione visuale. Per esempio, l elemento TH (table header), è mostrato in maniera visuale come centrato e in grassetto. Se una cella non è di intestazione per una riga o colonna di dati, bisogna usare i fogli di stile o gli attributi di formattazione dell elemento. C. Impaginazione, posizionamento e allineamento Riferirsi al paragrafo 4.4 sezione E. Se si usano frame 5.2. Punto di controllo 23 Descrivere lo scopo dei frame e il modo in cui essi interagiscono se non è evidente dai titoli dei frame da soli. A. Testo equivalente Riferirsi al paragrafo 2.1 sezione A. B. Descrivere le relazioni tra frame Riferirsi al paragrafo 2.1 sezione I.

82 Cap. 4 Tecniche per i Punti di Controllo 80 Se si usano moduli 5.3. Punti di controllo 24 e 25 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. Associare esplicitamente le etichette ai loro controlli. A. Etichettare i controlli dei moduli L etichetta deve precedere immediatamente il suo controllo nella stessa linea (sono permessi più controlli/etichette per linea) oppure stare nella linea che precede il controllo (con in questo caso una sola etichetta e un solo controllo per linea). Un esempio di LABEL usato con for in HTML 4.01 è riportato nel paragrafo 4.15 sezione A. Un etichetta è associata con il suo controllo di modulo o tramite il codice di marcatura o mediante il posizionamento nella pagina. L esempio seguente mostra come un etichetta e il suo controllo possono essere associate con il codice di marcatura. <LABEL for="firstname">nome: <INPUT type="text" id="firstname" tabindex="1"> </LABEL> Se si usano applet e script 5.4. Punto di controllo 26 Per quanto riguarda script e applet, assicurarsi che i gestori di eventi siano indipendenti dai dispositivi di input. A. Struttura e presentazione Riferirsi al paragrafo 2.2 sezione A. B. Applet direttamente accessibili Riferirsi al paragrafo 4.9 sezione E. C. Script direttamente accessibili Riferirsi al paragrafo 3.5 sezione B.

83 Cap. 4 Tecniche per i Punti di Controllo Punto di controllo 27 Fino a quando gli interpreti non permetteranno agli utenti di bloccare il contenuto in movimento, evitare il movimento nelle pagine. A. Informazione visuale e movimento Riferirsi al paragrafo 3.6 sezione A. B. Immagini animate Evitare l utilizzo di questo tipo di oggetti (ad esempio GIF animate) dal momento che il movimento può disturbare particolari categorie di utenti. C. Applet direttamente accessibili Riferirsi al paragrafo 4.9 sezione E. D. Script che causano movimento e lampeggiano Riferirsi al paragrafo 4.10 sezione A. E. Creare movimento con i fogli di stile Servirsi delle caratteristiche di CSS2 per nascondere o mostrare i contenuti, cambiare tipo di presentazione (colori, font ecc.) e quant altro tenendo presente che se il foglio di stile è sovrascritto da quello di un utente con particolari esigenze tutti i tipi di movimento potranno essere bloccati Punto di controllo 28 Fare in modo che elementi di programmi come script e applet siano direttamente accessibili o compatibili con le tecnologie assistive [Priorità 1 se la funzionalità è importante e non presentata altrove, altrimenti Priorità 2.] A. Applet direttamente accessibili Riferirsi al paragrafo 4.9 sezione E. B. Script direttamente accessibili Riferirsi al paragrafo 3.5 sezione B.

84 Cap. 4 Tecniche per i Punti di Controllo Punto di controllo 29 Assicurarsi che ogni elemento che possiede una sua specifica interfaccia possa essere gestito in una modalità indipendente da dispositivo. A. Pagine alternative Controllo indipendente da dispositivo per interfacce importate, riferirsi al paragrafo 3.8 sezione A. B. Applet direttamente accessibili Riferirsi al paragrafo 4.9 sezione E Punto di controllo 30 Negli script, specificare gestori di evento logici piuttosto che gestori di evento dipendenti da dispositivo. A. Script direttamente accessibili Riferirsi al paragrafo 3.5 sezione B. B. Pagine alternative Riferirsi al paragrafo 3.8 sezione A. 6. Punti di controllo generali per il livello Punto di controllo 1 Specificare l espansione di ogni abbreviazione o acronimo nel documento laddove compare per la prima volta. A. Acronimi ed abbreviazioni Utilizzare il codice di marcatura appropriato tramite gli elementi ABBR e ACRONYM l attributo title per indicarne l espansione. e <P>Benvenuti sul<acronym title="world Wide Web">WWW</ACRONYM>!

85 Cap. 4 Tecniche per i Punti di Controllo 83 Tutto questo si applica anche alle frasi accorciate usate come intestazioni di righe o colonne di tabelle; mentre se l intestazione è già abbreviata allora si fornisca una espansione in ABBR.... <TH>Nome</TH> <TH><ABBR title="codice fiscale">cf</abbr> Punto di controllo 2 Identificare il linguaggio naturale principale di un documento. A. Linguaggio naturale primario È buona pratica identificare la lingua in cui è scritto il documento tramite il codice di marcatura (come mostrato di seguito) oppure tramite le intestazioni HTTP. Questa seconda pratica coinvolge i gestori dei server che dovrebbero configurarli in modo da trarre vantaggio dal meccanismo di negoziazione del contenuto, così i client potranno ricuperare automaticamente i documenti nella loro lingua preferita. <HTML lang="fr">...resto del documento scritto in francese... </HTML> 6.3. Punti di controllo 3 e 4 Creare un ordine logico di tabulazione fra i collegamenti, i controlli dei moduli, e gli oggetti. Fornire scorciatoie da tastiera per i collegamenti importanti (compresi quelli nelle immagini sensibili sul lato client), per i controlli dei moduli, e per i gruppi di controlli dei moduli. A. Pagine alternative Riferirsi al paragrafo 3.8 sezione A. B. Accesso da tastiera Un meccanismo del genere per attivare gli elementi di una pagina è importante per molti utenti che non possono usare dispositivi di puntamento. Gli interpreti potrebbero avere delle caratteristiche che permettono di legare la pressione di certi tasti ad azioni ben precise. HTML 4.01 permette di specificare nel documento delle scorciatoie da tastiera tramite l attributo accesskey:

86 Cap. 4 Tecniche per i Punti di Controllo 84 In questo esempio, se l utente preme il tasto C il collegamento sarà seguito. <A accesskey="c" href="doc.html" hreflang="en" title="xyz home page"> XYZ home page</a> Nota. Fino a quando gli interpreti non forniranno una lista di quali sono le combinazioni tra tasti e azioni disponibili bisogna fornirne una da parte del progettista. C. Accesso ai moduli tramite tastiera Nell esempio seguente si specifica un ordine di tabulazione tra gli elementi (rispettivamente, field2, field1 e submit) mediante l attributo tabindex: <FORM action="submit" method="post"> <P> <INPUT tabindex="2" type="text" name="field1"> <INPUT tabindex="1" type="text" name="field2"> <INPUT tabindex="3" type="submit" name="submit"> </FORM> Nel prossimo esempio, invece, si assegna U come tasto di accesso. Premendo U si dà il focus all etichetta la quale, a sua volta, lo dà al controllo di input che dà all utente la possibilità di inserire del testo. <FORM action="submit" method="post"> <P> <LABEL for="user" accesskey="u">nome</label> <INPUT type="text" id="user"> </FORM> 6.4. Punto di controllo 5 Fino a quando gli interpreti (comprese le tecnologie assistive) non renderanno in modo distinto collegamenti adiacenti, inserire caratteri stampabili (delimitati da spazi), non facenti parte dei collegamenti, per separare i collegamenti adiacenti. A. Spazio bianco Controllare che non ci siano caratteri di spazio bianco tra elementi A consecutivi. Per spazio bianco si intende: spazio, tab, Invio, oppure &nbsp. Al contrario ogni carattere di testo è un non-spazio bianco. Le varie sezioni <A> nella stessa linea di testo devono essere separate da una sequenza del tipo: spazio bianco, non-spazio bianco, spazio bianco.

87 Cap. 4 Tecniche per i Punti di Controllo 85 Un carattere tipico da poter inserire tra collegamenti in sequenza è, oppure si deve dare all utente la possibilità di sceglierne uno diverso come separatore Punto di controllo 6 Fornire agli utenti l'informazione necessaria perché possano ricevere i documenti in maniera che si adattino alle loro preferenze (per es. lingua, tipo di contenuto ecc.). A. Negoziazione del contenuto Ci sono diverse strategie per permettere agli utenti di selezionare il contenuto appropriato. Inserire collegamenti ad altre versioni del documento, come le traduzioni. Un collegamento del tipo: Versione Francese del documento collegherà alla traduzione in francese. Indicare il tipo di contenuto o linguaggio attraverso il codice di marcatura. A tal proposito si possono utilizzare gli attributi HTML : type e hreflang. Usare la negoziazione del contenuto tramite intestazioni HTTP per servire ai client automaticamente ciò che essi richiedono. B. Aural Cascanding Style Sheets Le proprietà di CSS2 relative all audio forniscono informazione agli utenti non vedenti e a quelli che utilizzano dei browser vocali, in gran parte come i font forniscono informazione visuale. Il seguente esempio mostra come varie qualità di suono (che includono la proprietà voice-family che è quasi un font audio) possano far capire ad un utente che il contenuto pronunciato è una intestazione: H1 { voice-family: paul; stress: 20; richness: 90; cue-before: url("ping.au") } Le seguenti proprietà fanno parte di quelle di CSS2 per la resa audio. Volume controlla il volume del testo pronunciato. speak controlla se il testo verrà pronunciato e, in caso affermativo, se sarà sillabato o pronunciato in parole. pause, pause-before, pause-after controllano le pause prima e dopo che il contenuto sia pronunciato. Questo permette la separazione per una miglior comprensione.

88 Cap. 4 Tecniche per i Punti di Controllo 86 cue, cue-before e cue-after, specificano un suono da riprodurre prima e dopo il contenuto, ciò può essere un valido aiuto all orientamento come lo sono le icone visuali. play-during controlla un suono riprodotto in sottofondo mentre si sta rendendo un altro elemento, un po come un immagine di sfondo. azimuth ed elevation danno una dimensione al suono, il che permette di distinguere le voci. speech-rate, voice-family, pitch, pitch-rate, stress e richness controllano la qualità della pronuncia. Variando queste proprietà per elementi differenti, gli utenti possono regolare finemente la resa audio del contenuto. speak-punctuation e speak-numeral controllano la pronuncia dei numeri e della punteggiatura che ha un effetto sulla qualità dell esperienza della navigazione audio. Infine la proprietà speak-header specifica come deve essere pronunciata l informazione di intestazione di una tabella prima di una cella dati. C. Accesso a rappresentazioni alternative del contenuto CSS2 lascia accedere gli utenti a rappresentazioni alternative del contenuto che è specificato nei valori degli attributi, quando le seguenti cose sono utilizzate insieme: Selettori di attributo. La funzione attr() e la proprietà content. I pseudo-elementi :before e :after. Nel seguente esempio, il valore dell attributo alt per l elemento IMG è reso dopo l immagine (in maniera visuale, audio, ecc.). IMG:after { content: attr(alt) } Si noti che il valore dell attributo è mostrato anche se l immagine non lo fosse (ad es. sono state disabilitate tramite l interfaccia utente). D. Tipi di media CSS2 supporta diversi tipi di media tramite le Questo permette sia agli autori che agli utenti di progettare dei fogli di stile diversi per rendere un documento in maniera più appropriata tramite i vari dispositivi in oggetto. Questi fogli di stile possono fare il contenuto su misura per la presentazione su dispositivi braille, sintetizzatori vocali, oppure dispositivi TTY. Inoltre tramite l uso delle si riducono i tempi di download permettendo

89 Cap. 4 Tecniche per i Punti di Controllo 87 agli interpreti di ignorare (e quindi non scaricare) le regole inapplicabili al contesto in questione Punto di controllo 7 Fornire barre di navigazione per evidenziare e dare accesso ai meccanismi di navigazione. A. Navigazione Riferirsi al paragrafo 4.17 sezione B Punto di controllo 8 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. A. Raggruppamento e salto dei collegamenti Quando i collegamenti sono raggruppati in insieme logico (come ad esempio una barra di navigazione che appare in ogni pagina del sito) si dovrebbe marcarli come una sola unità. Le barre di navigazione sono la prima cosa che si incontra in una pagina. Per gli utenti con sintetizzatori vocali ciò significa che essi devono ascoltare un certo numero di collegamenti prima di raggiungere il contenuto interessante di una pagina. Ci sono diversi modi per permettere agli utenti di aggirare i gruppi di collegamenti (allo stesso modo di come fanno gli utenti vedenti quando incontrano lo stesso gruppo in ogni pagina) : Includere un collegamento che permette di saltare al di là dei collegamenti per la navigazione. Fornire un foglio di stile che permette di nasconderli. Usare l elemento HTML 4.01 MAP che permette di raggruppare i collegamenti e quindi identificare il gruppo con l attributo title. In futuro potranno essere gli interpreti stessi a permettere di saltare al di là di elementi come le barre di navigazione. In questo esempio, con l elemento MAP si raggruppano un insieme di collegamenti, l attributo title li identifica come una barra di navigazione e il collegamento all inizio del gruppo collega all ancora dopo il gruppo. Si noti, ancora, che i essi sono separati tramite dei caratteri stampabili, che non costituiscono collegamento, circondati a loro volta da spazi. <BODY> <MAP title="barra di Navigazione"> <P> [<A href="#how">salta la barra di navigazione</a>] [<A href="home.html">home</a>]

90 Cap. 4 Tecniche per i Punti di Controllo 88 [<A href="search.html">cerca</a>] [<A href="new.html">novità</a>] [<A href="sitemap.html">mappa del sito</a>] </P> </MAP> <H1><A name="how">come usare il nostro sito</a></h1> <! contenuto della pagina --> </BODY> 6.8. Punto di controllo 9 Se sono fornite funzionalità di ricerca, rendere possibili diversi tipi di ricerca per differenti livelli di abilità e per preferenze diverse. A. Navigazione Riferirsi al paragrafo 4.17 sezione B Punto di controllo 10 Posizionare l'informazione più significativa all'inizio delle intestazioni, dei paragrafi, delle liste, ecc. A. Comprensione Riferirsi al paragrafo 2.7 sezioni A e B Punto di controllo 11 Fornire informazione sulle raccolte di documenti (cioè documenti composti da più pagine). A. Documenti riuniti I documenti riuniti un pacchetti unici (compressi) possono facilitare la lettura offline. Per creare degli insiemi coerenti: Usare i metadati per descrivere le relazioni tra i costituenti dell insieme. Servirsi di strumenti di archiviazione come zip, gzip, tar e StuffIt per creare l insieme. B. L elemento LINK e gli strumenti di navigazione Riferirsi al paragrafo 4.17 sezione A5.

91 Cap. 4 Tecniche per i Punti di Controllo Punto di controllo 12 Fornire un mezzo per saltare arte ASCII multilinea. A. Arte ASCII Evitare questo tipo di illustrazioni tramite caratteri, ed usare delle immagini vere e proprie, perché è più facile fornire per esse del testo equivalente. Ma, se una tale pratica non può essere evitata, allora bisogna fornire un collegamento che permette di saltare al di là dell arte ASCII come segue: <P> <a href="#post-art">salto oltre la ASCII art</a> <! qui si trova la ASCII art --> <a name="post-art">didascalia per la ASCII art</a> Un altro modo in cui si può marcare l arte ASCII complessa è quello di dare un collegamento ad una descrizione lunga di ciò che essa rappresenta. Questo per assicurarsi che il testo equivalente la descriva adeguatamente. Per le ASCII art più piccole si può usare in opzione un elemento ABBR con l attributo title: <P><ABBR title="faccina sorridente in ASCII art">:-)</abbr> Infine un modo ulteriore per rimpiazzare l arte ASCII è usare i linguaggi umani. Ad esempio, le parole <faccina sorridente> invece dei segni :-) ; oppure la parola quindi invece di --> Punto di controllo 13 Integrare il testo con presentazioni grafiche o uditive nei casi in cui esse possano facilitare la comprensione della pagina. A. Comprensione Riferirsi al paragrafo 2.7 sezioni A e B Punto di controllo 14 Creare uno stile di presentazione coerente fra le pagine. A. Navigazione Riferirsi al paragrafo 4.17 sezione B.

92 Cap. 4 Tecniche per i Punti di Controllo 90 B. Diminuire la manutenzione ed aumentare la consistenza Usare pochi fogli di stile per tutto il sito; Usare dei fogli di stile collegati invece dello stile incorporato negli elementi, ed evitare i fogli di stile in linea; Se ce ne è più di uno, usare lo stesso nome di class per lo stesso concetto in tutto il foglio di stile. 7. Punti di controllo particolari Se si usano immagini e immagini sensibili 7.1. Punto di controllo 15 Fino a quando gli interpreti non renderanno disponibili equivalenti testuali per collegamenti di immagini sensibili sul lato client fornire collegamenti di testo ridondanti per ogni zona attiva di una immagine sensibile sul lato client. A. Testo equivalente Riferirsi al paragrafo 2.1 sezioni A ed F. B. Collegamenti di testo ridondanti In aggiunta al testo equivalente bisogna fornire dei collegamenti testuali ridondanti. Se invece di usare AREA si usa l elemento A si potrebbe pensare di descrivere le regioni attive e dare dei collegamenti ridondanti allo stesso tempo. <OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"> <MAP name="map1"> <P>Navigazione del sito. [<A href="guide.html" shape="rect" coords="0,0,118,28">guida all accesso</a>] [<A href="shortcut.html" shape="rect" coords="118,0,184,28">go</a>] [<A href="search.html" shape="circle" coords=" ,60">cerca</a>] [<A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0"> Top Ten</A>] </MAP> </OBJECT> Si noti che l elemento MAP è il contenuto di OBJECT cosicché il collegamento alternativo sarà visualizzato solo se non lo sarà l immagine sensibile (navbar1.gif). Inoltre i collegamenti

93 Cap. 4 Tecniche per i Punti di Controllo 91 sono stati separati da parentesi quadre. Tutto questo per evitare che i vecchi screen reader leggano diversi collegamenti adiacenti come uno solo e per aiutare gli utenti a distinguere visualmente tra di loro. Gli autori dovrebbero assicurarsi di includere caratteri stampabili, come oppure [], circondati da spazi tra collegamenti testuali adiacenti. Il problema non si pone se si utilizzano delle immagini come collegamenti: infatti il testo alternativo non sarà letto come unico collegamento a causa del segnaposto per le immagini che i browser grafici usano quando esse non sono caricate. Se si usano tabelle 7.2. Punti di controllo 16 e 17 Per le tabelle, fornire sommari. Fornire abbreviazioni per le etichette di intestazione. A. Sommari Fornire una didascalia attraverso l elemento CAPTION. La didascalia di una tabella ne descrive la natura in due o tre definizioni. Un esempio di ciò può essere: "Tazze di caffè consumate da ciascun senatore" Comunque una didascalia può non essere sempre necessaria. Se non si fornisce una didascalia, usare l attributo title nell elemento TABLE per descrivere in poche parole la natura della tabella. Fornire un sommario tramite l attributo summary. I sommari sono molti utili soprattutto per gli utenti non vedenti. Un sommario delle relazioni tra le celle è importante specialmente per le tabelle con le intestazioni annidate, con celle che si espandono su righe o colonne multiple, o con altre relazioni che non sono ovvie dall analisi della struttura della tabella ma che sono evidenti da una resa visuale. Un sommario può inoltre descrivere come la tabella si inquadra nel contesto del documento. Se non c è un titolo è ancora più importante fornire un sommario. Esempio: "Questa tabella mostra il numero di tazze di caffè consumate da ciascun senatore, il suo tipo (decaffeinato o normale) e se esso è consumato con o senza zucchero." Fornire sostituti concisi per le etichette di intestazione con l attributo abbr nell elemento TH. Questo sarà particolarmente utile per le future tecnologie vocali che potranno leggere le etichette di riga e colonna per ciascuna cella. Le abbreviazioni abbattono i tempi di lettura e le ripetizioni.

94 Cap. 4 Tecniche per i Punti di Controllo Punto di controllo 18 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. A. Linearizzazione delle tabelle Trarranno vantaggio da quanto di seguito esposto tutti quegli interpreti (come gli screen reader) che non sono capaci di trattare blocchi di testo presentato in maniera affiancata. Tuttavia ciò non deve scoraggiare l uso delle tabelle per rappresentare informazione per natura tabellare. La linearizzazione è un modo di rendere una tabella in cui il contenuto delle celle diventa una serie di paragrafi uno dopo l altro. L ordine dei paragrafi sarà lo stesso di quello che è stato definito per esse nel documento corrente. Le celle dovrebbero avere un senso quando sono lette in ordine e dovrebbero avere al loro interno elementi strutturali (che creano paragrafi, intestazioni, liste, ecc.) così da rendere le pagine significative dopo la linearizzazione. Le tabelle usate per dare ordine alle pagine, dove il testo delle celle va a capo, pongono dei problemi agli screen reader più vecchi che non interpretano il sorgente HTML o ai browser che non permettono la navigazione individuale delle celle. Questi strumenti leggeranno la pagina da una parte all altra, leggendo frasi su una stessa riga ma appartenenti a colonne diverse come se fossero una sola. Ad esempio se la tabella appare sullo schermo in questo modo: Esiste il 30% di probabilità di pioggia per questa mattina Incidenti sull autostrada: la situazione è drammatica. Essa potrebbe essere letta da uno screen reader come : Esiste il 30% di probabilità di Incidenti sull autostrada: pioggia per questa mattina la situazione è drammatica Usualmente è semplice linearizzare una tabella usata a scopi di impaginazione: basta semplicemente togliere il codice di marcatura della tabella dalla tabella stessa. Ci sono molti strumenti che fanno ciò e questa pratica sta diventando sempre più comune per gli screen reader ed alcuni browser. Al contrario linearizzare una tabella di dati richiede una strategia differente. Dal momento che le celle di dati si basano sull informazione fornita non solo dalle celle vicine ma anche da quelle di intestazione, bisogna traslare le informazioni di relazione, disponibili visualmente, nella tabella lineare. Ad esempio, si può specificare l ordine di disposizione delle colonne. La direzione di scrittura della lingua influenza questa disposizione e quindi anche l ordine della tabella linearizzata. Si utilizzi per specificare ciò l attributo dir: dir=rtl indica una disposizione da destra a sinistra. Un codice del genere aiuterà i browser in questa operazione detta anche serializzazione. Una versione lineare basata sulle righe può essere creata leggendo l intestazione di riga, e facendo precedere ciascuna cella dalla sua intestazione di colonna. Viceversa si può fare una linearizzazione basata sulle colonne. I browser futuri e le future tecnologie assistive saranno

95 Cap. 4 Tecniche per i Punti di Controllo 93 capaci di traslare automaticamente le tabelle in una sequenza lineare o di navigare cella per cella se i dati sono etichettati in maniera appropriata. Se si usano moduli 7.4. Punto di controllo 19 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. A. Tecniche per controlli specifici Alcune tecnologie assistive più datate richiedono del testo iniziale nei controlli dei moduli, come ad esempio TEXTAREA, per funzionare in maniera appropriata. <FORM action=" method="post"> <P> <TEXTAREA name=yourname rows="20" cols="80"> Inserisci qui il tuo nome. </TEXTAREA> <INPUT type="submit" value="send"><input type="reset"> </P> </FORM> Si ricorda inoltre di usare sempre del testo equivalente per le immagini usate come bottoni di submit. <FORM action=" method="post"> <P> <INPUT type="image" name=submit src="button.gif" alt="submit"> </FORM> Riferirsi infine al paragrafo 6.3 sezioni B e C per l accesso da tastiera dal momento che esso si applica anche ai controlli dei moduli.

96 CAPITOLO 5 Caso di Studio 1. Introduzione Dopo aver illustrato metodologie, Punti di Controllo e tecniche per la loro implementazione, si procederà ad un applicazione per mostrare come in un caso reale si possa migliorare l accessibilità delle pagine di un sito Web. Si seguiranno passo per passo tutte le procedure descritte cercando di fornire delle spiegazioni appropriate se si dovessero verificare delle variazioni dettate dalla specificità del caso. 2. Il nuovo sito del Politecnico Si è deciso di scegliere come campione da riparare le pagine del nuovo sito del Politecnico di Torino che saranno pubblicate tra breve. La decisione è stata dettata dal fatto che essendo un sito di tipo istituzionale, dovrebbero essere garantiti i requisiti di accessibilità per non escludere nessuno dalla fruizione dei contenuti e dei servizi offerti dall Università. Il sito, ancora in fase di progetto, viene modificato anche giornalmente, per cui le variazioni di seguito proposte si riferiscono a come esso si presentava alla data del 28 febbraio 2003, giorno in cui sono state prelevate dalla rete le pagine da analizzare. Oggi esso potrebbe apparire in maniera diversa, avere delle funzionalità nuove e magari soddisfare delle norme di accessibilità che prima non lo erano, per cui certe modifiche apportate potrebbero risultare non efficaci o essenziali. 3. Valutazione di conformità alle WCAG Estensione del sito e livello di conformità Vista la natura esemplificativa di questa sezione non si procede alla identificazione di una selezione estesa di pagine o dell intero sito Web, ma si prendono come esempio soltanto la pagina di ingresso (Home Page) ed una pagina secondaria dal titolo: La Didattica e gli 94

97 Cap. 5 Caso di Studio 95 Studenti. Essa è selezionabile a partire dalla pagina iniziale e tutte le altre fanno riferimento al modello rappresentato da quest ultima per cui le riparazioni effettuate su di essa sono applicabili anche alle altre. Il livello di conformità alle WCAG 1.0 che si decide di tenere come obiettivo è il secondo, proprio perché consente di rimuovere barriere significative per l accesso ai documenti. Figura 1 La pagina iniziale del nuovo sito del Politecnico

98 Cap. 5 Caso di Studio 96 Figura 2 La pagina secondaria 3.2. Valutazione automatica e semi-automatica Si sottopongono il codice di marcatura e i fogli di stile delle pagine all analisi tramite i servizi di validazione del W3C. Il validatore HTML rileva per tutte e due le pagine, l assenza di una dichiarazione del tipo di documento (DOCTYPE) che viene inclusa a posteriori per poter effettuare l analisi con lo strumento (che altrimenti sarebbe impossibile). Viene scelta quella del tipo Transitional visto che con essa si rileva il minor numero di errori, che consistono in 118 per la pagina iniziale e 165 per la pagina secondaria. Essi sono rappresentati per oltre metà da attributi obbligatori non specificati: il più frequente è l assenza dell attributo alt per le immagini; altri tipi di errori sono dovuti a mancanza di tag di chiusura, valori di attributi non permessi e all uso del simbolo & non permesso in certi contesti da HTML. Il validatore CSS analizzando l unico foglio di stile per le due pagine segnala solo pochi errori dovuti a valori di attributi non permessi oltre ad un nutrito numero di avvisi sulla mancanza di colori di sfondo per paragrafi, intestazioni ed altro che non sono necessariamente indice di errore, visto che magari il colore (e qui c è la cattiva pratica!) è definito con attributi disapprovati all interno degli elementi HTML. Per valutare l accessibilità si utilizzano A-PROMPT nella versione e WAVE nella versione dimostrativa online 3.0. Come già fatto dal validatore HTML, i due strumenti rilevano, per entrambe le pagine, la violazione del Punto di Controllo 1 per il primo livello di priorità dovuta alla mancanza del testo alternativo per le numerose immagini usate come spaziatori. Le altre violazioni in comune evidenziate dagli strumenti sono la mancanza di

99 Cap. 5 Caso di Studio 97 etichette per i campi di ingresso testo dei moduli (Punti 24 e 25 livello 2), di alternative agli script (Punto 13 livello 1), l indipendenza da dispositivo di questi ultimi (Punti da 26 a 30 livello 2), l assenza di avvisi sull apertura di collegamenti in nuove finestre (Punto 13 livello 2) e infine l uso intensivo delle tabelle a scopo di impaginazione, che ammontano a 25 per la pagina iniziale e a 29 per la pagina secondaria, le quali potrebbero non risultare intellegibili quando linearizzate (Punti 21 e 22 livello 2). Inoltre A-PROMPT segnala ancora di controllare se è necessaria la presenza di collegamenti a descrizioni lunghe delle immagini e l efficacia del testo usato per i collegamenti (Punti 1 livello 1 e 17 livello 2), mentre WAVE l utilizzo di un elemento HTML disapprovato e di un formato non standard (PDF) per un documento (Punti 2, 14 e 15 livello 2) Valutazione manuale Utilizzando la Lista dei Punti di Controllo relativi al primo e al secondo livello di priorità si sono analizzate le due pagine scoprendo altre violazioni non evidenziate dagli strumenti automatici. Per la pagina iniziale si noti in particolare che l immagine centrale è di tipo sensibile perché al passaggio del mouse sopra zone diverse della stessa vengono caricate nuove immagini di sfondo che a loro volta forniscono un ulteriore informazione esplicativa. Il problema che qui si riscontra è che essendo tutto gestito tramite script, se essi vengono disattivati, l informazione data dalle nuove immagini caricate viene persa; inoltre i gestori di evento di questo meccanismo sono dipendenti dal dispositivo utilizzato (mouse), se infine le immagini vengono disattivate si perde nuovamente informazione e i titoli dei collegamenti per cui esse sono usate sono poco esplicativi. A rigore si dovrebbe fornire una immagine sensibile lato client, cioè senza che al passaggio del mouse venga inviata al server una richiesta per le nuove immagini e dei collegamenti testuali ridondanti per ogni zona sensibile della stessa, in modo che, se le immagini vengono disabilitate, rimanga il testo di questi collegamenti a fornire la medesima informazione (Punti 1, 8 e 9 livello 1; Punti 17 e da 26 a 30 livello 2). Per il livello 1 si nota ancora la mancanza di identificazione dei cambiamenti nel linguaggio naturale dei contenuti (Punto 3). Continuando l analisi al livello superiore si nota in alcune parti una combinazione di colori tra sfondo e primo piano non particolarmente efficace se vista con uno schermo in bianco e nero o da una persona con deficit percettivi sui colori (Punto 1 livello 2); l impaginazione è fatta tramite tabelle e non fogli di stile, le unità non sono relative ma assolute, mancano elementi di intestazione, le liste non sono marcate appropriatamente, c è una presentazione di fotografie che si aggiorna automaticamente, mancano i metadati all inizio della pagina (Punti da 4 a 7, 13, 18, 21 e 22 livello 2). Viene fornita una barra di navigazione che sembra posta all inizio del codice ma in realtà non lo è, i collegamenti che essa contiene non sono quelli che ci si aspetterebbe di trovare e il loro testo è a volte fuorviante anche per un utente senza particolari difficoltà (Punti 19 e 20 livello 2). Un particolare appunto deve essere fatta per la sezione di Accesso Rapido perché risulta molto comoda per un utente con browser grafico, ma è praticamente inservibile per chi ne utilizza uno testuale o vocale. Infine, riferendosi alla sezione ricerche, si nota la mancanza di pulsanti di inoltro. La pagina secondaria presenta sostanzialmente le stesse violazioni di quella principale in particolare si ha la presenza di un menù nella colonna laterale gestito con le stesse modalità della sezione Accesso Rapido e quindi affetto dalle medesime problematiche. Le altre valutazioni manuali evidenziano l impossibilità di ingrandire i font e la comparsa della barra di scorrimento orizzontale in seguito al ridimensionamento della finestra di visualizzazione. L uso di LYNX e Home Page Reader conferma la presenza dei problemi già riscontrati fino ad adesso, in particolare l assenza di titoli per i collegamenti, del testo alternativo per le

100 Cap. 5 Caso di Studio 98 immagini e la scarsa accessibilità tramite questi strumenti ad intere sezioni del sito quali Accesso Rapido o un menù simile ad esso nella colonna sinistra della pagina secondaria. Infine una cosa importante è l assenza di collegamenti per saltare da una sezione all altra della pagina o i gruppi di collegamenti correlati Valutazione dell usabilità Le pagine in esame oltre ad avere problemi di accessibilità hanno altrettanti problemi di usabilità. Infatti salta subito agli occhi la presenza di un affollamento di collegamenti il più delle volte duplicati in altre sezioni della stessa pagina. Ad esempio, la sezione Accesso Rapido possiede collegamenti alle Strutture già presenti nella colonna di sinistra della pagina iniziale; il collegamento al sito delle Biblioteche è presentato ben cinque volte nella stessa pagina. La barra di navigazione dovrebbe contenere dei collegamenti per navigare il sito, ma ne contiene invece degli altri che puntano alle strutture dell ateneo e al modo di arrivarvi: sarebbe più logico inserire queste informazioni in una pagina secondaria, magari in quella che viene caricata quando si attiva il collegamento ad una delle sedi del Politecnico nel territorio. I collegamenti utili a risorse correlate, non rappresentando il contenuto principale del sito, andrebbero inseriti a fine pagina. La versione testuale della pagina, posto che sia veramente necessaria, deve essere una delle prime cose che un utente deve poter trovare. La sezione di benvenuto potrebbe essere messa nella barra di navigazione della sola pagina iniziale perché un utente, magari non vedente, potrebbe aspettarsi che si trovi proprio nei collegamenti introduttivi. Anche la parte di Accesso Rapido oltre ad essere resa accessibile dovrebbe essere collocata nei primissimi collegamenti della barra di navigazione. La sezione ricerche presenta un campo Rubrica che un utente nuovo del sito può non riuscire ad intendere a cosa si riferisca: essendo un servizio per il personale ma anche per gli studenti lo si potrebbe inserire nella sezione di Accesso Rapido. La stessa cosa vale per l accesso alla intranet. In particolare per la pagina secondaria si nota che nella colonna sinistra è presente un menù della stessa tipologia di Accesso Rapido che potrebbe essere del tutto eliminato in quanto replica uno per uno tutti i collegamenti presenti nel corpo principale della pagina. Manca, infine, un collegamento di ritorno alla pagina iniziale del sito. 4. Riparazione Viste le barriere all accessibilità presentate dalle pagine del sito in esame e soprattutto le violazioni dei Punti di Controllo riscontrate, si può evincere che esse non sono conformi al livello 2 di priorità delle WCAG 1.0 scelto come obiettivo. Per procedere alla riparazione si potrebbe pensare di correggere una per una ogni violazione riscontrata servendosi delle tecniche esposte in precedenza. La cosa però è poco fattibile perché le pagine sono state progettate talmente al di fuori dall ottica dell accessibilità che certe mancanze non possono essere corrette se non con la loro ri-progettazione ex novo. Questa cosa è tanto più vera se si tiene conto dell usabilità: intere sezioni dovrebbero essere spostate oppure eliminate del tutto, per cui è più semplice riscrivere tutto il codice alla luce delle tecniche per la riparazione delle violazioni riscontrate piuttosto che correggerle una per una. I parametri di progetto ulteriori che si sono cercati di soddisfare riguardano il mantenimento per quanto possibile della stessa veste grafica, impaginazione, delle stesse immagini e degli stessi colori.

101 Cap. 5 Caso di Studio La pagina iniziale Nell ottica della separazione tra struttura del documento e presentazione, la pagina iniziale è stata ricreata dividendola in tre blocchi principali: una intestazione, un corpo e un piè di pagina. Il corpo a sua volta è stato suddiviso in tre colonne che rappresentano rispettivamente la colonna sinistra, centrale e destra. Tutti questi elementi sono dei contenitori (è stato usato l elemento div) che racchiudono al loro interno gli altri elementi della pagina. HTML <div id="testa">...</div> <hr> <div id="corpo"> <div id="colonna1">...</div> <hr> <div id="colonna2">...</div> <hr> <div id="colonna3">...</div> </div> <hr> <div id="piedipagina">...</div> La disposizione di questi contenitori all interno della pagina è ottenuta tramite foglio di stile. L ordine in cui essi si trovano nel markup, che è anche quello logico dei contenuti che essi racchiudono, fa sì che, anche a livello di presentazione, il corpo segua l intestazione e sarà a sua volta seguito dal piè di pagina: basterà soltanto impostarne le larghezze. Per mantenere le stesse immagini del sito originario non si può far altro che usare le unità assolute, anche se a rigore si dovrebbero usare quelle relative. La collocazione delle tre colonne viene realizzata posizionando il corpo in maniera relativa, la colonna sinistra (colonna1) e destra (colonna3) in maniera assoluta, rispettivamente in alto a sinistra e in alto a destra all interno del corpo, mentre per la colonna centrale (colonna2), che si sovrapporrebbe ad esse per tutta la larghezza dello schermo, basta impostare i margini sinistro e destro pari alla larghezza delle due colonne per lasciare che essa si inserisca in mezzo a loro. L altezza generale del corpo sarà determinata da quella della colonna centrale, per questo si inserisce al suo interno dello spazio aggiuntivo (padding-bottom). Si evita così che, in mancanza di contenuti, le colonne laterali possano fuoriuscire dai bordi del corpo. Infine, sono state inserite delle linee orizzontali (hr) che non appaiono nella versione grafica della pagina, ma, quando il foglio di stile è disabilitato, rendono l idea di separazione logica dei contenuti. Si sottolinea il fatto che in questa situazione o quando i fogli di stile non sono supportati, i contenuti sono esposti nella sequenza che essi hanno nel codice HTML che è anche quella logica del documento, non generando di fatto alcun tipo di confusione all utente. CSS #testa { width:770px; margin:1em auto; text-align:left; } #testa {

102 Cap. 5 Caso di Studio 100 background:#ffffff; border:1px solid #000; } hr {display:none;} #colonna1 { position:absolute; top:0; left:0; width:140px;}... #colonna2 { margin:0 110px 0 140px; border-left:1px solid #000; border-right:1px solid #000; background:#fff; padding-bottom:1em ; }... #corpo { width:770px;margin:1em auto;text-align:left; } #corpo { position:relative; background:#fff; border:1px solid #000; } body { text-align:center; font:80% arial,helvetica,sans-serif; margin:0;padding:0; } #colonna3 { position:absolute; top:0; right:0; width:110px; }... #piedipagina { width:770px; margin:1em auto; text-align:left; } #piedipagina { background:#fff; border:1px solid #000; } Come si può notare questa nuova versione non utilizza assolutamente le tabelle a scopo di impaginazione evitando così qualsiasi problema relativo alla loro linearizzazione da parte di tecnologie assistive o di browser vocali. All interno dell intestazione viene inserito il logo dell Università e una barra di navigazione con collegamenti all indice del sito, alla pagina di benvenuto, alla versione inglese oltre a due completamente nuovi che puntano alle pagine di Accesso Rapido e Tasti di scelta delle quali si darà in seguito una descrizione. L importanza di mettere la barra di

103 Cap. 5 Caso di Studio 101 navigazione proprio in quel punto è data dal fatto che essa si trova all inizio del codice e i suoi collegamenti saranno sempre e comunque i primi ad essere presentati da un browser testuale (che non usa i fogli di stile) oppure ad essere pronunciati da uno vocale. Vengono altresì forniti dei collegamenti di salto alle sezioni successive che risultano invisibili ad un interprete grafico, ma che sono molto utili per chi vuole evitare di dover ascoltare tutta una serie di collegamenti prima di arrivare a quello che cerca. Tutti gli effetti grafici di presentazione, come la grandezza e lo stile dei font, i colori di primo piano e sfondo o i loro cambiamenti al passaggio del mouse sono stati gestiti tramite CSS. HTML <div id="testa"> <div class="banner"> <img alt="logo del Politecnico di Torino" src="banner_home_653.gif" width="653" height="78"> </div> <div class="navbar"> <span class="invisibile"><a href="#contgenerali" title="salto dei collegamenti di navigazione">salto ai Contenuti Generali del Sito</a> </span> <span class="invisibile"><a href="#poligeneric" title="salto dei collegamenti di accesso rapido e introduttivi">salto alle strutture</a> </span>... <a class="nvb" title="accesso rapido ai Servizi per gli Studenti, i Docenti e il Personale dell'ateneo" accesskey="a" href="accesso.html">accesso rapido</a> <a class="nvb" title="benvenuto del Rettore" href="benv.html">benvenuto</a>... </div> <!--Fine testa--> </div> CSS #testa.banner{text-align:center;border-bottom:1px solid #ccc;} #testa.navbar{text-align: center;margin:0.5em auto;} a.nvb{color:#0084c9;font-size:1.1em; font-family:arial,helvetica,sans-serif;font-weight:bold;} a.nvb:visited{color:#636;} a.nvb:hover{color:#900;background:#ffc;text-decoration:none;} a.nvb:active{color:#048;background:#ffc;text-decoration:none;}.invisibile,.invisibile a,.invisibile h3{display:none; background:#fff;color:#fff;} La colonna di sinistra (colonna1) è stata mantenuta praticamente identica a quella originale, tranne per la sezione ricerche che è stata spostata alla colonna di destra, non è stato

104 Cap. 5 Caso di Studio 102 utilizzato codice javascript per effetti grafici, bensì soltanto CSS, e le liste sono state marcate propriamente e non con immagini come indicatori delle varie voci. Si evita così di utilizzare degli attributi alt vuoti e gli interpreti vocali possono capire che si tratta di entità tutte dello stesso tipo e impostare di conseguenza il tono della voce. Anche qui ogni elemento è stato inserito all interno di contenitori div, utili per impostare colori di sfondo, margini e allineamento: sarà questa una pratica comune a tutto il progetto vista la versatilità con cui essi possono essere impiegati. HTML <div id="corpo"> <div id="colonna1"> <div class="sfgrigio"> <a name="poligeneric" id="poligeneric"></a> <h1 class="invisibile">struttura dell'ateneo</h1> <p class="invisibile"><a href="#poliofferta" title="salto dei collegamenti sulla struttura dell'ateneo">salto all'offerta formativa</a></p> <p class="prima"><a class="prima" title="maggiori dettagli sulle principali figure di Governo dell'ateneo" href="gov.html">organi di Governo</a></p> <p class="prima"><a class="prima" title="facolt&#224 di Architettura,Ingegneria e Scuole di Specializzazione del Politecnico" href="fac.html">facolt&#224 e Scuole</a></p>... </div> <hr> <div class="sfgiallo"> <a name="poliofferta" id="poliofferta"></a> <h1 class="invisibile">offerta Formativa</h1> <ul class="sfgiallo">... <li class="seconda"><a class="seconda" title="sito del Servizio Bibliotecario di Architettura e Ingegneria" href="biblio.html">biblioteche</a></li> <li class="seconda"><a class="seconda" title="i Corsi da poter frequentare, le Lauree da scegliere" href="corsi.html">offerta<br> Formativa</a></li>... </ul></div>... CSS div.sfgrigio{padding:0.1em;background:#f0f0f0;} p.prima{margin:0.1em;} a.prima{display:block; text-decoration:none; font-weight:bold; font-family:arial,helvetica,sans-serif;font-size:1em;color:#808080;} a.prima:visited{color:#636;} a.prima:hover{background:#808080;color:#fff;}

105 Cap. 5 Caso di Studio 103 a.prima:active{background:#ffc;color:#048;} div.sfgiallo{padding:0.1em; background:#fee797; border-top:1px solid #fdb302;} ul.sfgiallo, ul.sfazzurro{margin:0.5em 0.3em ; padding-left:1.1em; list-style-type:square;} li.seconda,li.terza{margin:0;padding:0.1em;} a.seconda,a.terza{display:block; text-decoration:none; font-family:arial, helvetica, sans-serif; font-size:1em;color:#000;} a.seconda:visited,a.terza:visited{color:#636;} a.seconda:hover,a.terza:hover{background:#fff;} a.seconda:active,a.terza:active{background:#ffc;} La colonna centrale (colonna2) rimane identica e gli effetti di movimento sono realizzati interamente con CSS. L immagine sensibile diventa adesso gestibile totalmente presso il client: non c è bisogno di inviare al server l indicazione di passaggio del mouse sopra le varie zone per ricevere poi le nuove immagini da utilizzare come sfondo. Esse vengono scaricate una volta per tutte alla richiesta di invio della pagina. Inoltre si ottiene anche il vantaggio di rendere il tutto indipendente da dispositivo in quanto il movimento può essere attivato anche tramite tastiera usando il tasto TAB attraverso tutti i collegamenti che l immagine contiene. Tuttavia per renderla accessibile si dovrebbero a rigore fornire dei collegamenti testuali ridondanti. Ma non trattandosi di una immagine unica bensì di quattro distinte, con aree sensibili coincidenti con ognuna di esse e visto che le immagini caricate con il movimento forniscono una informazione esplicativa dei collegamenti solamente di tipo testuale, si è pensato di fornire la stessa frase come testo alternativo per ogni immagine e come titolo del collegamento ad essa associato. La resa grafica non cambia mentre con LYNX ed Home Page Reader non si generano confusioni per l utente che li utilizza ne esso viene tagliato fuori dalla fruizione di alcun contenuto. Questa soluzione non può essere assunta come pratica generale, ma è stata dedotta dalla conoscenza delle Linee Guida proposte dal W3C e soprattutto dallo scopo che con esse si vuole raggiungere, cioè l accessibilità ai contenuti Web: per questo motivo ed in questo contesto essa può essere ritenuta valida. Per affiancare le varie immagini al fine di formare quella unica, non utilizzando tabelle, si è ricorsi alla proprietà CSS float che permette di far scorrere i contenuti seguenti l elemento a cui essa è applicata, dalla parte indicata dal suo valore. Nel caso in esame si è impostato per le immagini componenti il valore float:left cosicché ognuna di esse ha potuto affiancare la precedente ottenendo l effetto voluto. Per non permettere, infine, che anche gli elementi successivi si comportino alla stessa maniera delle immagini si sceglie di inserire un div vuoto con la proprietà clear:left. HTML <div id="colonna2">... <div id="scoprire"><a href="at.html" title="chi siamo, la nostra Organizzazione i Rapporti con le Universit&#224 Estere e molto altro sull'ateneo" accesskey="s"><img class="colori" src="scoprire.jpg" width="130" height="228" alt="chi siamo, la nostra Organizzazione, i Rapporti con le Universit&#224 Estere e molto altro sull'ateneo"></a></div> <div id="didattica"><a href="collaps.html" title="i Corsi offerti, le iscrizioni, i costi, i servizi di sostegno, le Lauree e la Qualit&#224 Della Didattica" accesskey="d"><img class="colori"

106 Cap. 5 Caso di Studio 104 alt="i Corsi offerti, le iscrizioni, i costi, i servizi di sostegno, le Lauree e la Qualit&#224 Della Didattica" src="didattica.jpg" width="129" height="228"></a></div>... <!--div vuoto per risoluzione della proprietà float--> <div style="clear:left;"></div> <div class="radici"><img class="colori" alt="slogan del Politecnico:LE RADICI DEL FUTURO" src="radici1.jpeg"></div>... CSS #scoprire {margin:0;width:130px;height:228px;float:left;} #scoprire a { display:block; position:absolute;width:130px;height:228px; } #scoprire a:hover img, #scoprire a:active img { display:none } #scoprire a:hover, #scoprire a:active { height:228px;width:130px; background:url(scoprire1.gif); } #didattica{margin:0;width:129px;height:228px;float:left;} #didattica a { display:block; position:absolute;width:129px;height:228px; } #didattica a:hover img, #didattica a:active img { display:none } #didattica a:hover, #didattica a:active { height:228px;width:129px; background:url(didattica1.gif); } La sezione sulle notizie è stata modificata inserendo elementi di intestazione che forniscono una struttura al documento a beneficio della resa vocale, testuale e in generale di quella con fogli di stile disabilitati. La resa grafica però non cambia, salvo per il fatto che le varie voci sono state messe una di seguito all altra e non affiancate, come nella versione originale, proprio per evitare problemi di linearizzazione della tabella in cui le notizie erano inserite. A vantaggio dell usabilità il collegamento alle notizie meno recenti è stato spostato più logicamente in fondo alla sezione. HTML <div class="news"><h2 class="newstit">news ed Eventi</h2></div>... <div class="notizia">

107 Cap. 5 Caso di Studio 105 <h3><a href="n1.html" title="leggi LA NOTIZIA">Preiscrizioni Ministeriali</a></h3> <h4>3 febbraio - 4 marzo 2003</h4> Sono aperte le preiscrizioni on-line sul sito del <acronym title="ministero dell'istruzione dell'università e della Ricerca">MIUR</acronym> </div>... <div class="altre"> <a class="past" href="past.html" title="sezione sulle notizie meno recenti">notizie Passate...</a> </div> </div><!--fine colonna 2--> CSS div.news{padding-left:0.3em;texttransform:uppercase;background:#f0f0f0;color:#0084c9;} h1{margin:0;font-family:arial,helvetica,sans-serif; font-size:1em;font-weight:bold;} h2.newstit{margin:0;font-family:arial,helvetica,sans-serif; font-size:1em;font-weight:bold;} div.notizia{padding-left:0.3em;} h3{margin-bottom:0.1em;font-family:arial,helvetica,sans-serif; font-size:1.3em;color:#0084c9;} h4{margin-top:0.1em;font-family:arial,helvetica,sans-serif; font-size:1em;color:#000;} h3 a{color:#0084c9;} h3 a:visited{color:#636;} h3 a:hover{color:#900;background:#ffc;text-decoration:none;} h3 a:active{color:#048;background:#ffc;text-decoration:none;} div.altre{padding:0.3em;text-align:left; font-family:arial,helvetica,sans-serif;font-size:1.3em;} a.past{color:#0000ff;} a.past:visited{color:#636;} a.past:hover{color:#900;background:#ffc;text-decoration:none;} a.past:active{color:#048;background:#ffc;text-decoration:none;} La colonna destra (colonna3) contiene adesso la sezione delle ricerche in cui è stato eliminato il campo rubrica che si può inserire nella pagina dei servizi di accesso rapido. La sezione su Politecnico e territorio è rimasta immutata salvo il fatto che è stata eliminata la presentazione di fotografie delle varie sedi dell Università in contemporanea al passaggio del mouse sul loro nome perché crea del movimento in un altra area diversa da quella del collegamento che potrebbe distrarre chi ha deficit nella capacità di concentrazione o di tipo cognitivo. Si sono di seguito inseriti collegamenti agli indirizzi delle strutture, alla pagina dei contatti e delle risorse correlate, eliminando del tutto l accesso alla intranet che può essere messo nella pagina dei servizi per il personale. Il piè di pagina è stato mantenuto identico alla versione originale con il solo collegamento alla pagina dei contatti spostato in fondo alla colonna di destra. HTML <div id="colonna3">

108 Cap. 5 Caso di Studio <div class="cerca"><h1>cerca</h1></div> <form method="get" action=" <div class="modulo"> <label for="formpoli" accesskey="c">ricerca di:</label> <input type="text" id="formpoli" size="9" name="q" value="universit&#224"><input type="hidden" name="ps" value="10"><br><input type="submit" value="go" name="go"> </div></form> <hr>... <div class="territorio"><h1>il Politecnico nel Territorio</h1></div>... <div class="sfsedi"> <p class="sedipoli"><a class="sedipoli" href="to.html" title="notizie sulla sede di Torino">Torino</a></p> <p class="sedipoli"><a class="sedipoli" href="al.html" title="notizie sulla sede di Alessandria">Alessandria</a></p>... <div class="lutili"><a class="utili" href="ind.html" title="indirizzi delle Strutture dell'ateneo">indirizzi</a></div> <div class="lutili"><a class="utili" href="wr.html" title="pagina con tutti gli indirizzi a cui scrivere">contatti</a></div>... <!--Fine colonna3--> </div><!--fine corpo--> </div> <hr> <div id="piedipagina"> <div class="webmaster"><a href="web.html" title="visita il sito del Webmaster"><img class="colori" alt="logo del Webmaster" width="49" height="13" src="poliweb.gif"></a></div> <p class="copyright">&#169 Politecnico di Torino - Corso Duca degli Abruzzi, Torino, ITALY<BR>Giovedi 6 Mar :00:00 CET</p>... CSS div.cerca{text-align:center;texttransform:uppercase;background:#f0f0f0;color:#0084c9;} div.modulo{background:#a0a0a0;text-align:center;} form{margin:0.5em 0;}

109 Cap. 5 Caso di Studio 107 input{margin:0.2em 0;} label{color:#000;} div.territorio{margin:0.1em;textalign:center;background:#f0f0f0;color:#006000;} div.sfsedi{padding:0.1em;background:#d0d0d0;} p.sedipoli{margin:0.1em;padding-bottom:0.1em;} a.sedipoli{display:block; text-decoration:none; font-weight:bold; font-family:arial,helvetica,sans-serif;font-size:1em;color:#000;} a.sedipoli:visited{color:#636;} a.sedipoli:hover{background:#606060;color:#fff;} a.sedipoli:active{background:#ffc;color:#048;} div.lutili{margin:0.3em;border:1px solid #000; text-align:center;background:#e0e0e0;} a.utili{display:block;text-decoration:none; text-transform:uppercase; font-weight:bold; font-family:arial,helvetica,sans-serif;font-size:1em;color:#0000ff;} a.utili:visited{color:#636;} a.utili:hover{color:#900;background:#ffc;text-decoration:none;} a.utili:active{color:#048;background:#ffc;text-decoration:none;} Come si è potuto notare si sono utilizzati i titoli per tutti i collegamenti e il testo alternativo per le immagini. È stata aggiunta la dichiarazione del tipo di documento (è stata utilizzata la strict) e le meta-informazioni. Infine sono stati identificati i cambi nel linguaggio naturale della pagina, sono stati inseriti dei caratteri di default come segnaposto nella casella per l immissione del testo della sezione delle ricerche e sono stati predisposti dei tasti di scelta per attivare i collegamenti principali. Le seguenti righe di codice tratte dalle varie parti della pagina ne sono un esempio. HTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta http-equiv="content-language" content="it"> <meta name="author" content=", amato.carmelo@tiscali.it"> <title>il mio Politecnico di Torino</title> <style type="text/css">@import url("mio.css");</style> </head> <body>... <a class="nvb" title="versione in lingua inglese-english version" accesskey="e" href="en.html" hreflang="en" lang="en">english version</a> </div>...

110 Cap. 5 Caso di Studio 108 Figura 3 Il nuovo aspetto della pagina iniziale Figura 4 La nuova pagina iniziale vista con LYNX

111 Cap. 5 Caso di Studio La pagina secondaria Le modifiche apportate rispetto alla versione originale della pagina riguardano anche qui la separazione tra struttura e presentazione. L intestazione e il piè di pagina sono rimasti sostanzialmente identici a quelli della pagina principale, mentre il corpo della pagina è meno complesso essendo formato solamente da due colonne. La struttura del codice HTML rispecchia quella logica dei contenuti e, al solito, se il foglio di stile usato per l impaginazione viene disabilitato i contenuti sono presentati in maniera ordinata e senza generare ambiguità. Il corpo della pagina è formato da due colonne: quella di sinistra (corpo-colonna1) che contiene collegamenti per la navigazione e quella principale (corpo-colonna2) che porta con se i contenuti principali. La loro collocazione affiancata è ottenuta tramite l utilizzo della proprietà float:left, e per impedire che anche il piè di pagina segua le due colonne si è dovuto impostare per esso la proprietà clear:left. Così facendo si ottiene anche un altro vantaggio: quando si ridimensiona la finestra di visualizzazione, si costringono i contenuti delle colonne a scorrere uno sotto l altro, spingendo il piè di pagina in basso ed evitando la sovrapposizione degli elementi che renderebbe la pagina illeggibile. A differenza della pagina principale, viene utilizzata qui una sola immagine e questo permette di usare le unità relative così da scalare le dimensioni di tutti gli elementi in accordo con quelle impostate nel browser dell utente e senza fare apparire la barra di scorrimento orizzontale della finestra. HTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta http-equiv="content-language" content="it"> <meta name="author" content=", amato.carmelo@tiscali.it"> <style type="text/css">@import url("collaps.css");</style> <title>la NUOVA DIDATTICA</title> </head> <body> <div id="testa">... </div> <div id="corpo-colonna1">...</div> <div id="corpo-colonna2">...</div> <div id="piedipagina">... </div> </body></html> CSS #testa {margin:1em;} #testa {background:#fff; border:1px solid #000;}... #corpo-colonna1{width:20%;float:left;}... #corpo-colonna2 {width:80%;float:left;background:#fff;} body {font:80% arial,helvetica,sans-serif; margin:0; padding:0;}...

112 Cap. 5 Caso di Studio 110 #piedipagina {margin:1em;clear:left;} #piedipagina {background:#eee; border:1px solid #000; } Nell intestazione è stata creata la barra di navigazione con le stesse modalità di quelle della pagina principale, in più è stato inserito un primo collegamento di ritorno alla pagina iniziale (Home Page) inesistente nell originale. I collegamenti di salto invisibili agli interpreti grafici ma utili a quelli vocali o testuali, i cambi nel linguaggio naturale e i tasti di scelta rapida sono stati forniti oltre che per la barra di navigazione anche per il resto della pagina. HTML... <div class="navbar"> <span class="invisibile"><a href="#contpage" title="salto dei collegamenti di navigazione">salto al Contenuto principale della Pagina</a> </span> <span class="invisibile"><a href="#poligeneric" title="salto dei collegamenti di accesso rapido e introduttivi">salto ai contenuti Generali del Sito</a> </span> <a class="nvb" title="ritorna alla Pagina Iniziale" accesskey="h" href="il_mio_politecnico.html" lang="en">home</a> <a class="nvb" title="accesso rapido ai servizi" accesskey="a" href="accesso.html">accesso rapido</a>... Nella colonna sinistra è stato eliminato il menù di collegamenti identici a quelli presenti nel corpo principale della pagina, ma si sono inseriti qui i collegamenti ai contenuti generali del sito che prima si trovavano nell intestazione. I titoli di questi collegamenti sono gli stessi di quelli che essi hanno nella pagina iniziale per permettere all utente di rimanere orientato attraverso i contenuti. L effetto che si vuole rendere è quello che ha il loro colore (sempre lo stesso in tutte le pagine) per un utente che non ha disabilità visive o nella percezione dei colori. Non è stato utilizzato javascript per ottenere effetti grafici bensì CSS. La lista dei collegamenti utili è stata gestita correttamente e senza l uso di immagini come indicatori degli elementi, mentre la sezione ricerche presente adesso a sinistra è identica a quella della pagina iniziale. HTML... <div id="corpo-colonna1"> <a name="poligeneric" id="poligeneric"></a> <h1 class="invisibile">contenuti Generali del Sito</h1> <div class="invisibile"><a href="#coluti" title="salto dei contenuti Generali">Salto ai collegamenti Utili</a></div> <div class="scoprire"><a class="navsx" href="at.html" title="chi siamo, la nostra Organizzazione i Rapporti con le Universit&#224 Estere e molto altro sull'ateneo" accessekey="s">l'ateneo</a> </div> <div class="didattica"><a class="navsx" href="collaps.html" title="i

113 Cap. 5 Caso di Studio Corsi offerti, le iscrizioni, i costi, i servizi di sostegno, le Lauree e la Qualit&#224 Della Didattica" accesskey="d">la Didattica</a></div> <div class="sfgiallo"> <h1 class="invisibile">collegamenti Utili</h1> <ul class="sfgiallo"> <li class="invisibile"><a href="#polimodulo" title="salto dei collegamenti utili">salto alla sezione Ricerche</a></li> <li class="seconda"><a class="seconda" title="portale Individuale per i servizi agli Studenti" href="port.html">portale della Didattica</a></li> <li class="seconda"><a class="seconda" title="sito del Servizio Bibliotecario di Architettura e Ingegneria" href="biblio.html">biblioteche</a></li> <li class="seconda"><a class="seconda" title="ente per il Diritto allo Studio Universitario" href="edisu.html"><abbr title="ente per il Diritto allo Studio Universitario">E.DI.S.U.</a></li>... CSS... div.scoprire{margin:0.1em 0.3em 0.3em;background:#0084c2; border:1px solid #000;text-align:center;} div.didattica{margin:0.3em;background:#fdb302; border:1px solid #000;text-align:center;} div.ricerca{margin:0.3em;background:#c71444; border:1px solid #000;text-align:center;} div.imprese{margin:0.3em;background:#6907a5; border:1px solid #000;text-align:center;} a.navsx{display:block;color:#fff;text-decoration:none; font-size:1em;text-transform:uppercase;font-weight:bold;} a.navsx:hover,a.navsx:active{background:#fff; color:#000;display:block;}... Il corpo principale (corpo-colonna2) porta al suo interno tre altri contenitori (div) che permettono di collocare nella pagina la fotografia centrale e i due elenchi di collegamenti che ne sono il contenuto principale. Per permettere a questi elementi di rimanere affiancati l uno all altro viene di nuovo utilizzata la proprietà float, che come già detto permette anche lo scorrimento dei contenuti nel caso di ridimensionamento della finestra. HTML <div id="corpo-colonna2"> <a name="contpage" id="contpage"></a> <div class="box">

114 Cap. 5 Caso di Studio 112 <div class="titolo"><h1 class="subtit">la didattica e gli studenti</h1></div> <div class="foto"> <img class="dalto" width="160" height="540" alt="immagine con Studenti" src="studiare_sez3.jpeg"> </div> <div class="elenco1"> <h2 class="tit">cosa Studiare</h2>... </div> <div class="elenco2"> <a name="stud" id="stud"></a> <h2 class="tit">studiare al Politecnico</h2>... </div></div></div>... CSS div.box{margin-bottom: 1em;} div.foto{float:left;} div.elenco1{float:left;text-align:left;margin-right:2em;width:33%;} div.elenco2{text-align:left;} h2.tit{text-align:left;margin:1em 0;padding-left:0.2em; font-family:arial,helvetica,sans-serif; text-transform:uppercase; font-size:1em;color:#000;} Anche qui gli effetti, i colori, gli sfondi e le dimensioni dei caratteri sono stati ottenuti tramite foglio di stile associato; sono stati inseriti i metadati, la dichiarazione del tipo di documento (si utilizza sempre quella di tipo strict ) e tutte le altre caratteristiche di accessibiltà già presenti nella pagina iniziale. Figura 5 La nuova pagina secondaria

115 Cap. 5 Caso di Studio Le pagine nuove Sono state create due nuove pagine: Accesso rapido ai servizi e Tasti di scelta. La loro struttura è la stessa della pagina secondaria di cui ne riprendono tutte le peculiarità e in conseguenza di ciò anche il foglio di stile ad esse associato rimane uguale. I cambiamenti si riscontrano invece nei contenuti principali. Nella prima si trova un elenco di collegamenti ai vari servizi per studenti, docenti e personale. I collegamenti di salto sono stati organizzati in maniera tale che anche un utente che utilizza un browser vocale o testuale può accedere a uno qualsiasi dei servizi partendo dalla pagina principale ed eseguendo soltanto due salti come farebbe chi utilizza un browser ad interfaccia grafica. HTML... <div class="navbar"> <span class="invisibile"><a href="#studenti" title="salto dei collegamenti introduttivi">salto ai Servizi per gli studenti</a> </span> <span class="invisibile"><a href="#docenti" title="salto dei servizi per gli Studenti">Salto ai Servizi per i Docenti</a> </span> <span class="invisibile"><a href="#personale" title="salto dei Servizi per i Docenti">Salto ai Servizi per il Personale</a> </span>...</div> Nella seconda viene fornita una spiegazione sui tasti di scelta rapida, su come attivarli e su quelli utilizzati nel sito in esame. Il resto è perfettamente identico alla pagina secondaria. Figura 6 La pagina di accesso rapido

116 Cap. 5 Caso di Studio 114 Figura 7 La pagina sui tasti di scelta 5. I CSS per la stampa Nei fogli di stile associati con le pagine HTML sono state previste delle sezioni che definiscono le regole da applicare nella stampa delle pagine. Tenendo in considerazione il fatto che un utente vuole, probabilmente, stampare le pagine per i loro contenuti più che per le loro immagini, si è deciso di non includere queste ultime nella stampa. Per questo nel codice CSS si sono impostate le proprietà display:none. Per migliorare poi il contrasto di alcuni elementi, qualora la pagina fosse stampata in bianco e nero, si sono definiti nuovamente i loro colori di primo piano e di sfondo. print{ #scoprire,#didattica,#ricerca,#imprese,div.radici{display:none;} #colonna2{height:40em;;padding-left:1.5em;;border:none;} #corpo{width:50em;border:none;} #testa,#piedipagina{border:none;width:50em;} #testa.banner{border:none;} div.news, div.cerca, a.prima{color:#000;} print{#testa{border:none;} #piedipagina{display:none;} div.elenco1 {padding-bottom:9em;} p.tsr{width:95%;} h1.subtit, h2.tit{color:#000;background:#fff;} a.navsx{color:#000;background:#fff;} }

117 Cap. 5 Caso di Studio Validazione Per validare il lavoro fatto si applicano le tecniche descritte precedentemente nel capitolo dedicato alle metodologie utilizzate per stabilire il livello di conformità di un dato sito. Infatti anche qui si ha una validazione di tipo automatica e una di tipo manuale atta a simulare i vari scenari utente. Per le pagine realizzate il validatore HTML non riscontra alcun tipo di errore; stesso risultato si ottiene con il validatore CSS a parte i soliti avvisi sulla definizione dei colori di sfondo e primo piano che come detto prima possono non essere segnale di errore. A-PROMPT e WAVE non segnalano adesso nessun problema salvo i soliti controlli di tipo manuale che consigliano comunque di eseguire. La validazione manuale non presenta alcun tipo di violazione visto che già in fase di progetto si sono eseguite le sue procedure a scopo di debug oppure per vedere se le particolari soluzioni implementate risultavano efficaci se viste con schermi piccoli, a bassa risoluzione, in bianco e nero oppure senza fogli di stile applicati come tramite browser vocali o testuali. L unica nota da fare alle pagine realizzate è la seguente: avendo scelto di utilizzare le immagini presenti nel sito originale, perché tutto funzionasse correttamente, si sono dovute utilizzare per il corpo della pagina iniziale le unità assolute anziché relative violando il Punto 5 per il livello 2. Ciò comporta che si può visualizzare la pagina per intero con una risoluzione minima di 800X600 pixel, mentre con una risoluzione maggiore la pagina non si ingrandisce. Al contrario se la finestra di visualizzazione viene ridotta o la risoluzione dello schermo abbassata, si ha la comparsa della barra di scorrimento orizzontale. Il problema può essere superato non utilizzando quelle immagini, visto che comunque il loro effetto è poco più che decorativo, oppure più elegantemente, usandone altre in un formato che possa essere scalato in accordo alle dimensioni della finestra. Nella pagina secondaria invece, vista la presenza di una sola immagine si è potuto rendere tutto tramite le unità relative evitando anche questo problema. Le pagine realizzate sono state testate con successo con i browser IE6, Mozilla 1.2.1, Opera 7.0 e Netscape 7.0, tutti su sistema operativo Windows 98, con IE6 su Windows XP e con IE5 su Windows Il testo si può ingrandire fino al 150% della grandezza originale e la pagina rimane ancora leggibile. Avendo superato i test di validazione sia automatici che manuali, si possono includere nelle pagine le icone di conformità ad HTML, CSS e al secondo livello di priorità delle Linee Guida come da obiettivo.

118 Cap. 5 Caso di Studio 116 Figura 8 Le icone di conformità in fondo alle pagine