Anche i designer devono conoscere alcune fondamentali basi di accessibilità. Sviluppare accessibile significa pensare accessibile, a tutti i livelli, anche in fase di costruzione di un prototipo.

1. Non esiste UX
senza
accessibilità.
Costruire un
web per tutti

2. @cfabry
Fabrizio Caccavello
Web Accessibility Expert
User Experience Designer
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”
http://www.fabriziocaccavello.it
About me: Fabrizio Caccavello
2

3. @cfabry
Fabrizio Caccavello
Disegnare servizi per tutti
Il web rende disponibili
informazioni e servizi
alle persone, in
qualunque ambiente.
Dobbiamo disegnarlo
inclusivo.
3

4. @cfabry
Fabrizio Caccavello
Il mobile first non è più in discussione
Le tecniche di responsive design ci guidano da anni a pensare
allo sviluppo web adeguato ai vari dispositivi, preferendo, per
varie ragioni, un approccio di tipo “prima i dispositivi mobili”
4

5. @cfabry
Fabrizio Caccavello
Il mobile first non è più in discussione
Ma quello che prima era un suggerimento, un modo
tecnicamente corretto di pensare allo sviluppo, ora
diventa imprescindibile
5

6. @cfabry
Fabrizio Caccavello
Disegnare per tutti
Disegnare
applicazioni per il
web diventa un
lavoro determinante,
perché il design
inclusivo inizia
“dal disegno”
6

7. @cfabry
Fabrizio Caccavello
Disegnare per tutti, disegnare accessibile
7
L’accessibilità non riguarda i
solo i tecnici o gli esperti di
accessibilità.
E non è (soltanto) una
questione di codice.

8. @cfabry
Fabrizio Caccavello
Disegnare per tutti, disegnare accessibile
L’accessibilità è
una questione di
contenuti
8

9. @cfabry
Fabrizio Caccavello
Disegnare per tutti, disegnare accessibile
L’accessibilità riguarda le persone, tutte,
anche quelle con disabilità.
I web designer devono pensare accessibile
9

10. @cfabry
Fabrizio Caccavello
Accessibilità per designer
Criticità e considerazioni da
analizzare a livello di design
10
“Per non continuare a fare disegnini digitali”
(cit. Roberto Scano)

11. @cfabry
Fabrizio Caccavello
Contrasto di colore
Nero è bello
alto contrasto è bello
Fornire contenuti con adeguato
contrasto di colore
Oltre 200 milioni di persone hanno
problemi visivi
11
Ricerca autobus
Nr. autobus
inserisci numero autobus

12. @cfabry
Fabrizio Caccavello
Contrasto di colore
Nero è bello
Fornire contenuti con adeguato
contrasto di colore
Oltre 200 milioni di persone hanno
problemi visivi
12
Ricerca autobus
Nr. autobus
inserisci numero autobus

13. @cfabry
Fabrizio Caccavello
Testi troppo piccoli
Ricerca autobus
Nr. autobus
inserisci numero autobus
Se il testo è troppo piccolo può
diventare invisibile
Su un dispositivo mobile gli utenti
non hanno la possibilità di
ingrandire il testo

14. @cfabry
Fabrizio Caccavello 14
Ricerca autobus
Nr. autobus
inserisci numero autobus
Talvolta queste
caratteristiche si
trovano anche in
progetti di grandi
aziende
Testi troppo piccoli

15. @cfabry
Fabrizio Caccavello
Non fornire informazioni solo attraverso il colore
Non tutti percepiscono
i colori nello stesso
modo
15
Mappa autobus
Importante!
Stato degli autobus
in arrivo
soppresso
in ritardo
134
28
276

16. @cfabry
Fabrizio Caccavello
Non fornire informazioni solo attraverso il colore
16
Mappa autobus
Importante!
Stato degli autobus
in arrivo
soppresso
in ritardo
134
28
276
Non tutti percepiscono
i colori nello stesso
modo
un esempio di daltonismo

17. @cfabry
Fabrizio Caccavello
Elementi che si sovrappongono
Considerare che su mobile
alcuni elementi possono
sovrapporsi, come gli elementi
di menu.
Vale anche per i
comportamenti degli oggetti
nativi (come le tastiere virtuali
dei dispositivi)
17
Ricerca autobus
Nr. autobus
inserisci numero autobus
CERCA
ATTENZIONE
non scrivere 25barra
ma 25/

18. @cfabry
Fabrizio Caccavello
Elementi con Focus
Gli oggetti attivi devono avere
un focus (molto) evidente.
18
Orari autobus
News Orari Avvisi
Lorem ipsum dolor sit
amet, consectetur
adipiscing elit, sed do
eiusmod tempor
incididunt ut labore et
dolore magna aliqua.

19. @cfabry
Fabrizio Caccavello
Moduli, usare correttamente le etichette
Le etichette dei moduli
hanno un significato
semantico.
I placeholder non sono
sostituti delle etichette
19
Crea la tua password
minimo 8 caratteri, di cui uno speciale
La tua password deve essere composta da almeno
8 caratteri e deve contenere almeno un carattere
speciale

