உங்கள் இணையதளத்தை அணுகக்கூடியதாக்குவது எப்படி: WCAG 2.2 தொடக்க வழிகாட்டி

இணையதளத்தை அணுகக்கூடியதாக்க, அதை மவுஸ் மட்டுமல்லாமல் விசைப்பலகை, திரை வாசிப்பான், ஜூம், சுவிட்ச் சாதனம் மூலமும் மக்கள் பயன்படுத்தும் வகையில் உருவாக்குங்கள்: பொத்தான்கள், இணைப்புகள், தலைப்புகள், படிவ லேபிள்களுக்கு உண்மையான HTML கூறுகளைப் பயன்படுத்துங்கள்; படங்களுக்கு அர்த்தமுள்ள alt உரை கொடுங்கள்; உரை மாறுபாட்டை உயர்வாக வையுங்கள்; focus தெரியுமாறு செய்யுங்கள். இலக்கு தரநிலை WCAG 2.2 Level AA. தானியங்கி சரிபார்ப்பான்கள் பிரச்சினையின் ஒரு பகுதியைப் பிடிக்கும்; பத்து நிமிட விசைப்பலகை மற்றும் திரை வாசிப்பான் சோதனை மீதியில் பெரும்பாலானவற்றைப் பிடிக்கும்.

நடைமுறையில் "அணுகக்கூடியது" என்றால் என்ன

அணுகல் என்பது மக்களைப் பற்றியது: பார்வையற்றவர் திரை வாசிப்பானைப் பயன்படுத்துவது, விசைப்பலகையில் வழிசெலுத்தும் நடுக்கமுள்ள ஒருவர், 200% வரை ஜூம் செய்யும் குறைந்த பார்வையுள்ளவர், பிரகாசமான வெயிலில் படிப்பவர், தற்காலிகமாக கை முறிந்தவர். நல்ல அணுகல் பொதுவாக எல்லோருக்கும் தளத்தை மேம்படுத்தும் - தெளிவான கட்டமைப்பு, படிக்கக்கூடிய உரை, தங்கள் பிழைகளை விளக்கும் படிவங்கள்.

குறிப்புத் தரநிலை W3C-இன் Web Content Accessibility Guidelines (WCAG). செப்டம்பர் 2026 நிலவரப்படி, தற்போதைய பதிப்பு WCAG 2.2 (அக்டோபர் 2023-இல் வெளியிடப்பட்டு, டிசம்பர் 2024-இல் புதுப்பிக்கப்பட்டது); WCAG 3 ஆரம்ப வரைவு. WCAG நான்கு கொள்கைகளைச் சுற்றி அமைந்துள்ளது - உள்ளடக்கம் உணரக்கூடியதாக (perceivable), இயக்கக்கூடியதாக (operable), புரியக்கூடியதாக (understandable), உறுதியானதாக (robust) இருக்க வேண்டும் - மேலும் மூன்று இணக்க நிலைகளைக் கொண்டுள்ளது:

பல இடங்களில் உள்ள சட்டங்கள் WCAG-ஐக் குறிப்பிடுகின்றன - உதாரணமாக ஐரோப்பிய அணுகல் சட்டம் (European Accessibility Act), இது ஜூன் 2025 முதல் ஐரோப்பிய ஒன்றியத்தில் பல நுகர்வோர் எதிர்கொள்ளும் டிஜிட்டல் சேவைகளுக்குப் பொருந்துகிறது. உங்களுக்கு எந்த விதிகள் பொருந்தும் என்பது நீங்கள் எங்கே இயங்குகிறீர்கள், எதை விற்கிறீர்கள் என்பதைப் பொறுத்தது; உறுதியில்லை என்றால் ஒரு ஆலோசகரிடம் கேளுங்கள். இந்த வழிகாட்டி நடைமுறைப் பணியை உள்ளடக்குகிறது.

வழிகள்: அங்கே எப்படிச் செல்வது

சிறிய தளங்களுக்கு பெரும்பாலும் முதல் இரண்டும் போதும்: அணுகக்கூடியதாக உருவாக்கச் சொல்லுங்கள், வெளியிடுவதற்கு முன் தணிக்கை செய்யுங்கள்.

மிக முக்கியமான சரிசெய்தல்கள்

சரியான HTML கூறுகளைப் பயன்படுத்துங்கள்

சரியான HTML-உடன் பெரும்பாலான அணுகல் இலவசமாக வருகிறது. <button> focus செய்யக்கூடியது, Enter மற்றும் Space உடன் வேலை செய்கிறது, பொத்தானாக அறிவிக்கப்படுகிறது. கிளிக் கையாளி கொண்ட <div> இவற்றில் எதுவும் இல்லை. AI உருவாக்கிய கோடு சில நேரம் எல்லாவற்றுக்கும் style செய்யப்பட்ட divகளைப் பயன்படுத்தும்; semantic கூறுகளைக் கேளுங்கள்:

