Linee Guida per realizzare siti e applicazioni web...

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

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

Linee Guidaper realizzare siti ed applicazioni web accessibiliper 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 2008


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 http://www.regione.emilia-romagna.it/lineeguida/;

• 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 [email protected]

Se rilevi inesattezze oppure hai suggerimenti e integrazioni, puoi scrivere a [email protected]

Un riassunto della licenza si trova su http://creativecommons.org/licenses/by-nc-sa/2.5/it/ , mentre il testo integrale è http://creativecommons.org/licenses/by-nc-sa/2.5/it/legalcode .


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


A CHI SONO RIVOLTE

Ai RESPONSABILI dei siti web regionaliI 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”.


INDICEPer Tutti ....................................................................................................9

Accessibilità.............................................................................................................................. 11Usabilità ................................................................................................................................... 13

Fattori di usabilità................................................................................................................... 13Progettare per l’utente ............................................................................................................ 14Vantaggi dell’usabilità............................................................................................................ 14Principi di usabilità................................................................................................................. 15

Per i Tecnici ............................................................................................17Pagine (X)HTML..................................................................................................................... 19

Frames.................................................................................................................................... 22Fogli di stile CSS ...................................................................................................................... 25

Colori ..................................................................................................................................... 27Testo ...................................................................................................................................... 29

Immagini .................................................................................................................................. 31Mappe Immagine.................................................................................................................... 32

Link .......................................................................................................................................... 34Menù e liste............................................................................................................................ 35

Tabelle ...................................................................................................................................... 37Tabelle di dati......................................................................................................................... 37Tabelle di layout..................................................................................................................... 40

Form......................................................................................................................................... 41Multimedia............................................................................................................................... 43Script, applet e plug-in ............................................................................................................ 45

Appendici ................................................................................................49Checklist per l'usabilità ........................................................................................................... 51Checklist per siti ed applicazioni............................................................................................. 53Riepilogo dei requisiti .............................................................................................................. 55Riepilogo delle verifiche........................................................................................................... 58


PER TUTTI


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 2005 - 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: http://www.regione.emilia-romagna.it/lineeguida. 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 "..


I requisiti obbligatori da soddisfare indicati nel Decreto Ministeriale citato, sono 22 per i siti e le applicazioni internet (D.M. 8/8/2005 - Allegato A). Esistono anche 11 requisiti per i sistemi operativi, le applicazioni ed i prodotti da scaffale (D.M. 8/8/2005 - 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 2005 - 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à.


USABILITÀL’usabilità secondo la norma ISO 9241 è:

"il grado in cui un prodotto può essere usato da particolari utenti per raggiungere certi obiettivicon 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.


Progettare per l’utentePerché 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 vantaggiche 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.


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


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.


PER I TECNICI


PAGINE (X)HTMLTutti 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.).


• 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 e-mail, 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 utilizzarePer i nuovi siti e applicazioni utilizzare questa intestazione XHTML 1.0 nel documento: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" 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):


(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>...


• 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" "http://www.w3.org/TR/html4/frameset.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" ><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" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" ><title>Menu del sito</title></head><body><ul><li><a href="framea.htm">Menu del sito</a></li>


<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" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" ><title>Novità del sito</title></head><body><h1>Novità del sito</h1><p>...</p></body></html>

Verifiche sui framesTutte 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


FOGLI DI STILE CSSCSS (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 esterninon è ammesso l'uso di stili inline o all'interno della pagina.

• Se i contenuti possono venire stampati, deve essere presente uno stile per la stampadi 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'utentesi 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).


• 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 stileTutte 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 inlinela pagina deve mantenere lo stesso aspetto

• Stile per la stampa: CSS > Visualizza i(l) Fogli(o) di Stilein 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 > 800x600occorre 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


ColoriL’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);


o la stampa o la conversione su altri media può comportare dei problemi.

EsempiEsempio di come alcune persone affette da daltonismo vedano le immagini

Verifiche sui coloriTutte le verifiche possono essere fatte con la barra dell'accessibilità (versione 2.0) , controllando:

• Colore: Colore > Scala di grigiper 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)


TestoNella 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 50-70 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.


Verifiche sul testo

• Dalla barra dell'accessibilità 2.0 scegliete:Ridimensiona> 800x600Impostate 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


IMMAGINISeguono 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 kBper 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 screen-reader.

• Nel caso di immagini che rappresentano grafici e in situazioni analoghe è opportuno fornire la stessa quantità di informazioni in modo alternativo, ad esempio riassumendo inun 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>


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 immaginiTutte le verifiche possono essere fatte con la barra dell'accessibilità (versione 2.0), controllando:

