Linee Guida per realizzare siti e applicazioni web accessibili per la Regione Emilia-Romagna

Transcript

1

2 2

3 Linee Guida per realizzare siti ed applicazioni web accessibili per la Regione Emilia-Romagna Sezione per Tecnici Questa versione ridotta delle Linee Guida, viene conservata come memoria storica in quanto alcune indicazioni risultano ancora utili per realizzare siti accessibili ultimo aggiornamento 31 marzo

4 Copyright Le presenti Linee Guida per realizzare siti ed applicazioni web accessibili per la Regione Emilia- Romagna sono rilasciate sotto licenza Creative Commons 2.5 Share Alike (Attribuzione - Non commerciale - Condividi allo stesso modo) I suoi contenuti possono pertanto essere riprodotti, distribuiti, comunicati, esposti, rappresentati e modificati, alle seguenti condizioni: devi citare la fonte Regione Emilia-Romagna e l URL non puoi usare quest'opera per fini commerciali; se alteri o trasformi quest'opera, o se la usi per crearne un'altra, puoi distribuire l'opera risultante solo con una licenza identica o equivalente a questa. In ogni caso, puoi concordare col titolare dei diritti utilizzi di quest'opera non consentiti da questa licenza. Ti chiediamo di informarci sull utilizzo che viene fatto delle presenti Linee Guida e di inviarci eventuali versioni modificate, scrivendo a webmaster@regione.emilia-romagna.it Se rilevi inesattezze oppure hai suggerimenti e integrazioni, puoi scrivere a webmaster@regione.emilia-romagna.it Un riassunto della licenza si trova su mentre il testo integrale è 4

5 PREMESSA La pubblicazione in forma cartacea di queste Linee Guida, nasce con l intenzione di condividere l esperienza di anni nella gestione e pubblicazione del portale della Regione Emilia-Romagna e di tutti i siti web ad esso collegato. Lo scopo è quello di offrire un supporto a 360 per tutte le figure coinvolte nella pubblicazione di contenuti Web. Le indicazioni in queste linee guida dovranno guidare lo sviluppo dei futuri progetti sul web della Regione e, dove necessario, provocare un adeguamento dei progetti esistenti per ottenere una qualità omogenea per tutti i contenuti e i servizi web offerti dalla Regione. Questo documento in particolare è solo un estratto del documento più completo, non più reperibile in linea 5

6 A CHI SONO RIVOLTE Ai RESPONSABILI dei siti web regionali I responsabili di progetti web regionali o persone delegate da questi ad occuparsene troveranno una descrizione del progetto visto "da dentro" con indicazione delle normative da rispettare, di chi si occupa e di cosa, di quali servizi possono richiedere per il loro sito (statistiche, newsletter, forum, ecc.) e come richiederli, nonché di quali sono le loro responsabilità (l aggiornamento tempestivo, la qualità dei contenuti, la privacy ecc.). Ai REDATTORI dei contenuti e responsabili della pubblicazione: Ai collaboratori regionali e non, che si occupano materialmente dell'aggiornamento dei contenuti del sito sono indirizzati consigli e suggerimenti pratici per un corretto inserimento dei contenuti, indicazioni di persone a cui rivolgersi per problemi e indicazioni sull accessibilità dei contenuti (linguaggio da usare, impostazione delle pagine, ecc.). Ai TECNICI sviluppatori di siti e portali regionali: A chi si occupa della creazione di pagine per la Regione (collaboratori regionali dei vari settori ma anche collaboratori esterni incaricati) vengono fornite tutte le indicazioni tecniche operative per il corretto sviluppo delle pagine del sito. In questa versione viene data l indicazione chiara di quali siano: i requisiti richiesti, gli esempi da seguire, le verifiche da fare. La prima sezione di queste linee guida contiene argomenti generali che potrebbero essere utili a tutti, nonostante lo sforzo fatto in tutto il testo per adattare il linguaggio ed i contenuti ai diversi destinatari, questa parte potrebbe contenere ancora dei paragrafi piuttosto tecnici. 6

7 INDICE Per Tutti...9 Accessibilità Usabilità Fattori di usabilità Progettare per l utente Vantaggi dell usabilità Principi di usabilità Per i Tecnici...17 Pagine (X)HTML Frames Fogli di stile CSS Colori Testo Immagini Mappe Immagine Link Menù e liste Tabelle Tabelle di dati Tabelle di layout Form Multimedia Script, applet e plug-in Appendici...49 Checklist per l'usabilità Checklist per siti ed applicazioni Riepilogo dei requisiti Riepilogo delle verifiche

8 8

9 PER TUTTI 9

10 10

11 ACCESSIBILITÀ Con il termine accessibilità si intende la caratteristica di un sito web di rendere possibile l'accesso ai suoi contenuti a tutti gli utenti, indipendentemente dalla presenza di disabilità (fisiche, sensoriali, cognitive) o dalle dotazioni hardware e software. L'accessibilità quindi non riguarda solo le persone disabili, ma poiché per esse è una qualità fondamentale, esiste una legge specifica che tutela i loro diritti. Una pubblica amministrazione deve realizzare siti accessibili: il punto di riferimento normativo è la legge n. 4 del 9 Gennaio 2004 La Legge impone che: - l'accessibilità sia richiesta esplicitamente e sia un requisito necessario per siti, CD-Rom o applicazioni (anche per uso interno su reti locali) se realizzati con tecnologie Web; - l'accessibilità sia considerata come fattore preferenziale (compatibilmente col bilancio) nella fornitura di qualsiasi altro materiale informatico (hardware o software non basato su tecnologie Web). La legge sull'accessibilità La Legge 4/2004 obbliga a inserire nei contratti che si stipulano con i fornitori di servizi Web (siti, applicazioni o CD-ROM) una clausola per il rispetto dei principi di accessibilità, in caso contrario è previsto l annullamento del contratto e si incorre in responsabilità dirigenziali e disciplinari. Quindi se si sottoscrive un contratto per un prodotto Web per la Regione Emilia- Romagna, occorre una clausola di questo tipo: "La realizzazione/modifica/fornitura del sito/applicazione/prodotto/servizio oggetto del contratto dovrà rispondere ai criteri di accessibilità stabiliti dalla Legge 9 Gennaio 2004, n. 4, "Disposizioni per favorire l'accesso dei soggetti disabili agli strumenti informatici" e successive integrazioni e variazioni, in particolare dal Decreto Ministeriale 8 agosto Allegato A. Il prodotto/servizio fornito dovrà inoltre rispettare le indicazioni esposte nelle Linee Guida per realizzare siti e applicazioni web accessibili per la Regione Emilia-Romagna, nella versione più aggiornata reperibile online all indirizzo: Il rispetto dei requisiti di accessibilità verrà verificato dal cliente all atto della consegna da parte del fornitore, e sarà poi accertato dal competente Servizio attraverso le verifiche preliminari alla presa in carico, prima della messa online del sito e delle applicazioni o di loro modifiche sostanziali. L Amministrazione inoltre si riserva in qualunque momento, su propria iniziativa o su segnalazione di terzi, di effettuare verifiche di accessibilità ed usabilità sui servizi web oggetto del presente contratto resi dal fornitore, il quale dovrà provvedere alla messa a norma di quanto eventualmente riscontrato difforme a seguito di tali verifiche ".. 11