• செயல்களுக்கு <button>, வழிசெலுத்தலுக்கு <a href>
• ஒரு பக்கத்திற்கு ஒரு <h1>, பின்னர் வரிசையில் <h2>, <h3> - திரை வாசிப்பான் பயனர்கள் தலைப்புகளுக்கு இடையே தாவுகிறார்கள்
• Landmarks: <header>, <nav>, <main>, <footer>
• ஒவ்வொரு படிவப் புலத்துடனும் இணைக்கப்பட்ட <label>
• <html lang="en">-இல் பக்கத்தின் மொழி

எந்த native கூறும் பொருந்தாதபோது மட்டும் ARIA பண்புகளைப் பயன்படுத்துங்கள் - உதாரணமாக ஒரு தனிப்பயன் tab தொகுப்பு அல்லது combobox. தவறான ARIA எதுவும் இல்லாததை விட மோசமானது.

விசைப்பலகை அணுகல் மற்றும் தெரியும் focus

மவுஸால் செய்யக்கூடிய எல்லாவற்றையும் விசைப்பலகையால் மட்டுமே செய்ய முடிய வேண்டும் (WCAG 2.1.1). பக்கத்தில் Tab அழுத்துங்கள்: ஒவ்வொரு இணைப்பும், பொத்தானும், புலமும் தர்க்கரீதியான வரிசையில் சென்றடையக்கூடியதாக இருக்க வேண்டும், focus எங்கே உள்ளது என்பதை எப்போதும் காண வேண்டும் (2.4.7 Focus Visible). WCAG 2.2, focus செய்யப்பட்ட கூறு ஒட்டும் தலைப்புகள் அல்லது குக்கீ பேனர்களுக்குப் பின்னால் முழுவதுமாக மறைக்கப்படக்கூடாது என்பதைச் சேர்த்தது (2.4.11, Level AA).

பொதுவான தோல்விகள்: மவுஸ் மேல் வட்டமிட்டால் மட்டும் திறக்கும் மெனுக்கள், focus ஐப் பிடித்து வைக்காத அல்லது Escape-உடன் மூட முடியாத modal-கள், CSS-இல் outline: none அதற்கு பதிலாக எதுவும் இல்லாமல்.

உரை மாற்றுகள்

ஒவ்வொரு அர்த்தமுள்ள படத்திற்கும் அது சூழலில் என்ன காட்டுகிறது என்று சொல்லும் alt உரை வேண்டும் ("உணவு பரிமாறும் சமையற்கலைஞர்", "image1.jpg" அல்ல). அலங்காரப் படங்களுக்கு காலி alt="" கொடுங்கள், அப்போது திரை வாசிப்பான் அவற்றைத் தவிர்க்கும். ஐகான் மட்டும் உள்ள பொத்தான்களுக்கு அணுகக்கூடிய பெயர் வேண்டும் ("Close", "Search"). வீடியோக்களுக்கு வசன வரிகள் வேண்டும்; ஆடியோவுக்கு டிரான்ஸ்கிரிப்ட் வேண்டும்.

நிறமும் மாறுபாடும்

WCAG 2.2 AA சாதாரண உரைக்கு குறைந்தது 4.5:1 மாறுபாட்டு விகிதத்தையும் (1.4.3), பெரிய உரைக்கு 3:1-ஐயும், உள்ளீட்டு எல்லைகள், அர்த்தமுள்ள ஐகான்கள் போன்ற இடைமுகப் பகுதிகளுக்கு 3:1-ஐயும் (1.4.11) கேட்கிறது. வெளிர் சாம்பல் placeholder உரை மற்றும் வெளிர் பொத்தான்கள்தான் வழக்கமான தோல்விகள். மேலும், பொருளைத் தெரிவிக்க நிறத்தை மட்டும் பயன்படுத்தாதீர்கள் - தவறான புலத்தின் சிவப்பு எல்லைக்கு ஒரு பிழைச் செய்தியும் வேண்டும்.

அளவு மாற்றமும் மறுவடிவமைப்பும்

200% வரை ஜூம் செய்தபோதும் உரை பயன்படக்கூடியதாக இருக்க வேண்டும் (1.4.4); 320 CSS பிக்சல் அகலத்தில் பக்கத்தை பக்கவாட்டில் உருட்டாமல் உள்ளடக்கம் வேலை செய்ய வேண்டும் (1.4.10). பதிலளிக்கும் வடிவமைப்பு பெரும்பாலானவற்றைக் கையாளும்.

இலக்குகள், படிவங்கள், பிழைகள்

