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
Ekspert ds. dostępności cyfrowej z 5-letnim doświadczeniem, mający na koncie ponad 500 audytów stron i aplikacji mobilnych. Jest absolwentem Akademii Morskiej w Gdyni. Poza pracą profesjonalną, jest pasjonatem sportu i psychologii, co przekłada się na jego funkcję prezesa Stowarzyszenia Aktywne Kosakowo. Jego zrozumienie technicznych i ludzkich aspektów dostępności pochodzi z połączenia wiedzy zawodowej z zainteresowaniami osobistymi.
