Accessibilità “Gli Stati dovrebbero riconoscere l’importanza dell’accessibilità nel processo di creazione di uguali opportunità in tutti i campi della vita sociale. Per le persone disabili gli Stati dovrebbero attivare programmi per prendere le necessarie misure per fornire accesso alle informazioni e al mondo della comunicazione… Gli Stai dovrebbero far sì che i nuovi sistemi telematici per fornire al pubblico informazioni e servizi siano resi accessibili sin dall’inizio oppure adattati in modo da risultare accessibili alle persone disabili” [Risoluzione delle Nazioni Unite n° 48/96]

Cos’è l’accessibilità L’accessibilità indica se come la tecnologia può essere usata dall’utente disabile o con minori abilità fisiche. Il W3C ha promosso la WAI (Web Accessibility Initiative), iniziativa che mira ad individuare e suggerire i criteri di realizzazione dei siti web accessibili. In Italia la legge 4 del gennaio 2004, detta “Legge Stanca” impone una revisione generale i siti di tutte le amministrazioni pubbliche in modo da rispettare i requisiti di accessibilità in base ad un principio di non discriminazione

Accesso alla rete Gli utenti infatti possono operare in contesti molto diversi: Possono essere in grado di vedere, ascoltare o muoversi ma non sono in grado di trattare alcuni tipi di informazioni Possono avere difficoltà nella lettura o nella comprensione del testo Possono non essere in grado di usare il mouse o la tastiera Possono avere solo uno schermo testuale o una connessione Internet molto lenta Possono trovarsi in contesti in cui le loro mani, occhi o orecchie sono occupati Possono avere dei browser molto diversi da quelli usati per la validazione o browser basati su dispositivi di sintesi vocale

Disabilità Disabilità della vista Disabilità dell'udito Disabilità fisiche Disabilità cognitive: apprendimento, deficit d'attenzione.

Legge Stanca Art. 1 Obiettivi : tutela il diritto di ogni persona ad accedere a tutte le fonti di informazione e ai relativi servizi, ivi compresi quelli che si articolano attraverso gli strumenti informatici e telematici Art. 2 Definizioni «accessibilità»: la capacità dei sistemi informatici, nelle forme e nei limiti consentiti dalle conoscenze tecnologiche, di erogare servizi e fornire informazioni fruibili, senza discriminazioni, anche da parte di coloro che a causa di disabilità necessitano di tecnologie assistive o configurazioni particolari; Art. 3 La presente legge si applica alle pubbliche amministrazioni

Legge Stanca: attuazione Prevede un Regolamento di attuazione (G.U. 101 del 03/05/05) Definisce gli aspetti della Verifica tecnica basata su parametri tecnici oggettivamente verificabili Inserisce il concetto di Verifica soggettiva che deve essere effettuata, dopo l’esito positivo della verifica tecnica, da parte di soggetti disabili o su base di conoscenze empiriche Vengono definiti i Requisiti tecnici minimi per definire un sito accessibile Con 22 punti di controllo, che corrispondono per la maggior parte ai requisiti del WAI

Regolamento di attuazione della legge Stanca 5 marzo 2005 Art. 2 (Criteri e principi generali per l’accessibilità) 1. Sono accessibili i servizi realizzati tramite sistemi informatici che presentano i seguenti requisiti: a) accessibilità al contenuto del servizio da parte dell’utente; b) fruibilità delle informazioni offerte, caratterizzata anche da: 1) facilità e semplicità d’uso, assicurando, fra l’altro, che le azioni da compiere per ottenere servizi e informazioni siano sempre uniformi tra loro; 2) efficienza nell’uso, assicurando, fra l’altro, la separazione tra contenuto, presentazione e modalità di funzionamento delle interfacce, nonché la possibilità di rendere disponibile l’informazione attraverso differenti canali sensoriali; 3) efficacia nell’uso e rispondenza alle esigenze dell’utente, assicurando, fra l’altro, che le azioni da compiere per ottenere in modo corretto servizi e informazioni siano indipendenti dal dispositivo utilizzato per l’accesso; 4) soddisfazione nell’uso, assicurando, fra l’altro, l’accesso al servizio e all’informazione senza ingiustificati disagi o vincoli per l’utente; c) compatibilità con le linee guida indicate nelle comunicazioni, nelle raccomandazioni e nelle direttive sull’accessibilità dell’Unione europea, nonché nelle normative internazionalmente riconosciute e tenendo conto degli indirizzi forniti dagli organismi pubblici e privati, anche internazionali, operanti nel settore, quali l’International Organization for Standardization (ISO) e il World Wide Web Consortium (W3C).

