Ö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;
}

Sıradaki ders: @page kuralı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler