ACCESSSIBILITÀ - Cos'è e perché dovresti considerarla in fase di progettazione - Luca Pagliaro

Transcript

1. LUCA PAGLIARO | LEAD DEVELOPER @THEWAVESTUDIO Cos'è e perché dovresti considerarla in fase di progettazione? www.thewavestudio.it ACCESSSIBILITÀ
2. Who is he? Sviluppatore catanese, appassionato di tecnologia e natura, professionista nel web dal 2013. Adora partecipare ad eventi, anche come organizzatore o speacker. What Does He Do? Frontend Lead in The Wave Studio LUCA PAGLIARO
3. Potresti pensare di non vivere con una disabilità, quindi l'accessibilità non dovrebbe interessarti. Ma vivi con una disabilità, non lo sai ancora. HAI UNA DISABILITÀ MA ANCORA NON LO SAI
4. SE NON CI CREDI ECCOTI DEI FATTI INTERESSANTI
5. 25% 1 SU 8 In america, è il numero di disabili permanenti Persone che vivranno una disabilità di almeno 5 Anni
6. -0.8% / ANNO Secondo Nielsen, è la percentuale che perdiamo annualmente nella capacità di navigare con efficacia dopo i 25 anni
7. SE CI DIAMO ABBASTANZA TEMPO, L’ACCESSIBILITÀ È IMPORTANTE PER TUTTI.
8. Accessibilità è la pratica per cui ognuno, a prescindere dalla propria condizione, può avere accesso a qualcosa. (es: internet, trasporti, ecc...) COS'È L'ACCESSIBILITÀ?
9. Ci ha pensato il W3C con le sue linee guida COME RENDERE UN SITO ACCESSIBILE?
10. Una grande varietà di raccomandazioni per consentire una maggiore accessibilità ai contenuti web. LINEE GUIDA PER L'ACCESSIBILITÀ DEI CONTENUTI WEB (WCAG)
11. Ognuno di questi diversi principi ha una valutazione di successo. Un rating A è il requisito minimo per avere un sito accessibile, AAA è uno stato di totale accessibilità. Good Better Great VALUTARE L'ACCESSIBILITÀ A AA AAA
12. PERCEPIBILE COMPRENSIBILE UTILIZZABILE ROBUSTO Posso usufruire dei contenuti nel mio sito in differenti modi? (Avendo i sottotitoli per un video, ad esempio) Può ogni utente capire la User Interface del sito e le informazioni che vi sono contenute? Il sito può funzionare in modo lineare senza usare il mouse o senza complicate interazioni? I diversi dispositivi di assistenza (ad esempio gli screen reader) possono comprendere il sito Web?
13. Regole semplici per rendere il mio sito accessibile SCOPRIAMO COME MIGLIORARE IL NOSTRO SITO
15. GERARCHIA DIMENSIONE CONTRASTO Permette di passare da un contenuto all'altro con facilità ed ogni sezione va iniziata con un <heading> 16px dovrebbe essere la dimensione minima leggibile, per i titoli almeno a 24px Quello tra testo e sfondo è un valore chiave, devi avere un contrasto di 4.1:1 per un rating AA, e 7:1 per un AAA TIPOGRAFIA
17. SEMPLICITÀ TESTO PRESENTAZIONE Evita di usare gergo e parole complicate o inusuali. È importantissimo evitare di usare immagini al posto del testo. Testi che non sforano gli 80 caratteri per riga. Ogni testo deve essere zoomabile al 200% CONTENUTO
18. ALT & LABEL SOTTOTITOLI AUDIO Descrivi l'immagine nel contesto senza informazioni inutili o fastidiose. Dai la possibilità di guardare qualsiasi video se sei in riunione o in metropolitana senza disturbare le persone intorno a te. Immagina di poter far "leggere" il tuo blog a chi sta camminando per strada con le cuffie nelle orecchie, o ad un ipovedente :) MEDIA
19. TASTIERA SCREEN READER CONSISTENTE Ogni azione può eseguita usando solo una tastiera? Tutti gli elementi cliccabili hanno un valore semantico (a, button) o hanno un tabindex? Hai impostato correttamente: - aria-label - aria-controls - aria-hidden ... giusto? Fornire elementi consistenti per non far perdere l'utente NAVIGAZIONE
21. Facciamo un gioco FORMS
23. • Nome campo • Descrizione • Input • Required chiaro • Label • Indentazione • Area cliccabile 40x40 • CTA ben visibile • Sviluppato in verticale FORM ACCESSIBILE
25. CONSIDERAZIONI FINALI
26. Si applica esattamente allo stesso modo a oggetti e luoghi fisici. Dato che tutti possono usare una rampa, perché non implementarla prima delle scale?
27. LUCA PAGLIARO | LEAD DEVELOPER @THEWAVESTUDIO lucapagliaro.it | thewavestudio.it GRAZIE! SLIDES www.thewavestudio.it