UX/UI Design. È davvero così difficile progettare soluzioni accessibili?

UX/UIDesign.
Èdavverocosìdifficile
progettaresoluzioni
accessibili?
12 Marzo 2024, Milano
Girolamo Giannatempo
UX/UI Designer @ PaperPlane Factory
G&Sans foreveryone.design

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?

MARTEDÌINACSG
UX/UI Design. È davvero così
difficile progettare soluzioni
accessibili?

MARTEDÌINACSG
Spoiler
NO

MARTEDÌINACSG
Allora, perché ancora pochi/e
designer si preoccupano di
questo argomento?

MARTEDÌINACSG
Manca
Consapevolezza

MARTEDÌINACSG
Cosasiintendeper
accessibilitàdigitale?

MARTEDÌINACSG
Fonte: instagram

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
*Siti web, prodotti, e servizi
Accessibilità digitale è

MARTEDÌINACSG
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)

MARTEDÌINACSG
The Web does not just connect machines,
it connects people
Il Web non collega solo le macchine, ma anche le persone.
Tim Berners-Lee (2008)

MARTEDÌINACSG
Comediventiamo
piùconsapevoli?
Per cui...
Perché ancora pochi/e designer si preoccupano di questo argomento? — Manca consapevolezza

Riconoscendo la stretta
relazione tra il nostro
ruolo di designer e
l’accessibilità
MARTEDÌINACSG

MARTEDÌINACSG
Il modello sociale
della disabilità
Cambio di paradigma. Perché il nostro ruolo è importante?

MARTEDÌINACSG
Scale Corda
2° PIANO

MARTEDÌINACSG
Corda
2° PIANO

MARTEDÌINACSG
Scale Ascensore
2° PIANO

MARTEDÌINACSG
Scale
2° PIANO

MARTEDÌINACSG
la disabilità non riguarda le capacità e o le abilità
di una persona
la disabilità non emerge dall’interno ma dall’esterno
Quindi...

MARTEDÌINACSG
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

MARTEDÌINACSG
Speaker - Content Creator - Model - Author - Advocate
Forbes 30 Under 30 - Clio Award Winner - Allure A-Lister
Oh, and I'm blind! 🦮 👀
@mollyburkeofficial
Sentiamolo dalle parole
di Molly Burker

MARTEDÌINACSG
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

“Da grandi poteri
derivano grandi
responsabilità”
MARTEDÌINACSG
Dal film Spider-Man 3

Diventa più tangibile questa frase quando scopriamo che…
Il67%deiproblemidi
accessibilitàhannoorigine
nellafasedidesign
MARTEDÌINACSG
Auditing design systems for accessibility | www.deque.com

MARTEDÌINACSG
Comepossiamo
rimuoverequeste
barriere?

MARTEDÌINACSG
Attraversola
Consapevolezza

MARTEDÌINACSG
È un approccio consapevole alla
progettazione digitale nel quale i bisogni
delle persone con disabilità (e non solo)
sono specificatamente considerati
partendo dalla fase di design
Accessibility by Design

MARTEDÌINACSG
Why We Need More Accessibility Designers - Anna E. Cook
Ci vengono in aiuto le WCAG…
Il78%delleraccomandazioni
WCAGsonocorrelate
aldesign
64%
Design
14%
Design e sviluppo

MARTEDÌINACSG
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

MARTEDÌINACSG
Supporting the Design Phase with Accessibility Heuristics Evaluations
Le euristiche dell’accessibilità sono state
realizzate da DEQUE
Scaricaleeurisitchedell’accessibilità

MARTEDÌINACSG
Dadovepartire?

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
webaim.org/projects/million/

MARTEDÌINACSG
colourblindawareness.org
www.orbis.org
Le persone nel mondo…
40Mconcecità
249Mcondifficoltàvisive
300Mcondaltonismo

MARTEDÌINACSG
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

MARTEDÌINACSG
*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