W3C Il W3C non è un’autorità, ma fornisce le direttive che devono essere seguite per essere compatibili con i browser standard. Tecnologie e attività del W3C: Accessibilità, CSS, DOM (Document object Model: per fornire oggetti consistenti tra i vari browser), HTML, Internazionalizzazione, Integrazione degli oggetti multimediali sincronizzati, SGV (Grafica vettoriale scalabile)

WAI: linee guida Le linee guida sono riconosciute come la norma mondiale de facto per la progettazione di siti Web accessibili. Le linee guida: vogliono essere compatibili sia con le tecnologie e gli strumenti di progettazione Web di prima generazione che con quelli più moderni, come ad esempio i nuovi tipi di browser, le tecnologie di assistenza digitale e i telefoni WAP. costituiscono un insieme di regole dinamico e in costante evoluzione, che cerca di tenersi al passo se non addirittura di anticipare lo sviluppo tecnologico. offrono una pronta assistenza tecnica in linea e sono estremamente utili per superare le barriere di accesso ad Internet per i disabili. Se si usano le linee guida, diventa tecnicamente possibile rendere i siti Web accessibili ai disabili e quindi permettere a questi ultimi di partecipare a tutti gli effetti alla società dell'informazione

Le priorità [Priorità 1] Lo sviluppatore dei siti web deve conformarsi al presente punto di controllo. In caso contrario ad una o più categorie di soggetti viene precluso l’accesso alle informazioni presenti nella pagina. La conformità a questo punto di controllo costituisce un requisito di base affinché alcune categorie di utenti siano in grado di usare i documenti. [Priorità 2] Lo sviluppatore dei siti web dovrebbe conformarsi a questo punto di controllo. La conformità a questo punto consente di rimuovere barriere significative per l’accesso ai documenti web [Priorità 3] Lo sviluppatore web può tenere in considerazione questo punto di controllo. La conformità a questo punto migliora l’accesso ai documenti web. In base alle priorità vengono definiti tre livelli di conformità: Livello di conformità “A”: conforme a tutti i punti di controllo di priorità 1 Livello di conformità “AA”: conforme a tutti i punti di controllo di priorità 1 e priorità 2 Livello di conformità “AAA”: conforme a tutti i punti di controllo di priorità 1, priorità 2 e priorità 3

Punti di controllo del WAI Priorità 1 7 punti di controllo generali 2 Punti per le immagini o le mappe immagini 2 Punti per le tabelle 1 per i frame 1 per gli applet e script 2 per gli elementi multimediali Nota per dichiarare la conformità a LIVELLO A tutti i punti di controllo devono essere soddisfatti

Punti di controllo del WAI Priorità 2 20 punti di controllo generali 2 punti per le tabelle 1 per i frame 2 per i moduli 5 per applet e script Nota per dichiarare la conformità a LIVELLO AA tutti i punti di controllo delle priorità 1 e 2 devono essere soddisfatti

Punti di controllo del WAI Priorità 3 14 punti di controllo generali 1 per immagini e mappe immagini 3 per le tabelle 1 per i moduli Nota per dichiarare la conformità a LIVELLO AA tutti i punti di controllo delle priorità 1, 2 e 3 devono essere soddisfatti

Com’è fatta la struttura di un documento? Un documento segue il seguente schema: Una dichiarazione di DOCTYPE Un elemento html Un elemento head con il titolo Il corpo (body) del documento Elementi strutturali, usati in modo logico per gestire il contenuto. In questa categoria vi sono le intestazioni (h1,…, h6), i paragrafi (p), le interruzioni di linea (br) e le liste (ul, ol, dl)

Le DTD in (X)HTML Strict: la DTD strict è quella in cui quasi tutti gli elementi di presentazione e gli attributi sono completamente indisponibili In HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> In XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Transitional: è nata dall’idea che non sempre tutte le caratteristiche dei CSS sono disponibili. La DTD Transitional ammette alcuni elementi di presentazione. In HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> In XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Frameset: include solo documenti che usano i frame In HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> In XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Cosa sono i CSS Principi dei CSS Il CSS è un linguaggio di stile che permette di descrivere come definire gli aspetti di presentazione di un documento. Principi dei CSS Compatibilità Strutturazione Indipendenza dai dispositivi Miglioramento della manutenzione dei documenti Semplicità Performance Flessibilità Accessibilità

