Le basi per creare un sito web accessibile: design e sviluppo

Lo so, lo so… “accessibilità” ti suona come una cosa da enti pubblici, WCAG, burocrazia e sbatti (e in parte sì, lo è 😂) ma in realtà riguarda anche te, me e il tuo cliente che vuole un sito “fatto bene”.

Oggi ti spiego in modo semplice cosa vuol dire rendere accessibile un sito, perché dovresti farlo anche se non sei una PA, ma soprattutto cosa puoi fare concretamente – lato design e sviluppo, per partire con le giuste basi nella creazione di un sito web più accessibile per tutti.

Disclaimer

Quello che trovi in questo articolo ti aiuta a rendere il tuo sito più accessibile dal punto di vista pratico, e penso sia una base concreta e applicabile anche subito, ma non basta per dire che un sito è “accessibile e a norma”.

Se stai lavorando su un progetto per un ente pubblico, una scuola, o un’organizzazione soggetta a obblighi di legge, serviranno molti più accorgimenti, ad esempio una dichiarazione ufficiale di accessibilità, test tecnici approfonditi e documentati e strumenti di monitoraggio continui… per cui, in tutti questi casi, ti suggerisco una bella consulenza legale da un esperto del digitale!

Cos’è l’accessibilità e perché ti riguarda anche se fai siti per liberi professionisti

Accessibilità significa: rendere il sito fruibile da tutti, comprese le persone che navigano con screen reader, tastiera, ingranditori di testo o altre tecnologie assistive.

Non è solo una questione di legge, per cui non si tratta solo di rispettare la Normativa sulla accessibilità ma è una questione di inclusività, usabilità e buon senso 😊.

E poi, diciamolo: se un sito è accessibile, è anche più usabile per tutti.
Miglior struttura = migliore esperienza utente = potenzialmente più conversioni.

Qui sotto troverai quindi una lista dei punti principali, sia lato UI (design) che lato sviluppo, così da avere un quadro chiaro e pratico di cosa fare concretamente quando progetterai i tuoi prossimi siti web.

Vamos!

Accessibilità lato UI (Design)

Questa è la parte che riguarda il tuo lavoro di designer: colori, font, layout.
E sì, qui si fanno un sacco di errori… per cui è indubbiamente la base per un buon sito!

1. Contrasto colori

Spoiler: no, giallo su blu non va bene! 🙃

• Il testo deve avere un contrasto minimo di 4.5:1 con lo sfondo.
• Se è un testo grande (tipo titoli): puoi scendere a 3:1.
• Puoi controllare con WebAIM Contrast Checker
• Su Figma, io utilizzo Stark – Contrast & Accessibility checker e c’è anche l’estensione per Chrome!

2. Dimensione e leggibilità del testo

Uno degli errori più comuni (e più sottovalutati) quando si progetta un sito è pensare che basti “scrivere bene”.
Ma se il testo è piccolo, stretto, con font troppo fantasiosi o senza spazio per respirare… non lo legge nessuno, o peggio: lo legge solo chi ha la vista perfetta e zero problemi di concentrazione.

La leggibilità è uno degli aspetti fondamentali dell’accessibilità, e la buona notizia è che puoi migliorarla subito. Qui sotto ti lascio tre regole base che ti consiglio di applicare in ogni progetto:

• Non scendere sotto i 16px per i testi principali.
• Usa font leggibili, no script decorativi troppo arzigogolati.
• Imposta un line-height di almeno 1.5 per facilitare la lettura.

👉🏻 Tip: Su Figma, 1.5 lo ottieni scrivendo 150%

3. Non comunicare solo con il colore

Uno degli errori più frequenti, soprattutto nei form, è usare solo il colore per trasmettere un’informazione importante. Un esempio classico? Il campo obbligatorio che, se lasciato vuoto, si colora di rosso… e basta, no bueno!

Chi non distingue bene i colori (es. daltonismo, problemi visivi, schermo poco contrastato) non capirà mai dove sta l’errore. E non riuscirà a completare l’azione.

Se vuoi che l’utente capisca davvero cosa succede, devi combinare il colore con almeno un altro indicatore, ad esempio:

• Un messaggio testuale chiaro (es: “Questo campo è obbligatorio”)
• Un’icona o simbolo accanto al campo
• Un bordo più marcato, tratteggiato o colorato in modo evidente
• Un focus automatico sul primo campo con errore (bonus UX!)

E se usi un sistema con alert generici in cima al form (tipo “Compila tutti i campi evidenziati”), assicurati che ci siano ancora più riferimenti visivi accanto a ciascun campo.

❌ Non accessibile
Un campo e-mail che, se lasciato vuoto, si colora di rosso senza nessun messaggio – ay ay ay!

✅ Accessibile
Il campo si colora di rosso, appare una scritta sotto: “Inserisci un indirizzo e-mail valido”, e magari compare anche un’icona di avviso – me gusta!