12 I requisiti obbligatori da soddisfare indicati nel Decreto Ministeriale citato, sono 22 per i siti e le applicazioni internet (D.M. 8/8/ Allegato A). Esistono anche 11 requisiti per i sistemi operativi, le applicazioni ed i prodotti da scaffale (D.M. 8/8/ Allegato D). Quando si scrive un contratto o un capitolato tecnico per l acquisto di beni/servizi che riguardano sistemi operativi, applicazioni o prodotti a scaffale è necessario inserire una clausola simile a questa: Il prodotto oggetto del contratto dovrà rispondere ai criteri di accessibilità stabiliti dalla Legge 9 Gennaio 2004, n. 4, "Disposizioni per favorire l'accesso dei soggetti disabili agli strumenti informatici" e successive integrazioni e variazioni, in particolare dal Decreto Ministeriale 8 agosto Allegato D. Il rispetto dei requisiti di accessibilità verrà verificato dal cliente sulla base di quanto dichiarato a tal proposito dal fornitore, e potrà poi essere accertato dal competente Servizio attraverso le verifiche preliminari alla presa in carico. Va anche ricordato che il 1 marzo 2006 è stata introdotta un altra legge per tutelare le persone disabili (Legge 67/2006 "Misure per la tutela giudiziaria delle persone con disabilità vittime di discriminazioni" ): questa norma dà il diritto ad agire, da soli o tramite associazioni, ogni volta che si verifica un comportamento discriminatorio. Quindi se si realizza un prodotto Web non accessibile si discrimina e si è perseguibili per legge. Ne consegue che: anche se non esiste un contratto di fornitura (ad esempio, se si realizza in casa il sito Web) e la legge non preveda sanzioni esplicite, i siti pubblici devono necessariamente essere accessibili. Rendere il proprio sito Web accessibile significa anche: Utilizzare i linguaggi secondo le grammatiche standard ed internazionali, che li definiscono: per ottenere maggiore compatibilità con i vari software; scrivere contenuti che durano nel tempo: perché non più pensati solo per i software attuali; ottenere maggiore visibilità nei motori di ricerca: perché i motori sono basati sugli stessi standard. Raggiungere un buon grado di accessibilità richiede attività che riguardano tutti i soggetti coinvolti: responsabili, redattori e tecnici. Spesso si sente parlare di accessibilità e usabilità in maniera confusa. In effetti per certi versi hanno obiettivi parzialmente sovrapposti ma i metodi di cui dispongono per raggiungerli sono molto diversi: l usabilità si serve di osservazione sistematica e test sugli utenti; per realizzare contenuti web accessibili al maggior numero di persone invece è necessario seguire alcune regole tecniche. Per ottenere siti web di qualità è necessario seguire entrambe le strade, in un processo evolutivo continuo di integrazione fra usabilità e accessibilità. 12

13 USABILITÀ L usabilità secondo la norma ISO 9241 è: "il grado in cui un prodotto può essere usato da particolari utenti per raggiungere certi obiettivi con efficacia, efficienza e soddisfazione, in uno specifico contesto d uso". L usabilità di un sito web è data quindi da una serie di fattori che influiscono sull esperienza che l utente fa navigando nelle sue pagine, interagendo con il sistema. Fattori di usabilità Gli elementi principali che influiscono sull usabilità di un sito, indicati anche nell'allegato B del D.M. della normativa sull'accessibilità, sono: percezione: le informazioni e i comandi necessari per l'esecuzione dell'attività devono essere sempre disponibili e percettibili; comprensibilità: le informazioni e i comandi necessari per l'esecuzione delle attività devono essere facili da capire e da usare; operabilità: informazioni e comandi sono tali da consentire una scelta immediata della azione adeguata per raggiungere l'obiettivo voluto; coerenza: stessi simboli, messaggi e azioni devono avere gli stessi significati in tutto l'ambiente; salvaguardia della salute (safety): indica le caratteristiche che deve possedere l'ambiente per salvaguardare e promuovere il benessere psicofisico dell'utente; sicurezza: indica le caratteristiche che l'ambiente deve possedere per fornire transazioni e dati affidabili, gestiti con adeguati livelli di sicurezza; trasparenza: l'ambiente deve comunicare il suo stato e gli effetti delle azioni compiute. All'utente devono essere comunicate le necessarie informazioni per la corretta valutazione della dinamica dell'ambiente; apprendibilità: indica le caratteristiche che l'ambiente deve possedere per consentire l'apprendimento del suo utilizzo da parte dell'utente in tempi brevi e con minimo sforzo; aiuto e documentazione: fornire funzioni di aiuto come guide in linea e documentazione relative al funzionamento dell'ambiente. Le informazioni di aiuto devono essere facili da trovare e focalizzate sul compito dell'utente; tolleranza agli errori: l'ambiente deve prevenire gli errori e, qualora questi accadano, devono essere forniti appropriati messaggi che indichino chiaramente il problema e le azioni necessarie per recuperarlo; gradevolezza: indica le caratteristiche che l'ambiente deve possedere per favorire e mantenere l'interesse dell'utente; flessibilità: l'ambiente deve tener conto delle preferenze individuali e dei contesti. 13

14 Progettare per l utente Perché questi fattori vengano rispettati, occorre seguire una serie di passaggi: Progettare il sito web tenendo sempre presente quali sono gli obiettivi del sito (chiedersi:"a cosa serve il mio sito?") e quali sono gli utenti che visiteranno il sito (chiedersi:"chi dovrebbe visitare il mio sito?" Si tratta di utenti interni o esterni? Esperti o inesperti? ). Raccogliere i dati dagli utenti per capire cosa gli utenti si aspettano di trovare nel sito, con che frequenza lo visiteranno, come lo utilizzeranno, ecc.. Sviluppare dei prototipi: produrre una prima versione semplificata del sito o di sue parti (senza grafica, in semplice html, o anche solo su carta). Realizzare dei test di usabilità: ad esempio in un tipico test di usabilità l utente compie una varietà di operazioni prestabilite con il prototipo mentre gli osservatori prendono nota di ogni cosa che fa e dice; quindi si analizzano i percorsi che l utente svolge per compiere operazioni, gli errori che commette, quando e dove si sente confuso e frustrato, la velocità con cui compie le operazioni, ecc. Lo scopo del test di usabilità è di scoprire i problemi che l utente può incontrare affinché possano essere risolti prima di avere il prodotto finale. Verificare il sito dopo il termine (analisi statistiche sugli accessi, raccolta di feedback dagli utenti, ecc.). Vantaggi dell usabilità L'usabilità è un elemento molto importante nella progettazione di un sito web, perché influisce sulla quantità di visitatori di un sito. Sembra infatti che il 60% delle persone che cercano una informazione su internet finiscano per rinunciare senza aver trovato l oggetto della loro ricerca. Per lo più non tornano a visitare il sito dove non hanno trovato soddisfazione. Pertanto, l usabilità di un sito dipende da quanto il modo con cui viene progettato coincide con le aspettative dell utente. Progettare un sito web usabile implica evidentemente un certo sforzo, ma sono indubbi i vantaggi che ne conseguono, e principalmente: miglioramento nella qualità del prodotto; riduzione dei tempi di sviluppo; riduzione degli errori; miglioramento dell efficacia; aumento della soddisfazione degli utenti; riduzione dei costi di formazione e assistenza utenti; miglioramento nell immagine dell organizzazione. 14

