Accessibilità by design
L'accessibilità inizia esattamente dal design.
Già in fase di progettazione visiva le scelte che si fanno possono influenzare, in senso positivo o negativo, come gli utenti riusciranno a usare effettivamente un sito/prodotto per raggiungere i loro obiettivi.
Il 67% dei problemi di accessibilità nasce dal design!
Leggi queste slide per capire perché il ruolo del designer è importante e come lavorare favorendo l'accessibilità durante la fase di progettazione
2. Mi chiamo Girolamo, da anni mi trovate in rete come G&Sans. Non
amo presentarmi e tutto questo mi imbarazza sempre. YEAAAAHH!!!
Ho sempre avuto una propensione per la creatività, e una passione
verso il cercare di capire le persone. Questi 2 elementi, dopo anni di
esplorazione e diverse esperienze lavorative, mi hanno portato oggi a
lavorare come UX/UI designer in PaperPlane Factory.
Non sono questo gatto, ma lui
è sempre al mio fianco
CHISONO
MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
9. La progettazione e lo sviluppo
di sistemi* adattivi che generano
autonomia nelle persone, utile al
raggiungimento dei propri obiettivi,
a prescindere dalle abilità e
disabilità personali
MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
*Siti web, prodotti, e servizi
Accessibilità digitale è
10. MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
The power of the Web is in its universality.
Access by everyone regardless of disability
is an essential aspect.
La forza del Web sta nella sua universalità. L’accesso da parte di tutti,
indipendentemente dalla disabilità, è un aspetto essenziale.
Già nel 1997, l’inventore del World Wide Web, Tim Berners-Lee (1997)
13. Riconoscendo la stretta
relazione tra il nostro
ruolo di designer e
l’accessibilità
MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
20. MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
Quando la società non fornisce la flessibilità necessaria
per soddisfare i bisogni di tutte le persone diventa
disabilitante, crea, cioè, una barriera che inibisce le
persone dall’iterazione col mondo attorno a loro.
Al contrario sarà abilitante, permettendole di esprimersi
al meglio perseguendo i propri obiettivi.
Modello sociale della disabilità*
*Vi è una chiara distinzione tra la difficoltà oggettiva dell’individuo e la
disabilità. Quest’ultima è identificata come un disvantaggio che sorge da
una mancanza di adattabilità tra la società e le persone.
Barriere
Barriere
Barriere Barriere
Società
Società
Fonte: Democracy Disability and Society Group
22. MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
Chi si occupa di progettare servizi, prodotti digitali o siti
web sta “costruendo” strumenti con il quale le persone
interaggiranno per entrare in contatto con la società e/o
raggiungere i propri obiettivi.
Di conseguenza l’interfaccia diventa la porta di accesso
per le loro necessità, ed è nostro compito mantenerla
sempre aperta, adattandola ad ogni esigenza. Quando
non forniamo un’adeguata flessibilità stiamo creando
un’esperienza invalidante innalzando una barriera.
Cosa c’entra con noi?
Noi abbiamo il
potere di creare
o rimuovere
queste barriere
23. “Da grandi poteri
derivano grandi
responsabilità”
MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
Dal film Spider-Man 3
24. Diventa più tangibile questa frase quando scopriamo che…
Il67%deiproblemidi
accessibilitàhannoorigine
nellafasedidesign
MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
Auditing design systems for accessibility | www.deque.com
29. MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
Supporting the Design Phase with Accessibility Heuristics Evaluations
E se non bastasse…
Abbiamoadisposizionele
euristichedell’accessibilità
Regole generali ispirate alle WCAG e costruite specificamente per valutare i progetti
per l’accessibilità in fase di design. Anche se si basano sui requisiti tecnici delle
WCAG, hanno un approccio più digeribile per chi si occupa di design UX/UI
32. The WebAIM Million 2023 Le homepage con gli
errori WCAG più comuni
(% delle homepage)
Homepage testate: 1M
0%
Low
Contrast
text
Missing
alternative
text
Missing
form labels
Empty link Empty
buttons
20%
40%
60%
80%
100%
Missing
document
language
MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
webaim.org/projects/million/
34. MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
Contrasto colore e indipendenza cromatica
Le informazioni significative*
possono essere facilmente
percepite e capite?
*Testi o altre informazioni con messaggi importanti (es. Infografiche, grafici)
Il colore non è sufficiente a veicolare correttamente
informazioni e/o feedback perché percepito in modi diversi
dalle persone. Inoltre bisogna garantire un sufficiente
contrasto colore per essere facilmente distinto
35. MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
*minimo19pxboldo24px
Lorem ipsum
dolor amet
Che bel bottone
Suggerimenti 1/2
Controllare che tra il colore del bottone e lo sfondo ci
sia un rapporto di contrasto minimo di 3:1
Se il testo è decorativo può non seguire queste indicazioni
I testi di grandi dimensioni* (es. titoli e sottotitoli) e le
icone possono avere un rapporto di contrasto minimo
di 3:1
Controllare che tra tutti i testi (es. i paragrafi) e lo sfondo
ci sia un rapporto di contrasto minimo di 4,5:1
47. Suggerimenti 2/2
Disegnare i propri componenti in bianco/nero o in
scala di grigio, successivamente aggiungere il colore
Considerare l’aggiunta di texture oltre al colore
Non affidare la comunicazione di informazioni
importanti solo al colore (es. aggiungi icone
accanto ai messaggi di errore, notifica, ect)
Password non corretta
MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
55. 3
2
1
Step A Step B Step C Step D Step E
4 5 3
2
1
Step A Step B Step C Step D Step E
4 5
MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
How To Design for Accessibility: for UX Designers (WCAG 2.2) | Udemy.com
3
Step A Step B STEP C Step D Step E
4 5 3
Step A Step B STEP C Step D Step E
4 5
Simulazione
protanopia
Cecità al colore rosso
Simulazione
acromatopsia
Cecità a tutto lo spettro
cromatico
Caso studio 6
Disegnare i propri componenti in bianco/nero o in
scala di grigio, successivamente aggiungere il colore
56. MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
Tipografia e facilità di lettura
È possibile riconoscere e
distinguere facilmente le
informazioni testuali?
La tipografia può avere un impatto negativo sulle persone con
difficoltà cognitive, di apprendimento, e in generale anche chi vive
momenti di forte stress/ansia. Anche per le persone ipovedenti dei
testi chiari e leggibili aiuteranno a migliorare l’esperienza di lettura
57. Suggerimenti
Disegnare i contenuti di testo in piccoli blocchi
di paragrafo
Definire i valori in REM per gli sviluppatori
Utilizzare testi non giustificati Stressare i font fino al 200% per capire come
reagiscono all’interno dei componenti
Limitare l’uso del corsivo e del maiuscolo Utilizzare per il paragrafo un’interlinea tra il 140% - 165%
la grandezza del font, per i titoli può essere sufficiente
110% - 130%
Scegliere un carattere che enfatizzi la chiarezza
e la leggibilità
Creare righe di testo tra 45 - 75 caratteri
MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
58. Scegliere un carattere che enfatizzi la chiarezza e la leggibilità
MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
Figma Letter checker - Stark
Caso studio 1
60. Caso studio 1
Font: Inclusive Sans
MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
Figma Letter checker - Stark Scegliere un carattere che enfatizzi la chiarezza e la leggibilità
61. Caso studio 1
Font: Inclusive Sans
MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
Figma Letter checker - Stark
Scegliere un carattere che enfatizzi
la chiarezza e la leggibilità
62. Caso studio 1
Font: Inclusive Sans
MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
Figma Letter checker - Stark
Font: Gill Sans
Scegliere un carattere che enfatizzi la chiarezza e la leggibilità
64. MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
Caso studio 2
Interlinea titolo: 120%
Interlinea titolo: 150%
Secondo determinate leggi metriche, o secondo altri tipi di restrizione; con
una certa approssimazione si può dire che il significato di p. è individuabile,
nell’uso corrente e tradizionale, nella sua contrapposizione a prosa, in quanto
i due termini implicano rispettivamente e principalmente la presenza o
l’assenza di una restrizione metrica. All’interno di questa accezione si situano
la divisione tradizionale in p. epica, lirica, drammatica, e altre distinzioni quali:
p. didascalica, satirica, bucolica (o pastorale), colta ecc.
La poesia: Arte di produrre
composizioni verbali in versi
✅ Utilizzare per il paragrafo un’interlinea tra il 140% - 165%
la grandezza del font, per i titoli può essere sufficiente
110% - 130%
Creare righe di testo tra 45 - 75 caratteri
Lunghezza riga: In media circa 75 caratteri per riga
✅
Allineamento testi: A sinistra
Utilizzare testi non giustificati
✅
65. MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
Organizzazione e chiarezza dei contenuti 1
È possibile comprendere
rapidamente il significato della
pagina attraverso i titoli e link?
Assicurarsi che il contenuto, se anche letto attraverso uno
screen reader, sia facile da consultare.
Agevoliamo le persone con difficoltà cognitive o in stati di
forte stress, migliorando la “trovabilità” delle informazioni
66. Suggerimenti
Scrivere i testi dei link in modo descrittivo
Inserire le parole significative o le informazioni
essenziali all’inizio del titolo o del link
(front-load the link)
Evitare di saltare un livello di titolazione. Annotate i
livelli di titoli previsti per gli sviluppatori, se non sono chiari.
Progettare titoli che riflettano una gerarchia logica
visiva e semantica dei contenuti
Scrivere titoli chiari e sintetici
MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
H3 H3
H2
H1
74. MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
*Minimo 3.1 per le attuali WCAG.
Suggerimenti
Io sono un link!
Io sono un link?
Io sono un link?
All’hover deve essere aggiunto un chiaro elemento visivo
che chiarisca il ruolo di link
Se il colore è l’unico modo per identificare i link, deve
avere un contrasto sufficiente* tale da essere facilmente
percepito rispetto al testo adiacente e
Controllare che Il colore non sia il solo modo
per identificare i link
76. MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
Controllare che il form sia accessibile da tastiera
e che lo stato di focus sia visibile (non utilizzate solo il
colore)
Controllare che le etichette dei form siano sempre
chiare e visibili evitando l’uso di placeholder
come etichetta del form
Inserire le informazioni importanti che riguardano
l’intero form prima dell’inizio del form stesso (es. i
campi obbligatori)
Suggerimenti 1/2
Deve avere almeno 8 caratteri e includere una lettera maiuscola
Password*
Inserisci la tua mail
Email*
Inserisci il tuo cognome
Cognome
Campo obbligatorio. Non può essere vuoto. Es. Martina
Inserisci il tuo nome
Nome*
Tutti i campi obbligatori sono contrassegnati da un asterisco *
77. Deve avere almeno 8 caratteri e includere una lettera maiuscola
Password*
Inserisci la tua mail
Email*
Inserisci il tuo cognome
Cognome
Campo obbligatorio. Non può essere vuoto. Es. Martina
Inserisci il tuo nome
Nome*
Tutti i campi obbligatori sono contrassegnati da un asterisco *
MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
In caso di errore, contrassegnare l’errore (non
utilizzate solo il colore) e scrivere messaggi specifici
e comprensibili. No testi generali. Se possibile fornire
un esempio.
Aiutare l’utente a prevenire gli errori con testi di
supporto, istruzioni, evidenziando i campi obbligatori, etc
Suggerimenti 2/2
84. MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
Nel caso di animazioni avanzate, prevedere un layout
personalizzato che preveda lo stesso contenuto e
significato ma in forma statica da fornire agli sviluppatori
come versione “reduced motion”
Se presenti elementi di design motion o che simulino il
movimento (es. parallasse e scroll jacking), permettere agli
utenti di non visualizzare le animazioni o di ridurre il loro
livello di “movimento” (CSS prefers-reduced-motion) e
Controllare che gli elementi che partono automaticamente
e durano più di 5 secondi abbiano un meccanismo di
messa in pausa/stop
Suggerimenti
85. Esempio di messa in pausa
MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
airbnb.it
Caso studio 1
88. Nuova progettazione per la
versione “riduci movimento”
MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
apple.com
Caso studio 3
90. MARTEDÌINACSG
UX/UIDesign.Èdavverocosìdifficileprogettaresoluzioniaccessibili?
Preparare le descrizioni da aggiungere come testo
alternativo (UX writers, content writers possono aiutare
nello scrivere i testi)
Identificare quali immagini potrebbero aver
bisogno di un testo alternativo e quali sono
solo decorative. Annotare queste informazioni per
gli sviluppatori
Le immagini puramente decorative non hanno bisogno
di testo alternativo
Suggerimenti
Scarica
3
3 Alt text No
Condividi
2
2 Alt text No
1
1
Lorem ipsum dolor sit
amet consetetur
Alt text Si