Progettazione di siti web
a.a. 2021/22
Accessibilità
Maria Simi
Maggio, 2022
[Zeldman, cap 14, W3C WCAG 2.1]
Progettazione di siti web
Progettazione universale
- “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” [Tim Berners-Lee, direttore del Consorzio W3C e ideatore del World Wide Web]
-
Principio della progettazione universale
- Es. Rampe per le carrozzine
- Questo principio si applica in particolare alla progettazione delle interfacce uomo-macchina e del web
“Accessibile”: uso comune e tecnico
- Accessibile: qualcosa a cui è possibile accedere facilmente
- Fisicamente accessibile (percebile), mentalmente accessibile (comprensibile), magari anche economicamente accessibile (sostenibile) ...
- Accessibile è un contenuto web che può essere fruito da un utente indipendentemente dal tipo di tecnologia utilizzato per collegarsi alla rete, anche in presenza disabilità o limitazioni fisiche e/o cognitive, occasionali o permanenti.
Che tipo di problemi?
- Disabilità:
- Problemi della vista: non vedenti, ipovedenti, daltonici
- Problemi dell'udito
- Problemi della voce (rilevante per interfacce vocali)
- Disabilità motorie e fisiche: paralisi, incapacità di controllo dei movimenti , disturbi di epilessia fotosensibile
- Disabilità cognitive
- Disturbi specifici dell'apprendimento (DSA):
- Dislessia, disortografia, discalculia, disgrafia, disprassia ...
- Altro:
- deficit del linguaggio, di coordinazione motoria, di attenzione.
Disabilità temporanee
- Dopotutto anche le rampe hanno usi diversi!
- Persone che per ragioni contingenti
- hanno le mani o gli occhi impegnati
- lavorano in ambienti rumorosi
- non conoscono bene una lingua
- hanno una invalidità temporanea …
- Gli anziani sono spesso affetti da qualcuno di questi problemi
Limitazioni tecnologiche
- Persone che usano tecnologie potenzialmente “invalidanti”
- Vecchi browser non grafici (es Lynx)
- Dispositivi con schermo piccolo (palmari, PDA, cellulari)
- Connessioni lente
- Dispositivi a bordo di automobili
- Motori di ricerca
Sono come utenti non vedenti ... capaci di pagare molto bene!!
- ... è bene avere in mente queste situazioni quando si progetta una pagina per il Web.
Progetto WAI del W3C
- Progetto WAI (Web Accessibility Initiative) del W3C
- Linee guida per l’accessibilità dei contenuti web, destinate agli sviluppatori di siti: WCAG
- Accessibilità degli strumenti autore: ATAG
- Accessibilità dei programmi utente, indirizzate ai produttori di browser: UAAG
Accessibilità
- L’accessibilità ha molto in comune con gli standard
- L’accessibilità non è una proprietà binaria (si, no)
- Livelli di accessibilità (1, 2 e 3)
- Fornire “Accesso equivalente” ai contenuti
- non significa esattamente la stessa pagina
- Non può essere delegata agli strumenti
- Alcuni strumenti autore (es. Dreamweaver) aiutano a produrre codice accessibile, ma non risolvono del tutto il problema
- Il controllo di accessibilità non può essere del tutto automatico.
Possibili obiezioni
- I siti accessibili [standard] sono miseri
- No, l’accessibilità è una proprietà dell’HTML piuttosto che della presentazione
- Filmati, immagini, abbellimenti grafici ... sono ancora possibili
- I siti accessibili sono costosi
- Non necessarie due versioni della stessa pagina
- A volte sono sufficienti alcune avvertenze, almeno per un livello base
- I nostri utenti non ne hanno bisogno
- Raramente è cosi
- I nostri committenti non ce lo chiedono
- Responsabilità civile del progettista
Tecnologie coadiuvanti (assistive)
- Tecnologie che aiutano gli utenti con qualche disabilità ad accedere al web. Sono anche dette assistive
- Sintetizzatori vocali, lettori di schermo (screen reader), browser parlanti (Jaws, Windows Eyes, Hal, ...)
- Dispositivi di uscita per non vedenti e non udenti (display Braille / solo una linea per volta)
- Ingranditori di schermo (Lunar, ZoomText, Magic, ...)
- Uso di tastiere speciali, joystick, pedali ... e non del mouse
Lettori di schermo
- Leggono le tabelle per righe: tabelle per il layout problematiche.
- Quando trova un'immagine dice “IMAGE”, a meno che non venga fornito un testo alternativo.
- Attributo ALT per testo alternativo su tutte le immagini o porzioni cliccabili di mappe immagine.
- Esempio di inaccessibilità: un menu di navigazione o un titolo realizzato come immagine
- Cosa scriverci dentro?
Per la validazione basta che ci sia!
Cosa scrivere nell’ALT? Facciamo un test
|
|
|
|
|
|
|
|
Navigazione da tastiera
- Premendo il tasto TAB si può navigare con la tastiera passando da un link all’altro.
- Può essere utile saltare i link di navigazione e andare direttamente al contenuto (questo vale in particolare per lettori di schermo, che leggerebbero il testo di tutti i link)
- Tecniche per saltare i link di navigazione:
- Skip navigation: inserire un link nascosto a inizio pagina che salta direttamente al contenuto
- Accesskey e tabindex: sono modi alternativi in HTML per accedere o navigare da tastiera sui link
Skip navigation
<div class="nascondi">
<a href="#content" title="skip navigation">
Skip navigation
</a>
</div>
link da saltare
<a id="content"></a>
inizio contenuti
- Il div poi va nascosto in qualche modo
- Scrivendolo nello stesso colore dello sfondo
- Usando un’immagine di un pixel trasparente come link
- Spingendo il div fuori dalla pagina
Access key e tabindex
- L’attributo accesskey consente di attivare un link direttamente mediante un tasto
- accesskey="2": con alt-2 si accede direttamente al contenuto
link da saltare <a accesskey="2" id="content"></a> inizio contenuti
- In alternativa, con l’attributo tabindex si può alterare l'ordine di visita dei link e mettere in cima le cose più importanti.
<a href= … tabindex="1"> … </a> <a href= … tabindex="3"> … </a> … <h1 tabindex="2"> … </h1>
Barriere all'accesso
- Richiesta l’installazione di plug-in per accedere ai contenuti
- Problemi di compatibilità su alcuni browser
- Pagine a frame (o iFrame)
- Si vedono come una serie di link
- Almeno dare nomi significativi ai frame
- CAPTCHA (Completely Automated Public Turing Test to Tell Computers and Humans Apart)
Errori comuni
- Filmati con lampeggiamenti, contenuti multimediali senza alternative testuali
- Pagine troppo dense di contenuti, testo costretto in una finestrina
- Colori del testo con un contrasto non adeguato con lo sfondo
- Sfondi grafici invasivi
- Linguaggio oscuro settoriale (burocratese)
Buone pratiche
- Preferibile testo ridimensionabile
- Misure relative piuttosto che assolute in px
- Non affidare messaggi al colore
- Non usare solo il colore per differenziare i link dai titoli o dal testo
- Non fare riferimento a oggetti tramite il colore
- Usare schemi di colori adeguati per daltonici (color blind)
http://www.vischeck.com
Coblis Color Blindness Simulator - Verificare il contrasto
Color contrast check
WebAIM Color contrast check
Rapporto tra accessibilità e usabilità
- I criteri di accessibilità sono raccomandazioni per gli sviluppatori, facilmente controllabili
- Gli accorgimenti da adottare non riguardano l’interazione dell'utente finale con il sito
- Accessibilità alle macchine e ai dispositivi piuttosto che alle persone
- L’usabilità richiede verifiche con gli utenti ed è più difficile da valutare
Le linee guida per l’accessibilità
- Le WCAG (Web Content Accessibility Guidelines) del W3C si rivolgono a tutti gli sviluppatori di contenuti per il Web (autori di pagine e progettisti di siti)
- WCAG 1.0, pubblicate nel 1999, recepite dalla legge Stanca del 2004
- Molto legate alle tecnologie e a pratiche relative
- Richiedevano una validazione XHTML strict
- WCAG 2.0 (2008) sono state recepite dalla normativa italiana a partire da settembre 2013, aggiornate dalle WCAG 2.1 (2018)
- Basate su princìpi, linee guida e criteri di successo verificabili
- Meno legate alla tecnologia, fatte per durare
Legge sull'accessibilità (Stanca)
- Legge Accessibilità (approvata il 9/1/2004)
- La legge obbliga i nuovi siti Web della pubblica amministrazione ad essere accessibili ... e riguarda anche i privati
- Decreto sull'accessibilità del 20 marzo 2013 (ministro Profumo) adegua la normativa alle WCAG2.0
- il decreto estende l'applicabilità anche ai siti sviluppati con il contributo di fondi pubblici
- prevede responsabilità dirette per i dirigenti e modi per segnalare inadempienze
Regolamento attuativo legge Stanca
- Regolamento di attuazione (decreto 1/3/2005)
- Il Regolamento definisce i seguenti aspetti:
- distinzione tra verifica tecnica e verifica soggettiva
- regole tecniche compatibili con WCAG 1.0
- Il ruolo del CNIPA (ora
digitPAAgID) http://www.pubbliaccesso.gov.it/
- elenco di valutatori istituito dall'agenzia
- rilascio del logo che qualifica l’accessibilità
- stelline per livelli di qualità (controllo soggettivo)
WCAG 2.0 e 2.1
- Progettate per essere indipendenti dalle tecnologie, che invecchiano rapidamente
- Organizzazione dei contenuti in:
- Quattro principi universali di accessibilità
- Linee guida per ciascun principio: obiettivi da raggiungere (12 in tutto)
- Criteri di successo: come verificare se si sono raggiunti; tre livelli di conformità (A, AA, AAA)
- Tecniche sufficienti e consigliate: come fare per raggiungerli
- http://www.w3.org/Translations/WCAG21-it/ (traduzione autorizzata)
WCAG 2.1 princìpi
- Quattro principi universali di accessibilità. I contenuti e i componenti dell’interfaccia devono essere:
- 1. percepibili:
- l'informazione è fruibile con almeno uno dei sensi - 2. utilizzabili/gestibili (operable):
- l'interfaccia non deve richiedere azioni che l'utente non può compiere - 3. comprensibili:
- il contenuto e le operazioni devono essere chiare - 4. robusti:
- il contenuto dovrebbe rimanere accessibile al variare delle tecnologie, anche future
- 1. percepibili:
Principio n. 1: percepibile
- Le informazioni e i componenti dell'interfaccia utente devono essere presentati agli utenti in modo che possano essere percepiti
- Linee guida
- 1.1 Alternative testuali
- 1.2 Alternative per i tipi di media temporizzati
- 1.3 Adattabile: Creare contenuti che possano essere rappresentati in modalità differenti (ad esempio, con layout più semplici), senza perdere informazioni o la struttura.
- 1.4 Distinguibile: Rendere più semplice agli utenti la visione e l'ascolto dei contenuti, separando i contenuti in primo piano dallo sfondo
Principio n. 2: gestibile
- I componenti e la navigazione dell'interfaccia utente devono essere gestibili, non richiedere azioni non fattibili
- Linee guida
- 2.1 Accessibile da tastiera: rendere disponibili tutte le funzionalità tramite tastiera
- 2.2 Adeguata disponibilità di tempo: fornire agli utenti tempo sufficiente per leggere ed utilizzare i contenuti
- 2.3 Convulsioni: non sviluppare contenuti che possano causare attacchi epilettici
- 2.4 Navigabile: fornire funzionalità di supporto all'utente per navigare, trovare contenuti e determinare la propria posizione
Principio n. 3: comprensibile
- Le informazioni e le operazioni dell'interfaccia utente devono essere comprensibili
- Linee guida
- 3.1 Leggibile: rendere il testo leggibile e comprensibile
- 3.2 Prevedibile: creare pagine web che appaiano e che siano prevedibili
- 3.3 Assistenza nell'inserimento: aiutare gli utenti ad evitare gli errori ed agevolarli nella loro correzione
Principio n. 4: robusto
- Linee guida
- Il contenuto deve essere abbastanza robusto per essere interpretato in maniera affidabile mediante una vasta gamma di programmi utente, comprese le tecnologie assistive
- 4.1 Compatibile: garantire la massima compatibilità con i programmi utente attuali e futuri, comprese le tecnologie assistive
Strumenti di validazione
- Validatori raccolti dal W3C
- LynxIt : browser testuale
- Strumenti per developer dei browser