Come creare un sito web accessibile: tutto quello che devi sapere

Cos’è l’accessibilità di un sito web?

Con il termine accessibilità di un sito web si fa riferimento alla possibilità per chiunque di navigare con facilità e libertà all’interno di un portale o un’applicazione, in particolare per quegli utenti che soffrono di disabilità e problemi psico-motori, con l’obiettivo di abbattere quelle barriere che ostacolano il loro coinvolgimento.

La consapevolezza dell’importanza dell’accessibilità è amplificata dalla considerevole percentuale di persone affette da disabilità in Italia, pari al 5,2% della popolazione. Pertanto è giusto avere un occhio di riguardo anche nei loro confronti.                                                             

A parlare di accessibilità dei siti web si è iniziato già negli anni Settanta in America, con la Rehabilitation Act, la quale vieta la discriminazione dei disabili da parte degli enti governativi.

La buona accessibilità di un sito web è caratterizzata da una serie di aspetti da non tralasciare come:

  1. Testo alternativo: Gli utenti affetti da cecità per navigare sul web utilizzano lo Screen Reader, ovvero uno strumento di audio lettura che gli permette di recepire le informazioni dei contenuti del sito web in cui si trovano. In presenza di immagini, gli utenti con questa disabilità, grazie al testo alternativo, possono recepire ciò che è rappresentato nell’immagine attraverso una descrizione accurata.
  1. Logica di organizzazione dei contenuti: è importante stipulare una gerarchia tra i titoli, i sottotitoli e i testi, in modo tale da facilitare i dispositivi di lettura vocale.
  1. Captcha: è un sistema di protezione antispam che garantisce una navigazione sicura sul sito web, verificando l’identità umana dell’utente e prevenendo l’accesso ai robot. In queste situazioni, si privilegia l’uso di test Captcha con una sola casella da spuntare, che è più facilmente interpretabile dai dispositivi di lettura audio.
  2. Buon contrasto cromatico: Nel rispetto della usability di un utente con difficoltà visive, come il daltonismo, è consigliata la scelta di colori che abbiano un buon contrasto l’uno con l’altro e che siano ben leggibili.
  3. Fornire una guida dell’accessibilità: è consigliato l’inserimento di una sezione dedicata agli utenti con disabilità, dando così un piccolo aiuto, tale da rendere il sito web maggiormente usufruibile da tutti.

Cos'è l'accessibilità di un sito web

Tipi di disabilità

Per poter costruire un sito web accessibile a tutti, anche alle persone portatrici di handicap, bisogna principalmente distinguere e classificare i vari tipi di disabilità.

Sono state definite quattro categorie di disabilità:

  1. Disabilità visiva
  2. Disabilità uditiva
  3. Disabilità fisica
  4. Disabilità cognitiva

1) La Disabilità visiva comprende tutte quelle persone che soffrono di disturbi visivi, come i cechi e gli ipovedenti, che utilizzano degli strumenti come lo Screen Reader, software di audio lettura e il Braille Display.                                                                                                                                                   

Quest’ultimo è un dispositivo composto da una tastiera formata da una superficie piana, suddivisa in celle al cui interno si formano elettronicamente dei punti in rilievo, corrispondenti alle lettere delle parole che sono presenti sul monitor del pc (ad esempio il testo di un sito web).

Ogni volta che si finisce di leggere una riga, attraverso lo scorrimento delle dita sulla tastiera, si passa a quella successiva e così via, dando così alla persona non vedente la possibilità di visualizzare ciò che è scritto sul display, attraverso il tatto. Questo dispositivo può funzionare solamente in presenza di uno Screen Reader.

2) La Disabilità uditiva rappresenta una delle forme più comuni di deficit sensoriale, coinvolgendo un vasto gruppo di individui, compresi coloro che nascono con questa condizione e coloro che possono sperimentare una perdita parziale o totale dell’udito nel corso del tempo.

Quando una persona non udente si trova a navigare in un sito web è importante che abbia la possibilità di interagire con tutti i tipi di contenuti, compresi quelli audio o video. E’ quindi buona prassi che questi contenuti siano dotati di un’audio-descrizione che traduca in forma testuale ciò di cui parla il contenuto, trascrivendolo in modo preciso e dettagliato e seguendo l’ordine di registrazione per ogni parola e suono.

