Metin dışı kontrast: görünmeyen buton problemi.

WCAG 1.4.11, arayüz bileşenlerinin ve anlam taşıyan grafiklerin çevresine karşı en az 3:1 kontrast taşımasını ister — ve bu, metin kontrastından tamamen ayrı bir ölçümdür.

Erişilebilirlik denetimlerinde en sık gözden kaçan madde budur, ve gözden kaçmasının sebebi teknik olarak ilginçtir: yaygın otomatik araçların çoğu bu ölçütü hiç sınamaz. Sınamadıkları için raporda görünmez; raporda görünmediği için ekip sorunu bilmez; ve skor yüksek olduğu için kimse aramaz.

Bu sayfa önce ölçütün ne dediğini anlatır, sonra bu sitede yaşanmış somut bir vakayı — çünkü soyut anlatım bu maddede işe yaramıyor.

Ölçüt ne diyor

1.4.11 «Metin Dışı Kontrast», AA seviyesindedir ve iki şeyi kapsar: kullanıcı arayüzü bileşenleri ve anlam taşıyan grafikler. İkisi için de eşik 3:1'dir.

1. 01Arayüz bileşeni — bir bileşenin ne olduğunu ve durumunu anlamak için gereken görsel bilgi. Bir metin alanının sınırı, bir onay kutusunun çerçevesi, bir açma-kapama düğmesinin gövdesi.
2. 02Anlam taşıyan grafik — bilgiyi taşıyan görsel öğeler. Bir grafikteki çizgi, bir ikonun kendisi, bir uyarı üçgeni.
3. 03Kapsam dışı — saf dekorasyon, devre dışı bileşenler, ve logolar. Bunlar için eşik yoktur.
4. 04Ölçülen şey — bileşenin METNİ değil, bileşenin SINIRI ya da gövdesi. İkisi tamamen farklı ölçümlerdir.

Son madde ölçütün özüdür ve en çok karıştırılan noktadır. Bir düğmenin üzerindeki yazı zemine karşı 18:1 ölçebilir; düğmenin kendisi sayfaya karşı 1:1 ölçüyorsa 1.4.11 ihlal edilmiştir. Yazı okunur, ama düğmenin nerede başlayıp nerede bittiği görünmez.

Neden önemli olduğu düşünüldüğünde açık: bir form alanının nerede olduğunu bilmeden içine tıklayamazsınız. Az gören bir kullanıcı için sınırın belirsizliği, alanın var olmamasıyla neredeyse aynı şeydir. Bu, estetik bir incelik değil işlevsel bir engeldir.

Bu sitede yaşanan vaka

Anlatım soyut kalmasın diye somut bir kayıt. Bu sitenin erişilebilirlik durumu bir turda şöyleydi: Lighthouse erişilebilirlik skoru 96, axe ihlali sıfır. Her ölçüyle iyi görünen bir tablo.

Aynı anda, sitenin tek dönüşüm yolu olan iletişim formundaki metin alanlarının tek görsel sınırı — ince bir alt çizgi — zemine karşı 1,29:1 ölçüyordu. Eşik 3:1. Yani alanın nerede başlayıp nerede bittiği, tam gören bir kullanıcı için bile belirsizdi.

İkinci bir kusur aynı turda çıktı: koyu bir bandın üstündeki bir düğmenin metni zemine karşı 18,15:1 ölçüyordu — kusursuz. Düğmenin KUTUSU banda karşı 1,00:1 ölçüyordu. Yani düğme, tam anlamıyla görünmezdi; yalnız üzerindeki yazı görünüyordu.

Skor yüksekti çünkü skor o soruyu sormuyordu.

Sebep kök nedene inildiğinde net: axe'ın kontrast kuralı yalnızca METNİ kendi zeminine karşı ölçer. Her iki vakada da metin kusursuzdu, dolayısıyla kural geçti. 1.4.11 farklı bir soru sorar — bileşenin sınırını konu alır — ve axe'ın hiçbir ayarı o soruyu sormuyordu.

Boşluk bir araç hatası değildi. Boşluk, aracın HANGİ SORUYU sorduğunu kontrol etmemekten doğuyordu.

Düzeltme ve nöbetçi

Form alanının sınırı 3,13:1'e çekildi. Değer bilinçli olarak eşiğin hemen üstünde tutuldu: daha koyu bir çizgi mümkündü ama formun sakin karakterini bozacaktı. Erişilebilirlik burada bir tasarım kısıtı olarak çalıştı, tasarımı ezen bir kural olarak değil.

Düğmenin kutusu da görünür hâle getirildi. Ama asıl kalıcı düzeltme ikisi de değildi: her iki ölçüm bir teste bağlandı. Süit artık canlı sayfadan gerçek piksel değerlerini okuyor ve form alanı sınırının 3:1'in üstünde kaldığını her koşumda doğruluyor.

Bu ayrım kritiktir. Bir kusuru düzeltmek onu bir kez ortadan kaldırır; bir nöbetçi eklemek geri gelmesini engeller. Erişilebilirlik düzeltmelerinin büyük kısmı sonraki dağıtımlarda sessizce geri alınır — yeni bir bileşen, yeni bir renk, yeni bir bant. Nöbetçi varsa geri alınma anında görünür.

Kendi sitenizde nasıl aranır

1.4.11 kusurlarını bulmak otomatik araçla zor, elle kolaydır. Yöntem basittir ve on dakika sürer.

