Download Introduzione all`accessibilità (G. Scola) File - AulaWeb

Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Ufficio sviluppo risorse umane e organizzazione - Ufficio dirigenziale affari generali e comunicazione Delegato del Rettore per l'integrazione degli Studenti disabili - CSITA Centro Servizi Informatici e
Telematici di Ateneo - Servizio Orientamento
Corso di formazione
sull'accessibilità dei siti web
Introduzione all'accessibilità
Giancarlo Scola
pagina 1
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Nota di copyright/Disclaimer
Il contenuto di queste slides è protetto dalla vigente normativa sul diritto d’autore e diritti connessi.
Tutti i diritti relativi al contenuto delle slides (ivi incluse immagini, fotografie, animazione, video, audio,
musica e testi) appartengono agli autori indicati nella prima slide.
Le slides possono essere riprodotte ed utilizzate dagli istituti di ricerca, scolastici e universitari
afferenti al Ministero dell’Istruzione, dell’Università e della Ricerca ad esclusivo uso scientifico,
didattico o documentario e senza fini di lucro, purché non vengano alterate in alcun modo sostanziale,
ed in particolare mantengano le corrette indicazioni di data, paternità e fonte originale.
Non è consentita ogni altra utilizzazione o riproduzione anche parziale (ivi incluse le riproduzioni su
supporti cartacei, magnetici e su reti di calcolatori) se non previa esplicita autorizzazione scritta degli
autori.
Le informazioni contenute nelle slides sono controllate accuratamente alla data della pubblicazione e
possono essere soggette a cambiamenti senza preavviso. Gli autori non assumono alcuna
responsabilità per la loro correttezza, completezza, applicabilità e aggiornamento.
Esse sono fornite per scopi meramente didattici e non per un utilizzo pratico (p.e. in progetti di
impianti, prodotti, reti, etc.).
Gli autori declinano ogni responsabilità per qualunque tipo di utilizzo fatto da terzi del presente lavoro.
pagina 2
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Errori comuni
Forniamo una breve panoramica (non esaustiva)
degli errori che comunemente si commettono
sviluppando pagine web.
pagina 3
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Errori Comuni
Uso errato dei marcatori HTML
 Cattiva scelta dei colori
 Navigazione non lineare
 Uso ridondante di tecnologie
 Progettazione legata a specifici
browser o particolari risoluzioni
 Apertura di nuove finestre
Tutto questo può pregiudicare il
buon funzionamento di un sito
web.

pagina 4
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Uso errato dei marcatori HTML
HTML nasce per fornire indicazioni ai browser su
come renderizzare dei testi, evitare quindi di:
Usare le tabelle per l'impaginazione.
Usare i tag <hx> per cambiare la grandezza dei
caratteri.
pagina 5
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Cattiva scelta dei colori
Un sito variopinto non costituisce di per sè un sito
più attraente. Si deve cercare quindi di usare il
minor numero di colori possibile, in tinte ben
accostate e, soprattutto, coerenti per ogni pagina.
pagina 6
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Cattiva scelta dei colori
Vediamo come evitare scelte infelici che hanno un impatto
visivo non voluto. Considerazioni su come accostare i
colori non sono nello scopo di questo corso, anche se, in
fase di valutazione, verranno adottati i seguenti algoritmi :
differenza di luminosità:
[(Rosso X 299) + (Verde X 587) + (Blu X 114)] / 1000 ≤
125
differenza di colore:
[Max (Rosso1, Rosso2) - Min (Rosso1, Rosso2)] +
[Max (Verde1, Verde2) - Min (Verde1, Verde2)] +
[Max (Blu1, Blu2) -Min (Blu1,Blu2)] > 500
pagina 7
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Cattiva scelta dei colori
La gamma di colori web-safe consiste di 216 colori
che vengono visualizzati in modo costante e privo di
sfarfallio su qualsiasi schermo.
Ricordiamo che con 8 bit è possibile ottenere 256
valori diversi in un intervallo di valori compreso tra 0 e
255
pagina 8
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Cattiva scelta dei colori
Ecco cosa succede usando dei colori non web-safe:
Tale distorsione rende difficoltosa la visione, con
evidenti problemi.
pagina 9
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Cattiva scelta dei colori
Tali colori sono definiti in termini di valori RGB pari a 0,
51, 102, 153, 204 e 255.
Questi numeri possono sembrare casuali, ma in effetti
essi sono tutti dei multipli di 51. E 51 è il 20% di 255,
102 è il 40% di 51 e così via...
Per visualizzare l'intera palette di colori:
http://www.visibone.com/colorlab/
pagina 10
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Apertura di nuove finestre
L'apertura di nuove finestre durante la navigazione
di un sito potrebbe confondere l'utente, rendendo
difficile la navigazione.
Evitare quindi l'apertura di finestre supplementari
durante la navigazione.
pagina 11
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Navigazione non lineare
Cercare di progettare un sito che abbia una struttura
logica e ben definita, suddividendolo in sezioni
omogenee.
Fornire in ogni pagina informazioni sulla posizione e la
possibilità di raggiungere i vari livelli del sito, con link
appositi, una sezione del sito dovrebbe essere la
mappa del sito stesso.
Evitare di dare alle pagine nomi di fantasia o numeri, il
nome stesso della pagina dovrebbe essere coerente
con il suo contenuto, anche per evitare URL
assurdamente lunghe o prive di significato.
pagina 12
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Uso ridondante di tecnologie
Evitare di ricorrere inutilmente all'uso di tecnologie
non necessarie.
La bellissima applet Java che fa scorrere un testo
fornisce la stessa informazione di un testo
semplice.
Per contro, in questo modo, si aumenta la
dimensione della pagina e il tempo di caricamento
della stessa.
pagina 13
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Progettazione legata a specifici browser
o particolari risoluzioni
Evitare assolutamente di progettare un sito sullo
stile “ottimizzato per il browser X alla risoluzione
YxZ”.
Per quanto alcune tecnologie siano più diffuse di
altre, non ha alcun senso tagliare fuori una seppur
piccola fascia di utenza.
pagina 14
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Strumenti per l'utente
Forniamo brevemente una panoramica dei mezzi
a disposizione agli utenti disabili per facilitare
loro la navigazione di siti web.
pagina 15
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Strumenti per l'utente
Screen Reader
Sono degli applicativi che di
solito vengono eseguiti
all'avvio del computer per
consentire all'operatore non
vedente di avere fin da subito
il controllo del sistema
operativo. Questi programmi
trasformano in voce il testo
che appare sullo schermo.
pagina 16
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Strumenti per l'utente
Display Braille
Questo dispositivo
riproduce in alfabeto
braille ciò che appare
sullo schermo.
pagina 17
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Strumenti per l'utente
Browser vocali
A questa categoria appartengono i software realizzati
esplicitamente per la navigazione dei siti web.
Rispetto agli screen reader, che sono strumenti per il
controllo generico del sistema operativo e delle
applicazioni, un browser vocale può essere utilizzato
esclusivamente durante la visita ad un sito web
oppure per scaricare la posta elettronica da una
finestra del browser dedicata.
pagina 18
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Strumenti per l'utente
Head Mouse
Tali dispositivi
permettono di controllare
il puntatore del mouse
con il movimento della
testa.
pagina 19
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Strumenti per l'utente
Tastiere speciali
Particolari tastiere adatte
all'uso da parte di
persone disabili, ad
esempio con una
bacchetta da tenere in
bocca.
pagina 20
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Strumenti per l'utente
Screen enlarger
Dispositivi simili a grosse
lenti poste tra lo schermo
e l'operatore aventi la
funzione di lente
d'ingrandimento.
pagina 21
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Strumenti per l'utente
Screen Magnifier
Particolari software che permettono di ingrandire
di un fattore anche molto grande una parte dello
schermo.
pagina 22
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Linee guida per l'accessibilità ai
contenuti del Web
Linea guida 1
Fornire alternative equivalenti al contenuto
audio e visivo.
Fornire un contenuto che, quando viene
presentato all'utente, gli trasmetta
essenzialmente la stessa funzione o scopo del
contenuto audio o visivo.
pagina 23
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
In pratica
Usare "alt" per gli elementi IMG, INPUT e APPLET o
fornire un equivalente testuale nel contenuto degli
elementi OBJECT o APPLET.
Per contenuti complessi (per esempio un grafico)
laddove un testo "alt" non fornisce un equivalente
testuale completo, fornire una descrizione aggiuntiva
usando, per esempio, "longdesc".
Per le immagini sensibili usare l'attributo "alt" con
AREA oppure usare l'elemento MAP con gli elementi
A (e altro testo) come contenuto.
pagina 24
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Linee guida per l'accessibilità ai
contenuti del Web
Linea guida 2
Non fare affidamento sul solo colore.
Assicurarsi che il testo e la parte grafica siano
comprensibili se consultati senza il colore.
pagina 25
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Linee guida per l'accessibilità
ai contenuti del Web
Linea guida 3
Usare marcatori e fogli di stile e farlo in modo
appropriato.
Marcare i documenti con i corretti elementi
strutturali. Controllare la presentazione con fogli
di stile piuttosto che con elementi e attributi di
presentazione.
pagina 26
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Linee guida per l'accessibilità
ai contenuti del Web
Linea guida 4
Chiarire l'uso di linguaggi naturali.
Utilizzare marcatori che facilitino la pronuncia o
l'interpretazione di testi stranieri o abbreviati.
pagina 27
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
In pratica
Identificare il linguaggio naturale principale di un
documento. Assegnare l'attributo "lang" all'elemento
HTML
Identificare con chiarezza i cambiamenti nel
linguaggio naturale del testo di un documento e in
ogni equivalente testuale. Usare l'attributo "lang".
Specificare lo scioglimento di ogni abbreviazione o
acronimo nel documento laddove compare per la
prima volta. Usare l'attributo "title" degli elementi
ABBR e ACRONYM.
pagina 28
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Linee guida per l'accessibilità
ai contenuti del Web
Linea guida 5
Creare tabelle che si trasformino in maniera
elegante.
Assicurarsi che le tabelle abbiano la marcatura
necessaria per essere trasformate dai browser
accessibili e da altri interpreti.
pagina 29
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
In pratica
Per tabelle di dati, identificare le intestazioni di righe
e colonne. Usare TD per identificare le celle di dati e
TH per identificare le intestazioni.
Usare THEAD, TFOOT e TBODY per raggruppare
righe, COL e COLGROUP per raggruppare colonne
e gli attributi "axis", "scope" e "headers" per
descrivere relazioni più complesse fra i dati.
Per le tabelle, fornire sommari. Usare l'attributo
"summary" dell'elemento TABLE.
pagina 30
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Linee guida per l'accessibilità
ai contenuti del Web
Linea guida 6
Assicurarsi che le pagine che danno spazio a
nuove tecnologie si trasformino in maniera
elegante.
Assicurarsi che le pagine siano accessibili anche
quando le tecnologie più recenti non sono
supportate o sono disabilitate.
pagina 31
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Linee guida per l'accessibilità
ai contenuti del Web
Linea guida 7
Assicurarsi che l'utente possa tenere sotto
controllo i cambiamenti di contenuto nel
corso del tempo.
Assicurarsi che gli oggetti in movimento,
lampeggianti, scorrevoli o che si autoaggiornano
possano essere arrestati temporaneamente o
definitivamente.
pagina 32
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Linee guida per l'accessibilità
ai contenuti del Web
Linea guida 8
Assicurare l'accessibilità diretta delle
interfacce utente incorporate.
Assicurarsi che la progettazione delle interfacce
utente segua i principi dell'accessibilità: accesso
alle diverse funzionalità indipendente dai
dispositivi usati, possibilità di operare da tastiera,
comandi vocali, ecc.
pagina 33
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Linee guida per l'accessibilità
ai contenuti del Web
Linea guida 9
Progettare per garantire l'indipendenza da
dispositivo.
Usare caratteristiche che permettono di attivare gli
elementi della pagina attraverso una molteplicità
di dispositivi di input.
pagina 34
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
In pratica
Creare un ordine logico di tabulazione fra i
collegamenti, i controlli dei moduli, e gli oggetti.
Specificare l'ordine di tabulazione tramite l'attributo
"tabindex" oppure garantire una disposizione logica
della pagina.
Fornire scorciatoie da tastiera per i collegamenti
importanti, per i controlli dei moduli, e per i gruppi di
controlli dei moduli. Specificare scorciatoie tramite
l'attributo "accesskey".
pagina 35
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Linee guida per l'accessibilità
ai contenuti del Web
Linea guida 10
Usare soluzioni provvisorie.
Usare soluzioni provvisorie in modo che le
tecnologie assistive e i browser più vecchi
possano operare correttamente.
pagina 36
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Linee guida per l'accessibilità
ai contenuti del Web
Linea guida 11
Usare le tecnologie e le raccomandazioni del W3C.
Usare le tecnologie del W3C (in conformità con le
specifiche) e seguire le raccomandazioni
sull'accessibilità. Nei casi in cui non sia possibile
usare una tecnologia del W3C, oppure se
nell'utilizzarla si ottenesse materiale che non si
trasforma in maniera elegante, fornire una versione
alternativa del contenuto che sia accessibile.
pagina 37
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Linee guida per l'accessibilità
ai contenuti del Web
Linea guida 12
Fornire informazione per la
contestualizzazione e l'orientamento.
Fornire informazione per la contestualizzazione e
l'orientamento, per aiutare gli utenti a
comprendere pagine od elementi complessi.
pagina 38
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
In pratica
Dividere grandi blocchi di informazione in gruppi più
maneggevoli quando è naturale ed appropriato.
Usare OPTGROUP per raggruppare gli elementi
OPTION all'interno di un SELECT; raggruppare i
controlli dei moduli con FIELDSET e LEGEND; usare
liste annidate quando è appropriato; usare
intestazioni per strutturare i documenti.
Associare esplicitamente le etichette ai loro controlli.
Usare LABEL e il suo attributo "for"
pagina 39
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Linee guida per l'accessibilità
ai contenuti del Web
Linea guida 13
Fornire chiari meccanismi di navigazione.
Fornire chiari e coerenti meccanismi di
navigazione (informazione per l'orientamento,
barre di navigazione, una mappa del sito, ecc.)
per aumentare le probabilità che una persona
trovi quello che sta cercando in un sito.
pagina 40
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Linee guida per l'accessibilità
ai contenuti del Web
Linea guida 14
Assicurarsi che i documenti siano chiari e
semplici.
Assicurarsi che i documenti siano chiari e semplici
in modo che possano essere compresi più
facilmente.
pagina 41
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Statistiche di accesso
Ci sono alcune caratteristiche particolari che non
vanno trascurate nella creazione di un sito internet
tra cui:
struttura grafica
navigabilità
comunicazione immediata
tipologia di servizi offerti
pagina 42
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Statistiche di accesso
Tutte queste caratteristiche devono essere
valutate in una prima fase di analisi e creazione
del sito, ma devono essere rivalutate una volta
che il sito viene messo on-line e gli utenti iniziano
ad utilizzarlo.
pagina 43
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Statistiche di accesso
Queste analisi secondaria è obbligatoria per la
funzionalità del sito, perché non tutti recepiscono
in modo uguale le informazioni che noi passiamo
attraverso l’immagine del sito.
pagina 44
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Statistiche di accesso
E’ a questo punto che le statistiche diventano uno
strumento importante.
Avendo a disposizione statistiche particolareggiate sarete
in grado di capire:
in che modo gli utenti navigano all’interno del sito per
valutare se le cose più importanti vengono recepite
quali tipi di pagine sono più gradite e hanno un numero
maggiore di visite
Potrete poi eseguire quelle piccole modifiche che vi
permetteranno di ottenere il risultato voluto.
pagina 45
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Ufficio sviluppo risorse umane e organizzazione - Ufficio dirigenziale affari generali e comunicazione Delegato del Rettore per l'integrazione degli Studenti disabili - CSITA Centro Servizi Informatici e
Telematici di Ateneo - Servizio Orientamento
Corso di formazione
sull'accessibilità dei siti
web
Valutazione siti web
Giancarlo Scola
pagina 46
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Validazione siti accessibili
Normativa
Gli allegati A e B del D.M. definiscono requisiti tecnici e
criteri di valutazione soggettiva per la definizione
dell'accessibilità di un sito web.
I requisiti tecnici si basano:
sulle linee guida del W3C
sul paragrafo 1194.22 della Sezione 508 del
Rehabilitation Act degli USA
sullo standard e sulle specifiche tecniche definite in
materia di accessibilità dalla International
Organization for Standardization (ISO)
pagina 47
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Validazione siti accessibili
Verifica tecnica diretta del rispetto delle linee
guida in tema di disabilità con strumenti automatici
e revisione umana.
I metodi automatizzati sono di solito rapidi e
convenienti ma non riescono ad identificare tutti i
problemi dell'accessibilità.
La revisione umana può aiutare ad assicurare la
chiarezza di linguaggio e la facilità di navigazione.
pagina 48
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Metodi di validazione
Strumenti automatici di validazione
dell'accessibilità.
Cynthia Says™ Portal
http://www.contentquality.com
Tali strumenti non risolvono tutti i problemi di
accessibilità, ma danno un valido aiuto
nell'individuazione di eventuali errori.
pagina 49
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Metodi di validazione
Strumenti di validazione della sintassi dei
linguaggi di markup usati.
Markup Validation Service
http://validator.w3.org
Permettono di evitare errori nella sintassi,
evitando così errori di visualizzazione da parte
dei browser.
pagina 50
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Metodi di validazione
Strumenti di validazione dei fogli di stile.
CSS Validator
http://jigsaw.w3.org/css-validator/validatoruri.html
Permettono di evitare errori nella sintassi,
evitando così errori di visualizzazione da parte
dei browser.
pagina 51
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Metodi di validazione
Testare il sito con browser o emulatori solo
testuali.
Lynx Textual browser
http://lynx.isc.org/
Permettono di visualizzare il sito in assenza di
elementi grafici per valutarne la resa. Un sito
ben progettato è accessibile anche in tali
ambiente.
pagina 52
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Metodi di validazione
Testare il sito con differenti browser sia vecchi che nuovi, in
condizioni diverse.
con suoni e grafici caricati
con grafici non caricati
con suoni non caricati
senza mouse
con frame, script, fogli di stile e applet non caricati
Permette di valutare la resa del sito anche su vecchie
versioni dei browser che non supportano o che hanno
disabilitate alcune tecnologie.
pagina 53
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Metodi di validazione
Testare il sito con le tecnologie assistive o in
condizioni limite.
Lettori di schermo (screen reader)
Software ingrandente (magnifier)
Piccoli display (basse risoluzioni e/o computer
palmari o cellulari)
pagina 54
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Metodi di validazione
Controllare la sintassi e la grammatica dei
linguaggi naturali.
Una persona che legge una pagina con un
sintetizzatore vocale può non essere in grado di
decifrare il miglior tentativo del sintetizzatore
per una parola con un errore.
Eliminare problemi di grammatica migliora la
comprensione.
pagina 55
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Metodi di validazione
Rivedere la chiarezza e la semplicità del documento.
Statistiche di leggibilità, come quelle generate da
alcuni word processor possono essere degli utili
indicatori di chiarezza e semplicità.
Contattare un esperto per revisionare il testo e
verificarne la chiarezza.
Migliorare l'utilizzabilità dei documenti identificando
problemi culturali potenzialmente rilevanti che
possono sorgere a causa dell'uso del linguaggio o
delle icone.
pagina 56
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Metodi di validazione
Invitare persone con una disabilità a revisionare i
documenti.
Utenti disabili esperti e principianti forniscono un
valido feedback sui problemi dell'accessibilità e
dell'utilizzabilità e delle difficoltà.
pagina 57
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Priorità
Ad ogni linea guida del W3C sono stati assegnati
dei punti di controllo per verificare se tali linee sono
state soddisfatte.
A ciascun punto di controllo è stato assegnato un
livello di priorità basato sull'impatto che tale punto
possiede sull'accessibilità.
pagina 58
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Priorità
[Priorità 1]
Lo sviluppatore di contenuti Web deve conformarsi al
punto di controllo. In caso contrario, a una o più
categorie di utenti viene precluso l'accesso alle
informazioni presenti nel documento. La conformità a
questo punto di controllo costituisce un requisito
base affinché alcune categorie di utenti siano in
grado di utilizzare documenti Web.
pagina 59
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Priorità
[Priorità 2]
Lo sviluppatore di contenuti Web dovrebbe
conformarsi a questo punto di controllo. In caso
contrario per una o più categorie di utenti risulterà
difficile accedere alle informazioni nel documento. La
conformità a questo punto consente di rimuovere
barriere significative per l'accesso a documenti Web .
pagina 60
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Priorità
[Priorità 3]
Lo sviluppatore di contenuti Web può tenere in
considerazione questo punto di controllo. In caso
contrario, una o più categorie di utenti sarà in
qualche modo ostacolata nell'accedere alle
informazioni presenti nel documento. La conformità a
questo punto migliora l'accesso ai documenti Web.
pagina 61
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Conformità
A seconda dei livelli di priorità soddisfatti si ottengono:
Livello di Conformità "A": se conforme a tutti i punti
di controllo di Priorità 1.
Livello di Conformità "Doppia-A": se conforme a tutti
i punti di controllo di Priorità 1 e 2.
Livello di Conformità "Tripla-A": se conforme a tutti i
punti di controllo di Priorità 1, 2 e 3.
pagina 62
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Conformità
Per dichiarare ufficialmente la conformità, sotto la
propria responsabilità esistono due possibilità:
Testuale, ad esempio:
Questa pagina è conforme alle "Linee guida per l'accessibilità ai
contenuti del Web 1.0" del W3C disponibili a
http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505 livello
Doppia-A.
pagina 63
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Conformità
Visuale
Includendo su ciascuna pagina che si dichiara conforme, una
delle tre icone fornite dal W3C e collegare l'icona all'appropriata
spiegazione W3C riguardante la dichiarazione. Informazioni
circa le icone e su come inserirle all'interno delle pagine sono
disponibili presso
http://www.w3.org/WAI/WCAG1-Conformance.html
pagina 64
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Conformità
Quelli che abbiamo visto sono metodi di
validazione del tutto completi, e un sito che
rispetta le indicazioni del W3C è del tutto
accessibile.
Bisogna però tenere presente che, per motivi
legislativi, i siti della PA possono essere controllati,
su richiesta della struttura interessata, seguendo
metodologia e criteri contenuti nella cosidetta
“Legge Stanca” da persone autorizzate dal
ministero.
pagina 65
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Conformità
In particolare, l'allegato D elenca i requisiti di
accessibilità per i siti internet e l'allegato E
definisce il logo di accessibilità dei siti Web.
La differenza è che, mentre il logo del W3C viene
apposto a scelta e sotto la responsabilità
dell'autore del sito senza alcun valore legale, la
verifica e l'apposizione del logo ufficiale sono a
carico di persone esterne, verificatori iscritti presso
il ministero.
pagina 66
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Conformità
Logo di conformità ai requisiti previsti per
la verifica tecnica.
pagina 67
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Logo di conformità ai requisiti previsti
per la verifica tecnica con attribuzione,
nella verifica soggettiva, di un
punteggio medio maggiore o uguale a
2 e minore di 3.
pagina 68
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Logo di conformità ai requisiti previsti
per la verifica tecnica con attribuzione,
nella verifica soggettiva, di un
punteggio medio maggiore o uguale a
3 e minore di 4.
pagina 69
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Conformità
Logo di conformità ai requisiti previsti
per la verifica tecnica con attribuzione,
nella verifica soggettiva, di un
punteggio medio maggiore o uguale a
4.
pagina 70
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Ufficio sviluppo risorse umane e organizzazione - Ufficio dirigenziale affari generali e comunicazione Delegato del Rettore per l'integrazione degli Studenti disabili - CSITA Centro Servizi Informatici e
Telematici di Ateneo - Servizio Orientamento
Corso di formazione
sull'accessibilità dei siti
web
Progettazione e realizzazione siti
accessibili
Giancarlo Scola
pagina 71
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Progettazione Multibrowser



E' bene tenere presente
che esistono molti
browser diversi.
Sebbene esistano degli
standard, questi non
sono supportati allo
stesso modo dai diversi
browser.
Questo può portare a
dover progettare un sito
che si adatti in modo
dinamico al client
dell'utente.
pagina 72
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Progettazione Multibrowser
Evitare di ricorrere ai tag HTML specifici di ogni
browser, ma usare sempre e solo quelli che
appartengono allo standard.
Ad esempio il tag <MARQUEE> è specifico di IE e
il tag <BLINK> è specifico di Netscape, ma
nessuno dei due appartiene allo standard HTML.
pagina 73
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Progettazione Multibrowser
Nell'uso di Javascript, è bene tenere presente che
ogni browser ha una visione astratta del
documento (D.O.M. Document Object Model)
diversa, quindi è bene prevedere uno script
diverso per ogni browser.
Esistono semplici script che permettono di
ottenere dal browser tutte le informazioni
necessarie.
pagina 74
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Principi generali
Principio Fondamentale
Separare impaginazione e contenuto
Questo principio vale in generale, non solo per i
siti web accessibili.
http://www.csszengarden.com/
pagina 75
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Principi generali
Impaginazione
CSS – Cascading Style Sheet
Contenuto
HTML, XML
pagina 76
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
CSS è l'acronimo di Cascading Style Sheets
Gli stili definiscono come visualizzare gli elementi
HTML
Gli stili si trovano nei Fogli di Stile o nel
documento stesso
Gli stili sono stati aggiunti a partire da HTML 4.0
I Fogli di Stile fanno risparmiare un sacco di
lavoro
pagina 77
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
Sintassi
La sintassi CSS è formata da 3 parti: un selettore, una
proprietà e un valore
selettore { proprietà:valore }
Il selettore è normalmente il tag HTML a cui
assegnare lo stile
La proprietà è l'attributo a cui assegnare lo stile
Ad ogni proprietà si assegna un valore, ad esempio:
body {color: black}
pagina 78
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
Se il valore è composto da più parole, esso è contenuto
tra doppi apici, ad esempio:
p {font-family: "sans serif"}
Più di una proprietà può essere specificata per un
selettore, in tal caso esse vanno separate da un
punto e virgola, ad esempio:
p {text-align:center; color:red}
pagina 79
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
Raggruppamento
Si possono raggruppare i selettori, separati da una
virgola, per assegnargli lo stesso stile, ad esempio:
h1,h2,h3,h4,h5,h6 {color: green}
pagina 80
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
Il selettore di classe
Con il selettore di classe potete definire diversi stili per lo
stesso tag HTML, ad esempio:
p.right {text-align: right}
p.left {text-align: left}
Ricordate di usare l'attributo class nell'HTML:
<p class="right">Paragrafo allineato a destra</p>
<p class="left">Paragrafo allineato a sinistra</p>
pagina 81
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
Si può omettere il selettore e definire uno stile che
verrà applicato a tutti i tag HTML che appartengono
a quella classe, ad esempio:
.center {text-align: center}
farà in modo che tutti i tag HTML con attributo
class=”center” abbiano il testo centrato
pagina 82
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
Il selettore di identità
Con il selettore di identità si definisce lo stesso stile
per differenti tag HTML, ad esempio:
p#tipo1 {text-align: center; color: red}
Bisogna usare l'attributo id nell'html
<p id="tipo1">Paragrafo tipo 1</p>
pagina 83
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
Si può omettere il selettore e definire uno stile che verrà
applicato a tutti i tag HTML che hanno la stessa
identità, ad esempio:
#green {color: green}
farà in modo che tutti i tag HTML con attributo
id=”green” abbiano il testo in colore verde.
pagina 84
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
Commenti nei fogli di stile
Si possono inserire dei commenti nei fogli di stile, tali
commenti devono essere contenuti fra i caratteri /* e */,
ad esempio:
/* Questo è un commento */
p { text-align: center;
/* Questo è un altro commento*/
font-family: arial}
Il browser semplicemente ignora tutto ciò che si trova
tra i caratteri /* e */.
pagina 85
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
Come inserire un foglio di stile
Quando il browser legge un foglio di stile, formatta il
testo secondo le direttive. Ci sono tre modi di
inserire un foglio di stile:
CSS esterno al documento
CSS interno al documento
CSS inline al documento
pagina 86
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
CSS esterno al documento
Ideale e altamente consigliato sempre, permette di
applicare il CSS a molte pagine
contemporaneamente. Nel tag <head> del documento
bisogna inserire il riferimento al CSS, ad esempio:
<head>
<link rel="stylesheet" type="text/css"
href="miostile.css" />
</head>
pagina 87
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
CSS interno al documento
Per un singolo documento con un singolo stile,
nella sezione <head> del documento usare il tag
<style>, ad esempio:
<head>
<style type="text/css">
.........
</style>
</head>
pagina 88
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
CSS inline nel documento
Brutto e altamente sconsigliato, perché in
contraddizione con il nostro principio fondamentale.
Si tratta di applicare lo stile direttamente nel tag
interessato, ad esempio:
<p style="color: green; margin-left: 2%">
........
</p>
pagina 89
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
Sfondo
Le proprietà dello sfondo permettono di:
controllare il colore di un elemento
definire una immagine di sfondo
ripetere una immagine verticalmente o
orizzontalmente
posizionare una immagine in una pagina.
pagina 90
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
Testo
Le proprietà del testo permettono di :
controllare come appare un testo
cambiarne il colore
aumentare o diminuire lo spazio tra i caratteri
allineare un testo, decorarlo, identarlo.
pagina 91
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
Caratteri
Le proprietà dei caratteri permettono di
selezionare
il carattere
il suo peso
la sua grandezza
il suo stile
pagina 92
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
Bordi, margini e spaziatura
Tutte queste proprietà fanno riferimento ad un
modello virtuale detto box-model che parte da un
presupposto fondamentale:
Una pagina HTML non è altro che un insieme di
box rettangolari con attributi propri che vanno
posizionati nell'area visibile del browser.
pagina 93
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
Il box model
Ogni box comprende un certo numero di attributi di
base, ciascuno modificabile con proprietà dei CSS.
La figura seguente mostra visivamente tali
componenti.
pagina 94
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
pagina 95
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
Il box model
Ogni box viene dichiarata come classe in un CSS e
viene inserita nella pagina HTML tramite il tag
<DIV>.
pagina 96
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
CSS
.nomebox
{.....}
HTML
<div class=”nomebox”>
....
</div>
pagina 97
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
Classificazione
Le proprietà di classificazione permettono di:
controllare come un elemento verrà mostrato
di posizionare immagini
controllare la visibilità di un elemento
controllare il cursore
pagina 98
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
Posizionamento
Le proprietà di posizionamento permettono di
specificare la posizione di un elemento
specificare la grandezza di un elemento
decidere cosa fare quando un elemento troppo
grande
pagina 99
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
Unità di misura
Esistono vari modi per esprimere le unità di misura
in un CSS. La distinzione principale è tra unità
assolute e unità relative.
pagina 100
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
Unità assolute
Unità relative
in (inches; 1in=2.54cm)
cm (centimetri)
mm (millimetri)
pt (points; 1pt=1/72in)
pc (picas; 1pc=12pt)
em (ems, altezza del font
corrente)
ex (x-height, altezza lettera
x)
px (pixels, relativo alla
risoluzione corrente)
% (percentuale)
pagina 101
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
CSS
Un valore è formato da un + o un – opzionali,
seguiti da un numero, seguito a sua volta da una
unità di misura. Non ci sono spazi tra questi
elementi. Ad esempio:
[+,-]1.3 em errato
[+,-]1.3em
esatto
pagina 102
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Programmazione lato server
Per evitare di scrivere del codice compatibile con
ogni client, si ricorre alla programmazione lato
server, che permette di scegliere delle tecnologie
di riferimento e di usarle in un ambiente noto.
Con la programmazione server-side il programma
viene eseguito sul server e produce un output in
formato HTML.
Con la programmazione server-side, si protegge il
codice sorgente e si possono usare risorse
specializzate disponibili sul server.
pagina 103
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Programmazione lato server
Possibili combinazioni di ambienti/tecnologie
sono:
L.A.M.P. - Linux, Apache, Mysql, PHP.
W.A.M.P. - Windows, Apache, Mysql, PHP.
W.I.S.A. - Windows, IIS, SQL Server, ASP.
Ulteriori combinazioni sono possibili, ove esistano
delle librerie di compatibilità tra i diversi ambienti o
si scelgano tecnologie diverse.
pagina 104
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Programmazione lato server
Lo schema di
funzionamento:
pagina 105
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Il linguaggio PHP
PHP è l'acronimo ricorsivo di PHP Hypertext
Preprocessor.
PHP fa la sua prima apparizione nel 1994.
PHP è un linguaggio opensource, con la sintassi
molto simile al linguaggio C, a cui è ispirato.
pagina 106
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Il linguaggio PHP
Il codice PHP si inserisce in file che possono
contenere anche tag HTML.
Tali file, che prendono l'estensione .php,
vengono processati dal server e l'output inviato
al client.
pagina 107
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Il linguaggio PHP
Ecco un semplice esempio di file PHP:
<html>
<head>
<title>PHP Test</title>
</head>
<body>
<?php
echo '<p>Hello World</p>';
echo '</body>' ;
?>
</html>
pagina 108
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Il linguaggio PHP
PHP, pur essendo un linguaggio debolmente
tipato, possiede dei tipi base per i dati.
Quattro tipi scalari:
integer
boolean
float
string
Due tipi strutturati:
array
object
pagina 109
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Il linguaggio PHP
In PHP variabili e costanti si definiscono in modo
diverso.
Le costanti si definiscono con la funzione define e
sono solo di tipo non strutturato:
define("CONST","something");
Le variabili devono iniziare con il carattere $ e
possono essere di qualsiasi tipo.
$var =valore;
Il tipo di $var dipende dal tipo di valore.
pagina 110
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Il linguaggio PHP
I costrutti del linguaggio PHP sono quelli tipici di
un linguaggio di programmazione, tra i più
importanti troviamo:
if...else
while
do...while
switch
for
foreach
pagina 111
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Il linguaggio PHP
Esiste una direttiva particolare, molto utile in
quanto evita di scrivere codice uguale in file
diversi:
include(nome_file)
Questa direttiva include in un file PHP un file
esterno che contiene altro codice PHP.
pagina 112
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Il linguaggio PHP
PHP permette di dichiarare funzioni che sono utili
per evitare di ripetere lo stesso codice molte volte
all'interno di un file:
function nome_funzione (parametri) {
istruzioni
}
Tali funzioni verranno poi richiamate in questo
modo:
$var = nome_funzione(parametri);
pagina 113
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Il linguaggio PHP
PHP dispone di una vasta gamma di librerie che
ne fanno uno dei linguaggi più usati nella
programmazione lato server.
La documentazione per queste librerie è
accessibile al sito ufficiale del linguaggio.
pagina 114
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Server Side Include
I Server Side Include sono il tipo più semplice di
programmazione lato server.
Il loro uso primario è quello di includere nel file
corrente altri file.
I file HTML che contengono delle direttive SSI
hanno normalmente estensione .shtml.
pagina 115
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Server Side Include
La sintassi SSI è molto semplice:
<!--#direttiva parametro=valore -->
Le direttive sono messe in un commento HTML in modo
che se il server non supporta i SSI, questi sono
semplicemente ignorati.
pagina 116
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Server Side Include
Le due più comuni direttive sono:
include con il parametro virtual
<!--#include virtual="header.html"-->
exec con i parametri cgi o cmd
<!--#exec cgi="/cgi-bin/foo.cgi"-->
oppure
<!--#exec cmd="ls -l"-->
pagina 117
Università degli Studi di Genova
Corso di formazione sull'accessibilità dei siti web
Content Management Systems
I Content Management Systems o CMS, sono dei
sistemi che permettono di organizzare e facilitare
la creazione collaborativa di documenti e
contenuti.
I CMS sono spesso delle applicazioni web
usate per gestire siti e, soprattutto, i contenuti,
indipendentemente da come questi sono
presentati.
Il mercato dei CMS è ad oggi molto
frammentato e non esistono soluzioni che
diano risultati rilevanti dal punto di vista
dell'accessibilità.
pagina 118