3) La Disabilità fisica compromette in modo parziale o totale il movimento di una persona. Può essere congenita o può presentarsi nel tempo a causa di un trauma o per problemi di salute.

Gli individui che presentano questa disabilità sono più facilitati nel navigare un sito web se possono muoversi tramite dei comandi a tastiera, limitando più movimenti possibile.

4) La Disabilità cognitiva comprende tutti quegli individui che soffrono di disturbi neurologici e che possono riscontrare difficoltà nella comprensione e nell’apprendimento.

La disabilità cognitiva abbraccia una vasta gamma di individui affetti da diverse condizioni, tra cui dislessia, autismo, ADHD (Sindrome da disturbo dell’attenzione e iperattività) e molti altri disturbi.

Quando ci si trova a programmare un sito web, bisogna quindi tener conto di diversi aspetti che possono facilitare l’apprendimento, come:

  • Elementi grafici che accompagnino il testo. I dislessici riscontrano più difficoltà a leggere una pagina composta interamente da testo.
  • Sintesi vocale: rende più semplice e veloce la comprensione del testo, attraverso uno strumento di audio lettura, permettendo di ascoltare le informazioni, senza doverle leggere.
  • Funzionalità e collegamenti: pulsanti o link di ipertesto che possano facilitare la navigazione all’interno di un sito web, permettendo di spostarsi in modo più veloce da una pagina o da una sezione all’altra e creare una miglior interazione.
  • Nascondere i contenuti che distraggono: tutti quegli elementi che potrebbero far perdere l’attenzione sui contenuti di maggior rilevanza.
  • Facilitare la usability e il linguaggio: rendere il più comprensibile e immediata l’esperienza dell’utente con disabilità cognitiva all’interno del sito web.

tipi di disabilità

Le caratteristiche di un sito accessibile

Al giorno d’oggi siamo abituati ad interagire con la tecnologia quotidianamente, una grande risorsa di cui l’essere umano dispone.

Almeno una volta al giorno accediamo ad un sito web, ma davvero sembra una cosa alla portata di tutti?                                                                        

Sempre più utenti soffrono di disabilità ed è giusto pensare ad un sito web che possa soddisfare anche le loro esigenze.                                                                                            

A livello legislativo ed economico, le imprese che gestiscono siti web devono attenersi a diverse regolamentazioni, tra cui la direttiva europea 2019/882 della European Accessibility Act (EAA). Questa direttiva ha stabilito che entro giugno 2025, tutti i siti web devono essere accessibili alle persone con disabilità. Di conseguenza, le aziende sono tenute a seguire le linee guida del Web Content Accessibility Guidelines (WCAG) 2.1.

Tra le direttive di conformità evidenziamo i seguenti passaggi:

  • I contenuti devono essere adattati ad ogni tipo di disabilità, audio descrizione per i non udenti, testo alternativo per descrivere il contenuto di un’immagine.
  • Evitare l’uso di effetti troppo fastidiosi ed invadenti per la vista e che potrebbero scatenare crisi epilettiche nei soggetti che soffrono di epilessia, quindi dare la possibilità di disattivare ogni genere di effetto visivo che potrebbe generare problematiche.
  • Tutti gli elementi devono avere una struttura ordinata ed essere organizzati in modo gerarchico, come in titolo e sottotitolo. Evitare inoltre troppe variazioni di contenuto per non distrarre i soggetti che soffrono di patologie come l’autismo e ADHD o creare confusione a livello grafico per i dislessici.
  • Evitare di inserire distinzioni per colori, inserendo sempre una parte testuale o un titolo, così da poter aiutare le persone che soffrono di daltonismo o deficit legati alla visione del colore. Può trattarsi, ad esempio, della differenza tra i diversi colori usati per i dati di un grafico, che potrebbero essere percepiti come sfocati.
  • Non sottovalutare mai il contrasto tra colore del testo e colore di fondo, in quanto le persone con disabilità cognitive, come la dislessia, quando si trovano a leggere un testo con poco contrasto e scarsa leggibilità, riscontrano difficoltà di comprensione.

Le linee guida per l’accessibilità

