Listelerde Renk ve İkon: Hangi Gösterge Neyi Yapar
Bir listedeki otuz satır birbirine benziyorsa kullanıcı aradığını satır satır okuyarak bulur, bu da yavaştır. Renk ve ikon bu taramayı kısaltır ama ikisi aynı işi yapmaz: biri gözü doğru yere çeker, diğeri orada ne olduğunu söyler. Hangisinin nerede gerektiği, listenin kaç farklı durum taşıdığına bağlı.
Renk yerini gösterir, ikon anlamını verir
Renk ön dikkat düzeyinde işlenir. Kullanıcı listeye bakar bakmaz kırmızı satırların ekranın neresinde olduğunu, hiçbirini okumadan görür. Ne anlama geldiğini ise bilmez; kırmızı hata da olabilir, indirim de, silinmiş kayıt da. İkon tersi yönde çalışır: fark edilmesi renkten yavaştır, karşılığı daha nettir. Hisse tablosundaki yukarı ok tek başına bir şey söyler, kırmızı dolgu söylemez.
Bu yüzden ikisi birbirinin alternatifi değil, sıralı iki adımdır. Renk gözü konuma taşır, ikon o konumdaki kaydı açıklar. Tek birini seçmek zorundaysanız ikonu seçin.
Gösterge sayısı listeden hızlı büyür
"Her duruma benzersiz bir ikon ve renk atayın" tavsiyesi beş altı durumda çalışır, on beşte çöker. Sorun şurada: göstergenin sezgisel olması isteniyor, ama sezgisel ikon havuzu küçüktür. Onay, uyarı, hata, kilit, favori. Sekizinci durum için sezgisel bir sembol yoktur, uydurursunuz, uydurduğunuz anda kullanıcıya öğretmeniz gerekir ve öğrenilmesi gereken gösterge legend'a dönüp bakmakla aynı maliyettedir.
Renkte durum daha da sert. Beş renk kullanıcının ayırt etmesi gereken 10 çift üretir, sekiz renk 28 çift. Dörtten fazla renk kodu kullanmayın; geri kalan durumları metin etiketine indirin. Liste uzadıkça göstergeyi çoğaltmak değil, hangi durumun gerçekten göze çarpması gerektiğine karar vermek gerekir.
Renk tek başına bilgi taşıyamaz
WCAG'ın 1.4.1 Use of Color ölçütü bunu bir tercih olarak değil şart olarak koyar: rengi bilginin tek taşıyıcısı yapamazsınız. Kırmızı ile yeşil arasındaki fark en yaygın renk körlüğü türünde kaybolur, yani "yeşil satırlar tamamlandı" bilgisi o kullanıcı için hiç yoktur.
Kontrolü yapmanın en hızlı yolu ekran görüntüsünü gri tonlamaya çevirmek. Satırlar hâlâ birbirinden ayrılıyorsa tasarım ayakta demektir, ayrılmıyorsa ikinci kanal eksiktir. İkon, şekil farkı ya da kısa bir metin etiketi bu boşluğu kapatır.
Uygulamada ne oluyor
İkon setini sayfaya tek bir SVG sprite ya da inline sembol tanımıyla verin, satır başına ayrı istek açan çözümlere gerek yok (ikonların sayfayı yavaşlattığı iddiasını da ölçmeden kabul etmiyorum, bin satırlık tabloda darboğaz genelde başka yerdedir).
Asıl dikkat edilecek nokta ekran okuyucu tarafı. Dekoratif ikona aria-hidden="true" verin. Durum bildiren ikonun yanına görsel olarak gizlenmiş bir metin koyun ki satır "ödeme bekliyor" diye okunsun. CSS background image olarak basılan ikonun alt metni yoktur, orada gizli metin tek seçenektir. Göstergeyi yalnızca gözle çalışacak şekilde kurarsanız listenin yarısı kullanıcıya ulaşmaz.