• Alternativi: Immagini > Rimuovi immaginiper verificare che tutte le immagini che veicolano informazioni o hanno una funzione abbiano il corretto testo alternativo

• Immagini in movimento: Immagini > Test frequenza GIF animateverranno 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 ImmagineUna 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 clientsalvo 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;


• 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 immagineTramite 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


LINKI 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;


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 premiopuò 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 linkAlcune 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 tabulazioneverrà 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 correnteVerificare che tutti i link siano funzionanti.

Menù e listeUn menù efficace deve avere un’organizzazione sensata, comprensibile, comunicativa e pertinente alle funzioni che può svolgere l’utente.


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,5emper 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 essie 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 listeTutte le verifiche possono essere fatte con la barra dell'accessibilità (versione 2.0), controllando:

• Intestazioni: Struttura> Intestazionioppure da Struttura> Struttura delle intestazioni

• Liste: Struttura> Elementi di lista


TABELLENormalmente le tabelle vengono utilizzate o per presentare dei dati o per il controllo del layoutdi 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 datiGeneralmente, 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:


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>


Tabella complessa

Il cui il codice più importante è

<table summary="La tabella mostra per ciascun dipendente i giorni lavorati e lostipendio percepito, con totali di reparto e generale" ><caption>Tabella dipendenti</caption><tr><th id="dip">Dipendente</th><th id="gio" abbr="Giorni">Giorni lavorati</th><th id="stip" abbr="Stipendio">Stipendio in euro</th></tr>

<tr><th id="rep1" headers="dummy" colspan="3">Reparto formazione</th>

</tr>

<tr><th id="d1" headers="dip rep1">Bianchi</th><td headers="dip d1 gio">192</td><td headers="dip d1 stip">21875</td></tr>

Una tabella ben descritta per lo screen reader. E’ stato inserito un sommario che descrive meglio la tabella. Sono stati inseriti vari attributi HEADERS/ID per consentire una corretta comprensione delle singole celle. Si noti l’utilizzo dell’ID dummy nell’unica cella vuota per utilizzarlo come headers delle intestazioni “Reparto formazione”, “Reparto sviluppo” e dei totali. Questo evita che JAWS legga per default la prima cella della colonna (“Dipendente”).

Verifiche per le tabelle datiTutte le verifiche possono essere fatte con la barra dell'accessibilità (versione 2.0), controllando:

• Intestazioni: Tabelle > Intestazioni di tabellaper verificare che tutte le intestazioni siano correttamente marcate come tali

• Associazione celle intestazioni: Tabelle > Visualizza le tabelle dativengono mostrati anche id ed headers e si può verificare manualmente l'associazione


Tabelle di layoutSi sconsiglia di utilizzare le tabelle per il controllo del layout di pagina: usare i CSS.

Requisiti delle tabelle di layout

• Il contenuto della tabella deve essere comprensibile anche quando questa viene letta in modo linearizzato.

• Usare solo <td> e non utilizzare elementi e attributi delle tabelle dati (es. th, scope, tbody ecc.).

Suggerimenti

• Utilizzare meno tabelle possibili, una sola per impaginare è accettabile.

• Assicurarsi che il testo venga reso nell’ordine corretto anche quando manca il supporto dei tag di tabella, tenendo conto che la linearizzazione segue l’ordine in cui il testo si presenta nel file HTML della pagina; questa accortezza consente una corretta lettura del testo con browser testuali e con sintesi vocale di screen reader meno recenti.

• Visto che la tabella ha solo la funzione di gestire il layout non si deve scrivere alcun SUMMARY.

Verifiche per le tabelle di layoutTutte le verifiche possono essere fatte con la barra dell'accessibilità (versione 2.0), controllando:

• Linearizzazione: Tabelle > Linearizzaper capire se il contenuto ha ancora senso una volta tolte le strutture che gli danno forma

• Intestazioni: Tabelle > Intestazioni di tabellaper verificare che non siano state marcate le intestazioni


FORMSeguono le indicazioni per la realizzazione dei moduli per la richiesta dati (form).

Requisiti dei form

• Associare in maniera esplicita le etichette ai rispettivi campi. • Posizionare le etichette vicino ai campi (o sopra, o immediatamente a lato). • Le distanze orizzontale e verticale tra i pulsanti di un modulo deve essere di almeno

0,5em.. • Le dimensioni dei pulsanti devono essere tali da rendere chiaramente leggibile

l’etichetta in essi contenuta (padding di almeno 0,5em ai lati). • Si deve poter ingrandire il carattere anche nei campi dei moduli (su IE5.5, IE6).