• இலக்கு அளவு: WCAG 2.2 AA சுட்டி இலக்குகளுக்கு குறைந்தது 24 x 24 CSS பிக்சல்களை, அல்லது சிறியவற்றைச் சுற்றி போதுமான இடைவெளியைக் கேட்கிறது (2.5.8). கைப்பேசிகளில் பெரியது இன்னும் அன்பானது.
• படிவங்கள்: தெரியும் லேபிள்கள் (placeholder மட்டும் அல்ல), தெளிவான வழிமுறைகள், தவறு என்ன, எப்படி சரிசெய்வது என்று சொல்லும் பிழைச் செய்திகள் - புலத்திற்கு அருகில்.
• உள்நுழைவு: மாற்று இல்லாமல் புதிர் தீர்க்கவோ குறியீட்டை நகலெடுக்கவோ மக்களைக் கேட்காதீர்கள்; கடவுச்சொல் நிர்வாகிகளையும் ஒட்டுதலையும் அனுமதியுங்கள் (3.3.8 Accessible Authentication).

வேலை செய்யும் கேள்விகள்

WCAG 2.2 Level AA-க்கு இந்தத் தளத்தை உருவாக்குங்கள்: semantic HTML landmarks, ஒரு பக்கத்திற்கு ஒரு h1 மற்றும் வரிசையான தலைப்புகள், உண்மையான button மற்றும் link கூறுகள், ஒவ்வொரு படிவப் புலத்திற்கும் லேபிள்கள், தெரியும் focus style-கள், குறைந்தது 4.5:1 உரை மாறுபாடு, அர்த்தமுள்ள படங்களுக்கு alt உரை, அலங்காரப் படங்களுக்கு alt="", மற்றும் html lang அமைப்பு.

/signup மற்றும் /checkout பக்கங்களை அணுகலுக்காகத் தணிக்கை செய்யுங்கள். விசைப்பலகை மட்டும் பயன்படுத்துதல், focus வரிசை, தெரியும் focus, லேபிள்கள், பிழைச் செய்திகள், மாறுபாடு, ஐகான் பொத்தான்களின் திரை வாசிப்பான் பெயர்கள் ஆகியவற்றைச் சரிபாருங்கள். ஒவ்வொரு பிரச்சினையையும் WCAG அளவுகோலுடன் பட்டியலிடுங்கள், பின்னர் காட்சி வடிவமைப்பை தேவைக்கு மேல் மாற்றாமல் சரிசெய்யுங்கள்.

மொபைல் மெனுவை விசைப்பலகையால் பயன்படுத்த முடியவில்லை. அதை aria-expanded உடன் ஒரு பொத்தானாக மாற்றுங்கள், திறக்கும்போது focus-ஐ மெனுவுக்குள் நகர்த்துங்கள், Escape-உடன் மூடி, focus-ஐ பொத்தானுக்குத் திருப்பிக் கொடுங்கள்.

படிப்படியாக

1. தானியங்கி சோதனையை இயக்குங்கள். Chrome DevTools-இல் Lighthouse-இன் Accessibility பகுதி, அல்லது axe உலாவி நீட்சி, முக்கியப் பக்கங்களில். அது அறிவிக்கும் எல்லாவற்றையும் சரிசெய்யுங்கள்.
2. மவுஸை அகற்றுங்கள். ஒவ்வொரு பக்கத்திலும் Tab அழுத்தி, ஒவ்வொரு முக்கிய பணியையும் முடியுங்கள் - பதிவு செய்தல், தேடுதல், வாங்குதல். அடைய முடியாதது, focus தெரியாதது, தப்பிக்க முடியாதது ஆகியவற்றைக் குறித்துக்கொள்ளுங்கள்.
3. 200% ஜூம் செய்து, சாளரத்தை கைப்பேசி அகலத்திற்குச் சுருக்குங்கள். எதுவும் வெட்டப்படக்கூடாது, பக்கவாட்டில் உருட்ட வேண்டியிருக்கக்கூடாது.
4. திரை வாசிப்பானை பத்து நிமிடம் முயலுங்கள்: Mac மற்றும் iPhone-இல் VoiceOver, Android-இல் TalkBack, அல்லது Windows-இல் NVDA (இலவசம்). தலைப்புகள், இணைப்புகள், படிவப் புலங்களைக் கேளுங்கள். பெயரில்லாத "பொத்தான்" அல்லது "link, click here" என்பது வேலை செய்ய வேண்டியதைக் காட்டுகிறது.
5. உரை, பொத்தான்கள், உள்ளீடுகளுக்கான மாறுபாட்டைச் சரிபாருங்கள்; ஒரு மாறுபாட்டுச் சரிபார்ப்பானைப் பயன்படுத்துங்கள்.
6. சரிசெய்து, அதே பணிகளை மீண்டும் சோதியுங்கள்.
7. அணுகல் அறிக்கையை வெளியிடுங்கள்: நீங்கள் எந்த தரநிலையை இலக்காகக் கொள்கிறீர்கள், பிரச்சினைகளை எப்படிப் புகார் செய்வது என்று சொல்லுங்கள் - அந்தப் புகார்களுக்குப் பதிலளியுங்கள்.

