Accessibilità: il tuo sito è davvero per tutti? | Purple Network #Blog

News, Purple, TrendAccessibilità, come e perché il tuo prodotto digitale deve diventare per tutti

L'accessibilità web esiste per erogare servizi anche a chi è affetto da disabilità temporanee e non, per rimuovere ogni barriera d'accesso. Ma quali sono le regolamentazioni e i tool necessari per sapere se il tuo sito è davvero usabile?

Accessibilità, come e perché il tuo prodotto digitale deve diventare per tutti

The power of the Web is in its universality

Sir Tim Berners-Lee

 

Spesso, nella progettazione di un sito web, le scelte stilistiche orientate all’estetica prevalgono su quelle che sono le linee guida da seguire per rendere un prodotto digital accessibile veramente a tutti.

Ma – come spiegato al meglio da Tim Bernes-Lee, quello che il web l’ha inventato – il primo obiettivo da porsi dovrebbe essere di rendere un sito usabile, da tutti.

Anche da chi ha un handicap fisico; come combattiamo le barriere architettoniche nel “mondo fisico”, dovremmo farlo anche nell’universo digitale.

Il discorso si complica nel momento in cui incrociamo i dati mettendo insieme tutte le disabilità esistenti e la quantità di tipi di device in circolazione.

In questo post abbiamo cercato di fare maggiore chiarezza sull’argomento.

LEGGI ANCHE: GDPR, il nuovo workflow per lo sviluppo di un sito o un’app

Cosa si intende con accessibilità web?

come rendere accessibile il tuo sito

Con il termine accessibilità web si intende la possibilità, da parte dei sistemi informatici, di fornire i servizi anche a coloro che sono affetti da disabilità temporanee e non, che quindi utilizzano tecnologie ausiliarie. Si riferisce alle pratiche inclusive di rimozione delle barriere che impediscono l’interazione o l’accesso ai siti web da parte di persone con disabilità.

L’obiettivo dell’accessibilità è quindi quello di distruggere ogni tipo di barriera architettonica informatica.

Quali sono le principali tipologie di disabilità?

Principalmente vengono considerate come disabilità tutte le seguenti condizioni psico-fisiche:

  • Vista: lesioni visive che includono la cecità, visione ridotta, cattiva vista, cecità del colore, etc.
  • Movimento: inabilità nell’ uso delle mani, tremori, indolenza muscolare, dovuti a condizioni come morbo di Parkinson, distrofia muscolare, paralisi cerebrale, ictus.
  • Udito: sordità o disturbi dell’udito.
  • Convulsioni: crisi epilettiche causate da strobo visivi o effetti lampeggianti.
  • Intelletto: disabilità nello sviluppo e nell’apprendimento (es. dislessia), disabilità cognitive di origine diversa, che influenzano la memoria, l’attenzione, lo sviluppo della maturità, la risoluzione dei problemi e le abilità logiche, etc.

I numeri

Attualmente in Italia i disabili sono oltre 3 milioni e nel Mondo una persona su cinque ha una forma di disabilità, diventa comprensibile quindi l’aumento dell’attenzione al tema da parte di tutti ma soprattutto degli addetti al settore.

Quali sono le principali tecnologie assistive utilizzate dai disabili?

Per poter fruire dei contenuti web i portatori di disabilità utilizzano tecnologie assistive come:

  • Software di lettura schermo (screen reader)
  • Terminali Braille: display braille che rende i testi come caratteri braille, di solito per mezzo di perni che si alzano attraverso fori su una superficie piana.
  • Software di ingrandimento schermo e di riconoscimento vocale
  • Sporgenze sulla tastiera, che possono far digitare in modo più accurato per chi ha difficoltà motorie.
  • Accesso ai sottotitoli o video con linguaggio dei segni per persone sorde.

La Regolamentazione


In Italia la materia è regolamentata dalla Legge Stanca, pubblicata sulla gazzetta ufficiale della Repubblica nel gennaio 2004. Tale legge definisce l’accessibilità web e le tecnologie assistive, riconoscendo il diritto di ogni cittadino ad accedere e utilizzare tutte le informazioni e i servizi presenti online. L’obbligo dell’applicazione della legge in Italia è ristretta ai soli siti della pubblica amministrazione e ai servizi di pubblica utilità.

