தொடு இலக்கு அளவு சரிபார்ப்பான்

இந்த கால்குலேட்டர் என்ன செய்கிறது

ஒரு பொத்தான், ஐகான், இணைப்பு, அல்லது வேறு எந்த தட்டக்கூடிய 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)-ஐ பூர்த்தி செய்வது ஒரு நல்ல நடைமுறையாகும், ஏனெனில் இது உதவி தொழில்நுட்பத்தை சார்ந்திருப்பவர்களுக்கு மட்டுமல்ல, அனைவருக்கும் தவறான தட்டல்களைக் குறைக்கிறது.