Tecniche di accessibilità web
Che cosa si intende per accessibilità?
Dalla definizione alla
pratica.
Video
“Keeping Web Accessibility in
Mind”
http://www.webaim.org/intro
/video.php
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Definizione “comune” di accessibilità
 Definizione prevalente sui dizionari di lingua
italiana.
Accessibilità: caratteristica di chi o di ciò che è
accessibile.
 Accessibile: di facile accesso, di facile
comprensione
ovvero raggiungibile con facilità sia fisicamente
che mentalmente.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Definizione “specialistica” di accessibilità
 Definizione del W3C (World Wide Web Consortium)
Un contenuto è accessibile quando può essere
usato da qualcuno con una disabilità.
 Ovvero quando le persone con disabilità possono
percepire, capire, navigare ed interagire con esso
in modo concreto.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Definizione “specialistica” di accessibilità
 Dalla definizione emerge la
differenza tra accessibilità e usabilità.
Infatti non viene considerato accessibile un
contenuto genericamente usabile, ma un contenuto
che sia usabile da qualcuno affetto da una
disabilità.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Definizione di accessibilità secondo Diodati
Accessibile è un contenuto web che può essere fruito
da un utente indipendentemente da disabilità o
limitazioni fisiche e/o cognitive, occasionali o
permanenti, e indipendentemente dal tipo di
tecnologia utilizzato per collegarsi alla Rete.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Ulteriore accezione di accessibilità
Il termine “accessibilità” viene usato non solo per
indicare l’essere accessibile di un contenuto o di un
programma, ma anche l’insieme di linee guida,
raccomandazioni, suggerimenti, tecniche, per
produrre contenuti, strumenti autoriali e programmi
utente accessibili.
E’ il caso del titolo di questo corso..
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
I beneficiari dell’accessibilità
Secondo il W3C le categorie interessate sono:
 I ciechi
 I sordi
 Gli ipovedenti
 Le persone con disabilità motorie che pregiudicano
l’utilizzo di mouse e tastiera
 I malati di epilessia fotosensibile
 Individui con disabilità cognitive o dell’apprendimento
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
I beneficiari dell’accessibilità
Le categorie di disabili elencate ci riportano al
significato comune della parola individuando:
 Da un lato disabilità fisiche
 Dall’altro disabilità mentali
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Altri beneficiari dell’accessibilità
Nell’introduzione delle WCAG si fa riferimento anche
ad altre problematiche che limitano l’accesso ai
contenuti del web:




persone senza disabilità in differenti situazioni;
persone con disabilità temporanee;
persone con barriere tecnologiche;
persone anziane.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Altri beneficiari dell’accessibilità
Ad esempio utenti che:
 possono avere uno schermo solo a caratteri, uno
schermo piccolo o una connessione lenta a Internet;
 possono non parlare o comprendere in modo fluente
la lingua in cui il documento è scritto;
 possono trovarsi in situazioni in cui la vista, l’udito o
le mani sono occupati o ostacolati (alla guida, in un
ambiente rumoroso, ecc.);
 possono avere una versione precedente di un
browser, o un diverso sistema operativo.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Beneficiari dell’accessibilità: riepilogo
 persone con disabilità fisiche e/o cognitive
permanenti;
 persone che per ragioni contingenti (hanno le mani
o gli occhi impegnati, lavorano in ambienti rumorosi,
non conoscono bene una lingua) incontrano difficoltà
simili a quelle di chi è affetto da disabilità fisiche o
cognitive permanenti;
 persone che usano tecnologie potenzialmente