MARTEDÌINACSG
Sito web analizzato: withotter.com
Plugin: Stark,
Due livelli WCAG...
AA AAA
4,5:1
3:1
Normal Text
Minimo 19px bold o 24px
Large Text
UI and graphical elements
Non-text Contrast
3:1
7:1
4,5:1
Se il testo è decorativo può non seguire queste indicazioni

MARTEDÌINACSG
Sito web analizzato: withotter.com
Plugin: Stark,
Controllare che tra tutti i testi e lo sfondo ci sia
un rapporto di contrasto minimo di 4,5:1.
3:1 per i testi di grandi dimensioni (almeno
19px bold, o 24px regular).
Testi e Background:
12,89:1

MARTEDÌINACSG
Material design, Google design system
Per quanto riguarda i bottoni oltre al controllo del
contrasto tra testo e colore del bottone dobbiamo
verificare anche il rapporto tra il colore del pulsante
e quello del background. Contrasto minimo 3:1.

MARTEDÌINACSG
3,13:1 | AA Large Text
L’algoritmo APCA (Accessible Perceptual Contrast
Algorithm) calcola il contrasto in base alla luminanza
dei colori che differiscono in base al colore di primo
piano rispetto a quello di sfondo, alla dimensione e al
peso dei caratteri.
APCA

MARTEDÌINACSG
Ha un sufficiente
contrasto?

MARTEDÌINACSG
Plugin: Stark

MARTEDÌINACSG
Come documentare i colori?

MARTEDÌINACSG

MARTEDÌINACSG
Vision test
Stark – Visual Simulator Colorblindly

MARTEDÌINACSG
Vision test
common.xyz
Red-blind | Pronatopia

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

MARTEDÌINACSG
Non affidare la comunicazione di
informazioni importanti solo al colore
Caso studio Ninja

MARTEDÌINACSG
Caso studio 1

MARTEDÌINACSG
Campo obbligatorio. Inserire il nome. Es. Mario
Caso studio 1

MARTEDÌINACSG
Caso studio 1

MARTEDÌINACSG
Considerare l’aggiunta di texture oltre al colore
Caso studio 4 - Trello

MARTEDÌINACSG
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
2
1
Step A Step B Step C Step D Step E
4 5
A
B
Caso studio 6

3
2
1
4 5 3
2
1
4 5
MARTEDÌINACSG
How To Design for Accessibility: for UX Designers (WCAG 2.2) | Udemy.com
3
4 5 3
4 5
Simulazione
protanopia
Cecità al colore rosso
Simulazione
acromatopsia
Cecità a tutto lo spettro
cromatico
Caso studio 6

MARTEDÌINACSG
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

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

Scegliere un carattere che enfatizzi la chiarezza e la leggibilità
MARTEDÌINACSG
Figma Letter checker - Stark
Caso studio 1

Font: Gill Sans
MARTEDÌINACSG
Letter checker - Stark
Caso studio 1

Caso studio 1
Font: Inclusive Sans
MARTEDÌINACSG
Figma Letter checker - Stark Scegliere un carattere che enfatizzi la chiarezza e la leggibilità

Caso studio 1
MARTEDÌINACSG
Scegliere un carattere che enfatizzi
la chiarezza e la leggibilità

Caso studio 1
MARTEDÌINACSG
Font: Gill Sans

MARTEDÌINACSG
Google font
Caso studio 1
abcdefghijklmnopqrstuvwxyz
Font: Lexend
Font: Atkinson Hyperlegible

MARTEDÌINACSG
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
✅

MARTEDÌINACSG
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

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
H3 H3
H2
H1

MARTEDÌINACSG
IBM accessibility
ok
Scrivere titoli che sono chiari e sintetici
Caso studio 1

MARTEDÌINACSG
IBM accessibility
Evitate di saltare un H all’interno
del vostro flusso
Disegnare titoli che riflettano una
gerarchia logica visiva e semantica
dei contenuti (H1, H2, H3…)
H1
H2
H3
Caso studio 2

MARTEDÌINACSG
accessguide.io
Scrivere i testi di link in modo descrittivo
e con il contenuto principale all’inizio
Caso studio 3
ok

