Accessibilità
Vogliamo che il sito di EduBP sia utilizzabile da chiunque, anche con la tastiera, con uno screen reader, con una vista ridotta o su un telefono. Qui spieghiamo cosa abbiamo fatto, quali colori usiamo e dove siamo ancora migliorabili. Il riferimento che seguiamo sono le Linee guida WCAG 2.2 al livello AA. Ultimo aggiornamento: 3 novembre 2026.
Cosa abbiamo fatto
- Contrasto dei colori: abbiamo scelto token per testi e sfondi con rapporti di almeno 4,5:1 (3:1 per i testi grandi), con le eccezioni dichiarate più sotto.
- Il link «Salta al contenuto» è il primo elemento raggiungibile con il tasto Tab e porta direttamente al contenuto principale.
- Focus visibile: i controlli principali hanno un contorno blu da tastiera, bianco nelle sezioni scure.
- I menu di navigazione si aprono e si chiudono con la tastiera e si chiudono con il tasto Esc.
- La lingua della pagina è dichiarata come italiano e le pagine hanno aree riconoscibili: intestazione, contenuto principale e piè di pagina.
- Se il dispositivo chiede di limitare il movimento, le animazioni di comparsa sono disattivate.
- Le ancore dell’indice del corso e del collegamento «Sono interessato» tengono conto dell’intestazione fissa, per non nascondere il titolo.
I colori del sito e i loro contrasti
Questi sono i colori con cui sono scritti i testi del sito e i rapporti di contrasto misurati. Il minimo richiesto è 4,5:1 per i testi normali e 3:1 per i testi grandi e per i contorni di focus.
| Uso | Esempio | Testo | Sfondo | Contrasto | Esito |
|---|---|---|---|---|---|
| Testo dei paragrafi | --color-text#333333 | --color-white#FFFFFF | 12,6:1 | Superato (AAA) | |
| Testo dei paragrafi su sezioni grigio-azzurre | --color-text#333333 | --color-surface-alt#EEF3F7 | 11,3:1 | Superato (AAA) | |
| Testo attenuato (descrizioni) | --color-text-muted#666666 | --color-white#FFFFFF | 5,7:1 | Superato (AA) | |
| Testo secondario (note, etichette) | --color-text-subtle#6B6B6B | --color-white#FFFFFF | 5,3:1 | Superato (AA) | |
| Testo secondario su sezioni grigio-azzurre | --color-text-subtle#6B6B6B | --color-surface-alt#EEF3F7 | 4,8:1 | Superato (AA) | |
| Link | --color-link#215D9E | --color-white#FFFFFF | 6,7:1 | Superato (AA) | |
| Titoli e testi navy | --color-navy#194B80 | --color-white#FFFFFF | 8,9:1 | Superato (AAA) | |
| Testo su fondo navy (barre, badge, menu) | --color-white#FFFFFF | --color-navy#194B80 | 8,9:1 | Superato (AAA) | |
| Testo su fondo blu scuro (footer, sezioni scure) | --color-white#FFFFFF | --color-dark-navy#12385F | 12,0:1 | Superato (AAA) | |
| Testo arancio su fondo chiaro | --color-accent-text#A85000 | --color-white#FFFFFF | 5,5:1 | Superato (AA) | |
| Testo arancio sui riquadri color crema | --color-accent-text#A85000 | --color-accent-soft#FFF2E5 | 5,0:1 | Superato (AA) | |
| Testo arancio nell'hero della home | --color-accent#F68A26 | --color-dark-navy#12385F | 4,9:1 | Superato (AA) | |
| Contorno di focus su fondo chiaro | --color-focus#215D9E | --color-white#FFFFFF | 6,7:1 | Superato (soglia 3:1) | |
| Contorno di focus su fondo scuro | --color-focus-on-dark#FFFFFF | --color-dark-navy#12385F | 12,0:1 | Superato (soglia 3:1) | |
| Testo bianco sui pulsanti arancio | --color-white#FFFFFF | --color-accent#F68A26 | 2,5:1 | Eccezione | |
| Parola evidenziata nei titoli | --color-accent#F68A26 | --color-surface-alt#EEF3F7 | 2,2:1 | Eccezione (vedi sotto) | |
| Categoria sulle card del blog | --color-accent-dark#D96D0E | --color-white#FFFFFF | 3,4:1 | Eccezione (vedi sotto) |
I contorni di focus sono blu su sfondo chiaro e bianchi su sfondo scuro, mai arancio: l’arancio non raggiunge il contrasto minimo di 3:1 per gli indicatori.
Eccezioni e limiti noti
- Testo bianco sui pulsanti arancio: il contrasto è circa 2,5:1, inferiore al minimo di 4,5:1. È una scelta consapevole per mantenere il colore del marchio EduBP; ogni pulsante ha comunque il contorno di focus visibile.
- Parola evidenziata nei titoli delle pagine istituzionali: arancio #F68A26 su fondo grigio-azzurro, contrasto circa 2,2:1 (il minimo per i testi grandi è 3:1). È una scelta consapevole per mantenere il colore del marchio EduBP.
- Categoria sulle card degli articoli del blog: arancio scuro #D96D0E su bianco, contrasto circa 3,4:1 (il minimo per i testi piccoli è 4,5:1). È una scelta consapevole per mantenere il colore del marchio EduBP; la stessa categoria è sempre indicata anche nella pagina dell’articolo.
- Alcune pagine con molti elementi (per esempio il calendario) sono lunghe: usa il link “Salta al contenuto” e l’indice dei mesi.
- Le verifiche sono state fatte con strumenti automatici (axe-core, Lighthouse) e con prove da tastiera; non è stata ancora eseguita una valutazione formale con persone che usano tecnologie assistive.
Come segnalare un problema
Se trovi una barriera o hai bisogno di un contenuto in un altro formato, scrivici a info@edubp.it oppure chiama il 06 9785 9222.