nautil logo czarne

Artykuły

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.