टैप की जाने वाली जगहें, सही साइज़ में नहीं हैं

टैप टारगेट, वेब पेज के ऐसे हिस्से होते हैं जिनसे टच डिवाइसों का इस्तेमाल करने वाले लोग इंटरैक्ट कर सकते हैं. बटन, लिंक, और फ़ॉर्म एलिमेंट में टैप टारगेट होते हैं.

कई सर्च इंजन, पेजों को इस आधार पर रैंक करते हैं कि वे मोबाइल-फ़्रेंडली हैं. यह पक्का करना कि टैप टारगेट काफ़ी बड़े हों और एक-दूसरे से काफ़ी दूर हों, ताकि आपका पेज ज़्यादा मोबाइल-फ़्रेंडली और आसानी से ऐक्सेस किया जा सके.

लाइटहाउस टैप टारगेट ऑडिट कैसे फ़ेल हो जाता है

Lighthouse उन पेजों को फ़्लैग करता है जिन पर टैप टारगेट इन दोनों शर्तों को पूरा करता है:

  • टारगेट का साइज़ 48 पिक्सल x 48 पिक्सल से कम होना चाहिए.
  • टारगेट इलाके का कम से कम 25% हिस्सा, टारगेट इलाके के बीच वाले 48 पिक्सल के अंदर किसी दूसरे टारगेट के साथ ओवरलैप हो रहा है.
लाइटहाउस ऑडिट में, गलत साइज़ के टैप टारगेट दिखाए गए हैं

ऑडिट न होने पर, Lighthouse तीन कॉलम वाली टेबल में नतीजे दिखाता है:

टारगेट पर टैप करें टैप टारगेट का साइज़ सही नहीं है.
साइज़ पिक्सल में टारगेट की सीमा को बढ़ाने वाले रेक्टैंगल का साइज़.
ओवरलैपिंग टारगेट अगर कोई दूसरा टैप टारगेट बहुत पास है, तो वह कौनसा है.

टैप टारगेट को ठीक करने का तरीका

पहला विकल्प: टैप टारगेट का साइज़ बहुत छोटा करें. 48 पिक्सल x 48 पिक्सल वाले टारगेट पर टैप करने से ऑडिट कभी पूरा नहीं होता. अगर आपके पास ऐसे एलिमेंट हैं जो ज़्यादा बड़े नहीं दिखने चाहिए (उदाहरण के लिए, आइकॉन), तो padding प्रॉपर्टी को बढ़ाकर देखें:

सही आकार के टैप टारगेट
किसी एलिमेंट की थीम में बदलाव किए बिना, टैप टारगेट को बड़ा करने के लिए padding का इस्तेमाल करें.

दूसरा विकल्प: margin जैसी प्रॉपर्टी का इस्तेमाल करके, बहुत पास-पास टैप टारगेट के बीच की स्पेस बढ़ाएं. टैप टारगेट के बीच 8 पिक्सल का होना एक अच्छा शुरुआत है, लेकिन ऑडिट में पास होने के लिए हमेशा काफ़ी स्पेस नहीं होता, खास तौर पर बहुत छोटे टारगेट के लिए.

संसाधन