Mobil Dokunma Hedefi Boyutu: Dokunma Hedefleri Ne Kadar Büyük Olmalı?

Mobil dokunma hedefleri, WCAG 2.2 Hedef Boyutu (Minimum) gerekliliğini karşılamak için genellikle en az 24 × 24 CSS pikseli olmalıdır. Daha büyük hedefler ise kullanılabilirliği artırır.

Mobil erişilebilirlikte pratik bir ölçü olarak Android’de önerilen minimum 48 × 48 dp’dir. Apple ise iOS ve iPadOS için varsayılan kontrol boyutu olarak 44 × 44 pt önerir.

Kontroller görsel olarak daha küçük olduğunda tasarımcılar, padding (iç boşluk) ile tıklanabilir alanı büyütebilir. Yan yana duran kontroller arasında yeterli boşluk bırakmak da yanlışlıkla yapılan dokunuşları azaltır.

Mobil Dokunma Hedefi Nedir?

Dokunma hedefi; buton, bağlantı, ikon veya form kontrolü gibi ekranda dokunmaya yanıt veren alandır. Bu alan, öğenin görünen boyutuyla aynı değildir. 24 dp’lik bir ikon, 48 dp’lik bir dokunma hedefinin içinde yer alabilir, çünkü padding etkileşimli alanı kullanıcının gördüğü sınırların ötesine taşır. Bu ayrım, tasarımcıların ikonları kompakt tutarken kullanıcılara güvenle dokunabilecekleri bir hedef sunmasını sağlar. Özellikle el becerisi sınırlı kişiler ve telefonu tek elle kullananlar bundan faydalanır.

Mobilde Bir Dokunma Hedefi Ne Kadar Büyük Olmalı?

Mobil dokunma hedefleri, WCAG 2.2 AA seviyesini karşılamak için en az 24 × 24 CSS pikseli olmalıdır, ancak platform yönergeleri bunun da ötesine geçer. Android 48 × 48 dp, Apple ise iOS ve iPadOS için 44 × 44 pt önerir. Bir ikon bundan küçük göründüğünde, padding tasarımı değiştirmeden dokunulabilir alanı genişletebilir. Dokunma hedefi boyutu, mobil uygulamalar için WCAG kapsamındaki temel kriterlerden biridir.

WCAG 2.2 Dokunma Hedefi Boyutu İçin Ne İster?

WCAG 2.2, AA seviyesinde 2.5.8 Hedef Boyutu (Minimum) başarı kriterini ekledi. Bu kriter, aşağıdaki istisnalardan biri geçerli olmadıkça işaretçi hedeflerinin en az 24 × 24 CSS pikseli olmasını şart koşar:

• Boşluk: Daha küçük bir hedef, merkezine yerleştirilen 24 CSS piksellik bir daire başka bir hedefle veya başka bir hedefin dairesiyle kesişmiyorsa kriteri karşılar.
• Eşdeğer: Aynı işlev, boyut gerekliliğini karşılayan başka bir kontrolle de yapılabiliyorsa.
• Satır içi: Hedef, paragraf içindeki bir bağlantı gibi bir cümlenin veya metin bloğunun içinde yer alıyorsa.
• Kullanıcı aracısı kontrolü: Boyutu içerik üreticisi değil, tarayıcı veya işletim sistemi belirliyorsa.
• Zorunlu: Belirli bir boyut, haritadaki konum işaretleri gibi bilginin kendisi için zorunluysa.

WCAG 2.1, AAA seviyesinde 44 × 44 CSS pikseli gerektiren daha sıkı bir kriter olan 2.5.5 Hedef Boyutu (Gelişmiş) kriterini getirmişti. ABD’deki ADA Title II ve AB’deki mevcut EN 301 549 gibi birçok düzenlemenin hâlâ 2.5.8'i içermeyen WCAG 2.1'i referans aldığını unutmayın. Avrupa’ya ürün veya hizmet sunan Türk şirketleri için EN 301 549 özellikle önemlidir. Türkiye’deki güncel düzenlemeler için Cumhurbaşkanlığı Erişilebilirlik Genelgesi sayfamıza göz atabilirsiniz. Yine de düzenlemeler WCAG 2.2'ye doğru ilerlediği için bu kriteri karşılamak en güvenli yoldur.

CSS Pikseli, dp, pt ve Fiziksel Ölçüler Nasıl Karşılaştırılır?

Dokunma hedefi yönergeleri platforma göre farklı birimler kullanır, ancak bu birimler telefon ekranında benzer boyutları ifade eder. CSS pikseli, Android dp ve iOS point, cihazdan bağımsız birimlerdir. Mobilde bu birimlerin her biri yaklaşık aynı boyuttadır. Bu sayede WCAG ve platform yönergelerini yan yana karşılaştırmak kolaylaşır.

Özetle: 24 × 24 CSS px, WCAG 2.2 AA seviyesindeki minimum değerdir. Apple’ın 44 pt ve Android’in 48 dp önerileri bunun ötesine geçer ve dokunma odaklı uygulamalar için daha güvenli hedeftir.

Dokunma Hedefleri Arasındaki Boşluk Neden Önemlidir?

Boşluk, özellikle hedefler küçük olduğunda veya bir arada gruplandığında kullanıcının yanlış kontrole dokunma ihtimalini azaltır. Android, 48 dp’lik hedefler arasında en az 8 dp boşluk bırakılmasını önerir. Apple da etkileşimli öğeler arasında padding ve boşluğun önemini vurgular. Boşluk en çok, yanlış bir dokunuşun sonuç doğurduğu yerlerde önemlidir: “Düzenle”nin yanındaki “Sil” butonu ya da “Sepete Ekle”nin yanındaki adet seçici gibi.

Örnek: Bir mobil alışveriş arayüzünde birbirine çok yakın konumlanmış “Sepete Ekle” ve adet kontrolleri istenmeyen işlemlere yol açabilir. Her etkileşimli alan arasında yeterli mesafe bırakmak ve küçük kontrolleri padding ile büyütmek, kullanıcıların özellikle telefonu tek elle kullanırken doğru işleme güvenle dokunmasını sağlar.

Erişilebilir Dokunma Hedefleri Nasıl Tasarlanır?

• Erişilebilir dokunma hedeflerini güvenilir bir etkileşim için yeterince büyük yapın. Mobil uygulamalarda 48 × 48 dp pratik bir ölçüttür. WCAG 2.2 ise bir istisna geçerli olmadıkça işaretçi hedefleri için en az 24 × 24 CSS pikseli şart koşar.
• Gerektiğinde padding kullanarak hedef alanını görünen ikon boyutundan büyük tutun. Böylece görsel olarak küçük bir ikon bile yeterince büyük bir etkileşimli alana sahip olabilir.
• Erişilebilir dokunma hedeflerinin üst üste binmesini önlemek ve yanlışlıkla yapılan dokunuşları azaltmak için yakın kontroller arasına boşluk ekleyin. Android, 48 dp’lik hedefler arasında en az 8 dp boşluk önerir.
• Butonlara net görsel sınırlar ve çevrelerinde yeterli alan verin, tüm dokunma hedefi tasarımını gerçek dokunmatik cihazlarda test edin. Apple da butonlar için 44 × 44 pt’lik bir dokunma alanı önerir.

Küçük İkonlar Görsel Boyutları Büyütülmeden Nasıl Erişilebilir Hale Getirilir?

• İkonu görsel olarak kompakt tutun ve dokunulabilir alanı padding ile genişletin. Böylece küçük hedef, görünümü değişmeden kolayca etkinleştirilebilir.
• Etkileşimli alan, ikonun görsel sınırlarının ötesine uzanabilir ve dokunma hedefi ikonun görünen boyutundan büyük olabilir. Örneğin Android, 48 × 48 dp’lik ikon butonlarının içinde 24 dp’lik ikonlar kullanır.
• Genişletilen alanın yakındaki kontrollerle çakışmadığından emin olun. Apple da yanlışlıkla yapılan dokunuşları azaltmak için etkileşimli öğeler arasında yeterli padding ve boşluğun önemini vurgular.

Dokunma Hedefi Boyutu Mobil Kullanılabilirliği Nasıl Etkiler?

Parmaklar, fare imlecine göre çok daha az hassastır. Bu fark, özellikle yürürken, tek elle kullanırken veya el titremesi olan kişilerde belirginleşir. Küçük veya sıkışık hedefler, “öfke dokunuşları” (rage tap) olarak da adlandırılan tekrarlı yanlış dokunuşlara ve kullanıcıların sonradan geri almak zorunda kaldığı istenmeyen işlemlere yol açar. Daha büyük hedefler bu sürtünmeyi yalnızca motor engelli kişiler için değil, herkes için azaltır.

Dokunma Hedefleri Farklı Mobil Platformlar İçin Nasıl Tasarlanmalı?

• Android: Material Design erişilebilirlik yönergelerine uygun olarak en az 48 × 48 dp’lik dokunma hedefleri kullanın. Mümkün olduğunda hedefler arasında en az 8 dp boşluk bırakın.
• iOS ve iPadOS: Butonlar ve diğer kontroller için en az 44 × 44 pt’lik bir dokunma alanı kullanın ve rahat bir etkileşim için yeterli boşluk bırakın.
• Tüm platformlarda: İkonun görsel boyutunu etkileşimli alanından ayrı tutun. Aynı 24 dp/pt’lik ikon, her iki platformda da etrafında platforma özgü dokunma alanlarıyla kullanılabilir.

Mobil Dokunma Hedefi Boyutu Nasıl Test Edilir?

Test, otomatik araçları gerçek cihaz kontrolleriyle birleştirir:

