Focus-visible
:focus-visible ile erişilebilir odak stillerini öğrenirsin.
:focus-visible nedir?
CSS'te :focus sözde sınıfı bir öğe odaklandığında devreye girer; fare tıklamasında da klavyeyle gelişte de. :focus-visible ise yalnızca klavye veya başka bir yardımcı teknolojiyle odaklanıldığında devreye girer; fare tıklamasında çoğu zaman görünmez.
Bu, fare kullananları çirkin odak halkalarından kurtarmak için tasarlanmıştır. Klavye kullananlar ise hâlâ net bir odak çerçevesi görür; erişilebilirlik korunur.
outline: none tuzağı
Bazı tasarımlar outline: none yazarak varsayılan odak çerçevesini kaldırır. Bu, klavye kullananlar için bir felakettir: odakların nerede olduğunu göremezler. Çözüm, varsayılanı kaldırmak değil, :focus-visible ile açık ve kontrastlı bir çerçeve vermektir.
Örnek: :focus-visible { outline: 3px solid #ffba00; outline-offset: 2px; }. Çerçeve kalın, kontrastlı ve öğeden biraz dışarıda durur; görme zorluğu olanlar da rahatça görür.
Uygulama a:focus-visible için çerçeve tanımla
a:focus-visible seçicisi için bir bildirim bloğu yaz. İçinde outline: 3px solid #ffba00 ve outline-offset: 2px bildirimleri bulunsun.
Örnek çözümü göster
/* odak çerçevesini tanımla */
a:focus-visible {
outline: 3px solid #ffba00;
outline-offset: 2px;
}Kendini test et
-
:focus-visible hangi durumda :focus'tan farklı davranır?
- Hiçbir zaman, ikisi de aynıdır
- Klavyeyle odakta görünür, fare tıklamasında çoğu zaman görünmez
- Yalnızca fare tıklamasında görünür, klavyede değil
- Yalnızca dokunmatik ekranlarda görünür
Cevabı göster
Klavyeyle odakta görünür, fare tıklamasında çoğu zaman görünmez — Doğru. :focus-visible klavyeyle odakta görünür; fare tıklamasında çoğu zaman görünmez.
-
Odak çerçevesi bildirimini yaz
a:focus-visible { ____; outline-offset: 2px; }Cevabı göster
a:focus-visible { outline: 3px solid #ffba00; outline-offset: 2px; } -
Odak sözde sınıflarını eşle
- :focus
- Her odak türü
- :focus-visible
- Yalnız klavye odak
- :focus-within
- Kendinde ya da çocuğunda odak
- outline: none
- Odak çerçevesini kaldır