Logotyp firmy Nautil

Widoczny fokus na stronie internetowej.

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

Ilustracja przedstawia fragment strony internetowej na której strzałką wskazano działanie kodu CSS, którego celem jest ustawienie czytelnego fokusu.