Erişilebilirlik Testi: color-contrast ve focus

CSS; renk karşıtlığını, odak göstergesinin görünürlüğünü, element görünürlüğünü (display:none, erişilebilirlik ağacından kaldırır) ve okuma sırasını (flexbox order ile görsel yeniden sıralama ile DOM sırası arasındaki fark) denetler. CSS tercihleri, engelli kullanıcıların arayüzü kullanıp kullanamayacağını doğrudan etkiler.

WCAG 2.1 AA, normal metin için 4.5:1 ve büyük metin için 3:1 karşıtlık oranı gerektirir (18px ve üzeri kalın veya 24px ve üzeri normal metin). AAA sırasıyla 7:1 ve 4.5:1 oranlarını gerektirir. Bu oranlar, ön plan metin renginin parlaklığını arka plan renginin parlaklığıyla karşılaştırır.

DevTools → Stiller panelinde herhangi bir metin elementine tıklayın. Renk örneği, bir karşıtlık oranı rozeti gösterir. Onay işareti geçildiğini, X ise başarısız olduğunu belirtir. Renk seçici, renk geçişi üzerinde AA/AAA eşik çizgilerini gösterir.

axe-core, Lighthouse ve Pa11y, tüm metin elementlerindeki karşıtlık oranlarını otomatik olarak denetler. Geliştirme sırasında tarayıcı konsolunda gerçek zamanlı karşıtlık uyarıları almak için axe-core'u geliştirme ortamında @axe-core/react ile çalıştırın.

:focus üzerinde CSS outline: none veya outline: 0 kullanmak, tarayıcının varsayılan odak halkasını kaldırarak klavye gezinmesini görünmez hâle getirir. Bu, kritik bir erişilebilirlik başarısızlığıdır. Odak göstergelerini tamamen kaldırmak yerine görünür, özel bir odak stiliyle değiştirin.

:focus, fare tıklamaları da dâhil olmak üzere tüm odaklanma olaylarına uygulanır; bu da tıklama sırasında tasarımcıların hoşlanmadığı görünür bir halka oluşturur. :focus-visible ise yalnızca tarayıcı klavye gezinmesinin kullanıldığını belirlediğinde uygulanır; böylece klavye kullanıcılarına odak halkası gösterilirken fare tıklamalarında gösterilmez.

WCAG 2.2, Başarı Ölçütü 2.4.11'i (Odak Görünümü AA) getirir: odak göstergeleri bitişik renklere karşı en az 3:1 karşıtlığa sahip olmalı ve bileşenin çevresini kapsamalıdır. Özel odak stilleri yalnızca mevcut olmakla kalmamalı, bu gereksinimleri de karşılamalıdır.

Windows Yüksek Karşıtlık Modu, CSS renklerini kullanıcı tarafından tanımlanan sistem renkleriyle geçersiz kılar. Yüksek karşıtlık modunda çalışan alternatif stiller sağlamak için @media (forced-colors: active) kullanın. Windows Ayarları → Erişilebilirlik → Yüksek Karşıtlık yolunu izleyerek sınayın.

WCAG 1.4.1, bilgiyi aktarmanın tek yolu olarak rengin kullanılmasını yasaklar. Yalnızca kırmızıya dönen bir hata durumu bu ölçütü karşılamaz. Rengi simgeler, metin etiketleri, desenler veya alt çizgilerle birleştirerek renk dışı bilginin her zaman mevcut olmasını sağlayın.

WCAG 1.4.4, içeriğin kaybolmaması koşuluyla metnin %200'e kadar yeniden boyutlandırılabilmesini gerektirir. WCAG 1.4.12, metin aralığı geçersiz kılmalarının (artırılmış letter-spacing ve line-height) düzeni bozmamasını gerektirir. Her iki gereksinimi desteklemek için tipografide göreli birimler (rem, em) kullanın.

Kapsamlı CSS erişilebilirlik sınaması için geliştirme sırasında axe DevTools tarayıcı uzantısını, otomatik işlem hattı denetimleri için Lighthouse CI'yi, komut satırı sayfa denetimleri için Pa11y'yi ve odak göstergelerinin görünürlüğünü ve sırasını doğrulamak için Tab/Shift+Tab ile elle klavye gezinmesi sınamasını kullanın.

Bir elementin :focus durumu için outline: none neden hiçbir zaman son CSS olmamalıdır?

CSS erişilebilirlik sınaması; renk karşıtlığı oranlarını (en az 4.5:1 AA), :focus-visible kullanılarak görünür ve WCAG 2.2 ile uyumlu odak göstergelerini, bilgiyi aktarmanın tek yolu olarak renkten kaçınmayı, zorunlu renkler modu desteğini ve yeniden boyutlandırma uyumluluğu için göreli tipografi birimlerini kapsar. Otomatik araçlar ile elle yapılan klavye sınaması, kapsamlı bir denetim sağlar.