4. Focus visibile (per chi usa la tastiera)

I bottoni, link e form devono avere uno stato focus visibile (tipo bordo o ombra). Bricks e Elementor di base lo gestiscono, ma attenzione perchè ad esempio: plugin come ElementsKitLite (per Elementor) possono sovrascrivere il focus visibile impostando outline: none su tutti gli elementi focusable creando quindi grandi problemi nella navigazione da tastiera.

Vedi qui sotto, nel primo esempio il bottone non è selezionato, mentre nel secondo il focus è attivo (bordo bianco intorno al bottone).

Nel dubbio, verifica sempre navigando il sito usando la tastiera!

5. Struttura coerente

Un sito accessibile è anche prevedibile: l’utente deve potersi orientare facilmente, senza sorprese. Ma cosa significa “coerenza” in pratica?

• La struttura della navigazione deve essere sempre la stessa
  Se in homepage hai il menu in alto, con logo a sinistra e CTA a destra, mantienilo così anche nelle pagine interne.
• Usa sempre gli stessi elementi per gli stessi scopi
  Se il bottone primario è azzurro con angoli stondati, non usarne uno rosso e squadrato in un’altra pagina per fare la stessa cosa in quanto chi naviga con attenzione (o con lentezza 😊) si affida anche a queste ripetizioni visive.
• Dai un ordine logico ai contenuti
  In ogni sezione della pagina, segui un flusso coerente: titolo → descrizione → CTA.
  Evita di cambiare disposizione solo per variare un po’.
• Pagine non troppo piene / lunghe
  Se una pagina è troppo piena e visivamente caotica, meglio spezzare i contenuti in più schermate o creare una pagina secondaria in quanto la chiarezza è parte dell’accessibilità.

NB. Questo vale anche per le landing page infinite, che spesso sacrificano la chiarezza in nome della “spinta alla conversione”.

Accessibilità lato sviluppo

Qui arriva la parte un po’ più per nerd e smanettoni 🤓. Questi aspetti tuttavia non riguardano solo i web developer ma anche chi si occupa di SEO e strategie di marketing, per cui, attention please!

1. Struttura semantica con intestazioni (H1, H2…)

Quando scrivi il contenuto per un sito web, non stai solo “mettendo dei titoli”, ma stai costruendo una gerarchia di contenuti che deve avere un ordine preciso, comprensibile anche da chi usa uno screen reader o altri strumenti di assistenza.

Le intestazioni (H1, H2, H3…) non servono solo a dare uno stile visivo: hanno un ruolo semantico, e usate nel modo giusto aiutano a navigare il contenuto in modo chiaro e accessibile.

• Prediligi l’utilizzo di un solo H1 per pagina (di solito il titolo principale).
• Usa H2-H3-H4 per suddividere correttamente i contenuti.
• Non saltare i livelli: è importante che le intestazioni siano usate in ordine logico (h1 → h2 → h3…) per facilitare la navigazione con screen reader.

2. Testi alternativi per immagini

Se l’immagine comunica un’informazione importante (es: una foto di un team, un grafico, un prodotto, un’illustrazione che spiega qualcosa…), allora il testo alt deve descrivere il contenuto e la funzione dell’immagine.

In altri casi, ad esempio per immagini di sfondo, divider grafici, icone decorative non informative, allora puoi tranquillamente lasciar stare.

3. Link descrittivi

Evita link tipo “clicca qui” o “scopri di più”, usa invece testi descrittivi come “Scarica la guida in PDF” o “Vai alla pagina contatti”.

Questo aiuta chi usa screen reader, perché capisce dove porta ogni link anche se letto da solo, ma anche la SEO, perché Google usa il testo del link per capire il contenuto della pagina collegata.

4. Moduli accessibili

I moduli (form di contatto, newsletter, iscrizioni, ecc.) sono spesso un punto critico per l’accessibilità. Se un campo non è etichettato bene o non si capisce cosa manca in caso di errore, l’utente non riesce a completare l’azione. E se non riesce, se ne va…

Ecco cosa controllare sempre:

Label sempre in ogni campo

Non basta usare il placeholder (il testo dentro il campo che scompare quando inizi a scrivere).
Il placeholder non è una label: sparisce, può essere difficile da leggere e non è affidabile per chi usa screen reader.

La label deve essere visibile e legata semanticamente al campo.

Se usi un builder come Bricks o Elementor, Divi ecc puoi gestirlo facilmente anche dal pannello visivo, l’importante è non lasciare il campo senza etichetta chiara.

Messaggi di errore chiari e pertinenti

Evita frasi generiche tipo “Errore nel modulo”.
L’utente deve capire:

• cosa non va
• dove correggere
• idealmente, perché

Esempio: “Il campo email è obbligatorio e deve contenere un indirizzo valido.”