15 Principi di usabilità I 10 Principi di usabilità definiti da Jakob Nielsen sono i seguenti: Coerenza L utente che naviga fra i documenti non dovrebbe mai chiedersi se parole, immagini, pulsanti, situazioni o azioni diverse hanno lo stesso significato; "situazioni simili" debbono essere coerenti nelle azioni, nella terminologia, nei colori, nello stile, nei caratteri e così via; la coerenza va applicata alla grafica (stessa rappresentazione grafica = stessa informazione o stessa azione), agli effetti (stesso comando = stesso effetto, stessa azione conseguente), alla presentazione (stessa informazione = stessa posizione). Inoltre, ci vuole coerenza anche rispetto agli standard e alle convenzioni: l utente naviga anche in altri siti e deve potersi aspettare di interagire con il nostro sistema come è abituato a fare negli altri (ad es. l utente che vede una frase sottolineata si aspetta che rappresenti un link, pertanto è bene riservare questa rappresentazione per i link). La mancanza di coerenza genera confusione e porta a una perdita di credibilità. Feedback Il sistema deve sempre tenere l utente informato su cosa sta succedendo tramite adeguati feedback che corrispondono ad ogni azione dell utente (es. quando si invia una form il sistema dovrebbe dare un messaggio di "Invio avvenuto" oppure quando si clicca su un link la pagina di destinazione deve avere un titolo che assomigli al titolo del link, ecc.). I feedback devono essere forniti in un tempo ragionevole: dopo un secondo l utente avverte il ritardo nella risposta del sistema, dopo 8 secondi il 50% degli utenti abbandona il sito (per operazioni lunghe quindi è bene mostrare indicatori di "avanzamento" per far sapere all utente che la sua transazione è in corso). Uscite chiaramente indicate Il sistema non deve mai imprigionare l utente in situazioni che non hanno vie d uscita visibili (in alcune pagine potrebbe essere utile avere un ritorno a una pagina precedente o successiva, e in genere alla homepage), né limitare la sua libertà di movimento; l utente deve avere la sensazione di tenere la situazione sotto controllo, deve poter prevedere gli effetti delle proprie azioni (es. avvertire quando il link aprirà una nuova finestra, informare sulle dimensioni di un file prima di scaricarlo, ecc.). Prevenzione degli errori È meglio evitare che un problema si presenti piuttosto che prevedere vari messaggi di errore (prestare molta attenzione alle pagine che prevedono il riempimento di form evidenziando ad esempio i campi obbligatori, non consentendo di digitare caratteri alfanumerici in campi numerici, indicando chiaramente il formato dei campi data o valuta, ecc.) Messaggi d errore semplici In caso di errore, i messaggi debbono essere costruttivi, cioè orientare l utente alla soluzione e non all individuazione di colpe e deve essere data la possibilità di riscrivere solo la parte errata; fornire 15

16 funzionalità di annullamento delle operazioni, come "undo" e "redo" o di ripristino delle condizioni di default. Parlare il linguaggio dell utente Il linguaggio utilizzato a livello di interfaccia deve essere semplice e familiare per l utente e rispecchiare i concetti e la terminologia a lui noti. Ridurre il carico di memoria per l utente È più facile riconoscere una cosa vedendola direttamente piuttosto che recuperarla dalla memoria, pertanto le azioni possibili e i comandi debbono essere chiaramente indicati o facilmente ritrovabili ogni qualvolta sono necessari. Ove possibile, è bene utilizzare il percorso di navigazione, cioè l indicazione sempre presente sulla pagina di quali pagine sono state visitate per arrivare dalla home a quella attuale (ricalcando la struttura dell albero di navigazione). Scorciatoie Spesso le caratteristiche che rendono un sistema facile da imparare infastidiscono l utente esperto; sarebbe utile quindi includere nel sistema anche scorciatoie, tasti o pulsanti che consentano una navigazione più rapida e riducano il numero delle interazioni necessarie (utilizzare ad esempio gli "accesskey", combinazioni di tasti che permettono di saltare direttamente in una determinata posizione della pagina particolarmente utili perché facilitano la navigazione dei non vedenti e di coloro che non usano il mouse). Aspetto gradevole ed essenziale Le interfacce non dovrebbero contenere elementi irrilevanti né ridondanti: ogni informazione superflua in più riduce la visibilità delle informazioni importanti. Limitare le possibilità di scelta offerte all utente: se in una pagina ci sono 50 pulsanti, esiste una sola possibilità su 50 che l utente compia l azione giusta per raggiungere il suo scopo. Fornire aiuti e manuali Normalmente un buon prodotto non dovrebbe aver bisogno di documentazione per essere usato, però in certi casi può essere necessario fornire aiuti in linea o manuali utente: in questo caso è bene fornire informazioni essenziali, semplici e facili da ricercare. 16

17 PER I TECNICI 17

18 18

19 PAGINE (X)HTML Tutti i nuovi siti, applicazioni, modelli di pagina per la Regione Emilia-Romagna devono essere realizzati in XHTML 1.0 Strict o successivi, utilizzando elementi ed attributi in modo conforme alle specifiche, rispettandone l'aspetto semantico. Per siti ed applicazioni già esistenti è ammesso l'uso di HTML o XHTML Transitional a patto che si eviti di utilizzare, all interno del linguaggio a marcatori con il quale la pagina è realizzata, elementi ed attributi per definirne le caratteristiche di presentazione della pagina (per esempio, caratteristiche dei caratteri del testo, colori del testo stesso e dello sfondo, ecc.), ricorrendo invece ai Fogli di Stile CSS per ottenere lo stesso effetto grafico. Si richiede di rispettare tutte le specifiche W3C anche per particolari tipologie di contenuti (MathML, SVG, ecc.). Requisiti delle pagine (X)HTML TUTTE le pagine devono avere codice valido (almeno XHTML 1.0 Strict per le nuove realizzazioni). Definire la lingua prevalente della pagina attraverso l attributo LANG del tag HTML: questo è utile sia ai motori di ricerca per che ai più recenti screen readers che possono così impostare automaticamente il sintetizzatore vocale per parlare nella lingua corretta. I codici di lingua più comuni sono: IT per l italiano, EN per l inglese, FR per il francese, ES per lo spagnolo, DE per il tedesco. Ogni pagina deve avere un titolo significativo (non più di 40 caratteri esclusi quelli del nome del sito): che permetta all utente di riconoscere il contesto: se il titolo si compone di più voci, partire sempre dalla più specifica per arrivare alla più generica. Ogni pagina deve avere dei link (anche nascosti) per saltare al contenuto o al menù: questi link si devono trovare subito dopo l'apertura del <body> e possono essere associati a degli accesskey. Sono utili a chi non vede per raggiungere rapidamente punti significativi della pagina. Ogni pagina deve avere un link per tornare alla Home Page: meglio ancora se contiene il percorso di navigazione (la lista dei link alle pagine da attraversare per raggiungere la pagina visualizzata, a partire dalla home page, vedi esempi). Se necessario deve esserci la corretta titolatura dei differenti livelli ed importanza (da h1, il titolo dei contenuti della pagina, ad h6): Un titolo è corretto che preceda un blocco di contenuti (un menù o un paragrafo) ma non che sia un link di un menù; la struttura della pagina è utile ai motori di ricerca ed è utile per navigare i contenuti anche saltando da una intestazione all altra. Tutti (e solo) gli elenchi di elementi devono essere marcati come <ul>, <ol> o <dl>: gli elementi di lista si devono usare solo per elenchi e non per ottenere particolari effetti grafici. Suggerimenti Per facilitare la navigazione è bene che le pagine abbiano tutte la stessa struttura, e che contengano alcuni elementi fondamentali (quali menu, percorso di navigazione, testata ecc.). 19

20 Per migliorare i risultati delle ricerche, si consiglia anche di inserire un sommario del contenuto nel META tag DESCRIPTION (esempio: <meta name="description" content="testo del sommario">). Tenete presente che il sommario viene anche presentato dai alcuni motori di ricerca dopo il TITLE quando espongono i risultati della ricerca. Il motore di ricerca dei siti della Regione è Google, e di norma presenta il testo delle pagine che contiene le parole cercate. Si consiglia di presentare il contenuto principale all inizio della pagina (all inizio del codice sorgente HTML): il sito risulta più fruibile, e inoltre i motori di ricerca danno maggiore evidenza ai contenuti più vicini all inizio della pagina. È buona norma fornire la dicitura completa di acronimi e abbreviazioni. Può essere inserita nel testo della pagina oppure tramite l uso l attributo "title" degli elementi ABBR e ACRONYM. Se all interno del documento si usano termini in una lingua differente (ad es. inglesi) occorre definire la lingua nell'elemento HTML che li contiene, ad esempio usare: <SPAN LANG="EN"> english text </SPAN> (più che altro per termini non di uso comune o frasi). Per quei contenuti che hanno una contestualizzazione temporale (es. bandi con scadenze o segnalazione di eventi) è necessario inserire in ogni pagina la data di ultimo aggiornamento nel formato italiano (es. 4 dicembre 2002); mentre dove è possibile definire un referente, una persona addetta a ricevere segnalazioni e suggerimenti per quell argomento, bisogna indicarne il nome, la , il numero di telefono. Infine, controllate il peso delle vostre pagine: una pagina di 100 kb con un modem a 56 kb si scarica in circa 15 secondi, ma la maggior parte dei navigatori si sofferma su una pagina meno di 10 secondi! Esempi Intestazione dei documenti (X)HTML da utilizzare Per i nuovi siti e applicazioni utilizzare questa intestazione XHTML 1.0 nel documento: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" lang="it" xml:lang="it" > Per le altre DTD fare riferimento al sito W3C. Titolo della pagina I titoli (TITLE) dovrebbero sempre indicare il contenuto, al pari degli H1 nelle pagine. I TITLE se possibile dovrebbero essere brevi. Per questa pagina ad esempio: I documenti (X)HTML - ("Linee guida per siti ed applicazioni Web -") Regione Emilia- Romagna Percorso (detto anche molliche, briciole di pane, breadcrumbs) Se il titolo (H1) segue immediatamente le briciole è corretta questa struttura (usata anche in questo sito): 20

21 (vuoto)/torna a:/percorso: Home > Livello 1 >...> livello precedente Se il titolo non segue immediatamente le molliche di pane: Sei in/percorso/(vuoto): Home > Livello 1 >...> livello precedente > pagina corrente Link nascosti per saltare ai contenuti (skip-link) A seconda della struttura della pagina sono necessari uno o più link per permettere di arrivare rapidamente ad alcuni tipi di contenuti. Gli accesskey più comunemente utilizzati sui siti della Regione sono: h - per il link alla HomePage; k - per saltare la barra di navigazione e andare subito al contenuto principale della pagina; c - per andare al form di Ricerca; n - per saltare al menù principale del sito; Codice HTML da inserire nella pagina: <body> <ul class="skip"> <li><a href="#cerca" Cerca nel sito</a> </li> <li><a href="#contenutopagina" title="salta ai contenuti" accesskey="k">salta ai contenuti</a> </li> <li><a href="#menu" title="salta al menu principale" accesskey="n">salta al menu principale</a> </li> </li>... <form id="ricerca"... <input id="cerca" accesskey="c" name="cerca" type="text" />... Il codice CSS per nasconderli si trova nella sezione Fogli di stile Titoli nella pagina I titoli (H1,..., H6) dovrebbero essere utilizzati per strutturare i contenuti. Per facilitare la navigazione a chi usa gli screen-reader è marcare con delle intestazioni anche i menù. Ecco un esempio:... <h1>titolo del sito (facoltativo e spesso nascosto)</h1>... <h1>titolo pagina (uguale o simile al TITLE)</h1>... <h2>titolo di un paragrafo nel testo</h2> <h3>titolo di un menù</h2> <ul> <li>voce di menù</li>... 21

22 Verifiche sulla struttura delle pagine Per verificare la correttezza del codice XHTML di una pagina consigliamo di utilizzare Mozilla Firefox e l'html Validator attivando entrambi i parser (vedi sezione link). In alternativa si può usare la Web Developer Toolbar Pagine on-line: Tools > Validate HTML Pagine off-line: Tools > Validate local HTML Tutte le verifiche possono essere fatte anche con la barra dell'accessibilità (versione 2.0), controllando: Codice (per pagine on-line): Controlla> Validatore HTML del W3C > Valida l'html Codice (per pagine off-line): Controlla> Validatore HTML WDG> Valida l'html DTD: Informazioni > Visualizza il DOCTYPE Lingua: Informazioni > Visualizza gli attributi LANG Skip-link: Informazioni > Visualizza i link [nuova finestra] oppure da CSS >Disabilita il foglio di stile Accesskey: Struttura> Accesskey Intestazioni: Struttura> Intestazioni oppure da Struttura> Struttura delle intestazioni Liste: Struttura> Elementi di lista Sono possibili analoghe verifiche anche con Opera, di cui però non approfondiremo i dettagli. Frames I frame sono vecchie strutture HTML che stanno sparendo dal Web, perché possono causare alcuni seri problemi di uso: possono non funzionare quando li si raggiunge dai motori di ricerca, può essere assente la navigazione, difficoltosa la stampa, ecc. Requisiti dei frame Non è consentito l uso dei frame (o degli iframe) nella realizzazione di nuovi siti Suggerimenti Per i vecchi siti ed applicazioni quando non è possibile modificare la struttura, è necessario seguire queste indicazioni: Utilizzare l attributo TITLE sia nel tag FRAMESET che nel tag FRAME. Il browser testuale Linx e alcuni screen readers (es. HomePage Reader) utilizzano i titoli per permettere all utente disabile visivo di posizionarsi nel frame desiderato. Jaws permette di spostarsi tra i vari frame con la combinazione di tasti Ctrl-Tab, ma comunque permette di visualizzare la lista dei frames e scegliere da questa. I titoli dovrebbero essere significativi (es. "Menu del sito" e non "Frame laterale"). 22