È di fondamentale importanza sviluppare un sito web che sia accessibile ed inclusivo per garantire che anche le persone con disabilità possano beneficiare pienamente delle risorse messe a disposizione del pubblico. Le linee guida per l’accessibilità rappresentano un insieme di norme e principi progettati per rendere il mondo digitale più inclusivo. Con la redazione delle WCAG (Linee guida per l’accessibilità dei contenuti web), l’obiettivo del W3C è quello di mettere a disposizione dei gestori di siti uno standard internazionale per l’accessibilità dei contenuti web che vada incontro sia alle esigenze delle singole persone sia a quelle delle organizzazioni e delle istituzioni governative.

La struttura delle WCAG 1.0 è suddivisa in 14 linee guida e contiene da 1 a 10 punti di verifica delle priorità 1, 2 e 3. Ad ogni punto di verifica è assegnato un esempio che si riferisce agli standard web di base HTML e XML.

Le WCAG 2.x si differenziano invece per il loro approccio indipendente dalla tecnologia. Le linee guida sono formulate in modo tale da tenere in considerazione sia lo stato attuale della tecnologia sia i suoi possibili sviluppi futuri. Per ogni linea guida le WCAG 2.x mettono a disposizione dei gestori di siti web una frase con i criteri di successo e conformi ai 3 livelli A, AA e AAA (livello di accessibilità basso, medio ed elevato).

Qui di seguito esploreremo i principi chiave delle linee guida per l’accessibilità e l’importanza di adottarli per creare un mondo digitale più equo e accessibile per tutti.

WCAG 1.0: le 14 linee guida in breve

Per creare un sito web accessibile è bene analizzare e conoscere le 14 linee guida fornite da WAI – Web Content Accessibility Guidelines 1.0:

  1. Fornire alternative equivalenti per il contenuto visivo e audio: impostare del testo alternativo per la descrizione dei contenuti, che possa essere letto da un software di Screen Reader.
  2. Non fare affidamento al solo colore: considerare anche le persone con daltonismo, che presentano difficoltà nel visualizzare i colori.
  3. Utilizzare marcatori e fogli di stile in modo appropriato: strutturare il sito seguendo un ordine preciso dei contenuti come capitoli, titoli e sottotitoli. Rispettare anche il posizionamento dei contenuti, per esempio collocando la sezione “Contatti” nel solito posto, in modo da essere trovata facilmente dallo Screen Reader.
  4. Chiarire l’uso dei linguaggi naturali: l’importanza di definire la lingua, in modo tale che lo Screen Reader quando compie la lettura possa pronunciare correttamente la parola che legge e farla comprendere a chi ascolta.
  5. Creare tabelle che si trasformino in maniera elegante:  un approccio di progettazione che garantisce che le tabelle presenti in un sito web siano costruite in modo che possano essere visualizzate e lette in modo coerente ed efficace da coloro che utilizzano tecnologie assistive, come screen reader o dispositivi di lettura braille.
  6. Assicurarsi che le pagine che danno spazio a nuove tecnologie si trasformino in maniera elegante: garantire che le pagine web che utilizzano nuove tecnologie o funzionalità, siano progettate in modo che l’esperienza per gli utenti con disabilità sia fluida e senza problemi.
  7. Assicurarsi che l’utente possa tenere sotto controllo i cambiamenti di contenuto nel corso del tempo: significa fornire opzioni o meccanismi per interrompere o controllare questi cambiamenti, come l’abilitazione o la disabilitazione di aggiornamenti automatici, l’uso di notifiche o altre soluzioni che consentano agli utenti di gestire il flusso di informazioni in modo più accessibile e comprensibile.
  8. Assicurare l’accessibilità diretta delle interfacce utente incorporate: questo concetto implica che le interfacce utente incorporate dovrebbero essere progettate in modo tale da permettere agli utenti di accedervi direttamente e di interagire con esse senza incontrare ostacoli o barriere. Ad esempio, se ci sono elementi interattivi, come moduli, pulsanti o widget all’interno di una pagina web o di un’applicazione, è essenziale che siano progettati in modo che gli utenti possano utilizzarli facilmente tramite la tastiera, lo screen reader o altri dispositivi di assistenza.
  9. Progettare per garantire indipendenza al dispositivo: un approccio di progettazione che favorisce l’indipendenza dal dispositivo assicura che il sito web sia accessibile e funzionale su computer desktop, laptop, tablet, smartphone e altri dispositivi, indipendentemente dal sistema operativo o dal browser utilizzato. Inoltre, è importante che il sito web sia accessibile anche per utenti che utilizzano tecnologie assistive, come screen reader o programmi di ingrandimento del testo, indipendentemente dal dispositivo che stanno utilizzando.
  10. Usare soluzioni provvisorie: le soluzioni provvisorie possono aiutare a fornire un accesso migliore a un sito web o a una piattaforma digitale mentre si pianificano e implementano modifiche più approfondite. L’obiettivo dovrebbe essere quello di utilizzare tali soluzioni come passo intermedio per risolvere i problemi di accessibilità in modo permanente.
  11. Usare le tecnologie e le raccomandazioni W3C: usare le tecnologie W3C (in conformità con le specifiche) e seguire le linee guida per l’accessibilità. Nei casi in cui non sia possibile usare una tecnologia W3C, oppure nell’utilizzarla si ottenesse materiale che non si trasforma in maniera elegante, fornire una versione alternativa e accessibile del contenuto.
  12. Fornire informazioni di contesto e orientamento: offrire agli utenti, compresi quelli con disabilità, tutte le informazioni, il contesto e le indicazioni necessarie per comprendere e navigare efficacemente attraverso una piattaforma digitale, come un sito web o un’applicazione. Fornendo informazione di contesto e orientamento adeguati, si garantisce un’esperienza di utilizzo più agevole e inclusiva per tutti gli utenti.
  13. Fornire chiari meccanismi di navigazione: fornire meccanismi di navigazione chiari e consistenti – informazioni di orientamento, barre di navigazione, una mappa del sito, etc. – per aumentare la probabilità che una persona possa trovare sul sito ciò che sta cercando.
  14. Assicurarsi che i documenti siano chiari e semplici: garantire che i documenti siano chiari e semplici, affinché possano essere più facilmente comprensibili.

 