A livello internazionale l’accessibilità è regolata dalle Web Content Accessibility Guidelines (WCAG), al momento l’ultima versione aggiornata è la 2.0 e risale al 2008.
L’ente promotore è il W3C (World Wide Web Consortium), ovvero l’organizzazione non governativa internazionale che ha come scopo quello di sviluppare tutte le potenzialità del World Wide Web.

Le WCAG contengono un’ampia gamma di recommendation studiate per rendere i contenuti del Web maggiormente accessibili.
Non sono quindi misure mandatorie ma raccomandazioni, consigli per cercare di rendere il proprio sito web il quanto più possibile accessibile a tutti gli utenti.

LEGGI ANCHE: Chatbot Facebook, non ancora Intelligenza Artificiale ma più di un’assistente virtuale.

Le WCAG 2.0

quali sono le leggi vigenti per l'accessibilità web?

Le raccomandazioni del W3C sono strutturate secondo una gerarchia, a livelli:

  1. Principi: al livello più alto vengono definiti i quattro principi che fanno da pilastri all’accessibilità del Web: percepibile, utilizzabile, comprensibile e robusto.
    1. Percepibile: i contenuti del sito e l’intera interfaccia utente devono essere implementati in modo tale che possano essere visualizzati senza problemi da qualsiasi dispositivo sensoriale.
    2. Utilizzabile: tutti in componenti dell’interfaccia devono essere utilizzabili senza alcun problema dall’utente.
    3. Comprensibile: tutti gli utenti devono poter capire come utilizzare l’interfaccia utente e tutti i servizi messi a disposizione dal sito.
    4. Robusto: il contenuto deve essere ottimizzato affinché possa essere compreso da tutti i software e da tutte le tecnologie assistive.
  2. Linee guida: dai quattro principi discendono le 12 linee guida che forniscono gli obiettivi di base su cui gli autori dovrebbero lavorare per rendere il contenuto più accessibile agli utenti con diverse disabilità. Le linee guida non sono verificabili, ma forniscono agli autori il quadro di riferimento e gli obiettivi generali per comprendere i criteri di successo e applicare al meglio le tecniche.

Nel dettaglio:


Percepibilità

  1. Linea guida 1.1 Alternative testuali: Fornire alternative testuali per qualsiasi contenuto non di testo in modo che questo possa essere trasformato in altre forme fruibili secondo le necessità degli utenti > ES. inserire attributi “alt” e “title” ai tag html come immagini, link, elementi del form di ricerca.
  2. Linea guida 1.2 Tipi di media temporizzati: Fornire alternative per i tipi di media temporizzati. > ES. inserire i sottotitoli a contenuti video
  3. Linea guida 1.3 Adattabile: Creare contenuti che possano essere rappresentati in modalità differenti (ad esempio, con layout più semplici), senza perdere informazioni o la struttura.
  4. Linea guida 1.4 Distinguibile: Rendere più semplice agli utenti la visione e l’ascolto dei contenuti, separando i contenuti in primo piano dallo sfondo. > ES. elevato contrasto (almeno 4.5:1) , controllo del sonoro (tasto pause), ridimensionamento del testo (menù dedicato per ingrandimento/rimpicciolimento).

Utilizzabilità

  1. Linea guida 2.1 Accessibile da tastiera: Rendere disponibili tutte le funzionalità tramite tastiera.
  2. Linea guida 2.2 Adeguata disponibilità di tempo: Fornire agli utenti tempo sufficiente per leggere ed utilizzare i contenuti
  3. Linea guida 2.3 Convulsioni: Non sviluppare contenuti che possano causare attacchi epilettici > ES. Le pagine Web non devono contenere nulla che lampeggi per più di tre volte al secondo.
  4. Linea guida 2.4 Navigabile: Fornire delle funzionalità di supporto all’utente per navigare, trovare contenuti e determinare la propria posizione. > ES. Focus posizione visibile, mostrare gli outline

Comprensibilità

  1. Linea guida 3.1 Leggibile: Rendere il testo leggibile e comprensibile.
  2. Linea guida 3.2 Prevedibile: Creare pagine Web che appaiano e che siano prevedibili. > ES. Navigazione coerente
  3. Linea guida 3.3 Assistenza nell’inserimento: Aiutare gli utenti ad evitare gli errori ed agevolarli nella loro correzione. > ES. Identificazione degli errori, suggerimenti, etc.