பொதுவான தவறுகள்

• Overlay விட்ஜெட்டை நம்புவது, கோடைச் சரிசெய்வதற்குப் பதிலாக.
• Focus outline-களை அகற்றுவது, அவை ஒழுங்கற்றதாகத் தெரிகின்றன என்பதற்காக, மாற்றாக எதுவும் இல்லாமல்.
• Placeholder உரை மட்டுமே லேபிளாக இருப்பது. ஒருவர் தட்டச்சு செய்யத் தொடங்கியதும் அது மறைந்துவிடும், பெரும்பாலும் குறைந்த மாறுபாடு கொண்டிருக்கும்.
• "Click here" மற்றும் "Read more" இணைப்புகள். சூழலில்லாமல், திரை வாசிப்பான் பயனர் ஒரே மாதிரியான இணைப்புகளின் பட்டியலைக் கேட்பார்.
• சாவிச்சொற்கள் திணிக்கப்பட்ட alt உரை. Alt உரை மக்களுக்கானது; படத்தை விவரியுங்கள்.
• ஒருமுறை மட்டும் சோதிப்பது. ஒவ்வொரு புதிய அம்சமும் விசைப்பலகை அணுகலை உடைக்கலாம். வெளியீட்டுக்கு முந்தைய சோதனையில் ஒரு விசைப்பலகைப் பாஸ் சேருங்கள்.

அணுகல் சரிபார்ப்புப் பட்டியல்

• முக்கியப் பக்கங்களில் தானியங்கி சோதனை (Lighthouse அல்லது axe) சுத்தம்
• ஒவ்வொரு பணியையும் விசைப்பலகை மட்டும் கொண்டு முடிக்கலாம்
• Focus எப்போதும் தெரியும், ஒட்டும் கூறுகளுக்குப் பின்னால் மறைக்கப்படுவதில்லை
• Semantic தலைப்புகள், landmarks, buttons மற்றும் links; lang அமைக்கப்பட்டுள்ளது
• அர்த்தமுள்ள alt உரை; அலங்காரப் படங்களுக்கு alt=""; வீடியோவில் வசன வரிகள்
• உரை மாறுபாடு ≥ 4.5:1 (பெரிய உரை ≥ 3:1); இடைமுகப் பகுதிகள் ≥ 3:1
• 200% ஜூம் மற்றும் 320 px அகலத்தில் வேலை செய்கிறது
• ஒவ்வொரு படிவப் புலத்திற்கும் தெரியும் லேபிளும் தெளிவான பிழைச் செய்திகளும் உள்ளன
• புகார் செய்யும் வழியுடன் ஒரு அணுகல் அறிக்கை

இதன் பின்னணிக் கருத்துகளுக்கு, இணைய அணுகல் என்றால் என்ன படியுங்கள். அணுகக்கூடிய வடிவமைப்பும் நல்ல வடிவமைப்பும் பெரிதும் ஒன்றுடன் ஒன்று சேரும்; AI மூலம் அழகான ஆப்பை வடிவமைப்பது எப்படி காட்சிப் பக்கத்தை விளக்குகிறது.

Mythex-இல் அணுகல்

Mythex நீங்கள் கேட்கும் எந்தத் தரநிலையுடனும் உருவாக்குகிறது; எனவே "WCAG 2.2 AA" என்பதை முதல் கோரிக்கையிலும் அடுத்தடுத்த கோரிக்கைகளிலும் வையுங்கள். Preview-இன் கைப்பேசி அளவு சட்டத்தை சிறிய திரைகளைச் சரிபார்க்கப் பயன்படுத்தலாம் (Preview and Code); ஆனால் விசைப்பலகை, ஜூம், திரை வாசிப்பான் சோதனைகள் வெளியிடப்பட்ட URL-இல் அல்லது preview-ஐத் தனி தாவலில் திறந்து சிறப்பாக வேலை செய்யும். ஒரு பக்கத்தைத் தணிக்கை செய்து, கண்டுபிடித்ததைச் சரிசெய்யும்படி முகவரிடம் கேளுங்கள், பிறகு சரிசெய்தல்களை நீங்களே சோதியுங்கள் - தானியங்கி பாஸ் ஒரு தொடக்கமே, இறுதி ஒப்புதல் அல்ல.

கேள்விகள்