Web Accessibility என்றால் என்ன? WCAG மற்றும் உள்ளடக்கிய வடிவமைப்பு விளக்கம்
Web accessibility என்பது வலைத்தளங்களையும் ஆப்களையும் மாற்றுத்திறனாளிகள் பயன்படுத்தும் வகையில் உருவாக்குவது — அவர்கள் பார்வையற்றவர்களாக திரை வாசிப்பானைப் பயன்படுத்தினாலும், சுட்டியைப் பயன்படுத்த முடியாதவர்களாக இருந்தாலும், குறைந்த பார்வை அல்லது வண்ணக்குருடு உள்ளவர்களாக இருந்தாலும், காது கேளாதவர்களாக இருந்தாலும், அறிவாற்றல் அல்லது கற்றல் குறைபாடு உள்ளவர்களாக இருந்தாலும். நடைமுறையில் இது படங்களுக்கான மாற்று உரை, போதுமான வண்ண மாறுபாடு, சரியான லேபிள்கள் கொண்ட படிவங்கள், விசைப்பலகையால் மட்டுமே எல்லாம் வேலை செய்வது போன்றவற்றுக்குள் அடங்கும். இதற்கான சர்வதேசத் தரம் WCAG — W3C வெளியிடும் Web Content Accessibility Guidelines.
Accessibility என்பது பெரும்பாலும் a11y என்று சுருக்கப்படுகிறது — "a", பிறகு 11 எழுத்துகள், பிறகு "y".
AI உடன் உருவாக்கும்போது அணுகல்தன்மை ஏன் முக்கியம்
AI பில்டர்கள் சரியாகத் தோற்றமளிக்கும் ஆப்களை உருவாக்குவதில் சிறந்தவர்கள். அணுகல்தன்மை பெரும்பாலும் ஸ்கிரீன்ஷாட்டில் உங்களுக்குத் தெரியாதவற்றைப் பற்றியது: ஒரு பொத்தான் உண்மையிலேயே பொத்தானா, ஒரு உள்ளீட்டுப் பெட்டிக்கு திரை வாசிப்பான் அறிவிக்கக்கூடிய லேபில் உள்ளதா, Tab விசையால் மெனுவை அடைய முடியுமா.
அதனால் கேட்பது முக்கியம்:
- இதைத் தவறவிடுவது எளிது. தனிப்பயனாக்கப்பட்ட dropdown பார்ப்பதற்கு சரியாக இருந்தாலும் சுட்டி இல்லாமல் பயன்படுத்த முடியாததாக இருக்கலாம். சோதிக்காவிட்டால் நீங்கள் கவனிக்க மாட்டீர்கள்.
- ஆரம்பத்திலேயே சரியாகச் செய்வது மலிவானது. முதல் prompt-இலிருந்தே அணுகக்கூடிய கூறுகளைக் கேட்பதற்கு கிட்டத்தட்ட செலவு இல்லை. முடிந்த ஆப்பில் பின்னர் சேர்ப்பது என்றால் ஒவ்வொரு திரையையும் தொட வேண்டியிருக்கும்.
- இது எல்லோருக்கும் உதவுகிறது. சத்தமான இடங்களில் உள்ளவர்களுக்கு வசன வரிகள் உதவும், வெயிலில் கைப்பேசியில் பார்ப்பவர்களுக்கு நல்ல மாறுபாடு உதவும், தெளிவான லேபிள்கள் எல்லோரும் படிவங்களை வேகமாக நிரப்ப உதவும்.
- SEO உடன் ஒன்றுடன் ஒன்று சேர்கிறது. சரியான தலைப்புகள், விவரமான இணைப்புகள், alt text ஆகியவை தேடுபொறிகளுக்கும் உங்கள் பக்கங்களைப் புரிந்துகொள்ள உதவும் — பார்க்க: AI மூலம் கட்டப்பட்ட வலைத்தளங்களுக்கான SEO.
- இது தேவைப்படலாம். நீங்கள் எங்கு செயல்படுகிறீர்கள், யாருக்குச் சேவை செய்கிறீர்கள் என்பதைப் பொறுத்து, அணுகல்தன்மை சட்டக் கடமையாக இருக்கலாம்.
அன்றாட உதாரணம்
ஒரு கட்டிடத்தின் நுழைவாயிலை நினையுங்கள்.
படிகள் பலருக்கு சரியாக வேலை செய்யும். சக்கர நாற்காலிப் பயனர்களுக்கு சாய்வுப்பாதை வேலை செய்யும் — குழந்தை வண்டியுடன் வரும் பெற்றோர்கள், தள்ளுவண்டியுடன் வரும் விநியோகத் தொழிலாளர்கள், பெட்டிகளுடன் வரும் பயணிகளுக்கும் அது பயன்படும். தானியங்கிக் கதவுகள், தெளிவான பலகைகள், லிஃப்ட் பொத்தான்களில் பிரெய்ல், நல்ல வெளிச்சம் ஒவ்வொன்றும் ஒருவருக்கான ஒரு தடையை நீக்குகின்றன.
Web accessibility என்பது டிஜிட்டல் இடங்களுக்கும் அதே கருத்து: உங்கள் ஆப்பின் சாய்வுப்பாதைகள், பலகைகள், கைப்பிடிகள். கட்டிடத்தைப் போலவே, கான்கிரீட் இறுகிய பிறகு ஒரு சாய்வுப்பாதையைச் சேர்ப்பதை விட திட்டத்திலேயே சேர்ப்பது மிக எளிது.
WCAG சுருக்கமாக
WCAG, W3C-இன் Web Accessibility Initiative வெளியிடுகிறது. தற்போதைய பதிப்பு WCAG 2.2, அக்டோபர் 2023-இல் முதலில் வெளியானது. அது பின்னோக்கிப் பொருந்தக்கூடியது: WCAG 2.2-ஐ பூர்த்தி செய்யும் உள்ளடக்கம் 2.1 மற்றும் 2.0-ஐயும் பூர்த்தி செய்கிறது, மேலும் சமீபத்திய பதிப்பைப் பயன்படுத்த W3C ஊக்குவிக்கிறது. WCAG 2.2 சர்வதேசத் தரமாகவும் அங்கீகரிக்கப்பட்டுள்ளது, ISO/IEC 40500:2025. மிக வேறுபட்ட WCAG 3 ஆரம்ப வரைவாக வளர்ச்சியில் உள்ளது, முடிக்கப்பட்ட தரம் அல்ல.
WCAG நான்கு கோட்பாடுகளின் கீழ் அமைந்துள்ளது, பெரும்பாலும் POUR என்று நினைவில் வைக்கப்படுகிறது:
| கோட்பாடு | பொருள் | எடுத்துக்காட்டுகள் |
|---|---|---|
| Perceivable (உணரக்கூடியது) | மக்கள் பயன்படுத்தும் புலன்களால் உள்ளடக்கத்தை உள்வாங்க முடியும் | படங்களுக்கு alt text, வீடியோவுக்கு வசன வரிகள், போதுமான மாறுபாடு |
| Operable (இயக்கக்கூடியது) | மக்கள் கட்டுப்பாடுகளைப் பயன்படுத்தி வழிசெலுத்த முடியும் | விசைப்பலகை அணுகல், நீட்டிக்க முடியாத நேர வரம்புகள் இல்லாதது, தெரியும் focus |
| Understandable (புரியக்கூடியது) | உள்ளடக்கமும் நடத்தையும் பொருள் தருகின்றன | தெளிவான லேபிள்கள், உதவிகரமான பிழைச் செய்திகள், ஒரே மாதிரியான வழிசெலுத்தல் |
| Robust (வலிமையானது) | பல உலாவிகளுடனும் உதவித் தொழில்நுட்பங்களுடனும் வேலை செய்கிறது | சரியான HTML கூறுகள், கட்டுப்பாடுகளுக்கான சரியான பெயர்கள் மற்றும் பங்குகள் |
ஒவ்வொரு வழிகாட்டுதலுக்கும் மூன்று நிலைகளில் சோதிக்கக்கூடிய வெற்றி அளவுகோல்கள் உள்ளன:
- நிலை A — குறைந்தபட்சம். இவற்றில் தோல்வியடைந்தால் சிலர் முற்றிலும் தடைபடுவார்கள்.
- நிலை AA — நிலையான இலக்கு, பெரும்பாலான சட்டங்களும் கொள்கைகளும் சுட்டும் நிலை.
- நிலை AAA — மிக உயர்ந்த நிலை. சில இடங்களில் இலக்காக வைத்துக்கொள்வது பயனுள்ளது, ஆனால் சில உள்ளடக்கங்களால் அதை எட்ட முடியாது என்பதால், முழு தளங்களுக்கும் இதைக் கட்டாயமாக்குவதை W3C பரிந்துரைக்கவில்லை.
WCAG 2.2 2.1-க்கு ஒன்பது வெற்றி அளவுகோல்களைச் சேர்த்தது, அவற்றில் நிலை AA-வில் Target Size (Minimum) — கிளிக் செய்யக்கூடிய இலக்குகள் பொதுவாக குறைந்தது 24 x 24 CSS pixel-ஆக இருக்க வேண்டும், விதிவிலக்குகளுடன் — மற்றும் Accessible Authentication (Minimum), இது நினைவாற்றல் அல்லது புதிர்களைச் சார்ந்த உள்நுழைவுப் படிகளைக் கட்டுப்படுத்துகிறது, உதாரணமாக கடவுச்சொல்லை ஒட்டவிடாமல் மீண்டும் தட்டச்சு செய்யச் சொல்வது. பழைய "Parsing" அளவுகோலை காலாவதியானது என்று நீக்கியும் உள்ளது.
ஓர் எடுத்துக்காட்டு: பதிவுப் படிவம்
AI உருவாக்கக்கூடிய ஒரு பதிவுப் படிவமும், அணுகல்தன்மைச் சோதனை கண்டறிவதும் இதோ:
| பிரச்சினை | யாரைப் பாதிக்கிறது | சரிசெய்தல் |
|---|---|---|
| உள்ளீடுகள் லேபிள்களுக்குப் பதில் placeholder உரையை ("Email") பயன்படுத்துகின்றன | திரை வாசிப்பான் பயனர்கள்; தட்டச்சு செய்யத் தொடங்கியதும் புலம் எதற்கு என்று மறப்பவர்கள் | ஒவ்வொரு உள்ளீட்டுடனும் இணைக்கப்பட்ட தெரியும் <label> |
| வெள்ளையில் வெளிர் சாம்பல் உரை, 4.5:1-ஐ விட மிகக் குறைவு | குறைந்த பார்வை உள்ளவர்கள், வெளியில் இருப்பவர்கள் | 4.5:1 மாறுபாட்டை பூர்த்தி செய்யும் கருமையான உரை |
| பிழைகள் சிவப்பு எல்லையாக மட்டும் காட்டப்படுகின்றன | வண்ணக்குருடு பயனர்கள், திரை வாசிப்பான் பயனர்கள் | புலத்துக்கு அருகில் ஒரு உரைச் செய்தி, திரை வாசிப்பான்களுக்கு அறிவிக்கப்படும் |
"Sign up" ஒரு style செய்யப்பட்ட <div>, <button> அல்ல | விசைப்பலகை மற்றும் திரை வாசிப்பான் பயனர்களால் இயக்க முடியாது | உண்மையான <button> கூறைப் பயன்படுத்துங்கள் |
| புலங்களில் Tab செய்யும்போது தெரியும் வெளிக்கோடு இல்லை | விசைப்பலகைப் பயனர்கள் தாங்கள் எங்கே இருக்கிறோம் என்பதை இழக்கிறார்கள் | தெளிவான focus style |
| லோகோ படத்தில் alt text இல்லை | திரை வாசிப்பான் பயனர்கள் ஒரு கோப்புப் பெயரைக் கேட்கிறார்கள் | "Acme Bookings" போன்ற alt text |
இவற்றில் எந்தச் சரிசெய்தலும் படிவத்தின் தோற்றத்தை அதிகம் மாற்றாது. ஆனால் எல்லாமே சிலர் அதை எவ்வாறு பயன்படுத்த முடியும் என்பதை மாற்றுகின்றன.
முக்கியச் சொற்கள்
| சொல் | பொருள் |
|---|---|
| திரை வாசிப்பான் | திரையை உரக்கவோ பிரெய்ல் காட்சிக்கோ வாசிக்கும் மென்பொருள், எடுத்துக்காட்டாக VoiceOver, NVDA அல்லது JAWS. |
| Alt text | ஒரு படத்தின் உரை விவரம், திரை வாசிப்பான்கள் வாசிக்கும். அலங்காரப் படங்களுக்கு வெற்று alt text கொடுக்கப்பட்டு அவை தவிர்க்கப்படும். |
| Contrast ratio (மாறுபாட்டு விகிதம்) | உரையும் பின்னணி வண்ணமும் எவ்வளவு வேறுபடுகின்றன, 1:1 முதல் 21:1 வரை. |
| Keyboard navigation | சுட்டிக்குப் பதில் Tab, Enter, Space மற்றும் அம்புக்குறி விசைகளால் தளத்தில் வழிசெல்வது. |
| Focus indicator | விசைப்பலகை எந்தக் கூறில் உள்ளது என்று காட்டும் தெரியும் வெளிக்கோடு. |
| Semantic HTML | வேலைக்குச் சரியான கூறைப் பயன்படுத்துவது — <button>, <nav>, <h2> — உலாவிகளும் உதவித் தொழில்நுட்பமும் பக்கத்தைப் புரிந்துகொள்ள. |
| ARIA | தனிப்பயன் கட்டுப்பாடுகளை உதவித் தொழில்நுட்பத்திற்கு விவரிக்கும் கூடுதல் பண்புகள். குறைவாகப் பயன்படுத்துவது சிறந்தது; சொந்த HTML கூறுகளே முதலில். |
| Assistive technology (உதவித் தொழில்நுட்பம்) | திரை வாசிப்பான்கள் முதல் switch சாதனங்கள், குரல் கட்டுப்பாடு வரை, மக்கள் கணினிகளை அணுகப் பயன்படுத்தும் கருவிகள். |
பொதுவான தவறான கருத்துகள்
- "அணுகல்தன்மை பார்வையற்ற பயனர்களுக்கு மட்டுமே முக்கியம்." இது பார்வை, இயக்கம், கேட்டல், பேச்சு, அறிவாற்றல் குறைபாடுகளையும், கை முறிவு போன்ற தற்காலிக நிலைமைகளையும் உள்ளடக்குகிறது.
- "அணுகக்கூடிய தளங்கள் சாதாரணமாகத் தெரியும்." அணுகல்தன்மை சில விஷயங்களைக் கட்டுப்படுத்துகிறது — மாறுபாடு, focus styles, உரை அளவு — ஆனால் நல்ல தோற்றமுள்ள அணுகக்கூடிய தளங்களே வழக்கம், விதிவிலக்கு அல்ல.
- "ஒரு தானியங்கிச் சோதனையாளர் 100 என்று காட்டுகிறது, எனவே முடிந்தது." தானியங்கிக் கருவிகள் சில பிரச்சினைகளை மட்டுமே பிடிக்கும். alt text உண்மையில் அர்த்தமுள்ளதா, அல்லது திரை வாசிப்பானுடன் ஒரு ஓட்டம் பொருள் தருகிறதா என்பதற்கு ஒரு மனிதர் சோதிக்க வேண்டும்.
- "ஒரு overlay widget எங்களை இணக்கமாக்கும்." மேலே பொருத்தப்பட்ட கருவிப்பட்டிகளால் உங்கள் கோடில் உள்ள விடுபட்ட லேபிள்களையோ உடைந்த விசைப்பலகை அணுகலையோ சரிசெய்ய முடியாது. மூலத்தைச் சரிசெய்யுங்கள்.
- "எங்களுக்கு மாற்றுத்திறனாளி பயனர்கள் இல்லை." உங்களுக்குத் தெரியாமலிருக்கலாம். பல குறைபாடுகள் வெளியில் தெரிவதில்லை, தடையை எதிர்கொள்பவர்கள் பொதுவாக வெளியேறிவிடுகிறார்கள்.
உங்கள் AI பில்டரிடம் என்ன கேட்பது
- "இதை WCAG 2.2 நிலை AA-வை பூர்த்தி செய்யும் வகையில் உருவாக்கவும்."
- "Semantic HTML பயன்படுத்தவும்: உண்மையான பொத்தான்கள், இணைப்புகள், வரிசையான தலைப்புகள், ஒவ்வொரு படிவப் புலத்துக்கும் லேபிள்கள்."
- "ஒவ்வொரு ஊடாடும் கூறும் விசைப்பலகையால் மட்டுமே வேலை செய்வதையும் தெரியும் focus style கொண்டிருப்பதையும் உறுதி செய்யவும்."
- "எல்லா உரை மற்றும் ஐகான் வண்ணங்களின் மாறுபாட்டைச் சரிபார்க்கவும் — சாதாரண உரைக்கு 4.5:1, பெரிய உரை மற்றும் ஐகான்களுக்கு 3:1."
- "தகவல் தரும் படங்களுக்கு அர்த்தமுள்ள alt text, அலங்காரப் படங்களுக்கு வெற்று alt text சேர்க்கவும்."
- "படிவப் பிழைகளை உரையாகக் காட்டவும், புலத்துடன் இணைக்கவும், வண்ணத்தை மட்டும் நம்பியிருக்க வேண்டாம்."
- "அனிமேஷன்களுக்கு பயனரின் reduced-motion அமைப்பை மதிக்கவும்."
- "ஒரு தானியங்கி அணுகல்தன்மைச் சோதனையை இயக்கி, அது சோதிக்க முடியாதவற்றைப் பட்டியலிடவும், அதை நான் கைமுறையாகச் சரிபார்க்கலாம்."
பிறகு நீங்களே சோதியுங்கள்: சுட்டியை ஒதுக்கி வைத்து, Tab, Shift+Tab, Enter மற்றும் Space மட்டும் பயன்படுத்தி உங்கள் முக்கிய ஓட்டத்தை முடிக்க முயலுங்கள். முதன்மைப் பக்கத்தில் உங்கள் கைப்பேசியின் உள்ளமைந்த திரை வாசிப்பானை முயலுங்கள். உலாவியை 200% அளவுக்கு பெரிதாக்கி ஏதாவது உடைகிறதா என்று பாருங்கள்.
Mythex-இல் அணுகல்தன்மை
Mythex-இல் பிரத்யேக அணுகல்தன்மைச் சரிபார்ப்பான் இல்லை, எனவே அணுகல்தன்மையை உங்கள் prompt-களின் மற்றும் சோதனையின் ஒரு பகுதியாகக் கருதுங்கள். முதல் prompt-இலிருந்தே WCAG 2.2 AA கேளுங்கள், Preview-இல் விசைப்பலகையால் முடிவைச் சரிபாருங்கள், வெளியிடுவதற்கு முன் முக்கிய ஓட்டங்களை ஏஜெண்ட் சொடுக்கிச் சோதிக்க /test பயன்படுத்துங்கள் — App Testing பார்க்கவும். SEO செய்முறையும் சிறந்த தலைப்புகளையும் அர்த்தமுள்ள alt text-ஐயும் கேட்கிறது; இவை இரண்டு இலக்குகளுக்கும் உதவுகின்றன.
நடைமுறைச் சரிபார்ப்புப் பட்டியலுக்கு, உங்கள் வலைத்தளத்தை அணுகக்கூடியதாக்குவது எப்படி பார்க்கவும். வடிவமைப்புக்கு, AI உடன் நல்ல தோற்றமுள்ள ஆப்பை எப்படி வடிவமைப்பது படியுங்கள், வெளியிடுவதற்கு முன், வெளியிடுவதற்கு முன் உங்கள் ஆப்பை எப்படிச் சோதிப்பது. W3C-இன் சொந்த WCAG கண்ணோட்டம் அதிகாரபூர்வ ஆதாரம்.
கேள்விகள்
Web accessibility என்றால் எளிய வார்த்தையில் என்ன?
Web accessibility என்பது வலைத்தளங்களையும் ஆப்களையும் மாற்றுத்திறனாளிகள் உணர, புரிந்துகொள்ள, வழிசெலுத்த மற்றும் பயன்படுத்தும் வகையில் வடிவமைத்து உருவாக்குவது. பார்வையற்றோர் திரை வாசிப்பான்களைப் பயன்படுத்துவது, சுட்டியைப் பயன்படுத்த முடியாதவர்கள், குறைந்த பார்வை அல்லது வண்ணக்குருடு உள்ளவர்கள், காது கேளாதவர்கள், அறிவாற்றல் குறைபாடு உள்ளவர்கள் அனைவரும் இதில் அடங்குவர்.
WCAG என்றால் என்ன?
WCAG (Web Content Accessibility Guidelines) என்பது வலை அணுகல்தன்மைக்கான சர்வதேசத் தரம், W3C வெளியிட்டது. தற்போதைய பதிப்பு WCAG 2.2, அக்டோபர் 2023-இல் முதலில் வெளியானது. அதன் வெற்றி அளவுகோல்கள் A, AA மற்றும் AAA நிலைகளாகப் பிரிக்கப்பட்டுள்ளன; பெரும்பாலான நிறுவனங்களும் சட்டங்களும் குறிப்பிடும் இலக்கு AA நிலை.
WCAG எந்த வண்ண மாறுபாட்டைக் கேட்கிறது?
AA நிலையில், சாதாரண உரைக்கு அதன் பின்னணியுடன் குறைந்தது 4.5:1 மாறுபாட்டு விகிதம் தேவை; பெரிய உரைக்கு (தோராயமாக 18 point, அல்லது தடித்த 14 point) குறைந்தது 3:1 தேவை. ஐகான்களும் கட்டுப்பாடுகளின் தெரியும் பகுதிகளும் அருகில் உள்ளவற்றுடன் குறைந்தது 3:1 கொண்டிருக்க வேண்டும்.
வலை அணுகல்தன்மை சட்டத் தேவையா?
பல இடங்களில், பல நிறுவனங்களுக்கு, ஆம். சட்டங்கள் நாடு மற்றும் துறைக்கு ஏற்ப வேறுபடுகின்றன — உதாரணமாக, ஐரோப்பிய அணுகல்தன்மைச் சட்டம் (European Accessibility Act) ஐரோப்பிய ஒன்றியத்தில் பல நுகர்வோர் டிஜிட்டல் பொருட்களையும் சேவைகளையும் உள்ளடக்குகிறது. உங்களுக்குப் பொருந்தும் விதிகளைச் சரிபாருங்கள், அல்லது ஒரு சட்ட ஆலோசகரிடம் கேளுங்கள்.
அணுகல்தன்மை overlay அல்லது widget என் தளத்தை இணக்கமாக்குமா?
அதுவாக மட்டும் இல்லை. Overlay உங்கள் தளத்தின் மேல் ஒரு கருவிப்பட்டியைச் சேர்க்கும், ஆனால் லேபிள்கள் இல்லாதது, விசைப்பலகை வழிசெலுத்தல் வேலை செய்யாதது, தெளிவற்ற அமைப்பு போன்ற அடிப்படைப் பிரச்சினைகளை அவற்றால் நம்பகமாகச் சரிசெய்ய முடியாது. நம்பகமான வழி தளத்தின் கோடையும் உள்ளடக்கத்தையும் சரிசெய்வதே.