Dokunma hedefi boyutu.
WCAG 2.2, dokunma hedeflerinin AA seviyesinde en az 24×24 CSS pikseli, AAA seviyesinde en az 44×44 CSS pikseli olmasını ister.
Dokunma hedefi boyutu, WCAG 2.2'nin getirdiği en somut sayısal kurallardan biri ve mobil arayüzlerde en sık kırılan maddelerden. Kural basit görünür — hedefi büyüt — ama uygulamada iki nokta karıştırılır: hangi seviyenin hangi sayıyı istediği, ve hangi durumların istisna kapsamında olduğu. İkisini de karıştırmak, gereksiz iş yapmaya ya da gerçek bir ihlali gözden kaçırmaya yol açar.
İki ölçüt, iki sayı
Kafa karışıklığının kaynağı, iki ayrı ölçütün iki ayrı sayı istemesi. 2.5.5 «Hedef Boyutu (Gelişmiş)» WCAG 2.1'den beri var ve 44×44 CSS pikseli istiyor, ama AAA seviyesinde. 2.5.8 «Hedef Boyutu (Minimum)» ise WCAG 2.2 ile geldi, AA seviyesinde ve 24×24 istiyor. Yani AA'ya uymak için 24 yeterlidir; 44 hedeflemek AAA'yı da toplar.
Pratikte çoğu tasarım rehberi 44 piksel civarında bir değer önerir ve bunun sebebi WCAG değil, ergonomidir: yetişkin bir parmak ucunun ekranla temas alanı yaklaşık o boyuttadır. Yani 24, uyumluluk için bir taban; 44, gerçek parmaklarla iyi çalışan bir hedef. İkisi çelişmez — biri asgari yasal eşik, diğeri kullanılabilirlik hedefidir.
Bu sitede hedef ≥44 piksel olarak alındı ve doğrulama süiti her dokunulabilir öğeyi ölçüyor. Karar bir uyumluluk kararı değil bir kullanılabilirlik kararıydı — ama yan ürün olarak AAA seviyesindeki 2.5.5'i de karşılıyor. Erişilebilirlik kalemlerinin çoğunda bu böyledir: doğru yapılan tasarım kararı, ölçütü kendiliğinden getirir.
İstisnalar: her küçük hedef ihlal değil
2.5.8'in istisna listesi, kuralı gerçekçi kılan şeydir ve bilinmediğinde gereksiz iş yapılır. Beş durumda küçük hedef meşrudur ve düzeltilmesi gerekmez.
- Aralık (spacing) — hedef küçük olsa da, çevresinde 24×24'lük bir daire başka hedefe değmiyorsa uyumludur. Yani ikonlar arasına boşluk koymak, ikonları büyütmekle aynı sonucu verir.
- Satır içi (inline) — bir metin bloğunun içindeki bağlantı istisnadır. Cümle içindeki bir bağlantıyı 24 piksel yüksekliğe çıkarmak metni bozardı.
- Eşdeğer alternatif — aynı işlevi yapan, aynı sayfada bulunan ve yeterince büyük başka bir hedef varsa küçük olan uyumludur.
- Tarayıcı denetimi — boyutu tarayıcı belirliyorsa ve yazar değiştirmemişse istisna kapsamındadır.
- Temel (essential) — hedefin küçük olması bilginin kendisi için zorunluysa. Haritadaki bir konum işareti ya da metin editöründeki bir imleç konumu gibi.
Aralık istisnası pratikte en kullanışlı olanıdır çünkü tasarıma en az müdahale eder. Bir araç çubuğundaki 20 piksellik ikonları 24'e büyütmek düzeni bozabilir; aralarına birkaç piksel boşluk koymak ise genelde bozmaz ve ölçütü karşılar. Ölçülen şey ikonun kendisi değil, etrafındaki dokunulabilir alandır.
Temel istisnası ise en çok suistimal edilenidir. «Tasarımımız böyle gerektiriyor» bir temel gerekçe değildir; temel gerekçe, hedefin büyütülmesinin bilgiyi bozacağı durumlardır. Harita üzerindeki iğneler gerçekten temeldir çünkü konumu temsil ederler; bir menüdeki küçük ikonlar değildir.
Ölçülen şey görsel boyut değil
En sık yapılan ölçüm hatası, ikonun kendisini ölçmektir. Ölçüt, DOKUNULABİLİR alanı konu alır — yani öğenin tıklama olayını yakalayan kutusunu. 16 piksellik bir ikon, etrafında dolgu (padding) varsa 44 piksellik bir hedef olabilir; ikon küçüktür ama hedef büyüktür ve ölçüt karşılanır.
Bunun tersi de doğrudur ve daha tehlikelidir: görsel olarak büyük duran bir düğme, tıklama olayı yalnız içindeki metne bağlıysa gerçekte küçük bir hedeftir. Kullanıcı düğmenin kenarına dokunur, hiçbir şey olmaz, ve neden olmadığını anlamaz. Bu kusur tarayıcı denetçisinde öğe kutusuna bakılarak kolayca yakalanır.
Ölçüm birimi de karıştırılır: kural CSS pikseli üzerinden konuşur, cihaz pikseli üzerinden değil. Yüksek yoğunluklu bir ekranda 24 CSS pikseli fiziksel olarak çok daha fazla cihaz pikselidir; ölçüm yaparken tarayıcının bildirdiği CSS boyutuna bakılmalıdır. Ekran görüntüsü üzerinden piksel saymak yanıltır.
Ölçülen şey ikonun boyutu değil, parmağın dokunabildiği alandır.
Nerede kırılıyor
Gerçek sitelerde bu ölçüt birkaç tipik yerde tekrar tekrar kırılıyor ve hepsi mobil düzenle ilgili. Masaüstünde yeterince büyük olan hedefler, mobilde daraltılan bir ızgarada eşiğin altına düşüyor ve bunu kimse fark etmiyor çünkü test masaüstünde yapılıyor.
- Kapatma (×) düğmeleri — katmanların ve bildirimlerin köşesindeki küçük çarpılar. En sık kırılan kalıp.
- Sosyal medya ikon sıraları — alt bilgide yan yana dizilmiş küçük ikonlar; hem küçük hem de birbirine yakın.
- Sayfalama numaraları — dar ekranda daralan sayfa numaraları.
- Tablo içindeki eylem ikonları — sil, düzenle, indir. Satır yüksekliği daraldıkça küçülürler.
- Onay kutusu ve radyo düğmeleri — özel stillenmiş olanlar sıklıkla 16–18 piksele düşer; etiketin de tıklanabilir olması bunu çözer.
- Dil değiştirici — iki harfli kısaltmalar (TR, EN, DE) doğal olarak küçük hedefler üretir.
Son madde bu sitede özellikle dikkat edilen bir kalemdi çünkü site üç dilli ve dil değiştirici her sayfada duruyor. İki harflik bir etiketi 44 piksellik bir hedefe çevirmek, görsel olarak büyütmeden dolgu ile yapıldı — ve süit bunu her koşumda ölçüyor, mobil kırılımda da.
Genel kural olarak: mobil kırılımda tüm dokunulabilir öğeleri bir kez taramak, bu ölçütün kusurlarının neredeyse tamamını yakalar. Tarama, tarayıcı denetçisinde öğe kutularına bakarak yapılır — göz kararıyla değil, bildirilen boyutla.
Masaüstünde de geçerli
Ölçütün adı «dokunma hedefi» olarak anılsa da WCAG metni yalnız dokunmatik ekranlardan bahsetmez; işaretleme girdisinin tamamını kapsar. Bu, masaüstü arayüzlerinde de geçerli olduğu anlamına gelir ve orada gerekçe farklıdır: parmak kalınlığı değil, işaretleme hassasiyeti. Titremesi olan, kol hareketleri sınırlı olan ya da kafa/göz takibi kullanan bir kullanıcı için küçük bir hedefi fareyle vurmak, dokunmatikte olduğu kadar zordur.
Bu nedenle masaüstü tasarımında da küçük hedefler bir kusurdur ve orada en sık kırılan yer tablolar ile araç çubuklarıdır. Satır yüksekliği sıkıştırıldıkça satır sonundaki düzenle ve sil ikonları küçülür; on altı piksellik bir çöp kutusu ikonu görsel olarak zarif durur ama vurulması zordur — ve yanlış vurulduğunda sonucu geri alınamaz bir işlem olabilir.
Pratik bir kural: hedefin boyutu, yanlış vurmanın sonucuyla ters orantılı olmalıdır. Bir bağlantıyı ıskalamak zararsızdır, kullanıcı tekrar dener. Bir silme düğmesini yanlışlıkla vurmak veri kaybettirir. Yıkıcı işlemlerin hedefi hem büyük hem de komşularından uzak olmalıdır — ölçütün asgarisi orada taban değil, başlangıç noktasıdır.
Nasıl ölçülür
Ölçüm tarayıcı denetçisinde yapılır ve göz kararı kesinlikle yeterli değildir. Öğe seçildiğinde denetçi kutu modelini gösterir; bakılacak değer, dolgu dahil toplam genişlik ve yüksekliktir. İkonun kendi boyutu değil, olay yakalayan kutunun boyutu ölçülür.
- Tarayıcı denetçisini aç, dokunulabilir öğeyi seç ve kutu modelindeki toplam boyuta bak. 24×24'ün altındaysa istisna kapsamında mı diye kontrol et.
- Mobil kırılımı ayrı ölç — masaüstünde yeterli olan hedefler dar ekranda daralabilir. Test masaüstünde yapılırsa kusur görünmez.
- Aralığı da ölç — hedef küçükse, çevresindeki boşluk 24×24'lük bir daireyi komşu hedefe değdirmeden barındırıyor mu?
- Otomatikleştir — dokunulabilir öğeleri tarayıp boyutlarını raporlayan kısa bir betik, elle taramanın yerini alır ve her dağıtımda koşar.
Son madde bu sitede uygulanan yaklaşımdır. Süit dokunulabilir öğeleri hem masaüstü hem mobil kırılımda ölçüyor ve 44 pikselin altına düşen bir hedef çıkarsa kırmızı veriyor. Bir kez elle ölçüp geçmek, bir sonraki bileşende sessizce bozulur; nöbetçi bozulmayı dağıtım anında görünür kılar.