20. @cfabry
Fabrizio Caccavello
Moduli, usare correttamente le etichette
20
Crea la tua password
minimo 8 caratteri, di cui uno speciale
La tua password deve essere composta da almeno
8 caratteri e deve contenere almeno un carattere
speciale
LABEL
PLACEHOLDER
TESTO GUIDA
referenziato con WAI-ARIA

21. @cfabry
Fabrizio Caccavello
Le insidie nei campi di input
Talvolta dietro a un semplice input si possono
nascondere elementi di elevata inaccessibilità
21

22. @cfabry
Fabrizio Caccavello
Le insidie nei campi di input
1) Non si può fare copia/incolla dell’intero numero.
2) Non si possono usare i sistemi automatici dei browser
che permettono di recuperare i dati memorizzati.
3) Dopo il primo blocco di 4 cifre, c’è lo spostamento
automatico al secondo blocco? Oppure si dovrà agire
sul mouse per cambiare il focus?
4) I blocchi di 4 cifre hanno il limite a 4 cifre?
5) L’etichetta “numero di carta” a quale dei campi è
riferita? Ogni campo deve avere una etichetta.
22
Quanti problemi ci
possono essere se si
dividono i campi
della carta di credito
in 4 input distinti

23. @cfabry
Fabrizio Caccavello
Pulsanti di azione di dimensioni adeguate
Pulsanti di azione troppo piccoli
possono essere invisibili e
di difficile utilizzo
23
Orari autobus
News Orari Avvisi
Lorem ipsum dolor sit
amet, consectetur
adipiscing elit, sed do
eiusmod tempor
incididunt ut labore et
dolore magna aliqua.

24. @cfabry
Fabrizio Caccavello
Gestione degli spazi
24
Mappa autobus
Importante!
Stato degli autobus
in arrivo
soppresso
in ritardo
134
28
276
Il rapporto tra gli oggetti rappresentati e
gli spazi intorno è molto importante

25. @cfabry
Fabrizio Caccavello
Gestione degli spazi
25
Mappa autobus
Importante!
Stato degli autobus
in arrivo
soppresso
in ritardo
134
28
276
Ma attenzione a non esagerare :)

26. @cfabry
Fabrizio Caccavello
Gestione degli spazi
26
Mappa autobus
Importante!
Stato degli autobus
in arrivo
soppresso
in ritardo
134
28
276
Mappa autobus
Stato degli autobus
in arrivo
soppresso
in ritardo
134
28
276
Talvolta queste
caratteristiche si
trovano anche in
progetti di grandi
aziende

27. @cfabry
Fabrizio Caccavello
Testi alternativi per immagini
I testi alternativi per le
immagini devono essere
indicati nell’apposito tag ALT,
ma si possono fornire anche
opportune didascalie
27
Nell’immagine è raffigurato un originale ambiente di lavoro
composto da computer, lampada e porta penne in alluminio

28. @cfabry
Fabrizio Caccavello 28
Nell’immagine è raffigurato
un originale ambiente di
lavoro composto da
computer, lampada e porta
penne in alluminio
alt
Ambiente di lavoro con computer
figcaption
Testi alternativi per immagini

29. @cfabry
Fabrizio Caccavello
Usare elementi di markup significativi
Non tutti i testi sono uguali.
Un testo di tipo “titolo” è un
titolo dal punto di vista
strutturale, e non soltanto
perché è più grande
29
<h1>Io sono un titolo</h1>
<h2>Io sono un titolo secondario</h2>
<p>io sono il paragrafo</p>

30. @cfabry
Fabrizio Caccavello
Solo azioni significative
In ogni interfaccia presentare
solo le azioni che hanno
significato in quel contesto
30
Ricerca autobus
Nr. autobus
inserisci numero autobus
CERCA

31. @cfabry
Fabrizio Caccavello
Attenzione ai framework
Framework come Bootstrap
sono risorse utili, non
essenziali, ma necessarie ad
creare un ambiente
potenzialmente già efficiente
31

32. @cfabry
Fabrizio Caccavello
Attenzione ai framework
32
I Framework sono
anche
un’importante linea
guida per creare
interfacce

33. @cfabry
Fabrizio Caccavello
Attenzione alle regole aziendali
Il colore di un logo, anche se non
accessibile, non deve influire sulle
interfacce dell’applicazione
Il logo aziendale non è coinvolto
nelle regole del contrasto di colore
33
il mio logo aziendale

34. @cfabry
Fabrizio Caccavello
Attenzione alle regole aziendali
Ma l’applicazione
si
34
La mia azienda
Servizi Prodotti
Lorem ipsum dolor sit
amet, consectetur
adipiscing elit, sed do
eiusmod tempor
incididunt ut labore et
dolore magna aliqua.
La mia azienda
Servizi Prodotti
Lorem ipsum dolor sit
amet, consectetur
adipiscing elit, sed do
eiusmod tempor
incididunt ut labore et
dolore magna aliqua.

35. @cfabry
Fabrizio Caccavello
Approfondimenti
Per approfondire l’argomento accessibilità
(anche per designer) consiglio la lettura delle
WCAG2.1 (https://www.wcag.it) e di
webaccessibile.org
35

36. 36
That’s all folks!
Ci sono domande?
Non dimenticare di segnarti la mia email:
mail@fabriziocaccavello.it
e di citarmi @cfabry :)