Autori:
Mauro Lusini
Sergio Corbini
Claudio Bartali
LdP Progetti GIS
Luca Gentili (LdP Progetti GIS)
Fabio Gianni (LdP Progetti GIS)

Sistema Informativo Territoriale

Specifiche tecniche per lo sviluppo di applicazioni web standard e accessibili

Dott. Miranda Brugi
Direzione Tecnologica e Decentramento

Data:
14 Novembre 2003

Contenuti del documento

1.	Perché questa guida, per chi questa guida?

2.	Normativa per la Pubblica Amministrazione

3.	Accessibilità e Usabilità

4.	Come fare? Linee guida per una corretta progettazione
4.1.1.	Progettare i contenuti
4.1.2.	Progettare le pagine
4.1.3.	Progettare il sito: separazione del contenuto dalla presentazione
4.1.4.	Utilizzare XHTML standard, validato
4.1.5.	Utilizzo di Fogli di Stile Css2 validi

1. Perché questa guida, per chi questa guida ?
Questa guida nasce con lo scopo di fornire una serie di informazioni sia teoriche sia pratiche sull'accessibilità e i metodi di corretto sviluppo di pagine web, che servano come riferimento per orientare gli sviluppatori verso quello che potremmo definire il "buon sviluppo": un modo di realizzare pagine web e siti conformi alla normativa vigente per la Pubblica Amministrazione, basato sul rispetto dei linguaggi standard del W3C (il Consorzio internazionale che stabilisce gli standard del web) e delle linee guida sull'accessibilità.

Gli argomenti principali di questo documento sono la progettazione e lo sviluppo di Siti e pagine web con codice valido, basati su Fogli di Stile CSS e che garantiscano almeno il grado di accessibilità a Livello-A.

Questo documento è rivolto tutti gli sviluppatori di applicazioni web per la Pubblica Amministrazione, siano essi personale interno alla P.A. o soggetti esterni, con contratti di fornitura di servizi e software.
Le specifiche e gli indirizzi espressi nella presente guida sono da applicarsi a tutti gli oggetti software utilizzati, acquistati o commissionati per lo sviluppo dalla Pubblica Amministrazione, che siano pagine web, interi siti o programmi gestionali e informativi.

2. Normativa per la Pubblica Amministrazione
La Circolare Funzione Pubblica 3/2001, la Circolare AIPA/CR/32 e il Disegno di Legge Stanca in fase di approvazione (che introduce il Bollino Blu quale simbolo distintivo per Enti che utilizzano tecnologie accessibili) costituiscono la normativa italiana di riferimento per gli Enti Pubblici le ditte ad esse collegate.

Le direttive contenute nei suddetti documenti impongono alle Pubbliche Amministrazioni e ai soggetti fornitori di applicativi e servizi, una progettazione consapevole del software, tesa a garantire l’interoperabilità e l’accesso all’informazione al maggior numero di utenti possibile, attraverso prodotti che rispettino gli standard del web stabiliti dal W3C e supportino l’accessibilità per gli utenti con disabilità che utilizzano tecnologie adattive e/o hanno necessità particolari.

L’adesione a questi principi comporta anche il non trascurabile vantaggio di spingere gli sviluppatori verso la creazione di applicazioni compatibili con hardware obsoleto e/o speciale (monitor piccoli, palmari, screen-readers per non vedenti, ecc.), facili da aggiornare e non legate a tecnologie chiuse, bensì in grado di interagire con le altre applicazioni impiegate all’interno di un’Amministrazione (con un conseguente risparmio di tempo e denaro nella gestione quotidiana e straordinaria dei flussi di dati e dei servizi).

Riferimenti
Disegno di legge Stanca
http://www.innovazione.gov.it/ita/news/2003/cartellastampa/documentazione_ddlstanca.shtml

Circolare AIPA. 6 settembre 2001, n. AIPA/CR/32.
http://www.governo.it/Presidenza/web/circ6set2001_AIPA.html

Circolare Funzione Pubblica. 13 marzo 2001, n. 3/2001
http://www.governo.it/Presidenza/web/circ13mar2001_FP.html

