SlideShare une entreprise Scribd logo
1  sur  24
Télécharger pour lire hors ligne
Web Accessibility
Buone pratiche a costo e tempo zero
WordPress Meetup Lecce - 14/06/2018
“Non è la fatica è lo spreco”
WordPress Meetup Lecce - 14/06/2018
Del nostro tempo rubato - Perturbazione
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
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
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
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
A chi giova l’accessibilità?
● non solo ai disabili
● a tutti, a prescindere dalle abilità
WordPress Meetup Lecce - 14/06/2018
WordPress Meetup Lecce - 14/06/2018
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
Come progettare per tutti?
WordPress Meetup Lecce - 14/06/2018
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
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
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
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
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
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
VIDEO, AUDIO E ACCESSIBILITÀ
● trascrizioni e sottotitoli sono importanti
WordPress Meetup Lecce - 14/06/2018
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
TITOLI, TESTO E ACCESSIBILITÀ
● Usare font leggibili
● Attenzione a font-size e line-height
● Linearizzazione dei contenuti
WordPress Meetup Lecce - 14/06/2018
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
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
Cosa fare
appena tornati a casa?
Togliere dal CSS
:focus { outline: none }
WordPress Meetup Lecce - 14/06/2018
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
GRAZIE!
Web: conlaccento.it
Twitter: @conlaccento
WordPress Meetup Lecce - 14/06/2018

Contenu connexe

Similaire à Web accessibility - Buone pratiche a costo e tempo zero

Accessibilità e Creatività
Accessibilità e CreativitàAccessibilità e Creatività
Accessibilità e Creatività
Diego La Monica
 
Project works corsi di formazione
Project works corsi di formazione Project works corsi di formazione
Project works corsi di formazione
Esis Srl
 

Similaire à Web accessibility - Buone pratiche a costo e tempo zero (20)

14 - Web designer vs Web developer ...
14 - Web designer vs Web developer ... 14 - Web designer vs Web developer ...
14 - Web designer vs Web developer ...
 
Accessibilità e Creatività
Accessibilità e CreativitàAccessibilità e Creatività
Accessibilità e Creatività
 
SMART website
SMART websiteSMART website
SMART website
 
Web designer vs Web developer
Web designer vs Web developerWeb designer vs Web developer
Web designer vs Web developer
 
SMAU Milano 2016
SMAU Milano 2016SMAU Milano 2016
SMAU Milano 2016
 
Portfolio matteo vacca
Portfolio matteo vaccaPortfolio matteo vacca
Portfolio matteo vacca
 
Plone: Accessibilita e Riuso
Plone: Accessibilita e RiusoPlone: Accessibilita e Riuso
Plone: Accessibilita e Riuso
 
Creare UI semplici, intuitive ed efficaci con la Pattern Library di Contactla...
Creare UI semplici, intuitive ed efficaci con la Pattern Library di Contactla...Creare UI semplici, intuitive ed efficaci con la Pattern Library di Contactla...
Creare UI semplici, intuitive ed efficaci con la Pattern Library di Contactla...
 
Microsoft Fast - Overview
Microsoft Fast - OverviewMicrosoft Fast - Overview
Microsoft Fast - Overview
 
Laboratorio Internet: 2.Processo e qualità dei siti web
Laboratorio Internet: 2.Processo e qualità dei siti webLaboratorio Internet: 2.Processo e qualità dei siti web
Laboratorio Internet: 2.Processo e qualità dei siti web
 
Corso di web marketing - 2 Ottimizzazione per motori di ricerca
Corso di web marketing - 2 Ottimizzazione per motori di ricercaCorso di web marketing - 2 Ottimizzazione per motori di ricerca
Corso di web marketing - 2 Ottimizzazione per motori di ricerca
 
Agile Ux: progettare e sviluppare web a iterazioni
Agile Ux: progettare e sviluppare web a iterazioniAgile Ux: progettare e sviluppare web a iterazioni
Agile Ux: progettare e sviluppare web a iterazioni
 
Web 2.0, motori di ricerca e partecipazione
Web 2.0, motori di ricerca e partecipazioneWeb 2.0, motori di ricerca e partecipazione
Web 2.0, motori di ricerca e partecipazione
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Cv davide rota_ita
Cv davide rota_itaCv davide rota_ita
Cv davide rota_ita
 
PRESIDIARE IL MERCATO SU INTERNET - Le fasi realizzative di un progetto web -...
PRESIDIARE IL MERCATO SU INTERNET - Le fasi realizzative di un progetto web -...PRESIDIARE IL MERCATO SU INTERNET - Le fasi realizzative di un progetto web -...
PRESIDIARE IL MERCATO SU INTERNET - Le fasi realizzative di un progetto web -...
 
Come progettare un sito web: 8 passi un sito che vende
Come progettare un sito web: 8 passi un sito che vendeCome progettare un sito web: 8 passi un sito che vende
Come progettare un sito web: 8 passi un sito che vende
 
Wordpress 3/7. temi e plugin
Wordpress 3/7. temi e pluginWordpress 3/7. temi e plugin
Wordpress 3/7. temi e plugin
 
Project works corsi di formazione
Project works corsi di formazione Project works corsi di formazione
Project works corsi di formazione
 
La cassetta degli attrezzi del PO - Cecchinelli
La cassetta degli attrezzi del PO - CecchinelliLa cassetta degli attrezzi del PO - Cecchinelli
La cassetta degli attrezzi del PO - Cecchinelli
 

Web accessibility - Buone pratiche a costo e tempo zero

  • 1. Web Accessibility Buone pratiche a costo e tempo zero WordPress Meetup Lecce - 14/06/2018
  • 2. “Non è la fatica è lo spreco” WordPress Meetup Lecce - 14/06/2018 Del nostro tempo rubato - Perturbazione
  • 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. 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. 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. 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. A chi giova l’accessibilità? ● non solo ai disabili ● a tutti, a prescindere dalle abilità WordPress Meetup Lecce - 14/06/2018
  • 8. WordPress Meetup Lecce - 14/06/2018
  • 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. Come progettare per tutti? WordPress Meetup Lecce - 14/06/2018
  • 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. 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. 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. 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. 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. 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. VIDEO, AUDIO E ACCESSIBILITÀ ● trascrizioni e sottotitoli sono importanti WordPress Meetup Lecce - 14/06/2018
  • 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. TITOLI, TESTO E ACCESSIBILITÀ ● Usare font leggibili ● Attenzione a font-size e line-height ● Linearizzazione dei contenuti WordPress Meetup Lecce - 14/06/2018
  • 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. 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. Cosa fare appena tornati a casa? Togliere dal CSS :focus { outline: none } WordPress Meetup Lecce - 14/06/2018
  • 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