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
14. None

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
16. None

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
20. None

21. Facciamo un gioco FORMS

22. None

23. • Nome campo • Descrizione • Input • Required chiaro

    • Label • Indentazione • Area cliccabile 40x40 • CTA ben visibile • Sviluppato in verticale FORM ACCESSIBILE
24. None

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