Gli sviluppatori "cool" non hanno tempo per l'accessibilità, devono scaricare e studiare l'ultimo framework JavaScript sul mercato, sviluppare applicazioni ibride multipiattaforma, devono postare la loro esperienza su Reddit e infilare una serie lunghissima di tweet a riguardo. E se vi dicessi che con pochi accorgimenti potreste rendere le vostre app accessibili anche utilizzando tecnologie come React ed Electron senza rinunciare al vostro ego?

1. LAVORARE CON
TECNOLOGIE “COOL”
SENZA RINUNCIARE
ALL’ACCESSIBILITÀ
Emanuele Rampichini Software Engineer @spreaker

2. “
C’è vero progresso solo quando
i vantaggi di una nuova
tecnologia diventano per tutti.
Henry Ford

3. Siamo Spreaker
15 dipendenti tra Europa e Stati Uniti
La nostra piattaforma di Podcasting ha l’obiettivo di dare voce a tutti quelli
che hanno qualcosa da dire

4. Quando
parliamo di
tutti di cosa
dobbiamo
tenere
conto?
285 Milioni
Di persone con disabilità visive nel
mondo
39 Milioni
Di non vedenti
4

5. OK, L’ACCESSIBILITA’ E’
IMPORTANTE MA E’ UNA
COSA VECCHIA …
5

6. … NOI VOGLIAMO COSTRUIRE
APPLICAZIONI BELLE, ED
ESSERE COOL
6

7. SI PUO’ FARE!
7

8. 8

9. Spreaker
Studio per
Mac e
Windows
● Console per registrare e
trasmettere podcast
● Scritta con React e basata su
Electron
● Layout e interazione altamente
personalizzati
● Concettualmente è una WebApp
9

10. Partiamo dai “Low hanging
fruits”
10

11. <img /> Utilizzate sempre l’attributo alt nelle
vostre immagini con un testo
descrittivo del contenuto.
<img
src=”developer.png”
alt=”A cool developer programming in
ReactJS”
/>
11

12. <form /> Utilizzate componenti standard per le
vostre form. Utilizzate sempre tag
<label /> per le label e legateli ad i
tag <input /> con l’attributo for:
<label htmlFor=”username”>
</label>
<input
id=”username”
name=”username”
/>
12

13. NON SI VIVE DI SOLI <div>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element 13

14. Spingiamoci oltre con ARIA
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
14

15. aria-hidden Utilizzate l’attributo aria-hidden per il
markup di pura presentazione, gli
screen reader ignoreranno il
contenuto.
Può essere usato anche quando
mostrate finestre modali per
escludere il contenuto sottostante
dalla navigazione.
15

16. aria-label Aria label serve per etichettare con una
stringa l’elemento a cui viene applicato.
Può essere utile per aggiungere
descrizioni ad elementi non standard.
E’ molto comodo utilizzato in accopiata
con le region per descrivere zone della
propria applicazione.
16

17. role=”button”
aria-pressed
Certe volte è proprio impossibile utilizzare
un componente standard per avere una
resa grafica o un comportamente
soddisfacente.
Con role button possiamo istruire gli screen
reader su cosa è effettivamente un bottone,
anche senza utilizzare il tag <button>.
In combinazione con l’attributo aria pressed
possiamo rappresentare bottoni di tipo
toggle.17

18. role=”checkbox”
aria-checked
Componenti che hanno
comportamento di una checkbox
ma non lo sono possono essere
resi accessibili con questa
accoppiata di attributi.
18

19. role=”tablist”
role=”tabpanel”
role=”tab”
aria-selected
Possiamo utilizzare questi attributi
per istruitre gli screen reader su una
struttura a tab.
Utilizziamo il ruolo tablist per definire
la zona di selezione dei tab.
Utilizziamo tab e aria selected per
identificare quali sono gli attivatori e
quale è selezionato.
Utilizziamo tabpanel per identificare
il contenuto del tab.
19

20. role=”region”
aria-label
Con l’accoppiata del ruolo region e
di una label possiamo definire delle
zone navigabili della nostra
applicazione.
Questa accoppiata è molto utile
quando si hanno layout complessi
all’interno dell’applicazione.
Spreaker Studio per Desktop ne fa un
uso estensivo.
20

21. aria-live L’attributo aria live serve per marcare
delle zone che hanno un contenuto
dinamico non legato all’interazione
utente.
Ad ogni cambiamento lo screen
reader andrà a leggere il nuovo
contenuto.
Possono essere associate delle
policy per la rilettura:
off | polite | assertive
21

22. 22
DEMO TIME!

23. Grazie! Emanuele Rampichini
Software Engineer @spreaker
Get It Touch
emanuele.rampichini@gmail.com
@emanuele_r