Robustezza

  • Linea guida 4.1 Compatibile: garantire la massima compatibilità con i programmi utente attuali e futuri, comprese le tecnologie assistive. > ES. Analisi sintattica (parsing)
  • Criteri di successo – Per ogni linea guida, vengono forniti criteri di successo verificabili che possono essere di tre livelli:
    • Livello A (minimo) > la pagina Web soddisfa tutti i criteri di successo di livello A, oppure è fornita una versione alternativa conforme.
    • Livello AA > la pagina Web soddisfa tutti i criteri di successo di livello A e quelli di livello AA, oppure è fornita una versione alternativa conforme al livello AA.
    • Livello AAA > la pagina Web soddisfa tutti i criteri di successo di livello A, di livello AA e di livello AAA, oppure è fornita una versione alternativa conforme al livello AAA.
  • Tecniche sufficienti e consigliate – Per ciascuna linea guida e criterio di successo presente nel documento WCAG 2.0 stesso, il gruppo di lavoro ha inoltre documentato una serie di tecniche:
  • Sufficienti: sufficienti per soddisfare il criterio di successo
  • Consigliate: vanno oltre ciò che viene richiesto da ciascun singolo criterio di successo e consentono agli autori di rispettare le linee guida ad un livello più elevato.

Nel pratico: come faccio a sapere se il mio sito web è accessibile?

Utilizzando strumenti utili come questo plugin: http://squizlabs.github.io/HTML_CodeSniffer/,  un javascript che si può salvare nella propria barra dei preferiti.


Attivandolo il plugin scansiona il sito web e fornisce un report delle parti da sistemare in html per essere conformi al livello scelto del WCAG 2.0 (A, AA o AAA).

 

Se il risultato non è dei migliori e vuoi adeguare anche il tuo prodotto digital

SCRIVICI

  •  
  •  
  •  

In questo progetto

  • Legge Stanca
  • screen reader
  • W3C
  • WCAG
  • World Wide Web Consortium

Scatti in binario

  • Our Boss is different. He’s pink.
•
•
•
•
•
•
#purplenetwork #purplelife #digitalmarketing #milanoagency #pinkhair #developer #cto #digitalagency #coding
  • Noi ve l’avevamo detto che oggi l’elearning si sarebbe fatto davvero. •
•
•
•
•
•
#formazione #elearnit #digitalmarketing #milanoagency #purplenetwork #purplevents #workshop #formacloud #formafarm #digitalagency #purplelife #purplenetworkoffice
  • “La conoscenza è un asset principale di ogni azienda”.
Oggi in #purplenetwork ospitiamo il workshop su Forma Cloud il nuovo prodotto nato dalla sinergia tra noi e #elearnit. Oggi portiamo l’Open Saas nell’e-learning.
•
•
•
•
•
•
•
•
#digitalmarketing #elearning #formacloud #formafarm #formalms #webagency #milanoagency #formazione #formazioneaziendale
  • Vicinanze del giovedì pomeriggio.
•
•
•
•
•
#digitalagency #purplenetwork #purplelife #creativity #milanoagency #projectmanager #creative #stripes #coding #developer
  • Project Management attitude.
•
•
•
•
•
•
•
•
#purplenetwork #purplelife #digitalmarketing #digitalagency #milanoagency #advertising #creativity #projectmanager #dailymeeting #workflow
  • Cos’avrà da nasconderci @lasgrips?
•
•
•
•
•
•
•
•
#projectmanager #digitalagency #digitalmarketing #creative #creativeagency #advertisingagency #milanoagency #milano #office #purplenetwork #purplelife #purpleflow
  • Abbiamo portato in digitale il #comfortliving di #Yesly, un’esperienza tutta da provare. Grazie @finderitalia!
•
•
•
•
•
•
•
#purplenetwork #purplelife #digital #digitalinnovation #advertisingagency #milanoagency #creative #creativity #interaction #secondscreen #coding #developer #geek #innovation
  • ART at work.
•
•
•
•
•
#purplenetwork #purplelife #artdirector #creative #digitalagency #milanoagency #advertising #digital
  • Great team, good guys. Part 1.
•
•
•
•
•
•
•
#purplenetwork #purplelife #creative #creativity #digitalagency #milanoagency #advertising #coding #developers
  • Ogni giorno è buono per festeggiare 🥳 
Ancora più hype per il compleanno di Sharon!
•
•
•
•
•
•
•
•
#creativeagency #advertising #advertising_agency #purplenetwork #purplelife #purplestyle #milanoagency

Seguici su Instagram!