Suggerimenti

Aspetto dei form

• Scrivere istruzioni comprensibili, usando una terminologia semplice e sintetica: evitare l’uso di pronomi (TU devi digitare il nome…) e di termini generici ( l’utente deve digitare…), bensì scrivere solo l’azione (Digitare il nome o semplicemente Nome);

• Raggruppare i campi in maniera logica e sequenziale, mettendo in posizione adiacente campi correlati fra loro, eventualmente usando l'opportuna marcatura (<FIELDSET> per i campi e <OPTGROUP> per le liste) e separando i gruppi con un po’ di spazio bianco.

• I campi di inserimento debbono essere ben visibili e contornati. • Mettere prima i campi obbligatori (oppure evidenziare quelli obbligatori mettendo ad

esempio un asterisco e scrivendo all’inizio "i campi con l’asterisco sono obbligatori".) • Evitare di usare tabelle per disporre i campi sullo schermo.

• Ai sensi del D. Lgs. n. 196/2003 "Codice in materia di protezione dei dati personali", è obbligatorio dare adeguata informativa su tutti i trattamenti dei dati personali.

Inserimento dei dati

• Consentire di utilizzare integralmente il form e le sue funzioni utilizzando la sola tastiera (vedi sezione sugli script).

• Consentire di correggere sia un carattere errato sia l’intero campo. • Prevenire gli errori ove possibile, impedendo ad esempio di scrivere caratteri alfanumerici

in campi numerici, e indicando quale formato utilizzare per i campi speciali (es. per le date gg/mm/aaaa).

• Per l'esecuzione del form prevedere un bottone per l’invio, in modo che sia l’utente a scegliere di proseguire.

• Evitare il bottone di RESET per cancellare i dati inseriti nel form.


Convalida e segnalazione degli errori

• Dare una segnalazione di conferma al termine del riempimento dei campi.

• Inserire segnalazioni di errore nelle <LABEL>. • Se il form è complesso o inserire un sommario degli errori a inizio pagina o, ancora meglio,

presentare una pagina con solo i campi da correggere.

• I messaggi di errore debbono essere:o specifici: anziché usare ad esempio SYNTAX ERROR segnalare "manca la

parentesi sinistra", anziché ILLEGAL DATA usare "digitare la prima lettera: Send, Read, ", anziché INVALID DATA dire "il giorno va da 1 a 31" e così via.

o costruttivi e con tono positivo: da evitare messaggi tipo FATAL ERROR, RUN ABORTED, CATASTROFIC ERROR, ecc. meglio riscriverli suggerendo cosa deve fare l’utente;(es. spiegando i valori permessi).

o avere frasi orientate all’utente: questo esprime il concetto che l’utente deve avere l’impressione di governare il sistema e non di rispondere al sistema. Siccome poi i messaggi dovrebbero essere più corti di una riga e non sempre la brevità è significativa, a volte può essere utile inserire un pulsante ? attraverso il quale l’utente può avere una migliore spiegazione e supporto;

• Bisogna anche evitare, nel caso di errore, di far riscrivere tutti i campi: l’utente deve capire quale campo ha sbagliato e correggere solo quello.

Verifiche sui formProvare il form con la sola tastiera è la prima verifica necessaria.Mediante la barra dell'accessibilità (versione 2.0), verificare l 'associazione tra campi ed etichetta:Struttura > Elementi fieldset/Label

MULTIMEDIAIn generale le presentazioni multimediali sono più accessibili se aperte all'interno dei software per visualizzarle, piuttosto che nel browser: è quindi consigliabile evitare di incorporarle nella pagina. Il W3C ha elaborato uno standard per sincronizzare audio, video e testo: lo SMIL e Quicktime o RealPlayer lo supportano. Microsoft ha inventato invece SAMI basato su Windows Media Player.

La Regione Emilia-Romagna oggi utilizza Videovista (o Clipstream), un'applicazione Java per incorporare filmati multimediali nelle proprie pagine: per maggiori dettagli vedi gli approfondimenti.

Requisiti dei contenuti multimediali

• Fornire un'alternativa testuale equivalente.• Nel caso di files multimediali da scaricare fornire più alternative (per banda, per player)

ed il collegamento ai files per fruirli.• Garantire che siano sempre distinguibili il contenuto informativo e lo sfondo

ricorrendo a differenti livelli sonori (in caso di parlato con sottofondo musicale).

SuggerimentiI contenuti multimediali non sono prodotti con linguaggi standard codificati e sono soggetti alle tendenze del mercato, risentono quindi di problemi di compatibilità, diffusione e supporto delle varie piattaforme e sistemi operativi. Pubblicare un contenuto multimediale è possibile, ma occorre valutare bene costi e benefici: per raggiungere il più ampio numero di utenti è necessario pensare bene a quali formati utilizzare e quanto debbano "pesare" i files.

