Migliorare accessibilità del sito web è uno dei punti essenziali per creare dei portali in grado di pubblicare un’esperienza unica e utile per tutti. L’user experience si occupa di migliorare l’esperienza del sulle pagine web per raggiungere i tuoi obiettivi ma l’accessibilità è dedicata a un aspetto specifico.
Ovvero? L’accessibilità di un sito web è un valore che non può essere messo in secondo piano, sopratutto oggi. In passato era prassi lavorare alla creazione e pubblicazione di portali senza valutare quelle che erano le necessità di un pubblico con facoltà differenti da quelle della massa.
Oltre all’usabilità (o UX, user experience) per migliorare l’esperienza dell’utente sulla pagina web, lavoriamo anche su come renderla accessibile a tutti. Anche a chi, ad esempio, ha problemi di vista. Attenzione, questi sono casi piuttosto comuni e fa parte anche della tua strategia di posizionamento del brand avere delle attenzioni nei confronti di chi ha delle necessità in termini di navigazione. Ecco come prenderti cura dell’accessibilità di un sito.
Argomenti
La web accessibility è la sua capacità di essere utilizzato, a prescindere dalle abilità o disabilità. Significa che deve essere sviluppato in modo da garantire a chi ha difficoltà fisiche e cognitive di poter fruire del contenuto. Abbattere le barriere imposte dalla tecnologia è un obbligo per determinati siti web istituzionali, i quali devono rispettare degli standard ben precisi, definiti a norma di legge. Questo non avviene in tutti i casi e quando i siti web (ma anche le app) sono progettati male, possono creare barriere che impediscono alle persone di sfruttare al meglio le risorse.
In primo luogo per rendere il proprio sito web pienamente usabile, a prescindere dalle singole condizioni. L’obiettivo è duplice: realizzare un prodotto di qualità, che porta benefici anche al tuo brand, e permettere a tutti di raggiungere i propri obiettivi nel momento in cui raggiungono le tue pagine.
Così puoi eliminare gli effetti di una disabilità visiva, uditiva, cognitiva, neurologica o fisica. Ma è un errore pensare che ci occupiamo dell’accessibilità di un sito web solo per chi ha una disabilità. Queste attenzioni si rivolgono anche ad anziani e utenti con disabilità momentanee o comuni.
Senza dimenticare quelli che utilizzano schermi piccoli o che si trovano di fronte a limitazioni legate alla situazione. Tipo in ambienti molto illuminati o rumorosi. L’accessibilità di un sito web aiuta anche chi ha connessioni molto lente e non riesce a caricare le pagine dei siti web in tempi utili.
Da leggere: UX mobile per ecommerce, approfondimento
Per trovare un riferimento, rispetto ai siti web istituzionali, hai le linee guida dell’accessibilità proposte dall’AGID. Ovvero l’Agenzia per l’Italia Digitale. Stiamo parlando di un PDF (lo trovi qui) con gli obblighi da rispettare per i siti web della Pubblica Amministrazione. Questo per disposizione dell’art. 11 della L. 4/2004 che impone i requisiti tecnici per l’accessibilità di siti web e applicazioni mobili e relative verifiche. Lo stesso documento si appoggia alle Web Content Accessibility Guidelines (WCAG) 2.2 che definiscono, a livello internazionale, le indicazioni per l’accessibilità dei siti web.
Senza scendere nelle specifiche ministeriali per avere un sito web accessibile, a norma di legge, possiamo optare per una serie di dettagli che possono ottenere grandi risultati per chi vuole agevolare la navigazione a tutti, anche a chi vive delle difficoltà momentanee o permanenti. Ecco 6 regole:
Ricorda che per effettuare un test di accessibilità puoi utilizzare diversi strumenti. Uno dei più noti, in parte anche gratuito, è Wave che analizza la singola risorsa e mette in evidenza eventuali problemi con i vari elementi on-page. Esiste anche una versione add-on per Chrome.
Uno dei pilastri dell’accessibilità dei siti web: il testo alternative alle immagini. Questo per fare in modo che il visual di una risorsa web sia descrivibile dai browser per ipovedenti. Ovvero persone con problemi alla vista. Questi programmi, infatti, raccontano all’utente con una voce artificiale il testo alternative.
Un elemento che però è utile anche all’ottimizzazione SEO. Quindi compila le immagini che hanno un significato con questo testo, per quelle puramente decorative puoi anche non inserire il testo mantenendo però sempre il codice HTML con le virgolette vuote (alt="").
Il sistema di heading in HTML – vale a dire i vari H1, H2, H3 – hanno un significato dal punto di vista gerarchico. Questo significa che servono a definire un’architettura interna di un documento web. Ecco come appare la sequenza in un codice HTML ben strutturato:
<h1>Questo è il titolo principale</h1>
<h2>Questo è un paragrafo</h2>
<h3>Qui abbiamo un sotto-paragrafo</h3>
<h3>C'è un altro sotto-paragrafo</h3>
<h2>Questo è un paragrafo</h2>
<h2>Questo è un paragrafo</h2>
<h3>Qui abbiamo un sotto-paragrafo</h3>
<h4>Questa è un'appendice finale</h4>Una regola per la pubblicazione di pagine web attente all’accessibilità: rispettare le principali linee guida per organizzare gli heading. Questo significa che il titolo principale è un H1, ed è unico all’interno del documento, poi i paragrafi sono introdotti da H2 e sotto-paragrafi da H3.
Il buon senso aiuta a migliorare accessibilità del sito web: non usare gli heading per fare keyword stuffing o per attirare la curiosità del pubblico. Per Nielsen, questi elementi devono essere perle di chiarezza. E non strumenti per fare SEO o mettere del testo in evidenza con font più grande.
Come si legge il tuo sito web da un 4 pollici? Essere mobile friendly vuol dire far fruire i contenuti sempre e comunque, anche a chi ha dei problemi di vista come la miopia e l’astigmatismo. Devi usare un font con una buona dimensione – diciamo che il minimo per il body è 14 pixel – e con una leggibilità ideale. Se serve, ad esempio se hai un target di over 50, puoi aggiungere un sistema per ingrandire o rimpicciolire il testo a comando.
Quindi niente caratteri con grazie estreme e contrasti azzardati con lo sfondo. L’ideale sarebbe avere un carattere minimo di 14 pixel, grigio scuro su bianco sporco, magari un Aria, un Verdana o un Time New Roman. Quindi scegli dei font leggibili da tutti i browser, senza problemi.
Uno dei principi dell’accessibilità: gli elementi devono essere facili da percepire, comprendere e decifrare. Questo aspetto si delinea in modi differenti e abbraccia tecniche diverse. Ad esempio quella che ti consente di creare un menu di navigazione semplice ed efficace. Qui si applica la regola:
“UX isn’t about creating a perfect world. It’s about eliminating everything that competes with our goals and user goals. Good UX is reductive, not expansive”.
Joel Marsh
Quindi per migliorare accessibilità del sito web devi lavorare sulla sua navigabilità: togli tutto quello che non serve, non creare menu con tutti i link utili per raggiungere qualsiasi punto del portale ma crea percorsi semplici e intuitivi. Facili da usare anche da tablet, cellulare, smart TV.
Senza dimenticare dispositivi con schermi particolari. Soprattutto, usa etichette di navigazione intuitive: il microcopy non deve essere un manifesto di creatività ma di chiarezza. Se leggi un testo, quello deve essere indicativo di ciò che vuoi intendere. Senza doppi sensi o giochi di parole.
Se vuoi migliorare l’accessibilità del sito web ricorda anche di fare in modo che i collegamenti ipertestuali siano facili da individuare e cliccare. Quali sono le regole da seguire? Usa un testo differente per i link, magari sottolineato, e che cambi di tonalità tra pagine visitate o meno.
I link devono essere usati da mobile, quelli più importanti possono essere messi su bottone. L’aspetto interessante e è che con WordPress Gutenberg l’opzione pulsante è di default. Ricordiamo che l’anchor text di un link è anche un elemento SEO importante per l’ottimizzazione on-page.
Da leggere: cosa sappiamo sul mobile first index
Uno degli aspetti per unire l’accessibilità, l’usabilità, l’UI design e l’UX experience insieme alle performance: i Core Web Vitals devono essere al centro delle tue preoccupazioni. Questo significa fare in modo che i contenuti above the fold siano subito visibili, ma anche accorciare i tempi di interazione con gli elementi cliccabili e fare in modo che il design sia sempre stabile. Per approfondire puoi leggere questi articoli pubblicati sul blog Serverplan:
Questi aspetti permettono di migliorare l’esperienza utente e l’accessibilità del sito web. È così: rendere un sito adatto a tutti vuol dire anche lavorare in una direzione utile per la search engine optimization. Magari partendo dalla velocizzazione delle pagine web. Vuoi iniziare? Acquista un hosting Serverplan con WordPress gestito e preinstallato. Hai tutto quello che ti serve per garantire stabilità al tuo progetto, dall’HTTP/2 all’HTTP Keep Alive.
Hosting WordPress preinstallato e gestito
2 commenti presenti
roberto ha commentato il 2021-09-28 14:25:11
L’accessibilità di un sito web è forse l’aspetto meno considerato tra tutto quello che serve quando si progetta un sito o un blog. Ottimizzare le immagini, testo alt ecc, sono ancora visti come inutili fastidi inutili di cui nessuno se ne accorge. C’è ancora tanto lavoro da fare soprattutto sotto il profilo di una maggior consapevolezza che il web è una cosa seria.
Riccardo Esposito ha commentato il 2023-09-21 10:02:07
Hai ragione, bisogna lavorare sodo per ottimizzare l’accessibilità web.