Usare uno stile Stili Inline: inseriti nei vari punti del documento <h1 style="font-family: Arial">Welcome!</h1> Stile Embedded: inseriti all’inizio di un singolo documento, nella parte <head>, di solito dopo <title> <style type="text/css" media="screen">h1 {     font: Arial;}</style> Stili linkati: fanno riferimento a file esterni, si inserisce il link nella parte <head> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> Stili Importati: fanno riferimento a file esterni, si inserisce il link nella parte <head> <style type="text/css" media="screen">@import "style.css";</style>

I requisiti tecnici La legge introduce 22 requisiti che possono essere valutati oggettivamente con mezzi di verifica automatici e semi automatici

Creare un sito accessibile Equivalente testuale Nei punti di controllo viene detto di “fornire un equivalente testuale”. Tali testi devono essere sempre inseriti accuratamente. Pulsanti grafici: il testo deve spiegare la funzione del pulsante e non il suo aspetto. La dimensione del pulsante non deve essere troppo piccola Descrizione delle immagini: a seconda della loro importanza ai fini della comprensione delle informazioni presenti sul sito, le immagini a volte possono essere semplicemente decorative e quindi basta un testo breve. Se le immagini sono per esempio grafici informativi usare LONGDESC, o una didascalia con un link Immagini animate: inserire un testo che spieghi l’animazione se essa è indispensabile per la comprensione dell’informazione (p.e. se si tratta di un’animazione che spiega come compiere una determinata azione) Script: mettere ove possibile il tag <noscript> che rimanda ad un file alternativo Punti di controllo: (equivalente testuale), 1.2 (collegamenti per ogni zona attiva) 1.3 (equivalente testuale per oggetti multimediali), 1.4: sincronizzazione degli oggetti multimediali con gli equivalenti testuali Priorità 1 1.5 (equivalenti testuali delle mappe lato client e non lato server) Priorità 3

Creare un sito accessibile Uso del Colore Le informazioni del sito non devono essere veicolate tramite il solo colore (Punto di controllo 2.1 – Priorità 1) Per i link è bene usare sia un colore che dei caratteri (grassetti capolettera, sottolineature) che rendano il link riconoscibile anche a chi non può visualizzare i colori. Usare sempre un contrasto adeguato tra colore di sfondo e primo piano (Punto di controllo 2.2  - Priorità 2)

Creare un sito accessibile Fogli di Stile e struttura dei documenti Separare i contenuti dalla presentazione: il vantaggio è che diventa facilmente implementabile la gestione dell’uniformità del sito e si può modificare il layout senza dover modificare le pagine (Punto di controllo 3.3 – Priorità 2, 6.1 – Priorità 1) Strutturare il documento usando in modo appropriato i tag dei titoli: ci sono strumenti che permettono di leggere la sola struttura della pagina senza doverla leggere tutta rendendo più semplice la navigazione e la comprensione dei contenuti. (Punto di controllo 3.5 – Priorità 2) Posizionamento degli elementi in una pagina: sempre meglio relativo per gli elementi principali in modo da poter permettere il ridimensionamento delle finestre (Punto di controllo 3.4 – Priorità 2)

Creare un sito accessibile Lingua Indicare la lingua del documento ed gli eventuali cambiamenti di lingua all’interno del documento. Tale indicazione viene usata da molti screen reader per leggere il documento con l’accento giusto. (Punto di controllo 4.3 – Priorità 3) Acronimi usare i tag ACR e ABBR per scioglierli (Punto di controllo 4.2 – Priorità 3)

Creare un sito accessibile Tabelle Dovrebbero essere usate solo per i dati e non per l’impaginazione Per tabelle di dati marcare opportunamente le intestazioni di righe e colonne per rendere più leggibili (Punto di controllo 5.1, 5.2 – Priorità 1, 5.6 – Priorità 3) Se le tabelle vengono usate per l’impaginazione verificare la loro linearizzazione, senza usare i marcatori di struttura usati per le tabelle di dati. Verificare se non si possa ottenere lo stesso tipo di impaginazione con i css (Punto di controllo 5.3, 5.4 – Priorità 2)