• Android: Önerilen boyutun altındaki dokunma hedeflerini işaretleyen Erişilebilirlik Tarayıcısı’nı (Accessibility Scanner) çalıştırın.
• iOS: Küçük dokunma alanlarını raporlayan Xcode Erişilebilirlik Denetçisi (Accessibility Inspector) ile bir denetim yapın. Bir öğenin tam çerçevesini ve yakındaki kontrollere olan mesafesini kontrol etmek için Debug View Hierarchy’yi kullanın.
• Web içeriği: Hedefleri 24 × 24 CSS piksele göre ölçün veya daha küçük hedefler için 24 piksellik daire testini uygulayın.
• Gerçek cihazlar: Önemli ekranlarda parmağınızla dokunarak ilerleyin. Her kontrolün güvenilir şekilde çalıştığını ve yakındaki hedeflerin yanlışlıkla tetiklenmediğini kontrol edin.

Hangi Yaygın Dokunma Hedefi Sorunlarından Kaçınılmalı?

• Etkileşimli bir öğenin dokunarak doğru şekilde etkinleştirilmesini zorlaştıran küçük dokunma hedeflerinden kaçının. WCAG 2.2, işaretçi hedefleri için tanımlı istisnalarla birlikte en az 24 × 24 CSS pikseli şart koşar.
• Kontroller arasındaki yetersiz boşluğu önleyin. Hedefler birbirine çok yakın olduğunda kullanıcıların yanlış hedefi etkinleştirme ihtimali artar.
• Özellikle küçük ikonların etrafındaki dokunulabilir alanı genişletirken hedeflerin üst üste binmediğini kontrol edin. Çakışan hedef alanları, kontrollerin tek tek güvenilir şekilde etkinleştirilmesini zorlaştırabilir.
• Tıklanabilir bir ikonun veya butonun yalnızca görünen boyutuna güvenmeyin. Uygun olduğunda etkileşimli alanını padding ile genişletin ve yakındaki kontrollerden net bir şekilde ayrı tutun. Android, etkileşimli öğeler için 48 × 48 dp’lik dokunma hedefleri önerir.

Görsel Boyut ile Dokunma Hedefi Boyutu Arasındaki Fark Nedir?

Bir öğenin görsel sınırları kullanıcıların ne gördüğünü tanımlar. Hedef alanı veya etkileşimli alan ise dokunuşun nerede algılandığını belirler. Bu iki ölçünün aynı olması gerekmez: küçük bir ikon, görsel sınırlarının ötesine uzanan daha büyük bir dokunulabilir alana sahip olabilir. Bu da görünen boyutu artırmadan kullanılabilirliği iyileştirir. Örneğin Android’de 48 × 48 dp’lik bir dokunma hedefinin içinde genellikle 24 dp’lik bir ikon kullanılır.

En Önemli Mobil Dokunma Hedefi Boyutu Yönergeleri Nelerdir?

• WCAG 2.2 Hedef Boyutu (Minimum) kriterine uyun: etkileşimli hedefler, belirli istisnalar dışında AA seviyesinde genellikle en az 24 × 24 CSS pikseli olmalıdır.
• Android ve Material Design için mobil arayüzlerde pratik olarak önerilen hedef boyutu olan en az 48 × 48 dp’lik dokunma hedefleri kullanın.
• iOS ve iPadOS için Apple, 44 × 44 pt’lik varsayılan kontrol boyutunu önerir ve rahat bir etkileşim için boşluk ile çevredeki padding’in de önemli olduğunu belirtir.
• Kullanıcıların istedikleri hedefi ayırt edip yanlışlıkla dokunmadan etkinleştirebilmesi için yakın dokunma hedefleri arasında yeterli boşluk bırakın.

Sıkça Sorulan Sorular

Mobilde önerilen dokunma hedefi boyutu nedir?

Android 48 × 48 dp, Apple ise iOS ve iPadOS için 44 × 44 pt önerir. Web içeriği için WCAG 2.2, AA seviyesinde belirli istisnalarla birlikte 24 × 24 CSS piksellik bir minimum belirler.

WCAG 2.2'ye göre minimum dokunma hedefi boyutu nedir?

2.5.8 Hedef Boyutu (Minimum) başarı kriteri, işaretçi hedeflerinin en az 24 × 24 CSS pikseli olmasını şart koşar. İstisnalar; boşluk, eşdeğer kontroller, satır içi hedefler, kullanıcı aracısı kontrolleri ve zorunlu sunumları kapsar.

WCAG 2.5.8 yerel mobil uygulamalar için de geçerli mi?

WCAG web içeriği için yazılmıştır, ancak kriterleri yerel uygulamalarda da yaygın olarak uygulanır. W3C’nin taslak WCAG2Mobile notu, 2.5.8 kriterinin uygulamalarda cihazdan bağımsız birimlere nasıl karşılık geldiğini açıklar. Pratikte Android’in 48 dp ve Apple’ın 44 pt önerilerine uymak, WCAG minimumunu rahatça aşar.