23 Inserire il tag TITLE nelle pagine collegate da un frameset. Si tenga presente che il browser testuale e alcuni screen reader "visualizzano", cioè pongono in primo piano all attenzione dell utente la sola pagina del frame attiva in quel momento, e che l informazione del titolo è molto utile per orientarsi. Definire le righe e le colonne in cui è suddiviso il frameset con misure relative (es. "20%, 80%" o "1*,2*"). Questo permette il ridimensionamento proporzionale della pagina per utenti che utilizzano una risoluzione video bassa (es. ipovedenti). Utilizzare il costrutto <NOFRAMES> </NOFRAMES> per consentire la navigazione a quegli utenti che non dispongono di browser o screen reader sufficientemente aggiornati per gestire i frames.: Nella sezione NOFRAMES, ad esempio, si può inserire una serie di link alle varie pagine che compongono il frameset in modo da consentirne la navigazione individuale. Non utilizzare direttamente un immagine come sorgente (SRC=) di un frame. Creare comunque una pagina HTML con titolo, body e tag IMG con relativo attributo ALT. Esempi il contenitore (la pagina con frames) <!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01 Frameset//EN" " frameset.dtd"> <html> <head> <meta httpequiv="content -Type" content="text/html; charset=iso " > <title>esempio di pagina con Frameset corretto</title> </head> <frameset rows="*" cols="27%,*" title="menu pagina delle novita"> <frame title="area menu del sito" src="frame02a.htm" > <frame title="area novita del sito" src="frame02b.htm" > <noframes> <ul> <li><a href="frame02a.htm">menu del sito</a></li> <li><a href="frame02b.htm">pagina delle novità</a></li> </ul> </noframes> </frameset> </html> il frame che contiene il menù (framea.htm): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso " > <title>menu del sito</title> </head> <body> <ul> <li><a href="framea.htm">menu del sito</a></li> 23

24 <li><a href="frameb.htm">pagina delle novità</a></li> </ul> </body> </html> il frame che contiene il contenuto (frameb.htm): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso " > <title>novità del sito</title> </head> <body> <h1>novità del sito</h1> <p>...</p> </body> </html> Verifiche sui frames Tutte le verifiche possono essere fatte con la barra dell'accessibilità (versione 2.0), controllando: Presenza Frames: Frame > Bordi dei frame Titoli, nomi e elemento NOFRAMES: Frame > Name/Title dei frames 24

25 FOGLI DI STILE CSS CSS (Cascading Style Sheets - Fogli di Stile a Cascata) è uno dei linguaggi del W3C. CSS è utilizzato per controllare l aspetto visuale ed estetico di una pagina web. Il concetto alla base del CCS si può sintetizzare con una nota espressione: separare il contenuto dalla presentazione. I fogli di stile permettono di definire il layout delle pagine web, come ad esempio: margini e indentazioni; immagini e colori di sfondo; font, dimensioni dei caratteri e colore dei caratteri; posizionamento del testo nella pagina (impaginazione); Requisiti dei CSS I CSS devono avere codice valido. I contenuti e le funzionalità della pagina devono essere ancora fruibili e mantenere il loro significato d'insieme o la loro corretta struttura semantica anche quando si disabilitano i fogli di stile. Tutte le caratteristiche legate all'aspetto si devono trovare solo in fogli di stile esterni non è ammesso l'uso di stili inline o all'interno della pagina. Se i contenuti possono venire stampati, deve essere presente uno stile per la stampa di norma questo vale per i siti Web e non per le applicazioni. Le dimensioni dei font e degli elementi dei campi di input devono essere specificate e devono essere definite con unità di misura relative (em o %) alcuni browser (es. Internet Explorer 6) non sono in grado di ingrandire correttamente i caratteri o i campi dei moduli se non si utilizzano unità di questo tipo. I contenuti si devono adattare alle preferenze dell'utente si devono poter ingrandire i caratteri o cambiare le dimensioni della finestra del browser senza che ci sia perdita di informazioni; è possibile realizzare pagine elastiche che riempiono cioè tutta la pagina, o pagine ingrandibili, di dimensioni fisse ma che si ingrandiscono con l'aumentare delle dimensioni dei font sui browser Suggerimenti Si consiglia di definire le dimensioni della pagina in em prevedendo una larghezza entro gli 800x600 punti. In questo modo l'ingrandimento è garantito in maniera corretta sia su Explorer 6 che Explorer 7. I fogli di stile migliorano la stampabilità dei documenti Web. La carta ha proprietà intrinsecamente diverse dallo schermo di un computer. Questa differenza può essere gestita attraverso l uso dei CSS: con l'istruzione media=print si può definire un foglio di stile che viene usato dal browser solo in stampa, e in questo css formattare i contenuti in modo che la pagina venga stampata al meglio (es. di solito si consiglia di non stampare i menù e le parti fisse del sito, ma solo il contenuto; eventualmente sostituire il logo in testata con un logo più adatto ad essere stampato). 25

26 Occorre evitare la generazione di inutili stili e classi css. Il CSS va utilizzato nel modo corretto, evitando di aumentare la complessità e le dimensioni dei files. Esempi Codice CSS per definire le dimensioni di una pagina entro gli 800x600: body, td, th{ font-size:62.5%; } body{ margin:0 auto; width:76em; } Codice CSS per nascondere i contenuti:.skip { position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden; } Verifiche sui fogli di stile Tutte le verifiche possono essere fatte con la barra dell'accessibilità (versione 2.0), controllando: Codice CSS (per pagine on-line): Controlla> Validatore CSS del W3C > Valida il CSS Semantica ed equivalenza di contenuti o funzioni: CSS > Disabilita il CSS la pagina deve essere ugualmente comprensibile, ciò che è titolo deve ad esempio averne l'aspetto anche con gli stili disabilitati Fogli di stile esterni: CSS > Disabilita gli stili inline la pagina deve mantenere lo stesso aspetto Stile per la stampa: CSS > Visualizza i(l) Fogli(o) di Stile in aggiunta è consigliato sempre stampare le pagine per verificare la qualità del sito anche su carta (non è necessario che l'aspetto sia il medesimo che a video, solo che il contenuto sia correttamente stampato e l'immagine coerente con le pagine a video) Dimensioni relative dei caratteri: CSS > Visualizza i(l) Fogli(o) di Stile è necessario controllare gli stili a mano o verificare sperimentalmente se testi e campi dei form effettivamente si ingrandiscono (occorre Internet Explorer 6 o precedenti) Dimensioni della pagina: Ridimensiona > 800x600 occorre anche verificare che su Internet Explorer il carattere sia impostato su grande (Visualizza> Impostazioni > Carattere> Grande) e che a questa risoluzione la pagina sia fruibile senza sovrapposizioni di testi 26