3. Accessibilità e Usabilità
Realizzare un sito accessibile significa progettare e realizzare contenuti web che siano accessibili al maggior numero di persone possibili. In particolare, i contenuti dovrebbero essere accessibili da utenti con vari gradi di disabilità fisiche e cognitive, il che porta come beneficio accessorio una maggior facilità di visualizzazione anche per chi ha dotazioni software e hardware minoritarie.

Esiste una iniziativa specifica, all’interno del W3C, alla quale far riferimento: il WAI (Web Accessibility Iniziative), che ha rilasciato a più riprese una serie di documenti contenenti principi e linee guida cui attenersi per realizzare contenuti web che siano accessibili al maggior numero di persone possibili.
Secondo il WAI le pagine web dovrebbero essere costruite secondo due criteri:
1.	consentire un'elegante trasformazione della pagina (da parte di browser speciali o obsoleti, ad esempio);
2.	i contenuti dovrebbero essere resi facilmente navigabili e comprensibili.

Il WAI consiglia anche alcuni metodi (http://www.w3.org/TR/WCAG10-TECHS/) per ottenere questi risultati:
•	separare la struttura dalla presentazione del documento;
•	fornire equivalenti testuali per i contenuti grafici e multimediali;
•	creare alternative equivalenti per i contenuti che si rivolgono ad un solo canale sensoriale (la vista o l'udito);
•	non progettare per uno specifico tipo di hardware;
•	non affidare le informazioni esclusivamente al colore;
•	fornire informazioni contestuali e di orientamento;
•	fornire chiari meccanismi di navigazione;
•	rendere i documenti il più possibile chiari e semplici;

Le indicazioni del WAI hanno anche un’ulteriore valenza. Come enunciato al punto 2, il WAI entra anche nel merito della strutturazione e della comprensibilità dei contenuti: aree che costituiscono il principale campo di applicazione dell'usabilità. Si potrebbe sostenere che l'usabilità è un sottoinsieme dell'accessibilità nella misura in cui ne approfondisce un aspetto.

Secondo la definizione data dalla norma ISO 9241, l'usabilità è il "grado in cui un prodotto può essere usato da particolari utenti per raggiungere certi obiettivi con efficacia, efficienza e soddisfazione in uno specifico contesto d'uso."
L'usabilità, al contrario dell’accessibilità, non è quasi una questione di codice e di compatibilità. Suo obiettivo è che il sito risponda alle esigenze dell'utente. Non necessariamente di tutti gli utenti, ma di quelli per i quali il sito è stato pensato.
Attraverso una progettazione attenta e l'osservazione dell'interazione fra sito e utente, l'usabilità registra errori e fraintendimenti di progettazione. Tramite colloqui con gli 
utenti indaga sulle ragioni di questi errori, e può così stilare una lista di suggerimenti migliorativi, in un continuo processo di prova/errore.

Progettare e realizzare un sito usabile è contemporaneamente una questione di metodo e di obiettivi: significa creare una architettura informativa adeguata al contenuto, agli utenti e alle funzionalità che essi si aspettano di trovare nel sistema.

Nella pratica progettuale e di sviluppo quindi, la presentazione e il raggruppamento dei contenuti del sito, la sua struttura logica e i dettagli delle interazioni con esso, dovranno essere coerenti con un approccio di progettazione basato sull’utente, garantendo sempre coerenza e consistenza nella realizzazione dei documenti web.
I percorsi di interazione e di navigazione saranno pensati per essere brevi ed evitare ogni tipo di ambiguità, progettati per supportare l’attività dell’utente e rispondere prontamente alle interrogazioni che quest’ultimo pone al sistema.

Riferimenti
Word Wide Web Consortium (W3C)
http://www.w3.org/

Web Accessibility Iniziative (WAI)
http://www.w3.org/WAI/Resources/

Guidelines del WAI sull’accessibilità
 http://www.w3.org/TR/WCAG10/

Tecniche per implementare le Guidelines del WAI sull’accessibilità
http://www.w3.org/TR/WCAG10-TECHS/

4. Come fare? Linee guida per una corretta progettazione
Il modo migliore e più economico per adempiere alle indicazioni della normativa vigente è quello di aderire ad una filosofia progettuale che abbia come capisaldi:
•	l’usabilità dei prodotti;
•	l’adozione degli standard del W3C nella produzione di dati e pagine web;
•	l’accessibilità delle informazioni in base alle specifiche del WAI.

E’ importante orientare la progettazione da subito verso lo sviluppo di applicazioni usabili, W3C-compliant e WAI-compliant, utilizzando tecniche progettazione, impaginazione e programmazione delle pagine, che rispettino gli standard e che superino l’esame dei validatori di codice W3C (sia per l’(X)HTML che per i CSS), nonché rispettino le guideline descritte nelle Web Content Accessibility Guideline pubblicate dal WAI.

Il controllo-qualità sulle scelte progettuali, sul codice delle pagine e sul prodotto nella sua interezza, deve essere effettuato durante ogni step, per individuare in tempo le criticità o gli errori nel corso della progettazione.
Dovrà altresì essere prevista la figura del garante dell’informazione (distinta o meno da quella preposta al controllo-qualità), responsabile della correttezza e dell’aggiornamento dei contenuti del sito.
Questi compiti sono in genere affidato a personale interno al CED, ufficialmente designato dall’Amministrazione per controllare che il gruppo di sviluppo rispetti le guidelines adottate e che il prodotto soddisfi i requisiti di accessibilità.

Di seguito vengono illustrati i concetti chiave e gli step successivi da intraprendere al fine di ottenere applicazioni web usabili, con codice valido e con contenuto accessibile.
4.1. Progettare i contenuti
Stabilire a tavolino, prima di cominciare a produrre le pagine, tutte le sezioni e tutti i contenuti del sito.
Progettare tutte le pagine aiuta a raggruppare razionalmente i contenuti e ad ottimizzare i percorsi di navigazione, in quanto fa emergere gli eventuali problemi prima che sia troppo tardi o troppo oneroso (ad esempio, modificare le sezioni di un sito già implementato).
E’ necessario adottare da subito un approccio user-centered, che individui i requisiti che l’utente richiede ad una architettura del tipo di quella che ci si appresta a creare, le aspettative che esso può avere e i servizi di cui fa richiesta.
Il risultato di questa fase saranno i raggruppamenti tematici dei contenuti e la definizione e il numero delle voci dei menu strutturali di navigazione che permettono di accedere alle varie sezioni.
4.2. Progettare le pagine
Produrre prototipi in scala 1:1 di layout delle pagine, inserendovi il contenuto effettivo e stabilendo l’impaginazione degli elementi: links, testi, titoli, tasti di 
navigazione, colore dei vari elementi, inserti grafici, immagini, ecc. (così come definiti nella fase precedente).
Decidere subito la risoluzione-target del sito. Se il sito dovrà essere ottimizzato per schermi con risoluzione 800x600, produrre prototipi di circa 760x520: solo così è possibile rendersi conto della correttezza del layout che si sta producendo e delle scelte di impaginazione degli elementi.
In questa fase può essere utile l’utilizzo di un software di disegno vettoriale (tipo Illustrator o Freehand o simili) che permetta di produrre prototipi e effettuare modifiche velocemente. Lavorando in questo modo, con files scalabili e ridimensionabili senza perdita di qualità, si ottengono ottimi prodotti per presentazioni dei prototipi e per i test sull’utente realizzati sulle stampe delle schermate.
Affinare il layout e produrre anche esempi concreti per tutte le tipologie di pagine interne, evidenziando possibili problemi e conflitti, fino a giungere ad una soluzione ritenuta soddisfacente.

4.3. Progettare il sito: separazione del contenuto del documento dalla sua presentazione
Una delle principali raccomandazioni del W3C, nonché importante guideline per ottenere prodotti accessibili e quella di separare il contenuto vero e proprio di un documento dallo stile di presentazione scelto.
In effetti il linguaggio (X)HTML è definito come linguaggio di markup strutturale, utilizzabile per definire la struttura del contenuto di un documento, non il suo layout di presentazione.
In altre parole, è necessario che il codice (X)HTML non venga inquinato da tag utilizzati per la presentazione visiva del documento: questi ultimi devono risiedere in fogli di stile separati.
Un importante indirizzo da adottare è quello di limitare l’uso di tabelle (tag TABLE) ai casi realmente appropriati e cioè la visualizzazione di dati tabulari. L’uso di tabelle per l’impaginazione (layout tables), ancorché prassi molto diffusa, rappresenta un utilizzo scorretto del codice (X)HTML, introdotto a fini esclusivamente visivi.
Sia dal punto di vista progettuale che realizzativi, è molto più corretto l’utilizzo dei cosiddetti Fogli di Stile posizionali (CSS-P), che permettono di creare layout per il web in modo molto più semplice e standard-compliant.

4.4. Utilizzare XHTML standard, validato
Il criterio di separazione tra contenuto e presentazione va integrato con l’utilizzo di codice standard, che rispetti le specifiche stabilite dal W3C per il linguaggio di markup prescelto.
E’ opportuno orientare la scelta verso XHTML 1.0 o successivi (http://www.w3.org/TR/xhtml1/), verificandone l’utilizzo corretto validando frequentemente il codice mediante gli appositi validatori, che costituiscono un importante strumento gratuito di sviluppo disponibile on-line (http://validator.w3.org/).
Il linguaggio XHTML tende dichiaratamente a riportare in primo piano – come era alle origini del linguaggio HTML - la struttura del documento, eliminando tutto ciò che è pura presentazione: il suo uso è perciò in linea con lo spirito delle linee 
guida delle WCAG 1.0 (http://www.w3.org/TR/WCAG10/ ), che suggeriscono esplicitamente di separare il contenuto del documento dalla sua presentazione.
Inoltre la scelta di questo linguaggio è una decisione vantaggiosa perché rispetta le rigorose specifiche di struttura del linguaggio XML, permettendo lo sviluppo di applicazioni web che possano scambiare e gestire dati provenienti dai database più disparati, garantendo anche in futuro una elevata compatibilità e supporto alle applicazioni più avanzate.
L’adozione di codice standard semplifica notevolmente la complessità dei documenti, velocizza le fasi di sviluppo degli applicativi e permette un più facile interscambio di dati tra entità distinte all’interno dell’Amministrazione (Uffici, Dipartimenti, Enti, ecc.). Perciò lavorare con gli standard non solo è più veloce, economico, obbligatorio a termini di legge, ma produce anche risparmi sensibili per l’Amministrazione, in quanto tutte le future operazioni di restyling, aggiornamento dei contenuti, aggiunte di nuovi moduli, ecc, risulteranno più semplici.
Utilizzare codice standard non è solo questione di corretta sintassi: è altrettanto importante usare correttamente il codice, evitando di utilizzare i tag (X)HTML che il W3C giudica deprecati o obsoleti, eliminando ogni tag utilizzato per pure finalità di impaginazione (come i tag FONT, B, STRONG, COLOR, ecc.). Si veda la sezione seguente sui CSS.

4.5. Utilizzo di Fogli di Stile Css2 validi
L'uso dei CSS, nella versione più recente CSS2, e la parallela eliminazione degli attributi e degli elementi (X)HTML di presentazione, consentono di ottenere notevoli vantaggi in termini di accessibilità, purchè facciano uso di markup valido secondo le specifiche del W3C. Le specifiche del linguaggio CSS2 sono disponibili in rete, all’indirizzo http://www.w3.org/TR/CSS2/.

In aggiunta a questo, ci sono altri motivi che ci portano ad utilizzare i CSS per gestire l’impaginazione dei documenti: 
•	definire la presentazione per mezzo dei CSS consente di ridurre il peso della pagina, talvolta del 50-60% o anche più: già questo rappresenta un grosso vantaggio per l'accessibilità. 
•	l'uso dei CSS consente di specificare una serie di presentazioni alternative, ciascuna adatta alla riproduzione su una differente periferica (schermo, stampa, sintetizzatori vocali, ecc.), mentre l'uso di elementi e attributi di presentazione dell'HTML favorisce essenzialmente la sola riproduzione su schermo. 
•	demandare la presentazione ai CSS consente di ottenere un codice HTML più lineare e pulito, e di evitare per esempio il ricorso ad artifici sconsigliati per l'accessibilità, quali le tabelle usate a scopo di impaginazione. Le conseguenze immediate sono: facilità di aggiornamento e modifica, visualizzazione consistente su browser diversi.

Riferimenti
Specifiche del linguaggio XHTML 1.0
http://www.w3.org/TR/xhtml1/

Specifiche dei CSS2
http://www.w3.org/TR/CSS2/

Validatori del codice delle pagine e dei CSS
http://www.w3.org/QA/Tools/ - validators