• E' consigliabile non affidarsi all'ultimissima tecnologia multimediale, ma cercare di restare "due passi" indietro e fornire delle alternative.

• Per presentazioni multimediali visualizzate all'interno della finestra del browser occorre anche soddisfare tutti i requisiti legati ad applet e plug-in

• Se l’immagine è visualizzata attraverso un oggetto o un’applet, inserire la descrizione testuale nella parte contenuta tra il tag OBJECT e la sua chiusura (<object data="immagine" type="image/gif">Descrizione</object>).

• Mettere l’utente in condizione di interrompere la fruizione e disabilitare l’audio.

EsempiUn contento multimediale incorporato in una pagina web, con le opportune alternative testuali. Attualmente questa sintassi non è correttamente interpretata dai browser.

Esempio di codice per un contenuto multimediale<object title=”..” … type="video/mpeg">



<object … type="image/jpg">

descrizione immagine</object>

<object … type="audio/mp3">descrizione dell’audio</object>

</object>

Verifiche per i files multimedialiCon la barra dell'accessibilità (versione 2.0), si può verificare la presenza di files multimediali nella pagina da: Informazioni > Elenco dei files multimediali [nuova finestra]


SCRIPT, APPLET E PLUG-IN

Utilizzare tecnologie non-standard per fornire SOLO funzionalità ed informazioni accessorie.

Ad oggi, non è possibile realizzare alcuna applicazione web utilizzando unicamente tecnologie AJAX: è possibile migliorare le applicazioni usando AJAX e seguendo il metodo chiamato "Progressive enhancements" (Miglioramento progressivo). Oggi non è neppure possibile utilizzare unicamente Flash come contenuto: nonostante sia una tecnologia diffusa e matura, soffre ancora di problemi di accessibilità.

Requisiti di script, applet e plug-in

• Le pagine devono funzionare anche quando questo tipo di oggetti sono disabilitati o non supportati: se questo non fosse possibile si deve fornire una spiegazione testuale equivalente.

• Per la validazione dei dati inseriti in un form è necessaria la verifica lato server: una verifica preliminare tramite Javascript è utile ma non sufficiente.

• Funzionalità e informazioni di script e applet devono essere direttamente accessibili.• I gestori di eventi devono essere indipendenti da uno specifico dispositivo di input:

devono funzionare anche con il solo uso della tastiera.

• Se è previsto un intervallo di tempo predefinito entro il quale eseguire determinate azioni, è necessario avvisare l’utente, e indicare il tempo massimo consentito.

Suggerimenti

Per offrire un’alternativa testuale all’uso degli script si può utilizzare il tag <NOSCRIPT>. All'interno di questo elemento occorre dare una vera alternativa, e non semplicemente segnalare il fatto che per quell'utente alcune o tutte le funzioni sono inibite.

Eventi

La generazione di eventi deve essere controllata dall’utente e non attivata automaticamente. In particolare:

• OnDblClick non ha equivalente con la tastiera.

• OnChange e OnSelect si devono evitare. • Non usare eventi del mouse legati a coordinate precise.

• OnMouseOver e OnMOuseOut devono essere associati ai corrispondenti OnFocus e OnBlur.

• L'evento onClick non necessita associazioni ad altri eventi solo se se usato su link o controlli dei form .


Contenuti dinamici

Anche l'aggiornamento dei contenuti della pagina deve essere controllato dall'utente, evitare quindi:

• l’uso di HTTP-EQUIV=”REFRESH”; preferire meccanismi di redirezione lato server o prevedere una pagina statica col link per saltare alla nuova pagina;

• l'uso di document.write perché non apparirebbe a tutti gli utenti il contenuto generato con questo comando;

Effetti visivi

Fate attenzione a particolari effetti visivi che si possono realizzare con queste tecnologie (es. DHTML):

• Evitare testi in movimento sullo schermo, oppure prevedere la possibilità da parte dell’utente, di fermarlo.

• Evitare effetti di sfarfallio, specie quelle con una frequenza compresa tra 4 e 59 Hz, che possono causare crisi epilettiche, specie se si tratta di passaggi continui dallo scuro al chiaro;

• Quando utilizzate gli script per mostrare dei contenuti della pagina, fare in modo che tali contenuti siano nascosti tramite script dopo il caricamento della pagina stessa; non utilizzate display:none per nascondere

Nuove finestre

