టచ్ టార్గెట్ సైజ్ చెకర్

ఈ కాలిక్యులేటర్ ఏమి చేస్తుంది

ఒక బటన్, ఐకాన్, లింక్, లేదా ఏదైనా టాప్ చేయదగిన 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 గా పరిగణించబడుతుంది.
• ఈ సాధనం ఒక టార్గెట్‌ను వేరుగా తనిఖీ చేస్తుంది; పూర్తి ఆడిట్ పేజీలోని ప్రతి ఇంటరాక్టివ్ ఎలిమెంట్‌ను తనిఖీ చేయాలి, ఎందుకంటే ఒక్క చిన్న నియంత్రణ కూడా వినియోగదారుడిని ఒక పనిని పూర్తి చేయకుండా అడ్డుకోగలదు.
• AA (24×24px) చట్టపరమైన/ఒప్పంద ప్రమాణంగా ఉన్నప్పటికీ, AAA (44×44px)ను తీర్చడం మంచి పద్ధతి, ఎందుకంటే ఇది సహాయక సాంకేతికతపై ఆధారపడే వారికే కాక, అందరికీ తప్పుడు టాప్‌లను తగ్గిస్తుంది.