27 Colori L utilizzo dei colori nelle pagine web è sicuramente attraente per l utente ma spesso il cattivo uso dei colori può essere dannoso. Alcune combinazioni di colori, anche per immagini contenenti del testo (es. loghi) non sono ammissibili. Requisiti per i colori Funzioni ed informazioni devono essere disponibili anche in assenza del particolare colore utilizzato per presentarli nella pagina. Si deve sempre distinguere il contenuto informativo (foreground) e lo sfondo (background), ricorrendo a un sufficiente contrasto Suggerimenti Non fornire informazioni solo attraverso i colori. Ad esempio, non basta dire che I campi obbligatori sono in rosso ma occorre anche aggiungere altre informazioni per riconoscerli come: * campi obbligatori o I campi obbligatori sono rossi e con un * (nell etichetta). Evidenziare nel testo i link non solo con differenze di colore, ma con sottolineatura, grassetto, o presenza di immagini o segni che ne consentano l identificazione e distinguerli dal resto delle parole presenti nella pagina: usare possibilmente un unico stile coerente. Per le immagini che contengono testo significativo utilizzare una scelta di colori sufficientemente contrastati. Limitare il numero di colori: si suggerisce di limitare l uso a quattro colori e al più a sette. Usare i colori in modo cauto e accorto: utilizzare molti colori per dare maggiore luminosità alle pagine spesso comporta un risultato controproducente. Un giusto utilizzo consiste ad esempio nel mostrare gli item in un colore, il titolo in un altro colore, le note in un terzo colore e i messaggi in un quarto colore. Un approccio sicuro è utilizzare lettere nere su fondo bianco, lo stile italico o grassetto per dare rilevanza e riservare i colori ad effetti molto speciali. Utilizzare i colori per mettere in evidenza una certa caratteristica e farlo in modo coerente. Ad esempio in un elenco di rappresentazioni teatrali se la convenzione è quella di visualizzare in rosso gli spettacoli sospesi ci si deve assicurare che non venga usato lo stesso colore anche per altri tipi di spettacoli o che non vi siano spettacoli sospesi evidenziati con un altro colore. La regola definita attraverso i colori deve apparire chiaramente, con il minimo sforzo per l utente. Fare attenzione alle normali convenzioni sui colori (rosso dannoso, giallo pericolo, ecc.). Ricordatevi che: o certi abbinamenti di colori possono far insorgere problemi (di contrasti, di messa a fuoco, ecc.); o la fedeltà dei colori può variare a seconda dell hardware utilizzato ( es. Mac e altri PC); 27

28 Esempi o la stampa o la conversione su altri media può comportare dei problemi. Esempio di come alcune persone affette da daltonismo vedano le immagini Verifiche sui colori Tutte le verifiche possono essere fatte con la barra dell'accessibilità (versione 2.0), controllando: Colore: Colore > Scala di grigi per verificare che tutte le informazioni siano veicolate anche in modo alternativo al colore (es. campi obbligatori, segnali di errore,...) Contrasti: Colore > Contrast Analyser (applicazione) tramite l'applicazione che si aprirà, è possibile selezionare colore di sfondo e colore del testo in primo piano. E' necessario che tra i due colori ci sia una sufficiente "Differenza di colore" (vedi l'immagine di esempio) 28

29 Testo Nella progettazione di pagine web la scelta dei caratteri da usare deve tenere conto di alcune considerazioni: I caratteri predefiniti residenti nella maggior parte dei sistemi operativi sono solo questi: Arial, Courier, Georgia, Times New Roman, Trebuchet e Verdana. In virtù delle loro caratteristiche, alcuni sono più adatti alla lettura su schermo (Verdana, Georgia e Arial). E' possibile utilizzare una combinazione di font diversi, per esempio titoli in Arial e testo in Georgia. E' consigliabile, comunque, utilizzare pochi font e poche dimensioni, per dare alle pagine un aspetto più chiaro. E' assolutamente indispensabile, per dare uniformità e coerenza al sito web, utilizzare lo stesso tipo di carattere e la stessa combinazione di stili in tutte le pagine, evitando cambiamenti casuali. Requisiti del testo Le dimensioni dei caratteri delle pagine devono essere espresse in em o %. I testi devono restare comprensibili (senza sovrapposizioni o perdita di informazioni) anche su Internet Explorer 6, ad 800x600 impostato coi caratteri grandi. Suggerimenti Limitare assolutamente l uso di immagini contenenti del testo ai soli casi in cui risulta effettivamente inevitabile (ad esempio per visualizzare un logo contenente caratteri non standard), perché: o il testo contenuto nelle immagini non può essere ridimensionato utilizzando le funzionalità dei browser; o non può essere letto da dispositivi "solo testo" quali browser testuali e screen reader per non vedenti, per il contenuto delle immagini deve essere anche riportato come testo nell attributo ALT delle immagini; o allunga inutilmente i tempi di caricamento delle pagine web; o il testo contenuto nelle immagini non può essere oggetto di ricerca e non viene indicizzato dai motori di ricerca; o modifiche e correzioni a tali testi richiedono l uso di un software per modificare le immagini. Usare dimensioni del testo non troppo ridotte. L'80% della dimensione predefinita è già piuttosto piccolo. Non scendete mai sotto al 70%. Se dovete decidere la dimensione di un testo provate ad usarlo: se riuscite a leggerlo comodamente a cm di distanza dal monitor la sua dimensione è accettabile; se invece stringete gli occhi, confondete le righe o piegate in avanti la schiena è già troppo piccolo. Allineare il testo a sinistra, centrarlo solo per i titoli o le intestazioni delle tabelle, allinearlo a destra nelle celle che contengono numeri e non usare il giustificato perché è meno leggibile a video. 29

30 Verifiche sul testo Dalla barra dell'accessibilità 2.0 scegliete: Ridimensiona> 800x600 Impostate i caratteri su grande (Internet Explorer 6: Visualizza> Carattere> Grande) Se leggete tutto correttamente e non ci sono sovrapposizioni tali da rendere il contenuto incomprensibile, il livello di accessibilità è accettabile Verificate che nei fogli di stile non siano definite dimensioni dei font in px 30

31 IMMAGINI Seguono le indicazioni per le immagini. Requisiti delle immagini Fornire una alternativa testuale equivalente per ogni immagine, l alternativa testuale deve essere commisurata alla funzione o contenuto dell'immagine. Sono vietati oggetti e scritte lampeggianti o in movimento. Testi in forma di immagini sono ammessi solo per loghi o banner. Le immagini protette da Copyright dovranno avere l esplicito consenso dell autore. Suggerimenti il formato dovrà essere supportato dai browser più utilizzati (in genere JPEG per le immagini fotografiche e GIF o, preferibilmente, PNG per la grafica - vedi le schede di dettaglio sui formati) il "peso" di un immagine da inserire in una pagina html dovrebbe essere di pochi kb per non appesantire troppo la pagina stessa; qualora fosse necessario inserire immagini di dimensione superiore ai 50 kb (immagini di mostre o quadri o altro) è consigliabile indicare la dimensione in byte dell immagine a fianco del link che la richiama in modo tale che il navigatore sia consapevole del tempo necessario per lo scarico della stessa ed eventualmente mostrare prima una piccola anteprima cliccabile, per espandere l immagine. Associare alle immagini descrizioni appropriate e verificare la congruenza dei testi Si può inserire un ALT="" (vuoto) per quelle immagini che non aggiungono nulla d informativo al contesto della pagina (fotografie o icone puramente decorative) Inserire il testo alternativo anche nei link realizzati con grafica e nei bottoni immagine dei form Se si utilizzano sequenze di link con immagini adiacenti (bottoniere, imagemap), e se si affiancano due o più immagini, inserire nel testo dell ALT dei segni di punteggiatura o racchiuderli tra parentesi per far sì che i vari testi vengano letti correttamente dagli screenreader. Nel caso di immagini che rappresentano grafici e in situazioni analoghe è opportuno fornire la stessa quantità di informazioni in modo alternativo, ad esempio riassumendo in un blocco di testo sottostante i dati che quel grafico rappresenta. Esempi Testo alternativo il link di un logo ben commentato: <a href="..."><img src="..." alt="ermes - Regione Emilia-Romagna, torna alla home page"... /></a> 31