“invalidanti” (computer o programmi obsoleti o poco
comuni, connessioni a Internet molto lente).
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Destinatari dell’accessibilità
Sempre secondo il W3C, i destinatari
dell’accessibilità, intesa come insieme di linee guida
e tecniche, sono:
“gli sviluppatori di contenuti per il Web (autori di
pagine e progettisti di siti - Web developers) e gli
sviluppatori di strumenti autoriali (authoring tools
developers)”.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Un principio chiave dell’accessibilità
Flessibilità di incontrare differenti bisogni, situazioni
e preferenze, rendendo fruibili e usabili i contenuti
Web a tutte le categorie di utenti individuate in
precedenza.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Perché sviluppare un web accessibile
Sviluppare contenuti e servizi accessibili porta
sostanzialmente due vantaggi:
Uno di carattere sociale
Uno di carattere economico
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Perché sviluppare un web accessibile
Vantaggio sociale
Un Web accessibile, che permetta alle persone con
disabilità di partecipare attivamente nella vita
sociale, è essenziale per una uguaglianza di
opportunità in molte aree (educazione, politica,
professionale, ecc…).
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Perché sviluppare un web accessibile
Vantaggio economico
Sviluppare seguendo le linee guida per l’accessibilità
incrementa la quota di mercato e l'estensione del
pubblico di un sito web, aumentando la sua generale
usabilità e l’efficienza.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Perché sviluppare un web accessibile
Infatti permette di:
Aumentare l'usabilità per visitatori non disabili e
disabili.
Migliorare la posizione nei motori di ricerca.
Riutilizzare il contenuto per vari formati e
dispositivi.
Aumentare il supporto per versioni multilingue.
Ridurre i costi di manutenzione del sito.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
I componenti del web accessibile
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
I componenti del web accessibile
Contenuto: l’informazione in una pagina o
applicazione (testi, immagini, codice, ecc..)
Browser web e gli “user agents” in generale
Tecnologia assistiva (screen reader, tastiere
alternative, ecc..)
Gli sviluppatori (designers, programmatori, autori)
Gli strumenti di sviluppo (software usati)
Gli strumenti di valutazione (i validatori, ecc..)
Le linee guida per i vari componenti (WCAG,
specifiche tecniche dei linguaggi)
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
I browser grafici
Internet Explorer (6, 7, 8, 9)
Mozilla Firefox (3.X - 10)
Chrome 19.0
Safari 5.0
Opera
SeaMonkey, Camino, Flock, Konqueror, ecc..
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
I browser grafici: statistiche
Fonte: netmarketshare.com (gennaio 2012)
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Dispositivi mobili
Telefoni cellulari: solitamente risoluzione di 176 x
220
PDA (personal digital assistant): risoluzione di
240×320 pixel. Diverse modalità di visualizzazione
Smartphones: telefoni cellulari con funzioni di
personal digital assistant (iPhone, BlackBerry,
Samsung).
Lettori e-book, i-Pod, i-Pad, ecc..
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Dispositivi mobili
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Mobile / tablet browser: statistiche
Fonte: netmarketshare.com (gennaio 2012)
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Risoluzione schermo: statistiche
Fonte: netmarketshare.com (gennaio 2012)
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Tecnologie assistive: browser testuali
Nascono con il web nei primi anni ‘90
eliminano automaticamente tutti gli elementi
grafici
mostrano all’utente solo i testi di una pagina,
comprese le descrizioni testuali alternative, degli
elementi grafici e multimediali.
Interazione principalmente via tastiera.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Tecnologie assistive: browser testuali
Non una tecnologia assistiva vera e propria, tuttavia
ancora utilizzata da utenti non vedenti o con hardware
poco performanti e/o connessioni lente.
I principali browser testuali:
Lynx
Links
WebbIE: lavora anche in modalità grafica, con il
motore di rendering di IE
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Tecnologie assistive: browser testuali
Richiedono nella progettazione di una pagina web:
Una buona organizzazione dei contenuti.
Equivalenti testuali degli elementi grafici e
multimediali non decorativi.
Valido strumento per testare la reale accessibilità di
una pagina web.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Tecnologie assistive: browser testuali
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Tecnologie assistive: browser testuali
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Tecnologie assistive: screen reader
Il lettore di schermo è:
software che traduce i contenuti presenti sul
monitor di un computer in una forma non grafica, di
solito in parole pronunciate da una voce sintetica.
Utilizzato da non vedenti per l’uso del PC
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Tecnologie assistive: screen reader
Il lettore di schermo necessita di :
 hardware adeguato in memoria e supporto