WCAG 2.2: Le Nuove Linee Guida per l’Accessibilità Digitale

Per permettere di costruire un sito web ad hoc il Web Content Accessibility Guidelines (WCAG 2.2) può esserci d’aiuto con le nuove linee guida (maggio 2023) che corrispondono ai livelli standard per l’accessibilità dei siti web (A, AA, AAA) rilevano quanto sia facile l’accessibilità dei contenuti di un sito web:

  • Aiuto coerente livello A: si applica solo se si inserisce la modalità “aiuto” per fornire assistenza al cliente. Tutti gli elementi della guida devono trovarsi nella stessa posizione su tutte le pagine del sito per facilitare gli utenti a trovare ad esempio la sezione dei contatti, numero di telefono, mail, indirizzo di un’azienda.
  • Voce ridondante livello A: per migliorare l’usabilità dei moduli online, ad esempio durante il processo di ordinazione su Internet, è consigliabile evitare la ridondanza dei campi da compilare, soprattutto quando si richiedono informazioni identiche o simili. Questo approccio semplifica l’esperienza dell’utente, poiché evidenzia che le stesse informazioni sono richieste solo una volta, fatta eccezione per i moduli legati alla sicurezza e alla privacy, in cui è essenziale specificare tali dettagli.Ad esempio, una pagina di pagamento contenente un indirizzo di spedizione e un indirizzo di fatturazione necessiterebbe di un’opzione che dica qualcosa come “Uguali alle informazioni di spedizione”, copiando in automatico le informazioni di spedizione nell’indirizzo di fatturazione in modo che l’utente non digiti nuovamente le stesse informazioni.
  • Movimenti di trascinamento livello AA: progettare l’interazione di trascinamento in modo accessibile, trovando modi alternativi diversi dal mouse per spostare gli elementi. Si riferisce alle azioni degli utenti che coinvolgono il trascinamento di elementi o oggetti sulla pagina web, come ad esempio trascinare un oggetto con il mouse per spostarlo in un’altra posizione o trascinare un cursore su uno slider per regolare un valore.
  • Dimensione target livello AA: l’obiettivo è rendere accessibili e facili da utilizzare i pulsanti o i collegamenti su una pagina web, in particolare quando si tratta di elementi interattivi come selettori di data, menu a discesa, documenti legali e punti di interesse su una mappa. Per farlo, è importante garantire che i pulsanti o i collegamenti abbiano una dimensione sufficiente per essere selezionati facilmente dagli utenti, indipendentemente dalla loro abilità o dai dispositivi di input utilizzati. L’indicazione di “24 x 24 px” si riferisce a una dimensione minima consigliata per l’area selezionabile dei pulsanti o dei collegamenti.Questo significa che l’area in cui l’utente può fare clic o toccare per attivare l’azione associata al pulsante dovrebbe avere almeno queste dimensioni. Puoi immaginare un cerchio con un diametro di 24 pixel che circonda l’elemento interattivo, come un pulsante e assicurarti che il cerchio non si sovrapponga ad altri pulsanti o collegamenti nelle vicinanze, in modo che l’utente possa fare clic o toccare l’elemento desiderato senza confusione o errori.
  • Messa a fuoco non oscurata livello AA e AAA: per soddisfare il livello AAA bisogna fare in modo che un elemento come un pulsante o un collegamento non rischi di essere coperto da intestazioni, notifiche temporanee e/o banner. Mentre per soddisfare il livello AA un componente focalizzato come un pulsante o un collegamento non dev’essere nascosto.
    In sintesi, la “Messa a fuoco non oscurata” è un aspetto chiave dell’accessibilità che garantisce che gli utenti possano vedere e comprendere chiaramente quale elemento sta ricevendo il focus, consentendo loro di interagire in modo efficace con il contenuto del sito web. Il livello di conformità, AA o AAA, determina il grado di enfasi visiva che deve essere applicato all’elemento che riceve il focus.
  • Aspetto del focus livello AAA: un elemento focalizzato deve avere un perimetro di spessore di almeno 2 px e un rapporto di contrasto cromatico di almeno 3:1 tra colore del testo e quello di sfondo.
  • Autenticazione accessibile livello AA e AAA: implica che il processo di autenticazione su un sito web o in un’applicazione deve essere progettato in modo da essere accessibile alle persone con disabilità. A livello AA, il percorso di autenticazione deve evitare compiti che potrebbero risultare difficili o impossibili per alcune persone, come memorizzare password complesse, trascrivere codici o parole o risolvere enigmi complessi. I CAPTCHA possono essere utilizzati, ma devono essere progettati in modo che siano comprensibili e accessibili per tutti. A livello AAA, i CAPTCHA non sono consentiti affatto. Questo livello è ancora più rigoroso e richiede che il processo di autenticazione non utilizzi alcun test della funzione cognitiva. Questo assicura un’accessibilità estrema per le persone con disabilità cognitive.