32 Immagini senza ALT Immagine senza attributo ALT: <img src="/sezione1/immagini/grafico001.jpg"> La sintesi vocale leggerà: "Grafico /sezione1/immagini/grafico001.jpg". Si provi ad immaginare che confusione suscita una serie di immagini lette a codici come questa! Verifiche per le immagini Tutte le verifiche possono essere fatte con la barra dell'accessibilità (versione 2.0), controllando: Alternativi: Immagini > Rimuovi immagini per verificare che tutte le immagini che veicolano informazioni o hanno una funzione abbiano il corretto testo alternativo Immagini in movimento: Immagini > Test frequenza GIF animate verranno segnalate le eventuali immagini in movimento e quelle che per il loro lampeggiamento, potrebbero causare problemi a chi soffre di epilessia fotosensibile (solo per pagine on-line) Mappe Immagine Una mappa cliccabile (mappe immagine, imagemap) è un immagine sulla cui superficie sono presenti aree sensibili che l utente può cliccare per attivare determinate azioni. Esistono due tipi di imagemap: quelle lato server, ormai in disuso, in cui l elaborazione del punto cliccato è affidata ad una applicazione CGI sul server (ISMAP), e quelle lato client, in cui nell HTML stesso sono descritte le aree e le azioni che il browser web deve intraprendere in caso di selezione da parte dell utente (USEMAP). Ormai i browser supportano tutti le image map lato client con qualunque forma (rettangoli, cerchi, poligoni), per cui l utilizzo delle image map lato server dovrebbe essere diventato inutile. Requisiti delle mappe immagine Utilizzare mappe immagine sensibili di tipo lato client salvo il caso in cui le zone sensibili non possano essere definite con una delle forme geometriche. In caso di utilizzo di mappe immagine lato server, fornire i collegamenti di testo alternativi necessari per ottenere tutte le informazioni o i servizi raggiungibili interagendo direttamente con la mappa. Suggerimenti In generale le immagini sono meno accessibili del testo, occorre rispettare sia i requisiti legati a colore, sia i requisiti legati alle immagini, e in più è bene ricordare che immagini e aree di dimensioni ridotte le rendono meno accessibili a disabili motori ed ipovedenti. Per le image map lato server è necessario fornire una serie di link alternativi che elenchino le azioni attivate attraverso le coordinate dall applicazione CGI; ad esempio, se l image map è la cartina dell Italia e le aree sensibili sono le regioni italiane, nella pagina web dovrà esserci l elenco dei link espliciti alle pagine relative alle 20 regioni; 32

33 Per le image map lato client, occorre assegnare l attributo ALT a tutte le aree che compongono la mappa. Il browser testuale o lo screen reader vedranno le aree come una serie di link. Esempi Un esempio di mappa immagine accessibile a cui è affiancato l'elenco delle zone sensibili: il risultato estetico è accettabile e l'accessibilità maggiore rispetto ad avere la sola immagine. Bologna Ferrara Forlì-Cesena Modena Parma Piacenza Ravenna Reggio-Emilia Rimini Verifiche per le mappe immagine Tramite la barra dell'accessibilità (versione 2.0), si possono individuare rapidamente le mappe immagine da: Immagini > Visualizza le mappe immagine [nuova finestra]. Una verifica manuale anche senza strumenti particolari si può effettuare con Internet Explorer: sulle zone sensibili delle mappe immagini correttamente marcate, appare un "fumetto" contenente l'alternativo testuale 33

34 LINK I link costituiscono un aspetto essenziale della navigazione Web. Quel che occorre tener presente è gli utenti possono trovare il link nella lettura complessiva della pagina, oppure possono muoversi tra i vari link della pagina con tabulazione o altri meccanismi. Requisiti dei link Usare testi che siano significativi anche se letti indipendentemente dal proprio contesto. Rendere selezionabili e attivabili tramite la tastiera i collegamenti presenti in una pagina. La distanza verticale di liste di link e la spaziatura orizzontale tra link consecutivi deve essere di almeno 0,5 em. Suggerimenti Assicurarsi che il testo della destinazione del link sia chiaro non solo se letto nel contesto, ma anche separatamente. Clicca qui per registrarti ha un senso se letto nella sua globalità, ma lo perde se si ascolta o legge solo Clicca qui. Assicurarsi che il testo de link sia univoco ossia che non esistano link con lo stesso testo ma che puntano a risorse differenti. Occorre assicurarsi che i link siano chiaramente riconoscibili da tutti gli utenti in particolare quelli con difficoltà cognitive o ipovedenti. Fino ad oggi era una convenzione diffusa che i link fossero scritti in blu e sottolineati e che quando il mouse ci fosse passato sopra si trasformava in una manina. Se si vuole adottare un altro stile, occorre comunque rendere chiaramente evidenti i link con lo stile e il colore del carattere, con la trasformazione del cursore del mouse e con altri accorgimenti grafici come freccine e simili. E auspicabile che i link, come tutte le altre strutture di comando di un sito, rispettino sempre le stesse convenzioni grafiche. Nei link realizzati con immagini, occorre inserire la descrizione nell attributo ALT del tag A, altrimenti lo screen reader leggerà come descrizione l indirizzo della pagina a cui punta il link. Ricordiamo che tutti i link ottenuti mediante javascript devono aprirsi anche quando javascript è disabilitato È sconsigliato utilizzare solo simboli grafici cliccabili (esempio pallini, freccine, iconcine) affiancati al testo per implementare il link e in ogni caso se l area cliccabile dello stesso è troppo piccola si mette in seria difficoltà l utente che ha un controllo non preciso dei dispositivi di puntamento. Quando un link punta ad un file, è bene che all'interno del link sia indicato anche il tipo di file e le sue dimensioni, in modo che l utente possa valutare se è il caso di aprirlo oppure no, ed è bene indicare dove si può scaricare il programma necessario per la visualizzazione del file. Evitare l uso del metatag HTTP-EQUIV= REFRESH per forzare il caricamento di un altra pagina; preferire meccanismi di redirezione lato server oppure prevedere una pagina statica col link per saltare alla nuova pagina; 34

35 Esempi Provate con un semplice colpo d'occhio: quale tra questi tre link aiuta a capire più in fretta dove porta? Qual'è il più efficace da usare? Clicca qui per partecipare al nostro sondaggio e vincere un premio <A HREF= test.asp >Clicca qui</a> per partecipare al nostro sondaggio e vincere un premio può essere trasformato così: Clicca qui per partecipare al nostro sondaggio e vincere un premio <A HREF= test.asp >Clicca qui per partecipare al nostro sondaggio e vincere un premio</a> oppure, meglio ancora: Partecipa al sondaggio e vinci <A HREF= test.asp >Partecipa al sondaggio e vinci</a> Verifiche sui link Alcune verifiche possono essere fatte con la barra dell'accessibilità (versione 2.0), controllando: Link significativi: Informazioni > Visualizza i link [nuova finestra] apparirà una lista in cui sarà semplice capire se il testo dei link ha senso quando letto fuori dal contesto. Selezione da tastiera: Struttura > Ordine di tabulazione verrà mostrato un numero corrispondente all'ordine, verificare che ogni link abbia un numero e che la numerazione segua una sequenza logica. Link attivi (on-line): Controlla > Controllo dei link del W3C > Controlla la pagina corrente Verificare che tutti i link siano funzionanti. Menù e liste Un menù efficace deve avere un organizzazione sensata, comprensibile, comunicativa e pertinente alle funzioni che può svolgere l utente. 35

