Aynı denetimde erişilebilirliğe axe-core ile baktık. Altı sayfayı iki genişlikte taradık: 1440 ve 390 piksel. İlk taramalarda 28 ile 33 arasında ihlal çıktı.
Turuncu üstünde açık renk yazı
Markanın ana rengi turuncu (#FF4A1C). WhatsApp butonu da turuncuydu ve üstünde kireç rengi (#FBF8F3) yazı vardı. Bu ikilinin kontrast oranı 3,17:1. WCAG AA, normal boyutlu metin için en az 4,5:1 istiyor; buton çizginin altında kalıyordu.
Yazıyı laciverte (#14193A) çevirdik. Oran 5,08:1'e çıktı, axe raporu temizlendi.
Raporun göremediği hata
Asıl sorun düzeltmenin kendisinden çıktı. Sitede üç buton turuncu bir bandın içinde duruyor. Orada butonun zemini, banttan ayrışsın diye ayrıca laciverte boyanmıştı. Genel kuralda yazı rengi laciverte dönünce bu üç butonda yazı ile zemin aynı renk oldu. Kutu yerindeydi, içi boş görünüyordu.
axe bunu ihlal saymadı. Yazı ile zemin aynı renkte olduğunda araç sonucu ihlal listesine değil, elle bakılması gereken "incomplete" listesine koyuyor. Ana raporda sıfır görünüyordu.
Hatayı bir ekran görüntüsü yakaladı. Turuncu zeminde duran butonlar için ayrı bir varyant yazdık: lacivert zemin, kireç rengi yazı. Bu ikilinin oranı 16,12:1.
Çıkardığımız dersler
- Otomatik kontrast testi sıfır dediğinde "incomplete" listesini de aç.
- Renk değiştiren her düzeltmeden sonra etkilenen bileşenlerin ekran görüntüsünü al. Global bir rengi değiştirmek, onu yerelde ezen her yeri de değiştirir.
- Bir kuralı !important ile ezmek yerine adı olan bir varyant tanımla. Ezilen kural değiştiğinde ezen yerin bundan haberi olmuyor.
Bugün altı sayfa, iki genişlikte sıfır ihlal veriyor. Bu sefer sonucu raporda değil, ekranda da gördük.