टच टारगेट आकार जाँचक

यह कैलकुलेटर क्या करता है

जाँचता है कि कोई बटन, आइकन, लिंक, या कोई भी टैप करने योग्य UI एलिमेंट WCAG टारगेट साइज़ मानदंडों को पूरा करने के लिए पर्याप्त बड़ा है या नहीं — और उसके चारों ओर पर्याप्त जगह है या नहीं। छोटे, तंग टच टारगेट मोबाइल साइटों और ऐप्स में सबसे आम एक्सेसिबिलिटी समस्याओं में से एक हैं, जो सीमित निपुणता, कंपन, या बड़ी उँगलियों वाले उपयोगकर्ताओं के लिए गलत टैप का कारण बनते हैं।

उपयोग किए गए मानदंड

WCAG 2.5.8 टारगेट साइज़ (न्यूनतम) — लेवल AA

$$\min(width, height) \geq 24\text{px}$$

24×24 CSS पिक्सेल से छोटा टारगेट भी स्पेसिंग अपवाद के लिए योग्य होने पर AA पास कर सकता है — यदि उसके और अगले टारगेट के बीच पर्याप्त खाली जगह हो कि उस पर केंद्रित 24px का घेरा पड़ोसी टारगेट पर केंद्रित 24px के घेरे से न टकराए:

$$spacing \geq 24\text{px}$$

WCAG 2.5.5 टारगेट साइज़ (एन्हांस्ड) — लेवल AAA

$$\min(width, height) \geq 44\text{px}$$

यह एक सख्त, "एन्हांस्ड" आवश्यकता है — AA अनुरूपता के लिए आवश्यक नहीं, लेकिन विशेष रूप से प्राइमरी एक्शन और टचस्क्रीन उपयोगकर्ताओं के लिए अनुशंसित सर्वोत्तम प्रथा है।

अपवाद — टारगेट साइज़ में कमी होने पर भी निम्न स्थितियों में अनुरूपता बनी रह सकती है:

• टारगेट किसी वाक्य या टेक्स्ट ब्लॉक के भीतर इनलाइन हो (जैसे टेक्स्ट लिंक),
• दी जा रही जानकारी के लिए विशिष्ट आकार आवश्यक हो (जैसे मैप पर एक बिंदु, या स्लाइडर हैंडल जिसका आकार मायने रखता है), या
• टारगेट का आकार पेज की अपनी स्टाइलिंग के बजाय ब्राउज़र या OS द्वारा नियंत्रित हो।

इसका उपयोग कैसे करें

1. टैप करने योग्य एलिमेंट की रेंडर की गई चौड़ाई और ऊँचाई CSS पिक्सेल में दर्ज करें।
2. इस एलिमेंट और निकटतम अन्य टैप करने योग्य एलिमेंट के बीच की स्पेसिंग (अंतर) दर्ज करें।
3. यदि कोई WCAG अपवाद लागू होता है, तो उसे ड्रॉपडाउन से चुनें — अन्यथा "कोई नहीं" रहने दें।
4. समग्र परिणाम, मानदंड-दर-मानदंड विवरण, और उपयोग के लिए तैयार CSS स्निपेट देखने के लिए सबमिट करें।

उदाहरण

32×32px पर रेंडर किया गया एक गोल आइकन बटन, अगले आइकन से 4px की स्पेसिंग के साथ, कोई अपवाद नहीं:

$$\min(32, 32) = 32\text{px} \geq 24\text{px} \Rightarrow \text{AA (न्यूनतम) पास}$$ $$32\text{px} < 44\text{px} \Rightarrow \text{AAA (एन्हांस्ड) फेल}$$

यहाँ स्पेसिंग जाँच अप्रासंगिक है क्योंकि टारगेट पहले ही अपने आप 24px न्यूनतम को पूरा करता है। यदि वही आइकन 20×20px तक सिकुड़ जाए और केवल 4px की स्पेसिंग हो, तो यह सीधे AA में फेल हो जाएगा — 20px, 24px की सीमा से कम है, और 4px की स्पेसिंग, स्पेसिंग अपवाद लागू होने के लिए आवश्यक 24px से बहुत कम है।

नोट्स

• वास्तविक रेंडर किए गए (CSS पिक्सेल) आकार को मापें, न कि सोर्स इमेज रिज़ॉल्यूशन को — 44×44px के क्लिक करने योग्य बटन के भीतर 24×24px का आइकन, यदि पूरा बटन क्षेत्र टैप का जवाब देता है, तो 44×44px माना जाता है।
• यह टूल एक टारगेट को अलग से जाँचता है; पूर्ण ऑडिट में पेज के हर इंटरैक्टिव एलिमेंट की जाँच होनी चाहिए, क्योंकि एक भी छोटा कंट्रोल उपयोगकर्ता को कार्य पूरा करने से रोक सकता है।
• AAA (44×44px) को पूरा करना एक अच्छा अभ्यास है, भले ही AA (24×24px) कानूनी/ संविदात्मक मानदंड हो, क्योंकि यह न केवल सहायक तकनीक पर निर्भर उपयोगकर्ताओं के लिए, बल्कि सभी के लिए गलत टैप कम करता है।