In più, il messaggio d’errore dovrebbe essere associato visivamente e semanticamente al campo interessato, per essere letto correttamente anche da screen reader.

Pulsanti descrittivi

Evita pulsanti tipo “Invia” o “Ok”. Meglio scrivere cosa sta per succedere: ad esempio:
“Invia richiesta” “Iscriviti alla newsletter” oppure “Prenota la tua consulenza”.

5. Video e audio

Se nel tuo sito usi contenuti video o audio, devi assicurarti che siano fruibili anche per chi non può sentire, vedere o usare i comandi del player facilmente. Vediamo cosa significa, punto per punto!

Contenuto audio

Se il contenuto è solo audio (es. podcast)

• Devi fornire una trascrizione testuale completa.
• Il player deve essere accessibile da tastiera (play/pausa via TAB e INVIO, per esempio).

Esempio: hai messo un’intervista audio? Sotto al player, aggiungi il testo con il dialogo completo o almeno i punti salienti.

Contenuto visivo

Se il contenuto è visivo ci sono tre situazioni da considerare:

1. Il video ha parlato o contenuti vocali
(es. tutorial, presentazione, intervista)

• Devi includere sottotitoli sincronizzati.
• Puoi farli direttamente su YouTube o con strumenti esterni.
• In alternativa, puoi inserire una trascrizione testuale completa appena sotto il video.

2. Il video mostra solo contenuti visivi importanti
(es. una demo prodotto, slide animate senza audio)

• Devi aggiungere una descrizione testuale alternativa, che spieghi cosa si vede.

Esempio:
“Nel video viene mostrata una sequenza di immagini del prodotto utilizzato in diversi contesti: sulla scrivania, in una borsa, acceso con lo schermo visibile.”

3. Il video parte automaticamente (autoplay)

• Evita di farlo partire con l’audio attivo.
• Se proprio vuoi l’autoplay, disattiva l’audio e permetti all’utente di avviarlo manualmente.

Infine, assicurati che il player sia controllabile da tastiera e con pulsanti etichettati correttamente (es: “Play”, “Pausa”, “Volume”)

I player di YouTube e Vimeo sono generalmente accessibili, ma se usi plugin o lettori personalizzati, controlla che siano navigabili anche con la tastiera.

6. Navigazione da tastiera

Una regola semplice per testare se un sito è davvero accessibile: prova a navigarlo solo con la tastiera. Niente mouse quindi, solo TAB (per spostarti avanti), MAIUSC + TAB (per tornare indietro) e INVIO per attivare link o pulsanti.

Se riesci a muoverti con fluidità tra i contenuti, senza perdere mai il focus, sei a buon punto.

• Prova il sito usando solo il tasto TAB: riesci a navigare tutto?
• Verifica che gli elementi abbiano focus, ordine logico e siano attivabili senza mouse.

7. Skip link (salta al contenuto)

Lo skip link, o link “Salta al contenuto”, è un collegamento testuale posizionato all’inizio della pagina che permette agli utenti di saltare direttamente alla parte principale del sito, evitando di dover passare ogni volta da menu, header, breadcrumb, ecc.

Serve soprattutto a:

• chi naviga solo da tastiera, con il tasto TAB
• chi usa screen reader
• utenti con disabilità motorie, che hanno difficoltà a scorrere ripetutamente gli elementi di navigazione

Strumenti utili per testare se il tuo sito è accessibile

Ecco alcuni strumenti utili e gratuiti che possono aiutarti a controllare se il tuo sito ha qualche problematica legata all’accessibilità:

• Lighthouse (in Chrome DevTools): controlla accessibilità e performance
• WAVE – wave.webaim.org
• NVDA (Windows) o VoiceOver (Mac) per testare screen reader
• WebAIM Contrast Checker – link

Basta questo per creare un sito accessibile?

Assolutamente no. La normativa sull’accessibilità è piuttosto articolata e prevede una serie di requisiti tecnici e organizzativi da rispettare. Seguire le linee guida tecniche (come le WCAG) è solo una parte del lavoro: per essere davvero conforme alla normativa, un sito deve anche includere una Dichiarazione di Accessibilità aggiornata, essere costantemente monitorato, e in alcuni casi sottoposto a verifiche periodiche.

Ricordati quindi che se stai creando un sito che è soggetto alla normativa sulla accessibilità avrai bisogno del supporto di figure esperte: non puoi improvvisare! Servirà il supporto di professionisti esperti in materia di accessibilità e, molto spesso, una consulenza legale per assicurarti di rispettare tutti gli obblighi previsti.

Direi che abbiamo visto i punti principali per poter rendere i tuoi prossimi siti più accessibili! Mi sono dimenticata qualcosa? Se si, ti invito a scrivermi, sono sempre felice di ricevere i vostri messaggi! Infine, se sei un web designer e cerchi un supporto mirato, dai un’occhiata ai miei percorsi di mentoring e consulenza per web designer!