Ogni azienda oggi vuole aumentare la propria visibilità nei motori di ricerca in modo da poter attrarre traffico effettivo rilevante. Ma lo sapete che ci sono diversi fattori che Google e altri motori di ricerca tengono in considerazione prima di inserire qualsiasi attività o azienda nei risultati di ricerca? Uno di questi è se il sito web è accessibile o meno. Ma cosa significa essere accessibili? L’accessibilità di un sito web è la possibilità per chiunque di accedere, indipendentemente da qualsiasi difficoltà fisica o tecnologica. E per “chiunque” intendiamo anche persone con ogni disabilità e coloro che utilizzano qualsiasi tipo di dispositivo, che sia mobile, come smartphone e tablet, o anche le più svariate tecnologie assistive. Quando si ottimizza un sito Web per l’accessibilità, inoltre, ci si deve assicurare anche che sia accessibile a coloro che hanno connessioni Internet lente o larghezza di banda limitata. Ma rendere un sito web accessibile a tutti non è utile solo per aumentare il posizionamento nei motori di ricerca. Ha anche molti altri vantaggi. Diamo un’occhiata ad alcuni di loro.
1. Maggiore portata. Rendendo accessibile un sito web, si potrà raggiungere un pubblico più ampio. Tutti i siti Web accessibili hanno una migliore copertura perché sono progettati per essere utilizzati da tutte le persone, indipendentemente dalle loro capacità fisiche, sensoriali o cognitive. Pertanto, quando un sito Web diventa più accessibile, può essere utilizzato da più persone, consentendo una portata e un pubblico più ampi. E, naturalmente, i siti Web accessibili tendono ad avere un posizionamento nei motori di ricerca più elevato, il che aumenta ulteriormente la portata del sito Web.
2. Migliore tasso di conversione. I siti Web accessibili in genere hanno tassi di conversione migliori perché sono più intuitivi e offrono una migliore esperienza complessiva per gli utenti. Rendendo i siti Web più accessibili, ci si assicura che le persone con una vasta gamma di abilità, comprese quelle con disabilità, possano accedere facilmente a tutti i contenuti e utilizzare ogni servizio proposto. Inoltre, migliorando l’accessibilità del sito Web, le aziende possono aprire le proprie porte a un pubblico più ampio, comprese le persone con disabilità, che potrebbero non essere state coinvolte attivamente in passato.
3. Rischio legale ridotto. Rendere un sito web accessibile può anche aiutare le aziende a ridurre il rischio di azioni legali. I siti Web accessibili sono progettati per rispettare gli standard internazionali in materia di accessibilità. Ciò significa che sono stati progettati con l’obiettivo di garantire che chiunque, indipendentemente dalle proprie capacità fisiche o cognitive, possa accedere e utilizzare il sito web. Se non si rende accessibile un sito web, in base alla legge 67/2006 italiana, ci si può rendere responsabili di discriminazione!
Ma come si può costruire od ottimizzare un sito web accessibile?
1. Scegliete un sistema di gestione dei contenuti che supporti l’accessibilità. Sono disponibili molti sistemi di gestione dei contenuti (CMS) per aiutarvi a creare il vostro sito web. Esempi comuni includono Drupal e WordPress, ma ci sono molte altre opzioni disponibili. Dopo aver scelto un CMS adatto alle tue esigenze, assicuratevi di scegliere un tema/modello accessibile. Consultate la documentazione del tema cercando istruzioni sull’accessibilità e suggerimenti per la creazione di contenuti e layout accessibili per quel tema. Assicuratevi di seguire le stesse linee guida quando selezionate moduli, plugin o widget.
2. Usate correttamente i titoli per organizzare la struttura dei contenuti. Gli utenti non vedenti che utilizzano gli screen reader possono utilizzare la struttura dell’intestazione per navigare più facilmente all’interno del contenuto. Utilizzando le intestazioni (<h1>, <h2>, ecc.) in modo corretto e strategico, il contenuto del vostro sito web sarà ben organizzato e facilmente interpretabile dagli screen reader. Usate <h1> per il titolo principale della pagina. Evitate di utilizzare un <h1> per qualcosa di diverso dal titolo del sito Web e dal titolo delle singole pagine. Usate i titoli per indicare e organizzare la struttura dei contenuti. Non saltate i livelli di intestazione (ad esempio, passando da un <h1> a un <h3>), poiché gli utenti di screen reader si chiederanno se manca del contenuto.
3. Includete il testo alternativo appropriato per le immagini. Il testo alternativo o “alt text” dovrebbe essere fornito sempre per descrivere le immagini, in modo che gli utenti di screen reader possano comprendere il messaggio trasmesso guardandole immagini sulla pagina. Ciò è particolarmente importante per le immagini informative (come le infografiche). Quando create il testo alternativo, il testo dovrebbe contenere il messaggio che desiderate trasmettere attraverso quell’immagine e, se l’immagine include del testo, anche quel testo dovrebbe essere incluso. L’eccezione a questa regola è quando un’immagine viene utilizzata esclusivamente per la decorazione; in questo caso l’alt text può essere lasciato vuoto in modo che l’utente dello screen reader non sia distratto dai contenuti più importanti della pagina. Inoltre, se un’immagine è l’unico contenuto di un collegamento, lo screen reader leggerà il nome del file se non viene fornito il testo alternativo.
4. Date ai link nomi univoci e descrittivi. Quando includete collegamenti nei contenuti, utilizzate un testo che descriva correttamente dove andrà il collegamento. L’uso di “clicca qui” non è considerato descrittivo ed è inefficace per un utente di screen reader. Proprio come gli utenti vedenti eseguono la scansione della pagina per il testo collegato, gli utenti ipovedenti possono utilizzare i propri lettori di schermo per eseguire la scansione dei collegamenti. Di conseguenza, gli utenti di screen reader spesso non leggono il collegamento nel contesto del resto della pagina. L’utilizzo di testo descrittivo spiega correttamente il contesto dei collegamenti all’utente dello screen reader. Ad esempio, se si indirizzano i visitatori a una pagina chiamata “Chi siamo”, piuttosto di comunicare “Clicca qui per leggere della nostra azienda” è meglio far leggere allo screen reader la frase: “Per saperne di più sulla nostra azienda, leggi Chi siamo”.
5. Usate il colore con cura. Il daltonismo colpisce circa l’8% della popolazione. L’uso di rosso e verde, ad esempio (soprattutto per indicare i campi obbligatori in un modulo), impedirà a queste persone di comprendere il vostro messaggio. Altri gruppi di persone con disabilità, in particolare gli utenti con difficoltà di apprendimento, traggono grandi vantaggi dal colore quando viene utilizzato per distinguere e organizzare i contenuti. Per soddisfare entrambe le categorie si consiglia di usare il colore, ma assicurandosi anche di usare altri indicatori visivi, come un asterisco o un punto interrogativo. Personale preparato potrà valutare il miglior contrasto dei colori, che vi aiuteranno a rendere la vostra pagina il più visivamente utilizzabile possibile.
6. Progettate i moduli e i form accessibili. Quando i campi dei moduli (ad esempio di contatto) non sono etichettati in modo appropriato, l’utente dello screen reader non ha a disposizione gli stessi segnali dell’utente vedente. Potrebbe essere impossibile stabilire quale tipo di contenuto deve essere inserito in un campo modulo. Ogni campo del modulo dovrebbe avere un’etichetta descrittiva ben posizionata. Ad esempio, se il campo è per il nome di una persona, dovrebbe essere etichettato in modo appropriato come “Nome completo” o avere due campi separati etichettati come “Nome” e “Cognome”. Utilizzate il tag <label> o un nuovo comando di tipo ARIA (vedere il suggerimento n. 9) per associare il testo dell’etichetta al campo del modulo. Se alcuni campi del modulo sono obbligatori, il campo deve essere etichettato di conseguenza e configurato per avvisare l’utente dello screen reader. Di solito, i campi obbligatori sono contrassegnati come tali da un asterisco, che non verrà pronunciato da alcuni lettori di schermo. Gli asterischi (o indicazioni visive simili) dovrebbero comunque essere utilizzati per gli utenti vedenti o per le persone con difficoltà di apprendimento. È possibile indicare che un campo è obbligatorio per un lettore di schermo aggiungendo comandi di tipo ARIA per i campi facoltativi. Dopo aver inviato il modulo, l’utente dovrà essere avvisato della conferma dell’invio o della presenza di errori di invio, ma soprattutto dovrebbe essere informato della presenza di errori nella pagina ed essere portato a una pagina che indica quali sono gli errori e fornisce un modo semplice per navigare verso tali errori.
7. Usare le tabelle per i dati tabulari, non per il layout. L’utilizzo delle tabelle per il layout di pagina aggiunge ulteriore difficoltà alla lettura degli schermi da parte degli screen reader. Ogni volta che un lettore di schermo incontra una tabella, l’utente viene informato che esiste una tabella con un numero “x” di colonne e righe, che distrae dal contenuto. Inoltre, il contenuto potrebbe essere letto in un ordine che non corrisponde all’ordine visivo della pagina. Cercate di non creare mai il layout di un sito web utilizzando una tabella!
Quando è necessaria una tabella di dati (ovvero si dispone di un set di dati che viene interpretato al meglio in un formato di tabella, come un estratto conto bancario), utilizzate le intestazioni per righe e colonne, che aiutano a spiegare le relazioni delle celle.
8. Assicurate, che sia possibile accedere a tutto il contenuto solo con la tastiera in modo logico. Gli utenti con disabilità motorie, comprese le lesioni da stress ripetitivo, potrebbero non essere in grado di utilizzare un mouse o un trackpad. Queste persone sono in grado di accedere ai contenuti tramite l’uso di una tastiera premendo i tasti “tab” o “freccia” o tramite l’uso di dispositivi di input alternativi come interruttori o stick orali. Di conseguenza, l’ordine di tabulazione deve corrispondere all’ordine visivo, in modo che gli utenti che usano solo la tastiera siano in grado di navigare logicamente attraverso il contenuto del sito. Le pagine lunghe con molti contenuti dovrebbero essere suddivise con collegamenti di ancoraggio, consentendo agli utenti che usano solo la tastiera di saltare a parti rilevanti della pagina senza dover per forza passare attraverso altri contenuti. Un link “salta al contenuto principale” dovrebbe essere fornito nella parte superiore di ogni pagina, in modo tale che gli utenti che usano solo la tastiera non dovranno passare attraverso la navigazione della pagina per ottenere il contenuto principale.
9. Usate ruoli e comandi ARIA (ma solo e se necessario). ARIA (Accessible Rich Internet Applications) è una specifica tecnica complessa e potente per aggiungere informazioni sull’accessibilità a elementi che non sono accessibili in modo nativo. Si dovrebbero, comunque, sempre utilizzare elementi HTML nativi quando sono disponibili. Infatti, la prima regola di ARIA è “Non usare ARIA”. Molte funzioni che prima richiedevano gli attributi ARIA sono ora implementate in HTML5. Ma non vogliamo entrare in un discorso molto complesso che vi potrà essere spiegato da personale qualificato quando vorrete.
10. Rendete accessibili i contenuti dinamici. Quando il contenuto si aggiorna in modo dinamico (ovvero senza un aggiornamento della pagina), gli screen reader potrebbero non esserne consapevoli. Ciò include sovrapposizioni dello schermo, lightbox, aggiornamenti in-page, popup e finestre di dialogo modali. Gli utenti che utilizzano solo la tastiera potrebbero essere intrappolati negli overlay di pagina. Gli utenti del software di ingrandimento potrebbero trovarsi in una sezione sbagliata della pagina. Queste funzioni possono essere rese facilmente accessibili. Le opzioni includono comandi ARIA, nonché framework di sviluppo front-end che supportano specificamente l’accessibilità. Inoltre, tutti i video devono avere opzioni per i sottotitoli e le trascrizioni per i non udenti. Se il sito contiene una presentazione, assicuratevi che ogni foto abbia un testo alternativo e si possa navigare tramite la tastiera.
Questi sono alcuni dei suggerimenti per rendere un sito accessibile. Rivolgetevi sempre a personale certo per raggiungere i massimi risultati! Buon sito Web.