36 Requisiti di menu e liste Tutti gli elenchi di voci di menù devono essere fatti in testo e marcati come <ul> o <ol> (in questo modo gli elementi sono marcati secondo la loro semantica, di lista appunto). La distanza verticale o orizzontale tra i link del menù deve essere di almeno 0,5em per mantenere una migliore leggibilità e facilità nel selezionare i singoli elementi. Se esiste più di un menù, marcare con un'intestazione il titolo di ciascuno di essi e non marcare come intestazioni le singole voci dei menù. Suggerimenti Se esiste più di un menù, il titolo di ciascuno di essi non può essere vago come "Menù Principale" o "Menù di sinistra": bisogna usare termini più precisi; è preferibile avere un numero di livelli di menù (depth) piccolo con un numero di possibilità (breadth) grande, piuttosto che viceversa: si consiglia di usare da 4 a 8 item (voci) in ogni livello e non più di 3-4 livelli; nelle liste raggruppare le selezioni in modo significativo, con un senso, per categorie; formare gruppi di item che comprendano tutte le possibilità (es. età 0-20, 20-40, >40) e non fare sovrapposizioni fra gruppi (es. Divertimenti-Eventi e Concerti-Sport); ordinare le selezioni in base ad una logica e in modo che siano ben distinguibili una dall altra; usare diciture brevi per le selezioni, iniziando con una parola chiave e significativa in quanto il nostro occhio scorre da sinistra verso destra; consentire salti, scorciatoie e abbreviazioni, abilitando anche ritorni al menù precedente; una volta scelti gli item del menù, bisogna pensare alla sequenza di presentazione. Se hanno una sequenza naturale, come ad esempio i giorni della settimana, i capitoli di un libro, ecc. la decisione è obbligata. Altre tipiche regole di sequenza degli item sono: o ordine cronologico; o ordine numerico (ascendente o discendente); o proprietà fisiche: lunghezza, area, volume, temperatura, peso, velocità e così via, in ordine crescente o discendente; quando ciò non è applicabile, si può ordinare in base a: o ordine alfabetico o qualità comuni (separati da linee di demarcazione); o prima gli item più frequenti o gli item più importanti (ma è difficile determinare cosa è più importante per un utente o un altro). Verifiche su menù e liste Tutte le verifiche possono essere fatte con la barra dell'accessibilità (versione 2.0), controllando: Intestazioni: Struttura> Intestazioni oppure da Struttura> Struttura delle intestazioni Liste: Struttura> Elementi di lista 36

37 TABELLE Normalmente le tabelle vengono utilizzate o per presentare dei dati o per il controllo del layout di pagina. Spesso chi utilizza editor HTML come FrontPage non si accorge che il software usa proprio le tabelle per controllare l'aspetto. Ciò comporta grosse difficoltà nella lettura del testo da parte di chi non vede ed utilizza screen reader. A seconda del tipo di tabella che si realizza si devono osservare regole diverse: Tabelle per visualizzare i dati Tabelle per controllare il layout Tabelle di dati Generalmente, le tabelle di dati sono composte da parti fisse, che contengono le descrizioni dei dati rappresentati nelle righe e nelle colonne (intestazioni), e da celle di dati variabili, che sono i veri e propri dati presentati. L organizzazione logica di una tabella si coglie a colpo d occhio, attraverso il posizionamento delle intestazioni, il colore, lo stile dei caratteri. Ai disabili della vista che leggono la tabella con la sintesi vocale in un ordine essenzialmente sequenziale o che possono esplorare le celle della tabella muovendosi nelle varie direzioni, occorre fornire alcuni dettagli descrittivi che consentano di comprendere la struttura della tabella, associando correttamente i dati variabili alle relative intestazioni. Requisiti delle tabelle di dati Identificare le intestazioni di righe e colonne. Nelle tabelle complesse (con più di un livello di intestazione) associare le celle di dati e le celle di intestazione Suggerimenti Quando possibile semplificare la struttura delle tabelle. Piuttosto che una tabella con più righe o colonne di intestazione e celle unite, è meglio suddividere i dati in più tabelle semplici con una riga e/o colonna di intestazione. per le celle che contengono intestazioni fisse, si deve usare il costrutto <TH></TH>, mentre per le celle di dati variabili si deve utilizzare il costrutto <TD></TD>; il browser assegna gli attributi di testo evidenziato e centrato alle celle TH, ma è possibile modificarne l aspetto con gli attributi di stile. Per associare le intestazioni alle celle nelle tabelle complesse si deve attribuire a ogni cella di intestazione un ID= testatax ; le celle di dati si associano alle diverse intestazioni con HEADERS= testata1 [testata2 [testata3 ]] (vedere esempi); Una semplice associazione prevista dall HTML 4.0 tra l intestazione e le celle di dati è l attributo SCOPE= gruppo da inserire nella descrizione dell intestazione; i valori che può assumere gruppo sono: 37

38 o ROW, specifica che l intestazione si riferisce alla riga adiacente; o COL, specifica che l intestazione riguarda la colonna sottostante; o ROWGROUP e COLGROUP, che associano l intestazione a gruppi di righe (THEAD, TBODY, TFOOT) e a gruppi di colonne (costrutti COLGROUP/COL). Un ulteriore metodo per raggruppare celle senza riferirsi a testate è l attributo AXIS= gruppo. La tabella può essere suddivisa in più sezioni logiche: CAPTION, che identifica il titolo della tabella, THEAD e TFOOT, rispettivamente le parti di testata e di piè di pagina, e TBODY che contiene il corpo della stessa; Se il testo di intestazione è troppo lungo, si possono introdurre abbreviazioni con l attributo ABBR= abbreviazione nella cella di intestazione; allo stesso modo, se si vuole mostrare nelle intestazioni un testo abbreviato, si può usare ABBR= testo esteso per esplicitarlo nella lettura degli screen reader (vedere esempi). L attributo SUMMARY= sommario del tag TABLE consente di indicare una breve descrizione della tabella che verrà letta dalla voce dello screen reader ma che non verrà visualizzato; può essere utilizzato per fornire maggiori dettagli sul contenuto della tabella stessa. L utilizzo di TD e TH, dell attributo SUMMARY e dei costrutti HEADERS/ID sono sufficientemente supportati dagli ausili più recenti ed è prevedibile che in futuro tale supporto venga ancora migliorato. Esempi Tabella semplice Esempio di tabella semplice con abbreviazioni. Da notare il codice iniziale: <table summary="agenda, divisa in righe da una settimana ciascuna"> <caption> Aprile 2005</caption> <tr> <th abbr="lunedì" id="ag_lu" scope="col">lu</th> 38