L’accessibilità di un sito web non riguarda una piccola minoranza di utenti e non dovrebbe essere trattata come un controllo da fare alla fine del progetto.
Riguarda il modo in cui persone con capacità, dispositivi e modalità di navigazione diverse riescono ad accedere ai contenuti e utilizzare le funzionalità del sito.
In pratica, un sito accessibile cerca di ridurre gli ostacoli inutili tra l’utente e ciò che deve fare.
Cos’è l’accessibilità di un sito web
Un sito accessibile è progettato e sviluppato in modo da poter essere utilizzato anche da persone che possono avere difficoltà visive, motorie, uditive o cognitive.
Questo può riguardare, per esempio:
- navigazione tramite tastiera;
- uso di screen reader;
- contrasto dei colori;
- dimensione e leggibilità del testo;
- descrizione delle immagini;
- chiarezza dei form;
- struttura corretta dei contenuti.
Accessibilità non significa rinunciare al design
Uno dei luoghi comuni più frequenti è pensare che un sito accessibile debba essere visivamente semplice o poco creativo.
Non è così.
Il problema non è usare un determinato stile grafico, ma farlo senza compromettere leggibilità e utilizzo.
Un’interfaccia può essere molto caratterizzata e allo stesso tempo avere:
- buon contrasto;
- gerarchie chiare;
- focus visibili;
- testi leggibili;
- struttura semantica corretta.
1. Contrasto insufficiente
Testi troppo chiari su sfondi chiari o colori molto simili possono diventare difficili da leggere.
Il contrasto è particolarmente importante per:
- testo normale;
- testi piccoli;
- pulsanti;
- link;
- campi form;
- messaggi di errore.
Non basta che il colore sia esteticamente coerente: deve anche rendere il contenuto comprensibile.
2. Testi troppo piccoli
Una tipografia elegante ma troppo piccola può creare problemi a molti utenti, soprattutto su mobile.
Vale la pena controllare:
- dimensione del font;
- interlinea;
- larghezza della colonna;
- spaziatura tra paragrafi;
- contrasto;
- ridimensionamento del testo nel browser.
3. Gerarchia dei titoli non corretta
H1, H2 e H3 non dovrebbero essere scelti soltanto in base alla dimensione visiva.
Servono a descrivere la struttura logica della pagina.
Una gerarchia coerente aiuta sia chi legge normalmente sia chi utilizza tecnologie assistive per orientarsi nel contenuto.
4. Immagini senza testo alternativo
Le immagini informative dovrebbero avere un testo alternativo utile quando il contenuto visivo non può essere percepito direttamente.
Il testo alternativo dovrebbe descrivere la funzione o l’informazione importante dell’immagine, non essere riempito automaticamente di parole chiave SEO.
Le immagini puramente decorative, invece, non devono necessariamente aggiungere informazioni inutili agli screen reader.
5. Link poco descrittivi
Testi come “clicca qui” o “scopri di più” possono risultare poco chiari quando vengono letti fuori dal contesto.
Quando possibile, un link dovrebbe far capire dove porta.
Per esempio:
- “Scopri il servizio SEO”;
- “Leggi il case study”;
- “Consulta la pagina contatti”.
Questo migliora chiarezza e prevedibilità della navigazione.
6. Navigazione da tastiera
Non tutti utilizzano il mouse o il touchscreen.
Un sito dovrebbe poter essere utilizzato anche tramite tastiera.
È quindi importante verificare che:
- menu e link siano raggiungibili;
- i pulsanti possano essere attivati;
- l’ordine di navigazione sia logico;
- il focus sia visibile;
- non esistano elementi che intrappolano la tastiera.
7. Focus invisibile
Quando si naviga tramite tastiera bisogna poter capire quale elemento è attivo.
Rimuovere completamente il contorno di focus per ragioni estetiche può rendere la navigazione molto difficile.
Il focus può essere personalizzato graficamente, ma dovrebbe restare chiaramente visibile.
8. Form poco accessibili
I form sono uno dei punti in cui i problemi di accessibilità diventano più evidenti.
Ogni campo dovrebbe avere un’etichetta comprensibile e gli errori dovrebbero essere spiegati chiaramente.
È utile controllare:
- label associate correttamente ai campi;
- placeholder non usati come unica etichetta;
- messaggi di errore comprensibili;
- campi obbligatori identificabili;
- ordine di tabulazione;
- contrasto dei testi.
9. Non affidarti soltanto al colore
Il colore non dovrebbe essere l’unico modo per comunicare un’informazione.
Un campo con errore, per esempio, non dovrebbe diventare semplicemente rosso.
È meglio accompagnare il colore con:
- testo;
- icone;
- etichette;
- messaggi esplicativi.
10. Pulsanti e aree cliccabili troppo piccoli
Elementi piccoli possono creare difficoltà a persone con ridotta precisione motoria, ma anche a chiunque utilizzi il sito velocemente da smartphone.
Per questo link, checkbox, icone e pulsanti dovrebbero avere un’area cliccabile sufficientemente comoda.
11. Animazioni e movimento
Animazioni e transizioni possono migliorare l’esperienza quando vengono usate con moderazione.
Diventano un problema quando:
- sono troppo intense;
- impediscono di leggere;
- si attivano continuamente;
- rendono difficile seguire il contenuto;
- non rispettano le preferenze di riduzione del movimento.
Quando possibile, conviene supportare la preferenza di sistema per ridurre le animazioni.
12. Video e contenuti audio
I contenuti multimediali dovrebbero essere utilizzabili anche quando una persona non può ascoltare l’audio.
Per i video con parlato può essere utile prevedere sottotitoli o trascrizioni.
Anche i controlli del player dovrebbero essere facilmente utilizzabili.
13. Struttura HTML semantica
La struttura tecnica della pagina è importante tanto quanto il design.
Utilizzare correttamente elementi come:
- header;
- nav;
- main;
- section;
- article;
- footer;
aiuta le tecnologie assistive a comprendere le diverse aree del sito.
14. Menu e navigazione coerenti
La navigazione dovrebbe essere prevedibile.
Se menu, pulsanti o componenti cambiano comportamento da una pagina all’altra, l’esperienza diventa più difficile.
Coerenza e semplicità aiutano tutti gli utenti, non soltanto chi utilizza tecnologie assistive.
15. Mobile e accessibilità
Molti problemi di accessibilità diventano ancora più evidenti su smartphone.
Per esempio:
- testi piccoli;
- pulsanti ravvicinati;
- popup invasivi;
- form difficili da compilare;
- elementi che richiedono hover;
- contenuti tagliati.
Responsive design e accessibilità sono quindi strettamente collegati.
Accessibilità e SEO sono la stessa cosa?
No.
Esistono però diversi punti di contatto.
Una buona struttura dei titoli, link chiari, contenuti comprensibili e HTML semantico possono essere utili sia agli utenti sia ai motori di ricerca.
Ma ottimizzare una pagina per Google non significa automaticamente renderla accessibile.
Un plugin può rendere automaticamente accessibile un sito?
Non completamente.
Alcuni strumenti possono aggiungere funzionalità utili o aiutare a individuare problemi, ma non possono correggere automaticamente una struttura progettata male.
Un plugin non può decidere, per esempio:
- se la gerarchia dei contenuti ha senso;
- se un testo alternativo descrive davvero un’immagine;
- se un form è comprensibile;
- se una navigazione è semplice da utilizzare.
Come controllare l’accessibilità di un sito
Gli strumenti automatici sono utili, ma non dovrebbero essere l’unico controllo.
Una verifica può includere:
- test automatici;
- navigazione tramite tastiera;
- controllo del focus;
- verifica del contrasto;
- test dei form;
- controllo della struttura HTML;
- test su mobile;
- quando possibile, verifica con tecnologie assistive.
Gli strumenti automatici trovano tutti i problemi?
No.
Possono individuare molti errori tecnici, ma non riescono a valutare tutto.
Per esempio, uno strumento può verificare che un’immagine abbia un attributo alt, ma non necessariamente se quel testo sia realmente utile.
Allo stesso modo può verificare la presenza di una label senza sapere se sia comprensibile per una persona.
Quando conviene intervenire
Il momento migliore è durante la progettazione e lo sviluppo.
Correggere accessibilità, struttura e semantica mentre il sito viene costruito è normalmente più semplice che intervenire dopo anni di modifiche.
Su un sito esistente, invece, conviene partire dalle aree più importanti:
- menu;
- homepage;
- pagine servizio;
- form;
- checkout;
- contenuti più visitati.
Accessibilità come parte della qualità del sito
L’accessibilità viene spesso trattata come una voce separata dal resto del progetto.
In realtà molte buone pratiche sono semplicemente caratteristiche di un sito progettato bene:
- testi leggibili;
- navigazione chiara;
- form comprensibili;
- struttura coerente;
- mobile utilizzabile;
- feedback visivi chiari.
Queste caratteristiche migliorano l’esperienza per tutti.
Conclusione
Rendere un sito accessibile non significa aggiungere un widget alla fine del progetto.
Significa progettare contenuti, interfaccia e sviluppo cercando di ridurre gli ostacoli che possono impedire a una persona di utilizzare il sito.
Non sempre ogni problema può essere eliminato immediatamente, soprattutto nei siti esistenti.
Ma accessibilità dovrebbe essere considerata una parte della qualità del progetto, non un’aggiunta opzionale.
Un sito migliore non è quello che funziona soltanto nelle condizioni ideali. È quello che continua a funzionare per il maggior numero possibile di persone.