Accessibility Days 2018 - GAAD - Accessibility overview

X
Web accessibility overview
Accessibilità per il web: cos'è, a chi è rivolta e
perché è fondamentale per un web di qualità
Ancona, 19-20 maggio 2017
Fabrizio Caccavello
@cfabry

X
web accessibility overview
Fabrizio Caccavello Accessibility Days (GAAD) - Bologna, 18 maggio 2018
@cfabry
CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.it
Document licence
Share
#gaad #a11yDays

X
partecipazioni internazionali
principali partecipazioni nazionali
http://www.iwa.it
Associazione professionisti Web  
(Legge 4/2013), promotrice norme UNI
in materia di professionalità ICT.
Dal 1996 (in Italia dal 2000) è il
riferimento di chi lavora nel Web, sia
nel settore pubblico che privato.
Obiettivo di IWA è creare rete tra i
soci, partecipare all'evoluzione della
rete e divulgare conoscenza tramite i
soci con eventi e iniziative.
International web association
L’associazione internazionale per la professionalità nel Web

X
About me: Fabrizio Caccavello
Web Accessibility Expert - User Experience Designer
http://www.fabriziocaccavello.it
International Web Association
• Membro del Consiglio Direttivo di IWA Italy
• Coordinatore webaccessibile.org
Agenzia per l’Italia Digitale
• Consulente super senior accessibilità
• User Experience Designer - UX/UI
Akebia - internet experience
• Amministratore e fondatore
UNINFO - ente di normazione italiano
• Commissione e-Accessibility
• Coordinatore del GdL2 "Adozioni e Traduzioni”

X
@cfabry
che cos’è
l’accessibilità

X
@cfabry
• Maggiore inclusione
• Migliore esperienza utente
• Oltre il 70% azioni SEO
• Normativa (L. 4/2004 & mod.)
ACCESSIBILITY
topics

X
@cfabry
ACCESSIBILITY
processi digitali
con l’accessibilità
in testa

X
@cfabry
Accessibility
check
Project
Development
Testing Publish
bad planning
Planning with accessibility

X
@cfabry
Project
Development
Testing
Publish
Accessibility
Accessibility
Accessibility
right planning

X
@cfabry
chi riguarda?
accessibility

X
@cfabry
il 20% dei visitatori di un
sito internet ha una
disabilità
Questi utenti possono
avere un accesso limitato
alle informazioni

X
@cfabry
• disabilità motorie
• disabilità cognitive
• disabilità del linguaggio
• cecità e ipovedenza
• sordità e ipoacusia
• daltonismo
• epilessia
• abilità non ottimali
• difficoltà sociali
• funzionamento cognitivo limite
• altre sindromi
accessibility
riguarda
elenco
non
esaustivo

X
@cfabry
• dispositivi non funzionanti
• dispositivi obsoleti
• condizioni ambientali non
ottimali
• condizioni di accesso alla rete
non ottimali
• dislessia
• discalculia
• disnomia
accessibility
riguarda

X
@cfabry
!14
Le condizioni
ambientali influiscono.
Come quando si sta in
mobilità sotto il sole

X
@cfabry
!15
Non tutti i sistemi
operativi sono
aggiornati

X
Non tutte le periferiche
sono sempre efficienti

X
@cfabry
• disabilità motorie
• disabilità cognitive
• disabilità del linguaggio
• cecità e ipovedenza
• sordità e ipoacusia
• daltonismo
• epilessia
• abilità non ottimali
• difficoltà sociali
• funzionamento cognitivo limite
• altre sindromi
accessibility
riguarda
elenco
non
esaustivo
Non tutti i monitor
sono ottimali nella
resa dei colori e dei
contrasti

X
@cfabry
The power of the Web is in its universality.
Access by everyone regardless of disability
is an essential aspect.
Accessibility for all
Tim Berners-Lee https://www.w3.org/WAI/
La forza del Web sta nella sua universalità.  
Renderlo accessibile a tutti, indipendentemente dalla
disabilità, è un aspetto essenziale.

X
@cfabry
Accessibility for all
La disabilità è parte della condizione
umana. Quasi tutti saranno
temporaneamente o permanentemente
coinvolti in qualche momento della vita
http://www.who.int/disabilities/world_report/2011/report.pdf?ua=1
WORLD REPORT ON DISABILITY (2011)

X
@cfabry
https://www.w3.org/TR/WCAG20/
WCAG 2.0
Web Content Accessibility Guidelines
(WCAG) 2.0 covers a wide range of
recommendations for making Web
content more accessiblecontent

