عند عرض تصميمك على جهاز جوّال، يجب التأكّد من أنّ العناصر التفاعلية، مثل الأزرار أو الروابط، كبيرة بما يكفي، وتحيط بها مساحة كافية، ليكون من السهل الضغط عليها بدون النقر على أي عناصر أخرى عن طريق الخطأ. يفيد هذا جميع المستخدمين، ولكنه مفيد بشكل خاص لأي شخص يعاني من إعاقة حركية.
الحد الأدنى المُقترَح لحجم الهدف الذي يمكن لمسه هو 48 بكسل تقريبًا مستقل عن الجهاز على موقع إلكتروني تم ضبط إطار عرضه للأجهزة الجوّالة بشكل صحيح. على سبيل المثال، قد يكون عرض الرمز وارتفاعه 24 بكسل فقط، ويمكنك استخدام مساحة إضافية لزيادة حجم مساحة اللمس المستهدفة إلى 48 بكسل. تتوافق مساحة 48×48 بكسل تقريبًا مع 9 مم، وهو ما يعادل حجم راحة إصبع الشخص.
في العرض الترويجي، أضفت مساحة فارغة إلى جميع الروابط للتأكّد من استيفائها الحد الأدنى للحجم.
يجب أيضًا أن يكون هناك مسافة بين أهداف اللمس تبلغ 8 بكسل تقريبًا، أفقيًا وعموديًا، كي لا يلامس إصبع المستخدم هدفًا آخر للّمس عن غير قصد عند الضغط على هدف لمس واحد.
اختبار أهداف اللمس
إذا كان الهدف هو نص وكنت قد استخدمت قيمًا نسبية مثل em أو rem لتحديد حجم النص وأي مسافات بادئة،
يمكنك استخدام DevTools للتحقّق من أنّ القيمة المحسوبة لهذه المنطقة كبيرة بما يكفي.
في المثال أدناه، أستخدم em للنص والمساحة المتروكة.
راجِع a للرابط،
وفي "أدوات مطوّري البرامج في Chrome"، انتقِل إلى اللوحة المحسوبة حيث يمكنك فحص الأجزاء المختلفة من المربّع
والاطّلاع على حجم البكسل الذي يتم تحويله إليه.
تتوفّر لوحة تنسيق في "أدوات مطوّري البرامج" في Firefox.
في هذه اللوحة، يمكنك الحصول على الحجم الفعلي للعنصر الذي تم فحصه.
استخدام الاستعلامات عن الوسائط لاكتشاف استخدام الشاشة التي تعمل باللمس
بدلاً من اختبار سمات مساحة العرض فقط، ثم التخمين أنّه من المرجّح أن تكون السمات الصغيرة للهواتف أو الأجهزة اللوحية التي بدورها تستخدم شاشة تعمل باللمس، تتوفّر الآن طرق أكثر فعالية لتكييف تصميمك استنادًا إلى إمكانات الجهاز الفعلية.
من ميزات الوسائط التي يمكننا الآن اختبارها باستخدام طلبات البحث عن الوسائط
هو ما إذا كان إدخال المستخدم الأساسي هو شاشة لمس (pointer)
وما إذا كان أيّ من الإدخالات التي تم رصدها حاليًا هو شاشة لمس (any-pointer).
ستُظهر ميزتا pointer وany-pointer القيمة fine أو coarse.
المؤشر الدقيق هو شخص يستخدم الماوس أو لوحة اللمس،
حتى إذا كان الماوس متصلاً عبر بلوتوث بهاتف.
يشير المؤشر coarse إلى شاشة تعمل باللمس،
وقد يكون جهازًا جوّالاً، ولكن قد يكون أيضًا شاشة كمبيوتر محمول أو جهازًا لوحيًا كبيرًا.
إذا كنت تعدّل CSS ضمن طلب بحث عن الوسائط لزيادة استهداف اللمس، يتيح لك اختبار المؤشر الخشن زيادة استهدافات النقر لجميع مستخدمي الشاشة التي تعمل باللمس. يمنح ذلك مساحة أكبر للنقرة سواء كان الجهاز هاتفًا أو جهازًا أكبر حجمًا.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
يمكنك الاطّلاع على مزيد من المعلومات حول ميزات الوسائط التفاعلية، مثل المؤشر، في مقالة أساسيات تصميم الويب السريع الاستجابة.