Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web accessibility - Buone pratiche a costo e tempo zero

97 views

Published on

Una rapida visione di alcune buone pratiche e accortezze per evitare di generare barriere digitali nei progetti per il web

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Web accessibility - Buone pratiche a costo e tempo zero

  1. 1. Web Accessibility Buone pratiche a costo e tempo zero WordPress Meetup Lecce - 14/06/2018
  2. 2. “Non è la fatica è lo spreco” WordPress Meetup Lecce - 14/06/2018 Del nostro tempo rubato - Perturbazione
  3. 3. Antonio Trifirò ● full stack designer UX, UI, front end development ● appassionato di inclusive design e web accessibility ● organizzatore del WordPress Meetup Brindisi e co-organizzatore del WordCamp Bari ● lead tavolo Accessibility al Contributor Day del WordCamp Bari WordPress Meetup Lecce - 14/06/2018
  4. 4. Perché parlare di web a11y? ● perché è eticamente importante e se ne parla poco ● perché è un trend in crescita ● perché basta poco per fare tanto WordPress Meetup Lecce - 14/06/2018
  5. 5. Da dove vengono queste buone pratiche? ● Web Content Accessibility Guidelines ● le WCAG sono il frutto del lavoro della Web Accessibility Initiative ● la WAI nasce in seno al W3C WordPress Meetup Lecce - 14/06/2018
  6. 6. Cos’è la web accessibility? Una serie di strategie, standard e risorse che aiuta a rendere fruibile il web a prescindere dalle abilità degli utenti. WordPress Meetup Lecce - 14/06/2018
  7. 7. A chi giova l’accessibilità? ● non solo ai disabili ● a tutti, a prescindere dalle abilità WordPress Meetup Lecce - 14/06/2018
  8. 8. WordPress Meetup Lecce - 14/06/2018
  9. 9. Alcuni dati relativi alla web accessibility? ● 20>40% è vulnerabile a barriere digitali ● 56% utenti beneficia da buone pratiche relativa alla web a11y ● nel 2020 oltre 20% degli europei sarà over 65 WordPress Meetup Lecce - 14/06/2018
  10. 10. Come progettare per tutti? WordPress Meetup Lecce - 14/06/2018
  11. 11. Progressive enhancements Una strategia che mette al centro il contenuto di una pagina web. Si progetta per livelli: 1. prima il markup (HTML) 2. poi lo stile (CSS) 3. poi le interazioni (Javascript) Se si disattiva CSS e JS, il contenuto resta fruibile. WordPress Meetup Lecce - 14/06/2018
  12. 12. Inclusive design Anticipa i problemi di esperienza di navigazione dovuti alle diverse abilità degli utenti. Per evitare frustrazioni l’inclusive designer usa degli standard che permettono di ottenere di più facendo meno. Obiettivo: rendere i contenuti fruibili dalle macchine. WordPress Meetup Lecce - 14/06/2018
  13. 13. L’importanza dello standard HTML5 La semantica nel markup: <header>, <nav>, <main>, <aside>, <form>, <table>, <article>, <section>, <footer>... https://www.w3schools.com/html/html5_semantic_elements.asp WordPress Meetup Lecce - 14/06/2018
  14. 14. LINK E ACCESSIBILITÀ ● non nascondere il :focus ● usa la sottolineatura nel contenuto per indicare un link ● usa testo significativo (ad es. Leggi di più… non va bene) ● <a> vs <button> WordPress Meetup Lecce - 14/06/2018
  15. 15. COLORI E ACCESSIBILITÀ ● attento al contrasto tra testo e sfondo (https://webaim.org/resources/contrastchecker/) ● non veicolare un messaggio solo attraverso il colore WordPress Meetup Lecce - 14/06/2018
  16. 16. IMMAGINI E ACCESSIBILITÀ ● l’alt text è importante: cos’è, quando usarlo, cosa scrivere (https://www.w3.org/WAI/tutorials/images/decision-tree/) ● se necessario usare una didascalia (<figure> e <figcaption>) (https://www.w3schools.com/tags/tag_figcaption.asp) WordPress Meetup Lecce - 14/06/2018
  17. 17. VIDEO, AUDIO E ACCESSIBILITÀ ● trascrizioni e sottotitoli sono importanti WordPress Meetup Lecce - 14/06/2018
  18. 18. TITOLI, TESTO E ACCESSIBILITÀ ● Usa un solo <h1> per pagina ● Usa gli heading gerarchicamente ● Non usare i tag dedicati agli heading per enfatizzare testo WordPress Meetup Lecce - 14/06/2018
  19. 19. TITOLI, TESTO E ACCESSIBILITÀ ● Usare font leggibili ● Attenzione a font-size e line-height ● Linearizzazione dei contenuti WordPress Meetup Lecce - 14/06/2018
  20. 20. VISIBILITÀ DEGLI ELEMENTI E ACCESSIBILITÀ ovvero il vedo non vedo nell’a11y ● la classe screen-reader-text (https://make.wordpress.org/accessibility/2015/02/09/hiding-text-for-screen-readers-with-wordpress-core/) ● l’attributo aria-hidden=true (https://www.w3.org/WAI/standards-guidelines/aria/) WordPress Meetup Lecce - 14/06/2018
  21. 21. ALTRE BUONE PRATICHE SULLA WEB A11Y https://make.wordpress.org/accessibility/handbook/best-practices/quick-start-guide/ ● Skip links ● Form ● Liste, citazioni, abbreviazioni ● Attributo lang ● Tabelle WordPress Meetup Lecce - 14/06/2018
  22. 22. Cosa fare appena tornati a casa? Togliere dal CSS :focus { outline: none } WordPress Meetup Lecce - 14/06/2018
  23. 23. Risorse utili ● https://www.w3.org/WAI/ ● https://make.wordpress.org/accessibility/handbook/ ● https://webaim.org/ ● https://wave.webaim.org/ ● https://www.smashingmagazine.com/inclusive-design-patterns/ WordPress Meetup Lecce - 14/06/2018
  24. 24. GRAZIE! Web: conlaccento.it Twitter: @conlaccento WordPress Meetup Lecce - 14/06/2018

×