X
@cfabry
https://www.w3.org/TR/WCAG20/WCAG 2.0
Le WCAG non sono solo linee
guida tecniche, ma un processo,
una strategia per lo sviluppo
del web

X
@cfabry
1 - PercepibileWCAG 2.0
le informazioni e i componenti
dell'interfaccia utente devono
essere presentati in modo che
possano essere fruiti attraverso 
differenti canali sensoriali
oops, la mia vista
è differente

X
@cfabry
2: Utilizzabile
i componenti dell’interfaccia
utente e i comandi in essa
contenuti devono essere
utilizzabili  
senza ingiustificati disagi
WCAG 2.0
la sessione è scaduta,
mi dispiace ma è un tuo problema

X
@cfabry
WCAG 2.0 3 - Comprensibile
gli utenti devono poter comprendere le
modalità di funzionamento
dell’interfaccia e le azioni in essa
contenute
io parlo tutte le lingue,
ma non so quale in
questo momento

X
@cfabry
WCAG 2.0 3 - Robusto
il contenuto deve essere
abbastanza robusto da
poter essere interpretato
in modo affidabile da una
vasta gamma di
programmi utilizzati
dall’utente, comprese le
tecnologie assistive
< …. >

X
@cfabry
chi può dire quanto tempo impiegherà un
utente a leggere un testo?
10
secondi?
20
secondi?
50
secondi?
Il tempo è sempre relativo

X
@cfabry
http://www.agid.gov.it/sites/default/files/linee_guida/guida_pratica_creazione_word_accessibile_2.pdf
Guidelines for creating 
accessible documents

X
@cfabry
!28
non competenza e distrazione ?
accessibile o non accessibile?

X
@cfabry
!29
demo homepage
# logo
Lorem ipsum dolor sit amet consectetur
adipiscing elit sed do eiusmod tempor
incididunt ut labore
accedi
cerca
in questa demo il colore primario è inaccessibile

X
@cfabry
!30
demo homepage
in questa demo il colore primario è inaccessibile

X
@cfabry
!31
# logo
Lorem ipsum dolor sit amet
consectetur adipiscing elit sed do
eiusmod tempor incididunt ut
labore. Duis aute irure dolor in
reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla
pariatur.
cerca
/ categoria / pagina.htmltorna alla home
anche il colore secondario è inaccessibile

X
@cfabry
!32
# logo cerca
/ categoria / pagina.htmltorna alla home
anche il colore secondario è inaccessibile

X
le demo sono inaccessibili perché è stato
utilizzato il framework CoreUI, basato su
bootstrap, che però usa una palette di
colori inaccessibile

XAccessibility - Color Contrast Analyser

XAccessibility - Color Contrast Analyser
solo testo grande
ok
solo testo grande
solo testo grande
ok
ok
ok
ok
solo testo grande
!
!
!

X
@cfabry
Accessibilità e competenze digitali
accessibilità
Competenze
digitali
Migliore UX

X
@cfabry
!37
addendum
Ipovisione
ingrandimento pagine web
http://www.fabriziocaccavello.it/ingrandimento-delle-pagine-web-e-ipovisione/

X
@cfabry
Ipovisione: ingrandimento pagine web
Le pagine web possono
essere ingrandite in due
modi diversi

X
@cfabry
l’ingrandimento di solo
testo, preserva l’integrità
della pagina che rimane a
disposizione del campo
visivo dell’utente nella
sua interezza

X
Fabrizio Caccavello
esempi
Accessibility Days (GAAD) - Bologna, 18 maggio 2018
@cfabry
!42
il menù superiore di trenitalia.com

X
Fabrizio Caccavello
esempi
@cfabry
!43
una pagina di corriere.it

X
Fabrizio Caccavello
esempi
@cfabry
!44
una porzione di homepage di vodafone.it

X
Fabrizio Caccavello
esempi
@cfabry
!45
una email di gmail.com

X
@cfabry
!46

X
@cfabry

X
Fabrizio Caccavello
@cfabry
#gaad

Accessibility Days 2018 - GAAD - Accessibility overview

Recommended

Recommended

More Related Content

Similar to Accessibility Days 2018 - GAAD - Accessibility overview

Similar to Accessibility Days 2018 - GAAD - Accessibility overview (20)

More from Fabrizio Caccavello

More from Fabrizio Caccavello (20)

Recently uploaded

Recently uploaded (20)

Accessibility Days 2018 - GAAD - Accessibility overview