Se vuoi saperne di più su linee guide obblighi e sanzioni leggi il nostro articolo: Accessibilità siti web: cos’è, come applicarla e linee guida

Come funzionano gli Screen Reader e i Display Braille

Per facilitare l’accessibilità ai siti web le persone cieche o ipovedenti utilizzano due strumenti per la comprensione dei contenuti, lo Screen Reader e il Display Braille.

Lo Screen Reader è un software di lettura, che permette di leggere ad alta voce i contenuti del sito web, aiutando le persone con disabilità a comprendere meglio ciò che hanno davanti e a muoversi liberamente all’interno dell’interfaccia. Per far sì che questo software possa riconoscere anche le immagini presenti sul sito, è bene che lo sviluppatore SEO inserisca il testo alternativo, che permetterà allo Screen Reader di riconoscere il contenuto figurativo e descrivere ciò che è rappresentato.

Il Display Braille è una tastiera collegata al pc attraverso un cavo usb che fungerà da hardware. Ha una superficie piana composta da celle che, a seconda di dov’è posizionato il cursore del mouse, riesce a leggere la riga di testo nel sito web, tramite dei puntini a rilievo che formano le lettere della parola selezionata. Essendo un dispositivo di output, quindi solamente un display, funzionerà solamente se accompagnato da Screen Reader.

Come funzionano gli Screen Reader e i Display Braille