Aprire finestre in pop-up o nuove finestre è sconsigliato, anche se risulta utile, accessibile e comunque maggiormente usabile in certi casi:

• Forzate il download di documenti non HTML (testi, filmati ecc.) se possibile, perché sono più accessibili se aperti fuori dal browser; se non è possibile a volte è utile aprirli in nuove finestre per evitare che l'utente chiuda istintivamente la finestra in cui ha caricato il documento e perda la pagina da cui proveniva.

• Una pagina che contiene solo collegamenti a siti esterni è sensato che apra tali link in una nuova finestra.

In questi casi o anche se una pagina deve interagire con un'altra (es. per la selezione di un dato) e non si hanno altre alternative, si può aprire una nuova finestra (ma in modo accessibile, vedi esempi)

... e ancora

• Prestare attenzione ai tempi di validità di sessioni: alcuni utenti potrebbero impiegare più tempo di quanto prevedete per compilare un form.

• Se occorre scaricare software aggiuntivo (es. un plug-in), fornire il link da cui è possibile scaricarlo (nella versione della lingua del sito).


Esempi

Nuove finestre (pop-up)Per aprire nuove finestre è necessario mantenere la correttezza del codice XHTML, e dare la possibilità a chi ha non ha o non supporta javascript di accedere a tali pagine. Esistono varie tecniche per un "perfect popup", una di esse (di Accessify.com) è adottata da queste stesse linee guida.

Nell'HTML basta associare una classe al link da aprire nella nuova finestra <a href="popup.html"" rel= "external" >Link da aprire in popup</a>e aggiungere una funzione javascript alla pagina function externalLinks( ) {if (!document.getElementsByTagName) return;var anchors = document.getElementsByTagName("a");for (var i=0; i<anchors.length; i++) {var anchor = anchors[i]; if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external")

{ anchor.title = "il collegamento apre una nuova finestra" ;

anchor.onclick = function( ) { window.open( this.href ); return false; }

anchor.onkeypress= function(e) { k = (e) ? e.keyCode : window.event.keyCode; if (k==13) window.open(this.href); return false; }

}}

}poi richiamare la funzione al caricamento della pagina <body onload="externalLinks( )">

Menu dinamiciA volte per migliorare la chiarezza dei contenuti occorre nascondere alcune parti: (un esempio di liste dinamiche e accessibili si trova sul sito di RegioneDigitale.net)

Script per migliorare l'accessibilitàJavascript è un linguaggio che si può utilizzare anche per migliorare l'accessibilità. Per migliorare la leggibilità di questo sito quando la risoluzione dello schermo è bassa (più piccola di 640px: document.body.clientWidth<641) o il carattere molto grande (offsetHeight > "30") i contenuti si ridispongono su una singola colonna grazie a questo codice.

function MinimumFontSize() {var XDivElement = document.getElementById('q');if ((XDivElement.offsetHeight > "30")||(document.body.clientWidth<641)) { tags = new Array ('contenuto_home', 'approfondimenti_home', 'contenuto',

'laterale'); for (j = 0; j < tags.length; j ++) { var getbody = document.getElementById(tags[j]); if (getbody) {

getbody.style.styleFloat='none'; getbody.style.display = 'block';

getbody.style.width = '99%'; getbody.style.margin = '0';


getbody.style.clear = 'both'; }

}}

}Questo codice viene eseguito solo al caricamento della pagina.

Verifiche per script, applet e plug-inVerificare l'accessibilità di questi tipi di oggetto può essere molto complesso perché essi potrebbero richiedere la verifica pratica sia con diversi browser che con tutte le tecnologie assistive.Un metodo per verificare la rispondenza ai requisiti è:

1. Verificare che esista almeno un'alternativa accessibile con il browser testuale Lynx per navigare la pagina.

2. Utilizzare la pagina per verificare che funzioni correttamente con i seguenti browser (pari al 96% degli user agent che visitano il sito ERMES da gennaio 2007) anche su sistemi operativi diversi ove possibile:

o Microsoft Internet Explorer 7.x per Windows XP o Vistao Microsoft Internet Explorer 6.x per Windows XP o 2000

o Mozilla Firefox 2.x su Windows/OsX/Linux o Apple Safari 2.x per OSX o 3 per Windows/OSX

o Opera 9 per Windows/OsX/Linux 3. Utilizzare la pagina con la sola tastiera

Alcune verifiche possono essere fatte con la barra dell'accessibilità (versione 2.0) , controllando:

• Fruibilità in assenza di applet: IE > Attiva/Disattiva ActiveX• Fruibilità in assenza di Javascript: IE > Attiva/Disattiva Javascript

