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
•
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/cssvalidator/
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/
•