Come funzionano gli Screen Reader e i Display Braille

Come rendere il tuo sito web accessibile

Rendere il tuo sito web accessibile significa progettare e sviluppare il sito in modo che tutte le persone, indipendentemente dalle loro abilità o disabilità, possano accedere e utilizzare il contenuto e le funzionalità in modo efficace. Ecco alcune linee guida di base per rendere il tuo sito web accessibile:              

    1. Il contrasto tra il colore del testo e lo sfondo è fondamentale per garantire una facile leggibilità agli utenti, evitando situazioni in cui i colori creino difficoltà visive. Ad esempio, accostare colori come il rosso e il blu può essere problematico per i daltonici, poiché questi colori possono essere difficili da distinguere l’uno dall’altro. Durante la programmazione di un sito web può tornarci utile Colorblind Web Page Filter un tool che ci aiuterà a vedere come percepisce i colori una persona daltonica.
    2. Per i testi usa font chiari e facilmente leggibili e Scegli font diversi per titoli, sottotitoli e paragrafo. In tal modo la gerarchia delle informazioni sarà già ben visibile a colpo d’occhio.
    3. La possibilità di ingrandire il testo e portarlo a 200% di grandezza facendo in modo però che non si alteri mai ed esca fuori dalla sua posizione di impaginazione.
    4. La grafica di un sito web non deve interferire con il resto dei gli elementi testuali, permettendo allo Screen Reader di leggere solo i contenuti che sono scritti e che sono di maggior rilevanza.
    5. Assegnare una denominazione specifica alle immagini di un sito web: è di fondamentale importanza assegnare un nome che serva da descrizione, quando non è possibile assegnare in modo manuale il tag “alt”.
    6. Aggiungere il testo alternativo per grafiche, immagini e video, così da permettere allo Screen Reader di leggere e descrivere l’immagine ad una persona con disabilità visiva. Il tag “alt” dovrà presentare una descrizione riassuntiva di ciò che è raffigurato.
    7.  Evitare la sola presenza di immagini e icone, affiancando sempre del testo. Per lunghe descrizioni utilizzare il tag “longdesc”, che consente una descrizione più dettagliata rispetto al tag “alt”.
    8. Quando si compilano moduli e form, in presenza di errori, evitare le segnalazioni di colore rosso o verde, non facili da distinguere per le persone affette da daltonismo.
    9. In presenza di pulsanti o link testuali inserire una spiegazione del loro utilizzo o di cosa permettono di fare. Bisogna editare un mini copy che permetta ai non vedenti di sapere la funzione del pulsante che cliccheranno.
    10. Quando una persona ipovedente scarica un file sul proprio computer, è importante che il file sia in un formato testuale, come Word o Excel, che può essere letto tramite software di audio lettura, come lo Screen Reader. Tuttavia, con documenti in formato PDF, è necessario fare attenzione, poiché spesso possono essere interpretati come immagini e quindi risultare illeggibili per gli strumenti audio descrittivi.
    11. Sottoporre il sito web ad un test fatto da validatori, che consentono di testare il grado di accessibilità del sito in questione, approvati da WCAG e in caso di errori fornisce una lista su come poterli risolvere.
    12. Quando si utilizzano slideshow e carousel con animazioni per visualizzare le immagini in sequenza, è importante garantire che quando JavaScript è disattivato, l’utente abbia la possibilità di mettere in pausa e scorrere manualmente le immagini affiancate da testo, attivando il click. Se hai previsto delle animazioni, rendi il contenuto funzionante anche se Javascript è disattivato.
    13. Se hai necessità di utilizzare il Captcha per consolidare la protezione del sito web dallo spam, fa’ in modo che non sia di tipo visuale perché non è leggibile e interpretabile dagli screen reader.
    14. Scegli CMS, come WordPress e Joomla, e app che hanno dei sistemi che sostengono lo sviluppo di siti web sostenibili. WordPress, ad esempio, ha sviluppato anche diversi plugin che sostengono l’accessibilità, come WP Accessibility e One Click Accessibility.

come rendere un sito web accessibile 

Esiste qualche aiuto per creare siti accessibili con i CMS?