multimediale
Sistema operativo che gli consenta di lavorare con
le applicazioni presenti attraverso software integrati
nel SO (es. Microsoft Active Accessibility – MSAA di
Windows)
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Tecnologie assistive: screen reader
Gli utenti che usano il lettore di schermo accedono ai
contenuti in maniera seriale (lettura di tutto il
contenuto) e non parallela (colpo d’occhio).
Le pagine web devono dunque essere progettate
utilizzando correttamente e semanticamente il
codice per agevolare la comprensione dei contenuti.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Plugin Fangs per Firefox
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Tecnologie assistive: screen reader
I principali lettori di schermo sono:
Jaws (http://www.freedomscientific.com/)
Window-eyes (http://www.gwmicro.com/WindowEyes/)
Hal (http://www.yourdolphin.com/)
WinGuido (gratuito - http://www.winguido.it/)
NVDA (gratuito - http://www.nvda-project.org/)
Per Linux: Emacspeak, Orca, LSR
Per Mac: VoiceOver (integrato nel SO)
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Tecnologie assistive: screen reader
Sondaggio sulle preferenze degli utenti di screen reader
promosso da WebAim
Versione italiana
http://lau.csi.it/testare/accessibilita/test_useragent/sondaggio/webaim.shtml
Versione originale (inglese)
http://www.webaim.org/projects/screenreadersurvey
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Tecnologie assistive:screen magnifiers
ingranditore di schermo: software che ingrandisce
in tutto o in parte i contenuti del monitor.
Alcuni con funzione vocale.
Usati da persone che conservano una minima
capacità visiva.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Tecnologie assistive:screen magnifiers
E’ possibile:
Scegliere il fattore di ingrandimento;
Le modalità di ingrandimento: finestra intera,
schermo diviso in 2 finestra; zoom della parte
interessata della pagina;
Colori del testo e dello sfondo
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Tecnologie assistive:screen magnifiers
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Tecnologie assistive per ipovedenti
Ipovedenti: persone con capacità visiva gravemente
ridotta. Ad esempio:
 poca acutezza, visione significativamente vaga o
annebbiata.
 perdita di tutta la visione centrale; la capacità di
vedere soltanto l'anello esterno del campo visivo.
 visione a "tunnel"; la capacità di vedere soltanto il
centro del campo visivo normale.
 perdita di visione in altre parti del campo visivo.
 altri problemi, compreso la sensibilità a luce,
l'emeralopia, il contrasto ridotto.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Tecnologie assistive per ipovedenti
Tecnologie utilizzate:
Ingranditori di schermo (screen magnifiers).
Funzioni di ingrandimento dei vari programmi (SO e
browser).
Schermi a bassa risoluzione.
Contrasto colori marcato.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Tecnologie assistive per ipovedenti
Problemi da considerare in fase di progettazione:
 dal contrasto tra il colore del testo e il colore dello
sfondo;
 dal font dei caratteri;
 dalle dimensioni dei caratteri;
 dallo spessore e dalla nitidezza del tratto;
 dalla distanza tra i caratteri e tra le righe.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Tecnologie assistive per ipovedenti
Visual Impairment Simulator: software che simula i
problemi affrontati dagli ipovedenti nell’uso del PC
(http://vis.cita.uiuc.edu/downld.php)
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Tecnologie assistive per disabilità uditive
Utenti con perdita di udito o con sordità totale che
necessitano di alcuni ausili:
 Sottotitolazione dei contenuti audio.
 Software per la traduzione scritta o nel linguaggio
dei segni per il parlato (iCommunicator).
In generale rappresentazione visiva di ogni evento
audio.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Tecnologie assistive per disabilità fisiche
Tipologie di disabilità motorie piuttosto ampie:
Alcuni utenti paralisi completa o parziale; debolezza
muscolare; molto limitati; sensibilità, ma poco
controllo del loro corpo; movimenti incontrollati e
sporadici, ecc..
Difficoltà nell’uso dei dispositivi di input (mouse,
tastiera) per l’interazione con le interfacce.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Tecnologie assistive per disabilità fisiche
Tecnologie utilizzate:
Mouse, trackball e tastiere speciali
Touch screen
Sistemi di puntamento a testa (HeadMouse
Extreme)
Sistemi di puntamento a labbra (LifeTool)
Software per ridurre i tremori o per mouse e
tastiere virtuali (MagicCursor 2000, ScreenDoors
2000, Discovery:screen)
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Tecnologie assistive per disabilità fisiche
Esempi di:
Sistemi di puntamento a
labbra
Sistemi di puntamento a
testa
Software per ridurre i
tremori
Fonte Diodati
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Tecnologie assistive per disabilità fisiche
In fase di progettazione sarà necessario:
Evitare risposte a tempo non controllabili.
Layout con elementi ravvicinati in cui risulti
difficile il puntamento degli elementi.
Consentire l’accesso tramite tastiera a tutte le
funzionalità.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Disabilità cognitive
Anche in questo caso tipologie piuttosto differenti:
difficoltà di elaborazione come ritardi mentali,
lesioni celebrali o altro.
deficit specifici come la mancanza di memoria a
breve termine, l'incapacità di ricordarsi i propri nomi
o altro.
disabilità dell'apprendimento quali dislessia,
disgrafia, disorganizzazione cognitiva, disturbo da
deficit di attenzione e iperattività.
ritardi linguistici.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Disabilità cognitive
Tecnologie assistive hardware:
Dispositivi che emettono segnali acustici o visivi per
ricordare all’utente procedure e scadenze.
Tastiere semplificate: tasti grandi e colorati che
differenziano le azioni.
Touch screen: si applicano allo schermo e
funzionano da mouse.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Disabilità cognitive
Tecnologie assistive software:
Lettura vocale dei contenuti testuali, associata
all’evidenziazione delle parole.
Predizione della parola o della frase che l’utente
sta scrivendo.
Associazione di immagini a testi e comandi.
Es: ReadingBar 2 plugin per IE, Dragon Naturally
Speaking
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Disabilità cognitive
In fase di progettazione si rende necessario:
Utilizzare impaginazioni che siano semplici e
costanti.
Utilizzare sfondi uniformi e non complicati dietro il
testo.
Evitare l'utilizzo di testi lampeggianti, evitando
inoltre testi in movimento o animazioni testuali.
Utilizzare un linguaggio semplice (tuttavia sempre
adeguato all’argomento).
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Strumenti nativi dei Sistemi Operativi
Fonte: netmarketshare.com (gennaio 2012)
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Strumenti nativi dei Sistemi Operativi
SO Microsoft Windows (XP, Vista, 7)
pannello di controllo -> accesso facilitato
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Strumenti nativi dei Sistemi Operativi
Principali fattori personalizzazione:
risoluzione/definizione dello schermo;
dimensionamento degli oggetti tramite DPI;
aspetto grafico di Windows;
puntatori del mouse;
struttura delle finestre;
funzionalità comuni del sistema operativo;
utilizzo facilitato della tastiera;
lente d'ingrandimento;
tasti di scelta rapida.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Gli Standard Web: cosa sono?
Tecnologie ideate e sviluppate dal W3C
e da altri organi normatori, utilizzate per creare e
interpretare contenuti per il web.
Tecnologie ideate per documenti pubblicati sul web
in grado di resistere al tempo e accessibili al pubblico
più vasto possibile.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Gli Standard Web: cosa sono?
Linguaggi strutturali (HTML, XHTML, XML).
Linguaggi di presentazione (CSS, SVG).
Modelli a oggetti (DOM – Document Object Model)
Linguaggi di programmazione (ECMAScript 262,
versione standard di Javascript).
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Progettare secondo gli Standard Web
Realizzare documenti in HTML/XHTML valido.
Usare i CSS per separare la presentazione dalla
struttura di una pagina.
Usare codice ben strutturato e marcato in maniera
semantica.
Realizzare pagine fruibili su ogni browser.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Progettare secondo gli Standard Web
 Progressive Enhancement
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Progettare secondo gli Standard Web
In particolare, separare la struttura (codice markup)
dalla presentazione (CSS) permette di:
Ottenere pagine più leggere e facili da caricare: il
CSS viene caricato una sola volta dal browser; il
codice è ottimizzato.
Ottenere informazioni più facilmente “trovabili”: i
motori di ricerca preferiscono infatti pagine in cui il
contenuto è ben strutturato.
….
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Progettare secondo gli Standard Web
mantenere coerente il “Look&feel” del sito: con
una modifica al CSS si cambieranno tutte le pagine
diminuire il carico di lavoro legato alla
manutenzione delle pagine: aggiornare i contenuti
non comporterà modifiche dell’aspetto del sito.
garantire una maggiore compatibilità tra le varie
piattaforme e i browser, vale a dire maggiore
portabilità: i browser interpretano sempre meglio gli
standard.
Maggiore accessibilità.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Progettare secondo gli Standard Web
Emergono quindi quelli che possono essere i vantaggi
economici:
Minori costi di manutenzione dei siti.
Minori costi di banda utilizzata.
Informazioni più facili da reperire in rete.
Maggior numero di utenti in grado di fruire dei
servizi proposti.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web
Tecniche di accessibilità web
Perché usare gli Standard Web: riassunto
Sviluppo e manutenzione più semplici.
Compatibilità con browser futuri.
Pagine di dimensioni contenute e dunque più veloci
da caricare.
Migliore accessibilità.
Pagine più ricercabili dai motori di ricerca.
Adattamento ai diversi dispositivi più semplice.
[email protected]
Lezione 1 - Introduzione all'accessibilità e standard web