Presenza di popup: Informazioni > Javascript / Link in nuove finestreVerranno evidenziati i link in nuove finestre per facilitarne la verifica


APPENDICI


CHECKLIST PER L'USABILITÀAlcuni controlli per verificare l'usabilità di una pagina o un sito Web:

Navigazione:

• La posizione corrente all’interno del sito è indicata chiaramente

• Il collegamento alla pagina principale del sito è identificato chiaramente

• Le parti più importanti del sito sono direttamente accessibili dalla pagina principale

• La mappa del sito viene fornita (per un sito complesso e di grandi dimensioni)

• Ove necessario, viene fornita una funzione di Ricerca facile da usare

Funzionalità:

• Il sito risulta soddisfacente sia per il novizio che per l’utente esperto

• Le funzioni sono identificate chiaramente

• Le funzioni essenziali sono disponibili senza lasciare il sito

• I plug-in sono usati soltanto se forniscono valore aggiunto

Controllo dell’utente:

• L’utente può annullare qualunque operazione

• Punti d’uscita evidenti sono forniti in ogni pagina

• La dimensione di ogni pagina è non supera i 50K, per non penalizzare i collegamenti lenti

• Tutti i browser opportuni sono supportati

Linguaggio e contenuto:

• Alle informazioni e funzioni importanti viene attribuita la necessaria evidenza

• Le informazioni meno importanti o le meno usate non vengono fornite

• Le informazioni o le funzioni collegate sono raggruppate (o nella stessa pagina o menu oppure nella stessa zona all’interno di una pagina)

• Il linguaggio è semplice, senza termini gergali

• I paragrafi sono brevi

• I link sono concisi, espressivi e visibili - non sepolti nel testo

• I concetti sono definiti

Help Online e Manuali utente:

• Il sito è progettato per richiedere Help e istruzioni minime

• L’Help e le istruzioni, se necessari, sono facilmente accessibili


Sistema e feedback dell’utenza:

• E' sempre chiaro che cosa sta accadendo nel sito (suggerimenti visivi, ecc.)

• Gli utenti possono ricevere feedback via E-mail se necessario

• Gli utenti possono fornire dei feedback via E-mail o tramite apposito form

• Schermate di conferma vengono fornite dopo l’invio di un form

• Tutte le risposte del sistema sono tempestive

• Gli utenti sono informati se è richiesto un particolare browser o plug-in

• Ogni pagina contiene una "data di ultimo aggiornamento"

Coerenza:

• La stessa parola o frase è usata coerentemente per descrivere una voce

• Il link riflette il titolo della pagina a cui si riferisce

• Il titolo della pagina del browser è significativo e riflette l’intestazione della pagina principale

Prevenzione e correzione degli errori:

• Gli utenti possono contare sul riconoscimento, non sulla memoria, per un uso riuscito del sito

• Il sito supporta una varietà ragionevole di azioni dell’utente

• Il sito fornisce istruzioni concise per le azioni che deve intraprendere l’utente, compreso il formato degli eventuali campi da compilare

• I messaggi di errore sono visibili, non nascosti

• I messaggi di errore sono in un linguaggio familiare, normale

• I messaggi di errore descrivono le azioni per rimediare a un problema

• I messaggi di errore forniscono un chiaro modo per uscire

• I messaggi di errore forniscono i dettagli su chi contattare per l’assistenza

Chiarezza architettonica e visuale:

• Il sito è organizzato in base alla prospettiva dell’utente

• Nel sito sono evidenti l’organizzazione dei contenuti e lo scopo generale del sito

• Il disegno e il layout del sito sono diretti e concisi

• Il disegno e il layout del sito sono ridondanti solo se necessario per la produttività dell’utente

• Lo spazio bianco è sufficiente; le pagine non sono troppo dense

• Le animazioni inutili sono evitate

• I colori usati per i link visitati e non visitati sono evidenti e comprensibili

• Il testo corsivo e grassetto è usato con parsimonia


CHECKLIST PER SITI ED APPLICAZIONI

Elenco delle verifiche da eseguire su tutte le pagine web

AccessibilitàPer controllare l'accessibilità di un’applicazione, consigliamo di suddividere la verifica in 3 momenti, così facendo si possono individuare meglio le potenziali inaccessibilità. Segue una lista di verifiche rapide utile per verificare il rispetto dei requisiti.

Struttura

• il codice XHTML Strict 1.0 (o superiore) e CSS siano validi e sia specificata la lingua del documento

• non ci siano elementi <frame> o <iframe> o mappe immagine lato server;

• ci sia almeno uno skip-link al contenuto se sono presenti menù o altri elementi fissi nella pagina;

