Accessibilità CSS: focus e contrasto
Best practice CSS per rendere i siti accessibili.
Focus visibile
/* NON rimuovere mai outline senza alternativa */
:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
}
/* Focus-visible per utenti tastiera */
:focus:not(:focus-visible) {
outline: none;
}
:focus-visible {
outline: 2px solid #007bff;
}Contrasto colori
- Testo normale: rapporto minimo 4.5:1
- Testo grande (18px+ bold): rapporto minimo 3:1
Ridurre movimento
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}