1. 01Formu aç ve alanlara BAKMA — ekranı kıs, gözünü kıs ya da ekran parlaklığını düşür. Alanların nerede olduğu hâlâ görünüyor mu?
2. 02Her düğmeyi zemininden ayır — düğme kutusu ile arkasındaki zemin arasındaki kontrastı ölç. Metni değil, kutuyu.
3. 03Onay kutusu ve radyo düğmelerini kontrol et — özel stillenmiş (custom) olanlar en sık kırılanlardır; tarayıcı varsayılanları genelde uyumludur.
4. 04İkonları sınıflandır — ikon tek başına bilgi taşıyorsa (yanında metin yoksa) anlam taşıyan grafiktir ve 3:1 ister.
5. 05Grafik ve tabloları ölç — çizgi grafiğindeki her seri, arka plana ve birbirine karşı ayırt edilebilmeli.
6. 06Odak halkasını unutma — odak göstergesi de bir arayüz bileşenidir ve 3:1 ister.

Son madde özellikle sinsidir. Odak halkası varsayılan mavi bırakıldığında, koyu bir zeminde kolayca eşiğin altına düşer. Ve bu kusur yalnız klavye kullanıcısını etkiler — fareyle test eden hiç kimse görmez.

Bu maddenin genel dersi tek cümleyle özetlenebilir: erişilebilirlik denetiminde en tehlikeli durum, bir kusurun bulunmaması değil, bir kusurun ARANMAMASIDIR. Yeşil bir rapor, yalnızca sorulan soruların cevabıdır — ve hangi soruların sorulmadığını bilmek, denetimi yapanın sorumluluğudur.

Neden otomatik araçlar bu maddeyi atlıyor

Bu maddenin otomatik denetimde neredeyse hiç görünmemesinin teknik bir sebebi var ve sebebi bilmek, aracın raporuna ne kadar güvenileceğini belirlemeye yarıyor. Metin kontrastını ölçmek algoritmik olarak kolaydır: bir metin düğümü vardır, rengi bellidir, arkasındaki zemin hesaplanabilir, oran bulunur. Bileşen sınırını ölçmek ise bambaşka bir problemdir çünkü aracın önce «bu bileşenin sınırı hangisi» sorusunu cevaplaması gerekir — ve o soru görsel yargı gerektirir.

Bir metin alanının sınırı alt çizgi olabilir, dört kenarlı bir çerçeve olabilir, hafif bir gölge olabilir, ya da yalnızca zemin renginin sayfadan farklı olması olabilir. Dördü de geçerli tasarım çözümleridir ve bir aracın hangisinin «sınır» sayılacağına karar vermesi için sayfayı bir insanın gördüğü gibi görmesi gerekir. Bugünkü araçlar bunu yapamaz, dolayısıyla ölçütü ya hiç sınamaz ya da yalnız kenarlık özelliği açıkça tanımlanmış öğelerde sınar.

Sonuç olarak 1.4.11, otomatik denetimin kapsamadığı ölçütler kümesinin en pahalı üyesidir: kırıldığında gerçek bir kullanıcı engeli üretir, ama hiçbir raporda görünmez. Bu yüzden elle aranmak zorundadır ve aranmadığı sürece var olmadığı sanılır.

Kontrol listesi: sınırı olan her şey

Elle arama yaparken kapsamı hatırlamak zordur çünkü ölçüt «arayüz bileşeni» gibi soyut bir terimle konuşur. Pratikte aşağıdaki liste, gerçek sitelerde 1.4.11'in geçerli olduğu neredeyse tüm durumları kapsar ve on dakikalık bir taramayla yürünebilir.

1. 01Metin alanları ve metin kutuları — sınır ne olursa olsun (çizgi, çerçeve, zemin farkı) 3:1.
2. 02Onay kutuları ve radyo düğmeleri — özellikle özel stillenmiş olanlar; tarayıcı varsayılanları genelde uyumludur.
3. 03Açma-kapama anahtarları — hem gövde hem de açık/kapalı durumunu gösteren işaret.
4. 04Kenarlıksız (ghost) düğmeler — en sık kırılan kalıp; yalnız metinle var olan düğmenin kutusu görünmez.
5. 05Açılır liste okları ve tarih seçici ikonları — bilgi taşırlar, dekoratif değildirler.
6. 06İlerleme çubukları ve kaydırıcılar — hem yol hem de tutamak.
7. 07Grafiklerdeki seriler — her seri hem zemine hem birbirine karşı ayırt edilebilmeli; yalnız renk farkı yetmez.
8. 08Odak halkasının kendisi — o da bir arayüz bileşenidir ve 3:1 ister.

Listenin son maddesi en sinsi olanıdır ve ayrı bir yazının konusudur: odak göstergesi yalnız klavye kullanıcısını etkilediği için, fareyle test eden hiç kimse onun kontrastını fark etmez. Koyu bir zeminde varsayılan mavi halka kolayca eşiğin altına düşer ve bu kusur aylarca yaşayabilir.

Bu sayfanın anlattığı vakanın asıl dersi kontrast değeri değil, yöntemdir. Kusur bir aracın raporuyla değil, «bu araç hangi soruyu soruyor» diye sorulmasıyla bulundu. Erişilebilirlik denetiminde en tehlikeli durum kusurun bulunamaması değil, kusurun aranmamasıdır.