• ogni etichetta sia associata esplicitamente al campo a cui si riferisce (<label for>);

• le tabelle di dati siano marcate correttamente (<th>, headers);

• immagini, mappe immagine lato client, audio e video abbiano un alternativo corretto e commisurato alla funzione.

Aspetto

• tutti i contrasti di colore siano a norma;

• il testo si ingrandisca (su IE5 o 6 anche all’interno dei campi);

• la pagina sia navigabile a 800x600 caratteri grandi su IE6 senza che appaia la barra di scorrimento orizzontale e lo sia anche disattivando il CSS;

• la pagina sia stampabile, anche in bianco e nero, senza perdita di informazioni;

• le etichette o i bottoni siano vicini ai campi o ai dati a cui si riferiscono;

• i link siano univoci, chiari e significativi;

• i <title> delle pagine corrispondano al contenuto; e il percorso (molliche di pane) sia corretto

• Tutto ciò che appare come titolo o lista sia marcato come tale (h1, ..., h4 e <ul>, <ol> ,<li>)

• le tabelle usate per impaginare siano al massimo una e comprensibile se letta “linearizzata”;

• non ci siano immagini, audio o video in movimento o il cui movimento non sia controllabile dall’utente .

• Sia presente il logo della Regione collegato alla home del portale istituzionale http://www.regione.emilia-romagna.it

Comportamento

• ogni elemento sia raggiungibile navigando con la sola tastiera (TAB);

• ogni azione sia possibile con l’uso della sola tastiera;

• l’aggiornamento dei contenuti sia lasciato all’utente;


• non venga generato dinamicamente del contenuto, ma sia ricaricata la pagina

• l’applicazione funzioni in modo equivalente anche con script o applet disabilitate (validazione, redirect, nuove finestre);

• non sia previsto un tempo massimo per svolgere delle azioni;

• le applet siano direttamente accessibili (cfr Allegato D D.M 8/7/2006 ).


RIEPILOGO DEI REQUISITI

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 reader 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.

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,5emper 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 essie non marcare come intestazioni le singole voci dei menù.

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 esterninon è ammesso l'uso di stili inline o all'interno della pagina.

• Se i contenuti possono venire stampati, deve essere presente uno stile per la stampadi 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'utentesi 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

Requisiti dei frame

• Non è consentito l’uso dei frame (o degli iframe) nella realizzazione di nuovi siti

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

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.

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.

Requisiti delle mappe immagine

• Utilizzare mappe immagine sensibili di tipo lato clientsalvo 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 alternativinecessari per ottenere tutte le informazioni o i servizi raggiungibili interagendo direttamente con la mappa.

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.

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

Requisiti delle tabelle di layout

• Il contenuto della tabella deve essere comprensibile anche quando questa viene letta in modo linearizzato.

• Usare solo <td> e non utilizzare elementi e attributi delle tabelle dati (es. th, scope, tbody ecc.).

Requisiti dei form

• Associare in maniera esplicita le etichette ai rispettivi campi.

• Posizionare le etichette vicino ai campi (o sopra, o immediatamente a lato).

• Le distanze orizzontale e verticale tra i pulsanti di un modulo deve essere di almeno 0,5em..

• Le dimensioni dei pulsanti devono essere tali da rendere chiaramente leggibile l’etichetta in essi contenuta (padding di almeno 0,5em ai lati).

• Si deve poter ingrandire il carattere anche nei campi dei moduli (su IE5.5, IE6).

Requisiti dei contenuti multimediali

• Fornire un'alternativa testuale equivalente.• Nel caso di files multimediali da scaricare fornire più alternative (per banda, per player) ed il

collegamento ai files per fruirli.

• Garantire che siano sempre distinguibili il contenuto informativo e lo sfondo ricorrendo a differenti livelli sonori (in caso di parlato con sottofondo musicale).

Requisiti di script, applet e plug-in

• Le pagine devono funzionare anche quando questo tipo di oggetti sono disabilitati o non supportati: se questo non fosse possibile si deve fornire una spiegazione testuale equivalente.

• Per la validazione dei dati inseriti in un form è necessaria la verifica lato server: una verifica preliminare tramite Javascript è utile ma non sufficiente.

• Funzionalità e informazioni di script e applet devono essere direttamente accessibili.

• I gestori di eventi devono essere indipendenti da uno specifico dispositivo di input: devono funzionare anche con il solo uso della tastiera.

• Se è previsto un intervallo di tempo predefinito entro il quale eseguire determinate azioni, è necessario avvisare l’utente, e indicare il tempo massimo consentito.


