6 regole per curare l’accessibilità dei siti web

Postato in data 27 Settembre 2021 da Riccardo Esposito

Migliorare accessibilità del sito web è uno dei punti essenziali per creare dei portali in grado di pubblicare un’esperienza unica e utile per tutti. Mentre l’user experience si occupa della possibilità di migliorare l’esperienza del pubblico sulle pagine web per raggiungere i tuoi obiettivi, questa materia (ovvero l’accessibilità) è dedicata a un aspetto più specifico.

Migliorare accessibilità del sito web

Ovvero quello di rendere accessibile un sito web a ogni persona anche quelle con disabilita, problemi temporanei o permanenti, piccole o grandi difficoltà fisiche. Spesso il tema dell’accessibilità online viene messo in secondo piano dai siti commerciali, sempre così protesi verso le performance in termini di posizionamento e velocità di caricamento pagina.

Due aspetti essenziali che però non devono ignorare l’importanza di un’esperienza web inclusiva. Sia per motivi etici che strategici: un sito web accessibile funziona meglio e, sotto un certo punto di vista, è ancora più performante. Infatti migliorare l’accessibilità del sito web, spesso, significa anche ottimizzare la SEO, il design, l’usabilità. Vuoi qualche consiglio?

Aggiungi un tag alternative alle immagini

Uno dei pilastri dell’accessibilità dei siti web: la possibilità di inserire il testo alternative alle immagini. Questa soluzione è indispensabile 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 anche 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="").

Da leggere: UX mobile per ecommerce, approfondimento

Usa la meglio i titoli all’interno del testo

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.

Come aggiungere i meta tag in un sito WordPress

Il tutto mantenendo una linea unica per rispettare la gerarchia. 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. Come suggerisce Nielsen, questi elementi devono essere perle di chiarezza. E non strumenti per fare SEO o mettere del testo in evidenza con font più grande.

Usa un font leggibile dai dispositivi piccoli

Come si legge il tuo sito web da un 4 pollici? Essere mobile friendly oggi vuol dire avere la possibilità di far fruire i tuoi contenuti sempre e comunque, anche a chi ha dei problemi di vista come la miopia e l’astigmatismo. La soluzione è semplice: devi usare un font con una buona dimensione – diciamo che il minimo per il body è 14 pixel – e con una leggibilità ideale.

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.

Crea un struttura di navigazione intuitiva

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. In questi casi si applica la regola valida anche nell’UX che è stata definita da Joel Marsh:

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”.

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.

Usa link facili da individuare e cliccare

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.

Da leggere: cosa sappiamo sul mobile first index

Prenditi cura dei core web vitals

Uno degli aspetti per unire l’accessibilità, l’usabilità, l’UI design e l’UX experience insieme alle performance: i Core Web Vital 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 anche dalla velocizzazione delle pagine web. Vuoi iniziare?

Latest posts by Riccardo Esposito (see all)
Clicca per votare questo articolo!
[Voti totali: 0 Media: 0]

Discussione

1 commento presente
  • 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.


  • Lascia un commento

    Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *