Accessibilità e inclusione
Un sito che non lascia indietro nessuno
Organizziamo viaggi per le scuole, e in una classe c’è sempre qualcuno che vede poco, che non usa il mouse, che legge con fatica o che si stanca davanti alle cose che si muovono. Questo sito è costruito tenendone conto. Qui sotto trovate come, con i numeri che lo dicono.
Quattro cose che abbiamo deciso in partenza
-
Si legge senza sforzo
Il testo non scende sotto i 17 px e l’interlinea è ampia. I colori non sono stati scelti a occhio: ogni combinazione è stata misurata sul sito vero, non su una tavolozza.
-
Si usa solo con la tastiera
Menu, filtri, moduli e il pannello del preventivo si aprono, si compilano e si chiudono senza toccare il mouse. Dove il fuoco si trova è sempre visibile.
-
Il movimento si può spegnere
Se nelle impostazioni del vostro dispositivo avete chiesto di ridurre le animazioni, il sito le toglie: niente entrate, niente scorrimenti, il filmato di apertura resta fermo.
-
Si capisce cosa fare
Ogni campo dei moduli ha la sua etichetta, che non sparisce mentre scrivete. Gli errori dicono cosa correggere, non solo che qualcosa non va.
Quattro numeri, tutti verificati
-
44px
Il lato minimo di ogni elemento da toccare o cliccare. Sotto questa misura non siamo mai scesi, nemmeno per recuperare spazio.
-
320px
La finestra più stretta su cui il sito è stato verificato. Nessun contenuto esce di lato, niente scorrimento orizzontale.
-
0
I CAPTCHA presenti. Nessuno: non chiediamo a nessuno di riconoscere semafori sfocati per potervi scrivere.
-
100%
Le funzioni che restano disponibili se JavaScript non parte. Moduli, filtri e navigazione continuano a funzionare.
Misurato, non stimato
Che aspetto ha un contrasto sufficiente
Il contrasto fra testo e sfondo si esprime con un rapporto. Le linee guida internazionali chiedono almeno 4,5 per il testo corrente e 3 per i titoli grandi e i comandi. Qui sotto ci sono le combinazioni che il sito usa davvero, scritte nei loro colori, con il valore che abbiamo letto sul rendering.
-
Viaggi di istruzione
Titoli
14,84 su 1
Minimo richiesto 3,0
-
Richiedi un preventivo
Pulsanti
8,48 su 1
Minimo richiesto 3,0
-
Scopri l’itinerario
Collegamenti
7,77 su 1
Minimo richiesto 4,5
-
Cinque giorni fra Roma e i Castelli
Testo corrente
6,48 su 1
Minimo richiesto 4,5
Senza mouse
Muoversi con la tastiera
Tutto il sito si percorre con i tasti. Queste sono le scorciatoie che usiamo, e sono le stesse che valgono sulla maggior parte dei siti fatti bene: quello che imparate qui vi serve anche altrove.
- Tab
- Passa all’elemento successivo. Con Maiusc torna indietro.
- Invio
- Apre il collegamento o attiva il pulsante su cui vi trovate.
- ↑ ↓
- Scorrono le voci di una tendina, per esempio quella delle destinazioni.
- Esc
- Chiude il pannello del preventivo e riporta il fuoco dov’era.
La prima volta che premete Tab in cima a una pagina compare un collegamento «Vai al contenuto»: serve a saltare il menu, che altrimenti andrebbe riattraversato a ogni pagina.
In pratica
Che cosa abbiamo fatto
- Le immagini decorative sono dichiarate come tali, così chi usa un lettore di schermo non se le sente elencare una per una.
- Le fotografie che portano informazione hanno una descrizione testuale.
- I titoli sono annidati in ordine, e servono a orientarsi: con un lettore di schermo si salta di sezione in sezione.
- L’ordine con cui la tastiera attraversa i campi è lo stesso in cui si leggono. Dove non coincideva, abbiamo cambiato il documento e non la grafica.
- Le etichette dei moduli sono etichette vere e restano visibili mentre si scrive.
- I messaggi di conferma e di errore vengono annunciati, non solo mostrati.
- Il fuoco della tastiera si vede sempre, con un contorno che non scompare sui fondi chiari.
- Le informazioni non sono mai affidate al solo colore: dove c’è un colore c’è anche una parola o un segno.
- Il testo si può ingrandire con lo zoom del browser senza che il contenuto esca dallo schermo.
- Le pagine hanno la lingua dichiarata, così le voci sintetiche pronunciano l’italiano come italiano.
Avete trovato un ostacolo?
Se qualcosa di questo sito vi ha bloccato — un testo che non si legge, un comando che la tastiera non raggiunge, una pagina che il vostro lettore di schermo non racconta — scriveteci. Ci serve saperlo: è così che si correggono le cose che a noi sfuggono.
Ditecelo anche se avete bisogno di ricevere un preventivo o un programma in un formato diverso da quello che trovate qui.