Kullanıcı tercihi ve token sistemi ile başlayın
Varsayılan olarak prefers-color-scheme ile sistem ayarını kullanın. Bir anahtar sunuyorsanız, erişilebilir bir ada sahip ve klavyeyle kullanılabilir bir kontrol kullanın ve etkin seçimi programatik olarak açığa çıkarın. Manuel seçime o tarayıcı bağlamında öncelik verin; birinin seçiminden diğer cihaza veya gizli oturuma taşınacağına söz vermeyin.
Renkleri görünüme göre değil role göre adlandırın: canvas, surface, text, muted text, border, link, accent, error, success, focus ve disabled. Her rolü her iki temada da eşleyin. Bu, yalnızca aydınlık için tanımlanmış bir gri rengin karanlık moda sızmasını engeller ve düzeltmeleri yeniden kullanılabilir kılar. Karanlık mod doğası gereği daha erişilebilir veya herkes tarafından tercih edilen değildir; kullanılabilir hale getirilecek başka bir deneyimdir.
Kaydedilmiş seçim ilk, sistem tercihi ikinci gibi bir sıra belgeleyin; böylece ekipler aynı sonucu test eder.
Sadece varsayılanlar değil; hover, focus, selected, invalid, disabled, loading, empty ve visited-link durumlarını da dahil edin.
Render edilmiş temada kontrastı ölçün
WCAG 2.2 Success Criterion 1.4.3, normal metin ve metin resimleri için en az 4.5:1 ve büyük metin için 3:1 sınırı koyar. Yuvarlama yapmayın: 4.499:1, 4.5:1'e uymaz. İnce yazı tipleri hesaplanan renginden daha zayıf görünebilir; bu yüzden daha sağlam bir yüz veya ekstra marjin kullanın.
Her render edilmiş ön planı ve bitişik arka planı kontrol edin. Metin fotoğraflar, degradeler, yarı saydam paneller veya video üzerinde ise arka plan değişken olduğu için tek bir token hesaplaması okunabilirliği kanıtlayamaz. Opak bir zemin, yeterli bir kaplama veya farklı bir yerleşim kullanın, sonra gerçekçi görünüm boyutlarında inceleyin.
WCAG 2.1 Success Criterion 1.4.11 uyarınca, aktif bir kontrolü, zorunlu durumu veya anlamlı grafiği tanımlamak için gereken görsel bilgi, bitişik renklere karşı 3:1 olması gerekir.
Renk değişikliklerini metin, ikon, desen, konum veya başka açık bir işaretle eşleştirin; hata ve seçili durumlar ince bir tona bağlı olmamalıdır.
Klavye odaklanmasını, formları ve durum değişikliklerini koruyun
Her iki temada da Tab ile gezin. Linklerde, düğmelerde, inputlarda, menülerde, dialoglarda, özel widget'larda ve tema kontrolünde odak görünür olmalıdır. Tarayıcı outline'ını kaldırmayın; bunun yerine her yüzey ve durumda test edilmiş bir ikame kullanın. Ofset bir outline genellikle karışan bir parlamadan daha nettir.
WCAG 2.2 Focus Appearance bir AAA kriteridir; AA uyumu kanıtlamaz. Ancak hedef olarak faydalıdır: en az 2 CSS-pixel çevresi büyüklüğünde bir gösterge alanı ve odaklanan ile odaklanmayan pikseller arasında 3:1 kontrast. Ayrıca hata, zorunlu, seçili ve kullanılamaz durumların anlamını koruduğunu doğrulayın.
Giriş ipucu, girilen değer, etiket, yardım metni, hata metni, geçersiz kenarlık, onay kutusu işareti, radyo seçimi ve gönderme durumunu ayrı ayrı test edin.
Ödeme veya düzenlenen başka bir akış için sağlayıcı sandbox'ı kullanın ve uygun olduğunda nitelikli erişilebilirlik ve güvenlik incelemesi alın. Bu eğitimsel rehberliktir; uyumluluk veya güvenlik değerlendirmesi değildir.
Görselleri, gömülü varlıkları ve tarayıcı sağladığı UI'ı yönetin
Logoları, illüstrasyonları, ekran görüntülerini, grafikler, ikonlar ve görüntü içine gömülü metni her iki temada da inceleyin. Yeniden kullanılan aydınlık logo kaybolabilir ve bir grafik lejantı başarısız olabilir; çevreleyen HTML geçse bile. Amaçla uyumlu bir varlık veya stabil arka plan sağlayın. Talimat, durum veya veri ileten görseller anlaşılır kalmalıdır.
Hem aydınlık hem karanlık şemaları desteklediğinizi beyan edin, ardından seçili tema için sayfa içeriğini stilize edin. color-scheme özelliği tarayıcı canvas'ını, kaydırma çubuklarını, form kontrollerini ve diğer tarayıcı UI öğelerini hizalar. İlgili metadata'yı belgenin başına yerleştirin. Gömülü SVG üst tema ile yanıt verebilir; üçüncü taraf iframe'leri ve widget'ları uçtan uca test edin.
Anlamsal HTML kontrollerini tercih edin. Forced-color davranışı yerel semantik kullanır; generic bir elemana eklenen ARIA rolü değil.
İndirilen, önbelleğe alınmış, yavaş yüklenen ve başarısız görüntü durumlarını inceleyin; özellikle metin veya işlem ipuçları medyanın üzerinde bulunduğunda.
Forced colors'a saygı gösterin ve sürümü bir sistem olarak test edin
Forced-colors modu, Windows High Contrast gibi kullanıcı tarafından seçilmiş sınırlı bir palet uygular. Tarayıcılar renkleri değiştirebilir, gölgeleri kaldırabilir ve metne arka plan plakası ekleyebilir. Geçersiz kılmayı engellemeyin. Bir bileşen sınırını veya anlamını kaybettiğinde hedefe yönelik düzeltmeler yapın; örneğin gölgeyi taşıyan affordance yerine gerçek bir kenarlık ekleyin. Emülasyon her cihazı, tarayıcıyı, eklentiyi, zoom düzeyini veya yardımcı teknoloji kombinasyonunu temsil edemez.
Yayımdan önce rota ve etkileşim matrisini aydınlık, karanlık ve forced-colors ayarlarında çalıştırın. Chrome DevTools her iki durumu da taklit edebilir; incelemeyi hızlandırmak için bunu kullanın, ardından öncelikli akışlarda manuel olarak gezin. Tarayıcı tarayıcıları adayları bulur ama erişilebilirliği tek başına belirleyemez. SIU preflights kritik tema varlıklarını ve etkileşimleri kontrol eder, bir sürüm geçidi kaydeder ve ciddi sunum gerilemeleri için test edilmiş bir geri alma yolu tutar; bu, kesinti (downtime) izlemesi değildir.
Landing, navigasyon, arama, hesap erişimi, formlar, hata sayfaları, kimlikli ekranlar ve materyal dönüşüm akışlarını dahil edin.
Test edilmiş URL'leri, tarayıcı sürümlerini, ayarları, istisnaları, sahibi ve geri alma tetikleyicisini kaydedin ki düzeltme gerçeklerden başlasın.