2.5.8 Hedef Boyutu

Etkileşimli hedefler, hassasiyeti düşük kullanıcılar tarafından kolayca seçilebilmesini sağlamak için asgari boyut gereksinimlerini karşılamalıdır.

SC Kodu: 2.5.8 Seviye: AA
URL: https://www.w3.org/TR/WCAG22/#target-size-minimum

Genel Tanım

WCAG SC 2.5.8, işaretçi girişleri için hedef boyutunun en az 24 x 24 CSS piksel olmasını gerektirir. Hedef 24 x 24 CSS pikselden küçükse, yetersiz boyutlu olarak kabul edilir ve aşağıdaki koşullardan en az biri karşılanır:

Aralıklandırma: Küçük boyutlu hedefler (24x24 pikselden küçük) diğer hedef alanlarına temas etmemeleri için etraflarında yeterli boşluk bırakılarak konumlandırılmalıdır. Bunu sağlamak için, her küçük boyutlu hedefin merkezine 24 piksel çapında bir daire çizin. Bu dairelerden hiçbiri bitişik herhangi bir hedef girişiyle veya (eğer o da küçük boyutluysa) onun dairesiyle kesişmiyorsa, küçük boyutlu hedef başarı kriterini karşılar.

Eşdeğer: Bu işlev, aynı sayfada bu kriteri karşılayan alternatif bir kontrol aracılığıyla da gerçekleştirilebilir.

Satır İçi: Hedef, bir cümle içinde yer alıyor veya boyutu, hedef olmayan metnin satır yüksekliğiyle sınırlı.

Kullanıcı aracısı kontrolü: Hedefin boyutu, kullanıcı aracısı (örneğin tarayıcı) tarafından belirlenir ve web sitesinin yazarı tarafından değiştirilmez.

Önemli: Hedeflenen bilgilerin belirli bir şekilde sunulması, net iletişim için veya hatta yasal olarak zorunlu olabilir. Örneğin, belirli banka şubelerinin konumlarını gösteren işaretler bulunan bir haritayı düşünün. Birbirine çok yakın konumdaki şubeleri temsil eden birçok işaret haritada üst üste gelebilir ve ayırt edilmelerini zorlaştırabilir. Ne yazık ki, bunlar gerçek konumları temsil ettiğinden, işaretleri basitçe hareket ettiremeyiz.

Faydalar

• Motor Engelli Kullanıcılar İçin Erişilebilirlik: Sınırlı motor becerilerine sahip kullanıcıların kullanıcı arayüzü öğelerini doğru bir şekilde hedefleyebilmelerini ve bunlarla etkileşim kurabilmelerini sağlar.
• Dokunmatik Cihazlar İçin Geliştirilmiş Kullanılabilirlik: Özellikle büyük parmaklı veya titrek ortamlarda bulunan dokunmatik cihaz kullanıcıları için kullanılabilirliği artırır.
• Hataları Azaltır: Yeterli boyutta hedefler sağlayarak veya küçük boyutlu hedefler arasında yeterli boşluk bırakarak yanlışlıkla tıklama veya dokunmaları en aza indirir.

Ana Amaç

Tüm etkileşimli öğelerin minimum hedef boyutunun 24 x 24 CSS piksel olmasını veya daha küçük boyutlu olması durumunda aşağıdakilerden en az birinin karşılanmasını sağlamak için: Boşluk, Eşdeğer, Satır içi, Kullanıcı aracısı kontrolü veya Temel.

En İyi Uygulamalar

• Minimum Hedef Boyutunu Sağlayın: Etkileşimli öğeleri en az 24 x 24 CSS piksel hedef boyutuyla tasarlayın.
• Yeterli Boşluk Bırakın: 24x24 CSS pikselden daha küçük öğeler için, her bir hedef üzerinde ortalanmış 24x24 CSS piksellik bir dairenin diğeriyle kesişmemesi için yeterli boşluk olduğundan emin olun.
• Alternatif Kontrolleri Değerlendirin: Eğer kontrolle aynı sonucu elde etmek için ek bir mekanizma mevcutsa, başarı kriteri karşılanmış demektir.
• İstisnalar: Hedef boyutunun kullanıcı aracısı tarafından kontrol edildiği cümlelerdeki hedefler veya coğrafi haritadaki işaretler gibi hedefin niteliğinin esas olduğu durumlar gibi istisnalara dikkat edin.

Örnekler ve Açıklamalar

Örnek: Mobil Gezinme Menüsü

Nelerden Kaçınılmalı?

Mobil bir web sitesinde, menü öğeleri için küçük dokunma alanları bulunan dikey bir gezinme menüsü bulunmaktadır. Menü öğeleri 24x24 CSS pikselden daha küçüktür ve birbirine çok yakındır, bu da kullanıcıların doğru öğeyi seçmesini zorlaştırır. Her menü öğesi 16x16 CSS pikseldir. Menü öğeleri birbirine çok yakındır ve aralarında minimum boşluk vardır.

Açıklama: Öğeler küçük boyutlu olarak kabul edildiğinden, aralarında yeterli boşluk varsa bu başarı kriterini yine de karşılayabilirler. Bunu doğrulamak için, her liste öğesinin merkez noktasını seçer ve dikey ve yatay çapı 24 piksel olan bir daire çizeriz. Bu işlem tüm liste öğeleri için tekrarlanır. Verilen örnekte, daireler birbirleriyle kesişmekte ve bu da başarı kriterinin karşılanmamasına neden olmaktadır. Küçük dokunma alanları ve birbirine yakın öğeler, özellikle motor engelli veya büyük parmaklı kullanıcılar için yanlış menü öğesini seçme riskini artırır.

Ne Yapılmalı?

Her menü öğesinin boyutunu en az 24 x 24 CSS pikseline çıkarın. Menü öğeleri arasında yeterli boşluk bırakın, böylece üst üste binmesinler veya yanlış tıklamalara neden olmasınlar.

Açıklama: Dokunma alanlarının boyutunu artırarak ve aralarında yeterli boşluk bırakarak, kullanıcılar istedikleri menü öğesini daha kolay ve doğru bir şekilde seçebilirler. Bu, tıklamaların ve dokunmaların beklendiği gibi gerçekleşmesini, herhangi bir çakışma veya istenmeyen seçim olmamasını sağlar.