حجم أهداف اللمس

01لماذا يهم الحجم

الهدف هو أي عنصر يمكن النقر أو اللمس عليه. الأهداف الصغيرة أو المتزاحمة تسبب أخطاء في الضغط، خاصة لمن يعانون من رعشة أو محدودية في الحركة الدقيقة، ولمن يستخدمون الهاتف بيد واحدة.

يفسّر قانون فيتس ذلك: يزداد زمن الوصول إلى الهدف مع المسافة ويقل كلما كبر الهدف.

02الأرقام المرجعية

• 24×24 بكسل CSS

  WCAG 2.2 المعيار 2.5.8 (حجم الهدف، الحد الأدنى)، المستوى AA.

• 44×44 بكسل CSS

  WCAG المعيار 2.5.5 (حجم الهدف، المعزّز)، المستوى AAA.

• 44 نقطة

  توصي إرشادات Apple للواجهات بحد أدنى 44×44 نقطة للعناصر.

• الحد 48 dp

  يوصي Material Design بأهداف لمس لا تقل عن 48×48 dp.

03المسافات والاستثناءات

للمعيار 2.5.8 استثناء المسافة: يجتاز الهدف الأصغر من 24 بكسل إذا لم تتقاطع دائرة قطرها 24 بكسل متمركزة عليه مع هدف آخر أو مع دائرة جار له. فيمكن للأيقونات الصغيرة أن تجتاز إذا كانت متباعدة جيدًا.

• الروابط داخل الجمل مستثناة لأن حجمها يحدده النص.
• الأهداف التي يتحكم المتصفح بحجمها، كخانات التحديد الافتراضية، مستثناة.
• وجود عنصر مكافئ أكبر في الصفحة نفسها يحقق القاعدة أيضًا.

04التطبيق العملي

1. صمّم منطقة الضغط لا الشكل المرئي فقط. أيقونة 16 بكسل يمكن أن توضع داخل زر 44 بكسل.
2. في CSS أضف حشوة لأزرار الأيقونات، مثل <code>;padding: 12px<;/code>; حول أيقونة 20 بكسل.
3. اترك فواصل بين العناصر المتجاورة، مثل صفوف أيقونات الإجراءات.
4. ضع الإجراءات المتكررة في متناول الإبهام، وعادةً في الجزء السفلي من شاشة الهاتف.

اعتبر 24 بكسل حدًا أدنى، و44 إلى 48 بكسل الحجم المريح للعناصر الأساسية.

معظم إخفاقات حجم الهدف تأتي من الأيقونات والعناصر المضغوطة لا من الأزرار الرئيسية.

• أزرار الإغلاق ونقاط القوائم وروابط الترقيم المرسومة بحجم أيقونتها.
• صفوف من أيقونات الإجراءات الصغيرة في الجداول دون فواصل بينها.
• خانات تحديد وأزرار اختيار صغيرة حيث الصندوق وحده قابل للنقر دون التسمية.
• أشرطة أدوات مزدحمة منقولة من تخطيطات سطح المكتب إلى شاشات اللمس.

اجعل التسمية جزءًا من منطقة النقر لتحصل على هدف أكبر دون كلفة.

05المصادر

• W3C. Understanding SC 2.5.8 Target Size (Minimum). https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
• W3C. Understanding SC 2.5.5 Target Size (Enhanced). https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html