ടച്ച് ടാർഗെറ്റ് സൈസ് ചെക്കർ

ഈ കാൽക്കുലേറ്റർ എന്താണ് ചെയ്യുന്നത്

ഒരു ബട്ടണോ, ഐക്കണോ, ലിങ്കോ, മറ്റേതെങ്കിലും ടാപ്പ് ചെയ്യാവുന്ന 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) പാലിക്കുന്നത് നല്ല രീതിയാണ്, കാരണം ഇത് സഹായക സാങ്കേതികവിദ്യയെ ആശ്രയിക്കുന്നവർക്ക് മാത്രമല്ല, എല്ലാവർക്കും തെറ്റായ ടാപ്പുകൾ കുറയ്ക്കുന്നു.