RIEPILOGO DELLE VERIFICHEIn questa pagina trovate riepilogati i suggerimenti e gli strumenti per verificare la qualità di siti ed applicazioni.

Verifiche su menù e listeTutte le verifiche possono essere fatte con la barra dell'accessibilità (versione 2.0), controllando:



Verifiche sui fogli di stileTutte 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 CSSla 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 inlinela pagina deve mantenere lo stesso aspetto

• Stile per la stampa: CSS > Visualizza i(l) Fogli(o) di Stilein 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 > 800x600occorre 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

Verifiche sui framesTutte 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

Verifiche sul testo

• Dalla barra dell'accessibilità 2.0 scegliete:Ridimensiona> 800x600Impostate 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

Verifiche per le mappe immagineTramite 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

Verifiche per le tabelle datiTutte le verifiche possono essere fatte con la barra dell'accessibilità (versione 2.0), controllando:

• Intestazioni: Tabelle > Intestazioni di tabellaper verificare che tutte le intestazioni siano correttamente marcate come tali

• Associazione celle intestazioni: Tabelle > Visualizza le tabelle dativengono mostrati anche id ed headers e si può verificare manualmente l'associazione

Verifiche sui formProvare il form con la sola tastiera è la prima verifica necessaria.Mediante la barra dell'accessibilità (versione 2.0), verificare l 'associazione tra campi ed etichetta:Struttura > Elementi fieldset/Label

Verifiche per script, applet e plug-inVerificare l'accessibilità di questi tipi di oggetto può essere molto complesso perché essi potrebbero richiedere la verifica pratica sia con diversi browser che con tutte le tecnologie assistive.Un metodo per verificare la rispondenza ai requisiti è:

1. Verificare che esista almeno un'alternativa accessibile con il browser testuale Lynx per navigare la pagina.

2. Utilizzare la pagina per verificare che funzioni correttamente con i seguenti browser (pari al 96% degli user agent che visitano il sito ERMES da gennaio 2007) anche su sistemi operativi diversi ove possibile:

o Microsoft Internet Explorer 7.x per Windows XP o Vista

o Microsoft Internet Explorer 6.x per Windows XP o 2000

o Mozilla Firefox 2.x su Windows/OsX/Linux

o Apple Safari 2.x per OSX o 3 per Windows/OSX

o Opera 9 per Windows/OsX/Linux 3. Utilizzare la pagina con la sola tastiera

Alcune verifiche possono essere fatte con la barra dell'accessibilità (versione 2.0) , controllando:

• Fruibilità in assenza di applet: IE > Attiva/Disattiva ActiveX

• Fruibilità in assenza di Javascript: IE > Attiva/Disattiva Javascript


• Presenza di popup: Informazioni > Javascript / Link in nuove finestre</Verranno evidenziati i link in nuove finestre per facilitarne la verifica

Verifiche per i files multimedialiCon la barra dell'accessibilità (versione 2.0), si può verificare la presenza di files multimediali nella pagina da: Informazioni > Elenco dei files multimediali [nuova finestra]

Verifiche per le tabelle di layoutTutte le verifiche possono essere fatte con la barra dell'accessibilità (versione 2.0), controllando:

• Linearizzazione: Tabelle > Linearizzaper capire se il contenuto ha ancora senso una volta tolte le strutture che gli danno forma

• Intestazioni: Tabelle > Intestazioni di tabellaper verificare che non siano state marcate le intestazioni

Verifiche sui linkAlcune 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 tabulazioneverrà 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 correnteVerificare che tutti i link siano funzionanti.

Verifiche per le immaginiTutte le verifiche possono essere fatte con la barra dell'accessibilità (versione 2.0), controllando:

• Alternativi: Immagini > Rimuovi immaginiper verificare che tutte le immagini che veicolano informazioni o hanno una funzione abbiano il corretto testo alternativo

• Immagini in movimento: Immagini > Test frequenza GIF animateverranno 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)

Verifiche sui coloriTutte le verifiche possono essere fatte con la barra dell'accessibilità (versione 2.0) , controllando:

• Colore: Colore > Scala di grigiper 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)


Verifiche sulla struttura delle paginePer 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




Versione aggiornata al 31 marzo 2008


•

Direzione Generale CentraleOrganizzazione, Personale, Sistemi Informativi e Telematica

Servizio Sistema Informativo-Informatico Regionale

V.le Aldo Moro, 3840127 Bologna

tel. +39.051.283.149fax +39.051.283.533

e-mail: [email protected]

Linee Guida per realizzare siti e applicazioni web...

Documents

Transcript of Linee Guida per realizzare siti e applicazioni web...