Creare un sito accessibile Tecnologie Verificare se le pagine funzionano anche disabilitando alcune tecnologie, ad esempio: fogli di stile: il sito è leggibile anche senza fogli di stile? (Punto di controllo 6.1 – Priorità 1) Javscript: evitare di usarli per i link perché le pagine potrebbero non aprirsi Frame: il loro uso è sconsigliato. Se viene usato per le intestazioni si può usare un semplice include Elementi in movimento: evitare se possibile i contenuti in movimento e comunque lo sfarfallio. Se si usano degli elementi lampeggianti in una pagina mettere un’avvertenza sul link che rimanda ad una pagina con tali oggetti.

Creare un sito accessibile Indipendenza dai dispositivi di accesso Form: l’accesso ai vari elementi non deve essere solo tramite mouse, ma anche da tastiera, usando opportunamente il TAB ed il tag TABINDEX Immagini mappate: usarle lato client e non lato server in modo da poter mettere gli opportuni alt sugli elementi delle varie aree Script: meglio usare eventi come onSelected che non eventi dipendenti da dispositivo (onMouseOver) Usare le accesskey: la navigazione da tastiera diventa più agevole

Accessibilità di base L'accessibilità di base deve occuparsi di turare alla meglio le falle aperte dal cattivo sviluppo. Può fare qualche rattoppo, non miracoli, limitandosi a: inserire i testi alternativi mancanti provare a mettere qualche elemento NOSCRIPT qua e là avvertire il lettore, tramite un attributo "title", che una certa pagina si aprirà in una nuova finestra del browser cercare di rendere una struttura a frame un po' più navigabile, dando dei titoli sensati ai frame o creando una minima alternativa di navigazione con un elemento NOFRAMES provare a ridurre un po' la massa del codice presentazionale mischiato al contenuto, trasferendo una parte della presentazione visuale ad un foglio di stile esterno correggere gli errori di codice in modo che le pagine passino la validazione creare qualche pagina alternativa a quelle contenenti animazioni Flash non accessibili o applet java non navigabili da tastiera ecc. ecc.

Gli errori più comuni Immagini senza ALT o LONGSDESC: si possono verificare con Lynx Caratteri: contrasto troppo basso tra sfondo e primo piano (mettere la formula) Non ridimensionabili: uso di valori assoluti Font poco leggibili Eventi: usare eventi general pur pose o mettere più casi (non solo onMouseOver) Tabelle: non usare tabelle annidate o troppo complesse (linearizzazione corretta: verifica con Lynx o con A-prompt) File multimediali: mettere sempre le alternative testuali ed evitare che partano automaticamente (vedi incompatibilità tra file audio e screen reader) Lampeggiamento e testi scorrevoli: possono distogliere l’attenzione e non essere di facile lettura soprattutto per chi ha disabilità cognitive Link: non metterli troppo vicini gli uni agli altri e separarli con un carattere in modo che chi usa una screen reader o chi abbia delle difficoltà motorie possa facilmente selezionare la voce che lo interessa

Suggerimenti principali - 1 Separate la presentazione di un documento dal suo contenuto: occorre evitare di inserire nel codice (X)HTML vincoli di presentazione, occorre usare i CSS per definire la formattazione del documento e la sua eventuale presentazione per altri media (stampa, sintetizzatori vocali, telescriventi, computer palmari, Web TV, ecc.) Usate la DTD strict di XHTML 1.0 o, in alternativa, la DTD di XHTML 1.1: sono le più adeguate a raggiungere lo scopo di separare la presentazione dal contenuto Non affidate nessuna informazione esclusivamente all'uso del colore Evidenziate la struttura logica dei contenuti testuali, usando nel modo più appropriato gli appositi elementi ed attributi strutturali di (X)HTML Realizzate moduli accessibili, utilizzando gli appositi elementi ed attributi - FIELDSET, LABEL, ecc. - ed i CSS per rendere i vari campi più visibili nella pagina (ed eventualmente ingrandibili a discrezione dell'utente) Rendete accessibili le tabelle di dati, utilizzando gli appositi elementi ed attributi strutturali previsti a partire da HTML 4: CAPTION, TH, COL, COLGROUP, summary, scope, headers, id, ecc.

