Poniższy kod styli CSS, pozwoli na ustawienie fokusu, który spełnia zasady dostępności strony internetowych.
Aby kod zadziałał poprawnie należy usunąć aktualne wartości :fokus oraz button:fokus, a:fokus a następnie dodać poniższe style:
/* Styl dla elementów w fokusie */
:focus {
outline: 3px solid #FF0000; /* Czerwone obramowanie o grubości 3px */
outline-offset: 2px; /* Dodatkowy odstęp między obramowaniem a elementem */
}
/* Dodatkowe style dla przycisków i linków, które mogą być w fokusie */
button:focus, a:focus {
background-color: #FFFF00; /* Żółte tło */
color: #000000; /* Czarny tekst */
}
Przykład działania