MARTEDÌINACSG
Disability Awareness and Support, Screen Reader Demonstration
Caso studio 3
Le#ura della pagina con uno screen reader

MARTEDÌINACSG
Caso studio 3
Le#ura dei link con il tab della tas4era

MARTEDÌINACSG
Caso studio 3
Le#ura dei link a#raverso la lista dei link

MARTEDÌINACSG
Organizzazione e chiarezza dei contenuti 2
I link sono facilmente
identificabili in pagina?
Progettare link chiaramente distinguibili e che stimolano
l’azione (che sembrano cliccabili) riduce esitazione e
ambiguità.

MARTEDÌINACSG
*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

MARTEDÌINACSG
I form
Gli utenti possono capire e
percepire la struttura di un form
facilmente, prevedendo e/o
risolvendo possibili errori?
Istruzioni chiare per l’inserimento o e suggerimenti di
compilazione aiutano a completare un form in modo
rapido e corretto

MARTEDÌINACSG
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 *

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
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

MARTEDÌINACSG
Caso studio 1 | Da non seguire Quali sono i campi obbligatori?
hom-wellness.com

MARTEDÌINACSG
Caso studio 1 | Da non seguire hom-wellness.com
Quali sono i campi obbligatori?

MARTEDÌINACSG
Il form è accessibile da tastiera? Sì
Il focus state è visibile? No
Caso studio 1 | Da non seguire hom-wellness.com

MARTEDÌINACSG
Caso studio 1 | Come migliorarlo?
*
*
Asterisk (*) indicates required fields
hom-wellness.com

MARTEDÌINACSG
Sistema di messa in pausa
Può l’utente mettere in stop
video, animazioni e elementi in
movimento?
La possibilità di disattivare i contenuti in movimento
consente di eliminare le distrazioni favorendo la
concentrazione e riducendo rischi di sovraccarico
sensoriale o di vertigini

MARTEDÌINACSG
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

Esempio di messa in pausa
MARTEDÌINACSG
airbnb.it
Caso studio 1

MARTEDÌINACSG
figma.com/blog
Caso studio 1
Esempio di messa in pausa

Pulsante disattiva animazioni
MARTEDÌINACSG
Caso studio 2

Nuova progettazione per la
versione “riduci movimento”
MARTEDÌINACSG
apple.com
Caso studio 3

MARTEDÌINACSG
Testo alternativo (Alt text)
I contenuti puramente visivi che
trasmettono informazioni
importanti hanno alternative
testuali?
Immagini, icone e altri elementi visivi significativi, devono
avere un testo alternativo (alt text) così da fornire alle
persone che utilizzano uno screen reader di accedere a
quelle informazioni

MARTEDÌINACSG
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

MARTEDÌINACSG
Anchesenonriusciremo
maidavveroaprogettare
pertuttelepersone,è
nostrocompitocercaredi
nonescluderenessuno

MARTEDÌINACSG
Viviamol’accessibilità
comeunasfidaprogettuale
enonsolamentecomeun
adeguamentonormativo

MARTEDÌINACSG
Esploriamociòchesista
facendoattualmenteper
cercarediarrivareaquello
cheèeffettivamente
possibile

MARTEDÌINACSG
Ricorda; Il percorso verso l’accessibilità non è lineare

“Ilperfezionismoèun
approcciosbagliato
all’accessibilità”
MARTEDÌINACSG
accessibility.uxdesign.cc

MARTEDÌINACSG
Accessibilità:essenziale
peralcuni,utilepertuttə

Iscriviti alla newsletter
foreveryone.design

gandsans.com
Sito web
@gandsans
Instagram
hello@gandsans.com
Email
linkedin.com/in/gandsans/
Linkedin
Dove trovarmi

UX/UI Design. È davvero così difficile progettare soluzioni accessibili?

Recommended

Recommended

More Related Content

Similar to UX/UI Design. È davvero così difficile progettare soluzioni accessibili?

Similar to UX/UI Design. È davvero così difficile progettare soluzioni accessibili? (20)

UX/UI Design. È davvero così difficile progettare soluzioni accessibili?