Özet - Erişilebilir tema
Erişilebilir tema kurallarıyla tam erişilebilir tema kurarsın.
Erişilebilir temanın parçaları
Bu grupta erişilebilir CSS'in dört temel taşını öğrendin: sr-only ile görselden gizleme, :focus-visible ile klavye odak çerçevesi, prefers-color-scheme ile koyu tema ve prefers-reduced-motion ile hareket azaltma. Her biri farklı bir kullanıcı tercihini ya da ihtiyacını karşılar.
Şimdi bunları tek bir erişilebilir temada birleştireceksin: gizli ama okunan etiketler, net odak çerçevesi, sistem temasına uyan renkler ve hareketi azaltan blok.
Uygulama Sr-only sınıfı ve odak çerçevesi
İki bölüm yaz. Birincide .sr-only seçicisi için position: absolute, width: 1px, height: 1px ve overflow: hidden bildirimlerini tanımla. İkincide a:focus-visible seçicisi için outline: 2px solid #ffba00 bildirimini tanımla.
Örnek çözümü göster
/* erişilebilir temanın temel taşları */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
}
a:focus-visible {
outline: 2px solid #ffba00;
}Uygulama Sistem tercihlerine uyan tema
İki @media bloğu yaz. Birincisi (prefers-color-scheme: dark) olsun, içinde :root için --bg: #111 tanımla. İkincisi (prefers-reduced-motion: reduce) olsun, içinde * için animation: none tanımla.
Örnek çözümü göster
/* sistem tercihlerine uyan tema */
@media (prefers-color-scheme: dark) {
:root {
--bg: #111;
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none;
}
}Kendini test et
-
Erişilebilir bir tema için hangisi yanlış bir uygulama?
- Sr-only ile simge düğmelerine gizli metin eklemek
- outline: none yazıp yerine hiçbir şey koymamak
- prefers-color-scheme ile koyu tema sunmak
- prefers-reduced-motion ile animasyonu azaltmak
Cevabı göster
outline: none yazıp yerine hiçbir şey koymamak — Doğru. outline: none klavye kullanıcısını yalnız bırakır; yerine :focus-visible çerçevesi gerekir.
-
Düğme odak çerçevesini yaz
button:focus-visible { ____; outline-offset: 2px; }Cevabı göster
button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }