- बटन/लिंक/कार्ड को click/touch/tap करना आसान बनाना, और ऐसा size देना जिससे गलती से दबने की संभावना कम हो
- "target size" के लिए अलग-अलग नाम इस्तेमाल होते हैं: Apple इसे hit target कहता है, Google Material इसे Touch target, WAI इसे target size, Google Lighthouse इसे Tap Target, और design community में इसे Clickable Area कहा जाता है
- WCAG मानक के अनुसार target size कम-से-कम 44 x 44 CSS pixels होना चाहिए (Android में 48x48)
- इससे छोटा होने पर touch circles overlap हो सकते हैं और गलत click हो सकता है
- Google Design for Driving में न्यूनतम 76dp x 76dp
- visual target feedback देना अच्छा होता है (element पर border या background inversion)
- 24x24 से छोटे target के लिए पर्याप्त दूरी रखना ज़रूरी है (
line-height: 1.4, padding: 1rem आदि)
- ProgressBar में भी height बढ़ाकर पर्याप्त touch space देना बेहतर है
- एक ही action देने वाले objects के बीच Dead Target Area हटाएँ
:before और :after जैसे pseudo elements का उपयोग करके target size बड़ा किया जा सकता हैlabel में ज़रूर for लगाएँ ताकि target size बढ़े- checkbox में
padding-block का उपयोग करके target size बड़ा करें
- बटन/टेक्स्ट लिंक में भी padding दें
- list item में padding और
display:flex से पूरे item के size तक target बढ़ाएँ
- target size testing के तरीके: DevTools का उपयोग, CSS Outline लागू करना, Polypane browser का उपयोग
1 टिप्पणियां
यह इतना शानदार कंटेंट है कि लेखक का नाम देखा तो पता चला, यह Ahmad Shadeed हैं। इनकी लिखी हुई चीज़ें पढ़कर सच में बस प्रभावित हुए बिना रहा नहीं जाता।