Suggerimenti principali - 2 Sostituite le tabelle usate a scopo di impaginazione con soluzioni basate sui CSS. Se decidete di utilizzare comunque delle tabelle di impaginazione, evitate possibilmente di annidare più tabelle una nell'altra e, soprattutto, di formattarne le celle per mezzo di elementi e attributi presentazionali di (X)HTML. Per la loro formattazione usate piuttosto i CSS e, soprattutto, assicuratevi che il contenuto di ciascuna tabella di impaginazione venga linearizzato correttamente, se letto in modalità non grafica Scrivete testi alternativi che svolgano una funzione equivalente a quella del contenuto non testuale che sostituiscono. Scrivete testi accessibili, in cui sia esaltata la semplicità, la correttezza e l'adeguatezza del linguaggio, e siano allo stesso tempo evitate le deformazioni e le incomprensibilità proprie dello stile pubblicitario, dello stile tecnicistico e dello stile burocratico. Non utilizzate frame. Esistono altri modi più accessibili di costruire un'interfaccia di navigazione

Suggerimenti principali - 1 Realizzate pagine i cui contenuti rimangano accessibili nelle più disparate condizioni d'uso, piuttosto che pagine che si vedano allo stesso modo su tutti i principali browser grafici: liberatevi, cioè, dal "pregiudizio della stampa“ Scrivete pagine basate su codice (X)HTML e CSS valido Usate strumenti automatici per scoprire gli errori di accessibilità legati al codice Usate la revisione umana per verificare l'accessibilità di tutti gli elementi della pagina non controllabili in automatico (proprietà e correttezza dei testi, comprensibilità dei meccanismi di navigazione, contrasto primo piano/sfondo, ecc.) Ponetevi come obiettivo il raggiungimento di un'accessibilità reale, verificata per mezzo di test e riscontri con individui umani, piuttosto che la sterile esposizione di bollini di conformità.

Accessibilità delle form Assicurarsi che le form sia accessibili da tastiera, logiche e facili da usare Mettere le etichette vicino ai controlli corrispondenti Usare il tag <label>. Raggruppare gli elementi usando il tag <fieldset>. Dare un titolo ad ogni campo con il tag <legend>. Raggruupare I radio button con il tag <fieldset> tag, e mettere una <label> per ogni checkbox (eventualmente raggruppandole con <fieldset> Mettere sempre il pusante di invio, non usare dei javascript Usare eventualmente <accesskey> e <tabindex> per lo spostamento coerente nella form

Strumenti di verifica generali Strumenti in linea che effettuano la verifica di singole pagine Bobby http://webxact.watchfire.com/ È uno strumento che permette di effettuare dei test verificando la conformità alle linee guida del WAI e della sezione 508. Torquemada: http://www.webxtutti.it/testa.htm Strumento in italiano che offre a chi sviluppa siti web una metodologia completa di analisi dell’accessibilità tramite uno strumento che permette di capire velocemente quali sono le zone della pagina interessate dall’errore e il codice HTML corrispondente.

Strumento di verifica locale Web Accessibility Toolbar: http://www.nils.org.au/ais/web/resources/toolbar/index.html Strumento che inserisce una nuova barra degli strumenti in Internet Explorer che permette di eseguire vari test di accessibilità (valuta 50 dei 65 punti delle linee guida del WAI)

Strumenti specifici Strumenti in linea che servono per verificare gli aspetti di correttezza sintattica delle pagine Servizio di validazione del W3C per la correttezza sintattica delle pagine: http://validator.w3.org/ Servizio di validazione in italiano per i CSS: http://jigsaw.w3.org/css-validator/ Il servizio in linea permette di valicare sia fogli di stile presenti su un server (indicando l’URL) che per upload

Strumenti di “riparazione” Strumenti gratuiti e scaricabili che permettono di rendere le pagine più accessibili ed effettuare le correzioni A-Prompt : http://aprompt.snow.utoronto.ca/ Strumento gratuito dell’Università di Toronto che può essere scaricato. Può essere usato sia per identificare i problemi che per correggerli, in parte automaticamente e in parte manualmente Tidy Di Dave Raggett, è un tool gratuito che può essere scaricato. Ripara gli errori e migliora lo stile HTML/XML. Converte l’HTML in XHTML. Viene usato normalmente in un editor che lo integra come HTML-Kit: http://www.chami.com/html-kit/