Per creare un sito web accessibile a tutti ci vengono in aiuto due CMS, ovvero dei software che aiutano a gestire i contenuti di un sito e che permettono l’accessibilità.

  1. Joomla: uno dei migliori open source per la creazione di siti web. Offre una piattaforma multilingue, template responsive e accessibili. Con questo sistema di gestione dati vi è la possibilità di creare piattaforme e-commerce, giornali web, siti personali e aziendali. Inoltre, dando la possibilità di creare siti accessibili, si potrà anche avere un incremento di utenti e possibilità di business.
    Per gli utenti di Joomla la soluzione completamente accessibile si chiama Joomla FAP (For All People). L’ultima versione rilasciata di Joomla FAP oltre a soddisfare pienamente i requisiti della WCAG livello AA, ha introdotto la funzionalità responsive per il template predefinito.
  2. WordPress: un CMS open source che permette di creare siti web accessibili rispettando le WCAG, cioè le linee guida per l’accessibilità dei siti web. WordPress mette a disposizione diversi plugin, come WP Accessibility oppure OneClick Accessibility, che permettono di risolvere diverse problematiche e da la possibilità di inserire la descrizione per le immagini, aumentare le dimensioni con una barra degli strumenti aggiuntiva, oltre che fornire un tool di Screen Reader che permette di spostarsi da una pagina all’altra e leggere tutti i contenuti presenti sul sito web. Inoltre nella fase di costruzione il programmatore disporrà di molti template per personalizzare il proprio sito web e costruire un sito accessibile a tutti.

Validatori di accessibilità

I validatori di accessibilità sono degli strumenti, scaricabili anche gratuitamente che permettono in modo automatico di analizzare tutte le pagine del sito web e verificare il livello di accessibilità; basterà inserire il dominio del sito web e questo strumento dopo l’analisi di ogni singola componente, darà il risultato. Se non dovesse rispettare tutte le linee guida per rientrare nei siti accessibili, si potrà ottenere una spiegazione sul dove intervenire per renderlo conforme e inclusivo per ogni individuo.

Uno strumento online gratuito che analizza il sito web e fornisce una valutazione dettagliata dell’accessibilità, evidenziando gli errori e i problemi e suggerendo le correzioni necessarie è: https://wave.webaim.org/

Validatore di Accessibilità

Overlays e validatori automatici sono utili per rendere accessibili i siti web?

Gli Overlays o validatori sono dei sistemi di tecnologia basata sull’intelligenza artificiale e sono estremamente utili quando si fanno dei test per verificare se un sito web è accessibile anche dai soggetti con disabilità. Ma davvero ci si può affidare alla sola intelligenza artificiale per un argomento così delicato come l’accessibilità?                                                 

Non è proprio così, infatti, EDFEuropean Disability Forum e IAAP – International Association of Accessibility Professionals hanno pubblicato una dichiarazione dove affermano che gli overlays non sono così affidabili, in quanto non riescono ad analizzare in profondità tutte le problematiche che potrebbe presentare un sito web non accessibile; si rende quindi indispensabile affiancare l’intervento umano.

Gli overlays, come anche i validatori di accessibilità, possono inoltre interferire con le tecnologie assistive degli utenti, come gli Screen Reader per i ciechi o gli ipovedenti. Spesso infatti le correzioni dei validatori di accessibilità, vanno a replicare le stesse, come gli ingranditori di testo. Un altro aspetto da non sottovalutare è che questi sistemi di correzione per l’accessibilità rilevano quando un individuo naviga all’interno di un sito web con una tecnologia assistiva, violando così la privacy di quest’ultimo.

In conclusione, gli overlays e i validatori automatici, quando svolgono la verifica dell’accessibilità rilevano solo il 57 % degli errori su un sito web andando a sovrapporsi al codice di programmazione, lasciando scoperto il restante 43%, perciò possono tornare utili solo se affiancati dall’intervento di una figura umana, ovvero un professionista di accessibilità.

Spesso uno dei modi migliori per determinare l’accessibilità delle tue pagine, è quello di ottenere un riscontro da utenti disabili. La maggioranza di essi sarà, generalmente, molto motivata nel contribuire a migliorare l’accessibilità dei tuoi contenuti verso il mondo dei disabili. Spesso, alcune funzionalità del tuo sito che pensavi potessero incrementare l’accessibilità finiscono con l’essere molto confusionarie o addirittura inaccessibili.

