Save 37% off PRO during our Black Friday Sale! »

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

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

C18117a59c85c586bba4b6d9cebbde2f?s=128

WordCamp Catania

September 21, 2019
Tweet

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