I siti più accessibili al mondo

Circa 2,2 miliardi della popolazione al mondo soffrono di disabilità visive, come i ciechi o gli ipovedenti; una ricerca svolta da Lenstore, un e-commerce che produce lenti a contatto ha rilevato i siti web più accessibili al mondo, vediamo quali:

La ricerca si basa su una scala da 1 a 10 e su questi parametri:

  1. livello di contrasto
  2. testo di ancoraggio dei link
  3. intestazioni vuote
  4. testo alternativo
  5. altri problemi di testo
  • Paypal si classifica come il sito più accessibile a livello mondiale con un punteggio di 9,9/10 punti.
  • Google.it è il sito web più accessibile in Italia 9,95/10 punti.
  • Messanger la piattaforma di messagistica di Meta si classifica con 9,98/10 punti.
  • Daily Mail.co.uk è una piattaforma che ha un punteggio molto basso 5,39/10 punti, con circa 60 errori che non permettono la corretta accessibilità ai disabili.
  • Il meteo.it la piattaforma delle previsioni del tempo ha rilevato 9,45/10 punti.
  • Mediaset la piattaforma di streaming per guardare i programmi televisivi è accessibile con 9,80/10 punti.
  • Amazon uno degli e-commerce più utilizzati si classifica con 9,76/10 punti.
  • Ebay un altro e-commerce ha 9,81/10 punti.
  • Poste.it si classifica con 9,06/10 punti.
  • Facebook e Instagram le piattaforme social di Meta si classifica con 9,8/10 punti.
  • Tik Tok riesce a battere le precedenti piattaforme social citate nel punto precedente classificandosi con 9,9/10 punti.

6 consigli finali per rendere il tuo sito web più accessibile

Il web abbonda di guide e documenti riguardanti l’accessibilità dei siti, tuttavia, a volte, apportare piccole modifiche al design con una maggiore consapevolezza può fare la differenza. In conclusione ecco i 6 consigli secondo noi più utili:

  1. In presenza di immagini inserisci il testo alternativo, che sia comprensibile il più possibile per la lettura dei software Screen Reader. Assicurati che il testo alternativo possa descrivere in modo chiaro e sintetico ciò che rappresenta l’immagine (senza dimenticare che inserire gli alt-text è molto utile anche per la SEO). Come il testo alt fornisce un contesto importante per le immagini, le didascalie e le trascrizioni fanno lo stesso per i contenuti video e audio.
  2. Inserisci pulsanti chiari e ben visibili. Assicurati che i tasti non siano troppo prossimi ad altri elementi della pagina e che siano facilmente cliccabili. Inoltre, tieni presente di incorporare testi leggibili e ben visibili al loro interno.
  3. Identifica la lingua dei contenuti. Aiuta gli Screen Reader a percepire i contenuti letti al fine di comunicarli agli utenti.
  4. Imposta un contrasto marcato tra il colore del testo e quello di sfondo per consentire agli utenti ipovedenti una miglior leggibilità (in caso di testo grande 14 o 18 pt non si presenta il problema).  Una scelta sempre corretta è quella di usare un testo scuro su uno sfondo chiaro.
  5. Scegli font leggibili. Cerca di prediligere font serif o sans-serif ben leggibili ed evita quelli con caratteri ravvicinati o troppo decorativi.
  6. Esponi chiaramente i contenuti. Mantieni il layout delle pagine semplice e coerente e dai nomi chiari e distinti ad ogni pagina del sito.

Autore: Beatrice Astore
Grafica 

********

L’Agenzia Righetti è una web agency specializzata in web marketing e strategie per la promozione online. RICHIEDI UN PIANO PERSONALIZZATO, fornendoci le indicazioni base sulle attività che vuoi intraprendere (SEO-ADS-SOCIAL-SITO WEB-BLOG).

contattaci-ora

Agenzia Righetti

Web Agency di Torino specializzata in web marketing. Progettiamo strategie digitali innovative: Siti web, SEO, Social, Landing Page, Blog, Campagne ADS e SMM.