# அணுகக்கூடிய வலைப் பக்கங்களை உருவாக்குதல்
> [Tomomi Imura](https://twitter.com/girlie_mac) அவர்களின் ஸ்கெட்ச்நோட்
```mermaid
journey
title உங்கள் அணுகல் கற்றல் சாகசம்
section அடித்தளம்
பயனர்களை புரிதல்: 5: You
சோதனை கருவிகள்: 4: You
POUR கொள்கைகள்: 5: You
section திறன்களை உருவாக்கு
பொருத்தமான HTML: 4: You
காட்சி வடிவமைப்பு: 5: You
ARIA முறைகள்: 4: You
section மேம்பட்ட பயிற்சி
விசைபலகை வழிசெலுத்தல்: 5: You
படிவ அணுகுதன்மை: 4: You
حقیقی உலக சோதனை: 5: You
```
## முன்-பாடக் கேள்வி
[முன்-பாடக் கேள்வி](https://ff-quizzes.netlify.app/web/)
> வலைப்பின்னலின் சக்தி அதன் பல்துறைத்தன்மையில் உள்ளது. மாற்றுத்திறனாளிகளின் நிலையை பொருட்படுத்தாமல் அனைவருக்கும் அணுகல் என்பது அடிப்படையான அம்சமாகும்.
>
> \- சர் டிமோத்தி பெர்னர்ஸ்-லி, W3C இயக்குநர் மற்றும் உலகளாவிய வலைப்பின்னலின் கண்டுபிடிப்பாளர்
இதைப் பாருங்கள், உங்களை ஆச்சரியப்படுத்தக்கூடிய ஒன்றை சொல்லப்போகிறேன்: நீங்கள் அணுகக்கூடிய இணையதளங்களை உருவாக்கும் போது, நீங்கள் மாற்றுத்திறனாளிகளுக்கு மட்டுமின்றி அனைவருக்கும் இணையத்தை மேம்படுத்துகிறீர்கள்!
நீங்கள் தெருவின் மூலைகளில் இருக்கும் குறிகாட்டி குறுக்குவிழல்கள் (curb cuts) கவனித்திருக்கலாச்சிற்றா? அவை முதலில் மாற்றுத்திறனாளிகளுக்கு உருவாக்கப்பட்டன, ஆனால் இப்போது பசலை ஏறி செல்லும் அப்பாரத்திற்கு, பொருட்களை சென்றாடும் பணியாளர்களுக்கு, சஞ்சிகள் கொண்டு சுற்றும் பயணிகளுக்கு, மற்றும் சைக்கிள் ஓட்டுநர்களுக்கும் உதவுகின்றன. இணையத்தில் அணுகல் வடிவமைப்பும் இதே போலவே வேலை செய்கிறது—ஒரு குழுவுக்கு உதவும் தீர்வுகள் பெரும்பாலும் அனைவருக்கும் லாபமாகிறது. அசாத்தியமாக இருக்கிறது இல்லையா?
இந்த பாடத்தில், எவ்வாறு அனைவருக்கும் உண்மையில் வேலை செய்வதாக உள்ள இணையத்தளங்களை உருவாக்குவது என்பதை ஆராயப்போகிறோம். நீங்கள் வலைத் தரநிலைகளில் ஏற்கனவே உள்ள நடைமுறை தொழில்நுட்பங்களை கண்டுபிடிப்பீர்கள், சோதனை கருவிகளுடன் கைப்பயிற்சி பெறுவீர்கள், மற்றும் அணுகல் உங்கள் தளங்களை எல்லா பயனர்களுக்கும் பரவலாக பயன்படுத்தக்கூடியதாக மாற்றுவது எப்படி என்பதை பார்க்கப்போகிறோம்.
இந்த பாடத்தின் முடிவில், நீங்கள் வடிவமைப்பு பண்பாட்டு வேலைப்பாட்டிற்குள் இயல்பான முறையில் அணுகலைச் சேர்க்கும் தைரியத்தை கையளிப்பீர்கள். கவனமுடன் செய்யப்பட்ட வடிவமைப்பு தேர்வுகள் பில்லியன் பயனர்களுக்கு இணையத்தை திறந்து விட கூடும் என்பதை ஆராய தயாரா? வாருங்கள் தொடங்குவோம்!
```mermaid
mindmap
root((வலை அணுகுமுறை))
Users
Screen readers
Keyboard navigation
Voice control
Magnification
Technologies
HTML semantics
ARIA attributes
CSS focus indicators
Keyboard events
Benefits
பரப்பு பார்வையாளர்
சிறந்த SEO
சட்ட ஏற்றுதல்
பொது வடிவமைப்பு
Testing
தானியங்கி கருவிகள்
கையேடு சோதனை
பயனர் பின்னூட்டம்
உண்மையான உதவித்தொழில்நுட்பம்
```
> இந்த பாடத்தை [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)ல் எடுக்கலாம்!
## உதவிகரமான தொழில்நுட்பங்களைப் புரிந்து கொள்வது
கூடுதல் கையேட்டை தொடங்கும் முன், வலைத்தளத்தை மாற்று திறனுடையோர் எப்படி உணர்கிறார்கள் என்பதை கொஞ்சம் புரிந்து கொள்வோம். இது வெறும் கோட்பாடு அல்ல—மெய்நிகர் உலகில் அவர்களின் வழிசெல்லும் முறைகள் புரிந்துகொள்ளப்படுவதே உங்களை சிறந்த டெவலப்பராக மாற்றும்!
உதவியாயுள்ள தொழில்நுட்பங்கள் மாற்றுத்திறனாளிகளுக்கு இணையத்தை தொடர்பு கொள்ள உதவுகின்ற 'அற்புதப் பொருட்கள்'. வேலை செய்வதற்கு அவற்றின் பணியை புரிந்துக்கொண்டால், அணுகக்கூடிய வலை அனுபவங்களை உருவாக்குவது மிகவும் இயல்பானது ஆகும். இது உங்கள் கோடுகளை ஒருவரது பார்வை கொண்டே காண கற்றுக்கொள்ள போல உள்ளது.
### திரைக்கேட்கும் கருவிகள்
[திரைக்கேட்கும் கருவிகள்](https://en.wikipedia.org/wiki/Screen_reader) என்பது மிக நுட்பமான தொழில்நுட்பங்கள், அவை டிஜிட்டல் எழுத்தை சொல் அல்லது ப்ரெயில் வெளியீட்டாக மாற்றுகின்றன. பிரதானமாகக் கண்ணுக்கு பாதிப்புள்ளோர் பயன்படுத்தினாலும், கற்பித்தல் தடைகளை கொண்டவர்களுக்கும் (கருவிழுப்பு போன்ற) பெரிதும் உதவுகிறது.
நான் திரைக்கேட்கும் கருவியை புத்தகத்தை அறிவுடைய கதை சொல்லுமொரு தனிமனிதனாகக் கருத விரும்புகிறேன். அது உள்ளடக்கத்தை சரியான வரிசையில்்டே படிக்கிறது, "பட்டன்" அல்லது "இணைப்பு" போன்ற செயல்பாட்டுக் கூறுகளை அறிவிக்கிறது, மற்றும் பக்கத்தில் சுற்ற இடப்பெயர்த்துக் கொள்ள விசைப்பலகை குறுஞ்சொற்களை வழங்குகிறது. ஆனால் முக்கியம் என்னவென்றால்—திரைக்கேட்கும் கருவிகள் வலைத்தளங்களில் சரியான கட்டமைப்பும் பொருள் பூர்வமான உள்ளடக்கமும் இருக்கையால் அவர்கள் மாயாஜாலத்தை செய்ய முடியும். அங்கே நீங்கள் டெவலப்பராக இருக்கிறீர்கள்!
**விளவான திரைக்கேட்கும் கருவிகள் பல்வேறு தளங்களில்:**
- **விண்டோஸ்**: [NVDA](https://www.nvaccess.org/about-nvda/) (இலவசம் மற்றும் மிகவும் பிரபலமானது), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (நிரம்பியதாக உள்ளது)
- **மெக்/ஐஓஎஸ்**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (நிரம்பியதாகவும் திறமையானது)
- **ஆண்ட்ராய்டு**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (நிரம்பியதாக உள்ளது)
- **லினக்ஸ்**: [Orca](https://wiki.gnome.org/Projects/Orca) (இலவசமும் திறந்தவளமும்)
**திரைக்கேட்கும் கருவிகள் வலை உள்ளடக்கத்தில் எவ்வாறு சென்று கொண்டிருப்பன:**
திரைக்கேட்கும் கருவிகள் பலவிதமான வழிசெலுத்தல் முறைகள் வழங்குகின்றன, இது அனுபவமுள்ள பயனர்களுக்கு உலாவலை துரிதப்படுத்துகிறது:
- **வரிசைப்படுத்தப்பட்ட வாசிப்பு**: உள்ளடக்கத்தை மேலிருந்து கீழ்வரை வாசிக்கிறது, புத்தகப் படிப்பின் போல
- **புகழ்பெயர் வழிசெல்**: பக்கப் பகுதிகளுக்கு இடையே (தலைப்பு, வழிசெல், முக்கியம், அடிக்குறிப்பு)
- **தலைப்பு வழிசெல்**: தலைப்புகளுக்கு இடையேயாக தாண்டிப் பக்கம் அமைப்பை புரிந்துகொள்ள
- **இணைப்பு பட்டியல்**: அனைத்து இணைப்புகளின் பட்டியலை துரித அணுகலுக்காக உருவாக்கவும்
- **படிவ கட்டுப்பாடுகள்**: உள்ளீட்டு பகுதிகளுக்கு நேரடியாக செல்வது மற்றும் பட்டன்கள்
> 💡 **இதனால் எனக்கு வியப்பு ஏற்பட்டது**: 68% திரைக்கேட்கும் பயனர்கள் முதன்மையாக தலைப்புகளினை வழிசெல் முறையாக பயன்படுத்துகின்றனர் ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding)). இதன் பொருள் உங்கள் தலைப்பு கட்டமைப்பு பயனர்களுக்கான ஒரு வரைபடம் போன்றது—சரி செய்தால் உங்கள் உள்ளடக்கத்தில் பயனர்கள் விரைவில் வழி கண்டுபிடிக்க உதவும்!
### உங்கள் சோதனை பணிப்பாட்டை உருவாக்குதல்
சாதாரண வசதியான அணுகல் சோதனை நிர்வகிக்க சிரமமில்லை என்பது நல்ல செய்தி! நீங்கள் தானாக செயல்படும் கருவிகளுடன் (அவை தெளிவான பிழைகளை பிடிக்க நல்லவை) கைகோர்த்து சோதனையை சேர்க்க வேண்டியிருக்கும். இதோ என் கண்டுபிடித்துள்ள ஒழுங்குபடுத்தப்பட்ட அணுகல் சோதனை நடைமுறை:
**அத்தியாவசிய கைமுறை சோதனை பணிப்பாடு:**
```mermaid
flowchart TD
A[🚀 சோதனை தொடங்கு] --> B{⌨️ விசைப்பலகை வழிசெலுத்தல்}
B --> C[அனைத்து இடைமுக கூறுகளிலும் தாப் சுழலம்]
C --> D{🎧 திரை வாசிப்பான் சோதனை}
D --> E[NVDA/வாய்ஸ் ஓவர் மூலம் சோதனை]
E --> F{🔍 பூஜ்ஜியம் சோதனை}
F --> G[200% வரை பெரியபடுத்தி செயல்பாட்டை சோதனை]
G --> H{🎨 நிறம்/பிரதிபலிப்பு சரிபார்ப்பு}
H --> I[அனைத்து உரையும் பிரதிபலிப்பு விகிதங்களை பூர்த்தி செய்கின்றதா என உறுதி செய்க]
I --> J{👁️ கவனம் மேலாண்மை}
J --> K[கவன குறியிடிகள் தெரியுமா என உறுதி செய்க]
K --> L[✅ சோதனை முடிவடைந்தது]
style A fill:#e3f2fd
style L fill:#e8f5e8
style B fill:#fff3e0
style D fill:#f3e5f5
style F fill:#e0f2f1
style H fill:#fce4ec
style J fill:#e8eaf6
```
**படி-படி சோதனை சரிபார்ப்பு பட்டியல்:**
1. **விசைப்பலகை வழிசெல்**: Tab, Shift+Tab, Enter, Space, மற்றும் அம்புக்களில் மட்டும் பயன்படுத்தவும்
2. **திரைக்கேட்கும் கருவி சோதனை**: NVDA, VoiceOver, அல்லது Narrator இயக்கி கண்களை மூடி வழிசெல் செய்யவும்
3. **பெரிதாக்குதல் சோதனை**: 200% மற்றும் 400% பெரிதாக்கல் நிலைகளில் சோதிக்கவும்
4. **வண்ண மரியாதை சரிபார்ப்பு**: அனைத்து உரை மற்றும் UI கூறுகளையும் சரிபார்க்கவும்
5. **கவனமைப்பு குறியீடு சோதனை**: அனைத்து செயல்பாட்டுக் கூறுகளுக்கும் தெளிவான கவனத்தை உறுதிப்படுத்தவும்
✅ **Lighthouse-இல் இருந்து தொடங்கவும்**: உலாவியின் DevTools திறந்து, Lighthouse அணுகல் சரிபார்ப்பை இயக்கி, முடிவுகளை வைத்து கைமுறை சோதனை கவன நிலைகளை வழி நடத்தவும்.
### பெரிதாக்கல் மற்றும் ஐந்து கருவிகள்
உங்கள் கைபேசியில் உரை சிறியதாக இருக்கும்போது நீங்கள் எப்போதாவது நிக்கிச்சி (pinch) செய்யும் விதமாக enlarge செய்ய நினைத்தீர்களா, அல்லது பிரகாசமான வெளிச்சத்தில் உங்கள் லேப்டாப் திரையை squint செய்து பார்த்திருக்கிறீர்களா? பல பயனர்கள் தினமும் உள்ளடக்கம் வாசிக்க நடுத்தரமாக்கும் கருவிகளைப் பயன்படுத்துகின்றனர். இதில் குறைந்த காட்சி திறனுடையவர்கள், முதியோர் மற்றும் வெளியில் இணையதள வாசிப்பவர்களும் அடங்குகின்றனர்.
நவீன பெரிதாக்கல் தொழில்நுட்பங்கள் வெறும் பெரிதாக்கதிற்கு மேல் தானாகவே வளர்ந்துள்ளன. இந்த கருவிகள் எப்படி வேலை செய்கின்றன என்பதை புரிந்தால், உங்கள் வடிவமைப்புகளை எந்த பெரிதாக்கல் அளவிலும் செயல்படும் மற்றும் அழகானவையாக உருவாக்க உதவும்.
**நவீன உலாவி பெரிதாக்கல் திறன்கள்:**
- **பக்கம் பெரிதாக்கல்**: எல்லா உள்ளடக்கத்தையும் (உரை, படங்கள், அமைப்பு) விகிதமான முறையில் பெரிதாக்கும் - இது விரும்பத்தக்க முறை
- **உரையே மட்டும் பெரிதாக்கல்**: எழுத்துரு அளவை அதிகரித்து, அசல் அமைப்பை பேணும்
- **பிட்ச்-டு-சூம்**: மொபைல் குறி அங்கீகாரம் தற்காலிக பெரிதாக்கலுக்கு
- **உலாவி ஆதரவு**: அனைத்து நவீன உலாவிகளும் 500% வரை பெரிதாக்கலை முறைமையாக ஆதரிக்கின்றன
**சிறப்பு பெரிதாக்கல் மென்பொருள்கள்:**
- **விண்டோஸ்**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (நிரம்பியது), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/)
- **மெக்/ஐஓஎஸ்**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (அதிகமான அம்சங்களுடன் நிரம்பியது)
> ⚠️ **வடிவமைப்பு கருத்துகு**: WCAG கட்டளை: உள்ளடக்கம் 200% பெரிதாக்கப்பட்டால் கூட செயல்படக் கூடியதாக இருக்க வேண்டும். இந்த நிலை ஆரம்பத்தில் அந்தரங்கஸ் உருச்சிதைச் scroll குறைவாக இருக்க வேண்டும், மற்றும் அனைத்து செயல்பாட்டுக் கூறுகளும் அணுகக்கூடியதாக இருக்க வேண்டும்.
✅ **உங்கள் பதிலளிக்கும் வடிவமைப்பை சோதிக்கவும்**: உலாவி 200% மற்றும் 400% பெரிதாக்கவும். உங்கள் அமைப்பு சிறப்பாகத் தழுவுகிறதா? நீங்கள் மிகுந்த scroll-ஐ தவிர்த்து எல்லா செயல்பாடுகளையும் அணுக முடியுமா?
## நவீன அணுகல் சோதனை கருவிகள்
மாற்றுத்திறனாளிகள் உதவியுடன் நவீன உலாவல் எவ்வாறு நடக்கும் என்பதைக் புரிந்துகொண்ட பிறகு, அந்த அணுகல் வலைத்தளங்களை உருவாக்க மற்றும் சோதிக்க உதவும் கருவிகளை ஆராய்வோம்.
இதுபோல நினைக்கவும்: தானாக இயங்கும் கருவிகள் தெளிவான பிழைகளைப் பிடிக்க சிறந்தவை (எ.கா., alt உரையின் இல்லாமை), ஆனால் கைமுறை சோதனை உங்கள் தளத்தை உண்மையான உலகில் பயன்படுத்த எப்படிப் பார்ப்பதென்பதை உறுதிப்படுத்துகிறது. இவை இணைந்து உங்கள் தளங்கள் அனைவருக்கும் வேலை செய்கிறాయని தைரியத்தை வழங்கும்.
### வண்ண மரியாதை சோதனை
சந்தோஷமான செய்தி: வண்ண மரியாதை (color contrast) மிகவும் பொதுவான அணுகல் பிரச்சனை, ஆனால் சுலபமாக சரிசெய்யக்கூடியது. நல்ல வண்ண மாறுபாடு அனைவருக்கும் பயனுள்ளதாக இருக்கிறது—கண்ணுக்கு பாதிப்புள்ளவர்கள் முதல் கடலில் போன்போன்களை வாசிப்பவர்கள் வரை.
**WCAG வண்ண மாணவரின் தேவைகள்:**
| உரை வகை | WCAG AA (குறைந்தபட்சம்) | WCAG AAA (மேம்படுத்தப்பட்டது) |
|-----------|------------------------|----------------------------|
| **சாதாரண உரை** (18ptக்கு கீழ்) | 4.5:1 வண்ண வாகை | 7:1 வண்ண வாகை |
| **பெரிய உரை** (18pt+ அல்லது 14pt+ திடமாக) | 3:1 வண்ண வாகை | 4.5:1 வண்ண வாகை |
| **UI கூறுகள்** (பட்டன்கள், படிவ எல்லைகள்) | 3:1 வண்ண வாகை | 3:1 வண்ண வாகை |
**அத்தியாவசிய சோதனை கருவிகள்:**
- [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - வண்ண தேர்வாணையை உடைய மேசைப்பட்ட பயன்பாடு
- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - இணையப்படிப்புக்கு உடனடி கருத்து
- [Stark](https://www.getstark.co/) - Figma, Sketch, Adobe XD வடிவமைப்புக்கான பிளகின்
- [Accessible Colors](https://accessible-colors.com/) - அணுகக்கூடிய வண்ணத் தொகுப்புகளை கண்டறிவு
✅ **சிறந்த வண்ணத் தொகுப்புகளை உருவாக்கவும்**: உங்கள் பிராண்ட் வண்ணங்களுடன் துவங்கி, வண்ண மரியாதை சோதனையாளர்களை பயன்படுத்தி அணுகக்கூடிய வண்ண வேறுபாடுகளை உருவாக்கவும். இதை உங்கள் வடிவமைப்பு அமைப்பின் அணுகக்கூடிய வண்ண குறியீடுகளாக ஆவணப்படுத்தவும்.
### விரிவான அணுகல் பரிசோதனை
மிக சிறந்த அணுகல் சோதனை பல முறைகளின் ஒருங்கிணைப்பை உள்ளடக்கியது. ஒரு கருவி எல்லாவற்றுக்கும் தேடியது இல்லையென்பதால், பல முறைகளைப் பயன்படுத்தி சோதனை சுழற்சியை உருவாக்குவது முழுமையான கவனிப்பை உறுதி செய்கிறது.
**உலாவி அடிப்படையிலான சோதனை (DevTools-ல் உள்ளது):**
- **Chrome/Edge**: Lighthouse அணுகல் சோதனை + Accessibility புள்ளிவிவரம்
- **Firefox**: Accessibility உள்நோக்கி விரிவான மர அணுவார்ப்பு
- **Safari**: Web Inspector இல் Audit தாவல் மற்றும் VoiceOver பிணைப்பு
**தொழில்முறை சோதனை நீட்சிகள்:**
- [axe DevTools](https://www.deque.com/axe/devtools/) - துறைமுக மதிப்பீடு தானாக சோதனை
- [WAVE](https://wave.webaim.org/extension/) - பிழைகளை வெளிப்படுத்தும் பார்வை
- [Accessibility Insights](https://accessibilityinsights.io/) - Microsoft சிக்கலான சோதனை தொகுதி
**கமாண்ட் வரி மற்றும் CI/CD ஒருங்கிணைப்பு:**
- [axe-core](https://github.com/dequelabs/axe-core) - ஜாவாஸ்கிரிப்ட் நூலகம் தானாக சோதிக்க
- [Pa11y](https://pa11y.org/) - கமாண்ட் வரி அணுகல் சோதனை கருவி
- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - தானாகலான அணுகல் மதிப்பெண்
> 🎯 **சோதனை இலக்கு**: உள்நுழைவுத் தரமானும் 95+ வீதம் Lighthouse சோதனை மதிப்பெண்ணை அடைய முயற்சிக்கவும். நினைவில் வைக்கவும், தானாக இயங்கும் கருவிகள் சுமார் 30-40% பிரச்சனைகளை மட்டும் கண்டுபிடிக்கின்றன—கைகோப்புச் சோதனை இன்னும் அவசியம்!
### 🧠 **சோதனை திறன் சோதனை: பிரச்சனைகளை கண்டுபிடிக்கத் தயார்?**
**நாம் பார்க்கலாம் நீங்கள் அணுகல் சோதனை பற்றி எப்படி உணர்கிறீர்கள்:**
- இப்போது எந்த சோதனை முறையை நீங்கள் மிக எளிதாக அணுகக்கூடியது என்று நினைக்கிறீர்கள்?
- நீங்கள் ஒரு முழு நாளும் விசைப்பலகை மட்டுமே பயன்படுத்தி உலாவுவீர்களா என்று கற்பனை செய்யலாம்?
- நீங்கள் ஆன்லைனில் தனிப்பட்ட முறையில் அனுபவித்த ஒரு அணுகல் தடையால் என்னவென்று கூற முடியுமா?
```mermaid
pie title "வேறுபட்ட முறைகளால் பிடிக்கப்பட்ட அணுகல் சிக்கல்கள்"
"தானாக செயல்படும் கருவிகள்" : 35
"கைமுறை சோதனை" : 40
"பயனர் பின்னூட்டம்" : 25
```
> **தீவிரம் மேம்பாடு**: தொழில்முறை அணுகல் சோதனை நிபுணர்கள் இம்முறைமைகளின் நடுக்கூட்டத்தைப் பயன்படுத்துகிறார்கள். நீங்கள் தொழில் தர வலய நடைமுறைகளை கற்றுக்கொள்கின்றீர்கள்!
## அடிப்படையிலிருந்து அணுகலை உருவாக்குதல்
அணுகல் வெற்றியின் முக்கியம் உங்கள் அடித்தளத்தின் முதல் நாளிலிருந்தே அதை கட்டமைக்கப்பட வேண்டும். "பின்னர் அணுகலைச் சேர்ப்பேன்" என்பது நினைத்துக்கொள்ள விரும்புவீர்கள், ஆனால் இது ஏற்கனவே கட்டப்பட்ட வீட்டிற்கு ஒரு நடைமுறையை பின்னர் சேர்க்க முயற்சிப்பதைப் போன்றது. சாத்தியம்? ஆம். எளிது? இல்ல.
அணுகலை ஒரு வீட்டுத் திட்டமிடலாகக் கருதுங்கள்—முதலில் கட்டிடக்கலை திட்டங்களில் சக்கரக்காலி அணுகலை உள்ளடக்குவது எல்லாஇயல்பு.
### POUR தத்துவங்கள்: உங்கள் அணுகல் அடித்தளம்
இணைய உள்ளடக்க அணுகல் வழிகாட்டுதல்கள் (WCAG) POUR என்று அழைக்கப்படும் நான்கு அடிப்படை 원칙ங்களை சுற்றி கட்டப்பட்டுள்ளது. கவலைப்படாதீர்கள்—இவை கோல்றான கற்கை புத்தகக் கருத்துகள் அல்ல! இவை அனைவருக்கும் வேலை செய்யக்கூடிய உள்ளடக்கத்தை உருவாக்கும் நடைமுறை வழிகாட்டுதல்கள்.
POUR ஐ நீங்கள் நன்கு அறிந்துவிட்டால், அணுகல் முடிவுகளை எடுத்து கையாள்வது மிகவும் இயல்பானதாக இருந்துவிடும். இது உங்கள் வடிவமைப்பு தேர்வுகளுக்கு வழிகாட்டும் மனச்சூழல் சரிபார்ப்பு பட்டியலைப் போல உள்ளது. அதை தொகுக்கிறோம்:
```mermaid
flowchart LR
A[🔍 கண்டு கொள்ளக்கூடியது பயனர்கள் அதை உணர முடியுமா?] --> B[🎮 இயக்கக்கூடியது பயனர்கள் அதை பயன்படுத்த முடியுமா?]
B --> C[📖 புரிவதற்கு எளிதானது பயனர்கள் அதைப் புரிந்துகொள்ள முடியுமா?]
C --> D[💪 வலிமையானது அது எங்கும் பணி செய்கிறதா?]
A1[ப代ஸ் உரை கருத்துரை பிரதி வலிமை] --> A
B1[கீபோர்டு அணுகல் மயக்கம் இல்லாமல் நேர எல்லைகள்] --> B
C1[தெளிவு மொழி முன்னறிவிக்கப்பட்டது பிழை உதவி] --> C
D1[சரியான குறியீடு பொருந்தக்கூடியது எதிர்கால உறுதிப்பத்திரம்] --> D
style A fill:#e1f5fe
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
```
**🔍 காட்சி பெறக்கூடியது Perceivable**: பயனர்கள் தங்கள் கிடைக்கும் உணர்வுகளைப் பயன்படுத்தி புரிந்து கொள்ளக் கூடிய விதத்தில் தகவல் காணப்பட வேண்டும்
- உரை அல்லாத உள்ளடக்கத்துக்கு உரை மாற்றுகளை வழங்கவும் (படங்கள், வீடியோக்கள், ஒலி)
- அனைத்து உரை மற்றும் UI கூறுகளுக்கும் போதுமான வண்ண மாறுபாட்டை உறுதிப்படுத்தவும்
- பன்மூல உள்ளடக்கங்களுக்கு கெப்ஷன்கள் மற்றும் உரைத்தொகுப்புகள் வழங்கவும்
- உள்ளடக்கம் 200% வரையாய் மீட்டமைக்கும்போது செயல்படக் கூடியதாக இருக்கவும்
- தகவலை வெளிப்படுத்த பல உணர்ச்சி பண்பு அம்சங்களைப் பயன்படுத்தவும் (வண்ணத்துடன் மட்டுமே அல்ல)
**🎮 இயங்கக்கூடியது Operable**: அனைத்து இடைமுக கூறுகளும் கிடைக்கும் உள்ளீட்டு முறைகளால் இயங்கக்கூடியதாக இருக்க வேண்டும்
- அனைத்து செயல்பாடுகளும் விசைப்பலகை வழிச் பயணம் மூலம் அணுகக்கூடியதாக இருக்கவேண்டும்
- பயனர்களுக்கு உள்ளடக்கத்தை படிக்கவும் தொடர்புகொள்ளவும் போதுமான நேரத்தை கொடுக்கவும்
- பலவீனத்தையும் தலைமுடியையும் விளையும் உள்ளடக்கங்களAvoidச் செய்யவும்
- பயனர்களுக்கு தெளிவான கட்டமைப்பு மற்றும் புறப்படையாளிகள் மூலம் வழிசெலுத்த உதவவும்
- செயல்பாட்டு கூறுகளுக்கு போதுமான இலக்கு அளவுகள் (குறைந்தது 44px) வழங்கவும்
**📖 புரிந்து கொள்ளக்கூடியது Understandable**: தகவலும் UI செயல்பாடும் தெளிவாகவும் அர்த்தமுள்ளதாகவும் இருக்க வேண்டும்
- உங்கள் பார்வையாளருக்கு ஏற்ற தெளிவான, எளிய மொழியைப் பயன்படுத்தவும்
- உள்ளடக்கம் எப்போதும் குறிப்பிடத்தக்க முறையில் தோன்றவும் செயல்படவும் உறுதிப்படுத்தவும்
- பயனர் உள்ளீட்டிற்கு தெளிவான வழிகாட்டுதல்கள் மற்றும் பிழை செய்திகள் வழங்கவும்
- பயனர்களுக்கு பிழைகளை புரிந்து கொள்வதிலும் படிவங்களில் திருத்துவதிலும் உதவவும்
- உள்ளடக்கத்தை தர்க்கபூர்வமான வாசிப்பு ஒழுங்கிலும் தகவல் ஒழுங்கிலும் அமைக்கவும்
**💪 வலிமையானது Robust**: உள்ளடக்கம் பல்வேறு தொழில்நுட்பங்களிலும் உதவிச் சாதனங்களிலும் நம்பகமாக இயங்க வேண்டும்
- **சரியான, அர்த்தமான HTML ஐ உங்கள் அடித்தளமாகப் பயன்படுத்துங்கள்**
- **தற்போதைய மற்றும் எதிர்கால உதவிக் கருவிகளுடன் பொருந்தும் வகையில் செய்க**
- **வலைத் தள தரநிலைகள் மற்றும் சிறந்த நடைமுறைகள் பின்பற்றப்பட வேண்டும்**
- **பல்வேறு உலாவிகள், சாதனங்கள் மற்றும் உதவியியல் கருவிகள் முழுவதும் சோதனை செய்யவும்**
- **மேம்பட்ட அம்சங்கள் ஆதரிக்கப்படாமல் இருந்தால் உள்ளடக்கத்தை மென்மையாக மோசமாகச் செல்லுமாறு கட்டமைக்கவும்**
### 🎯 **POUR கோட்பாடுகள் பரிசோதனை: இதை நிலைத்துக் கொள்ளுதல்**
**அடிப்படைகள் பற்றிய உடனடி அதிசயிப்பு:**
- நீங்கள் நினைக்க முடியும் ஒரு வலைத்தள அம்சம் எந்த POUR கோட்பாடையும் பின்பற்றாமல் தோல்வியடைவதா?
- எந்த கோட்பாடு ஒரு வளர்ச்சியாளராக உங்களுக்கு மிகவும் இயல்பாக இருந்து இருக்கும்?
- இந்த கோட்பாடுகள் எல்லோருக்கும், மாற்றுத்திறனாளர்களுக்கே அல்லாமல், வடிவமைப்பை எவ்வாறு மேம்படுத்த உதவலாம்?
```mermaid
quadrantChart
title POUR கொள்கைகள் தாக்கம் மடக்கு
x-axis குறைந்த முயற்சி --> அதிக முயற்சி
y-axis குறைந்த தாக்கம் --> அதிக தாக்கம்
quadrant-1 விரைவான வெற்றிகள்
quadrant-2 முக்கியத் திட்டங்கள்
quadrant-3 பின்னர் பரிசீலனை செய்
quadrant-4 மூத்த கவனம்
Alt Text: [0.2, 0.9]
Color Contrast: [0.3, 0.8]
Semantic HTML: [0.4, 0.9]
Keyboard Nav: [0.6, 0.8]
ARIA Complex: [0.8, 0.7]
Screen Reader Testing: [0.7, 0.6]
```
> **நினைவில் வையுங்கள்**: அதிக தாக்கம் கொண்ட, குறைந்த முயற்சியுள்ள மேம்பாடுகளுடன் துவங்குங்கள். செமாண்டிக் HTML மற்றும் alt உரை மிகக் குறைந்த முயற்சியுடன் அதிகமான அணுகல் வசதியை தருகின்றன!
## அணுகக்கூடிய காட்சி வடிவமைப்பை உருவாக்கல்
நல்ல காட்சி வடிவமைப்பு மற்றும் அணுகல் வசதி ஒன்றாக நன்கு இணைகின்றன. நீங்கள் அணுகல் வசதியுடன் வடிவமைக்கும்போது, இந்தக் கட்டுப்பாடுகள் ஒருங்கிணைந்த, அழகான தீர்வுகளை உருவாக்கி, அனைத்து பயனர்களுக்கும் பயன் தரும் என்பதை கண்டுபிடிப்பீர்கள்.
காட்சிச் சாத்தியங்கள் மற்றும் உங்கள் உள்ளடக்கத்தை காணும் நிலைகள் மற்றும் காட்சி திறன்கள் பொருத்தமில்லாமல் அனைவருக்கும் வேலை செய்யப்பட்ட அழகான வடிவமைப்புகளை உருவாக்க என்ன வழிமுறைகள் உள்ளன என்று பார்ப்போம்.
### வண்ணம் மற்றும் காட்சி அணுகல் மூலோபாயங்கள்
வண்ணம் தொடர்பு கொள்ள மிகவும் சக்திவாய்ந்தது, ஆனால் முக்கிய தகவலை தருவதற்கு அது மட்டும் போதுமானதாக இருக்கக்கூடாது. வண்ணத்தை அப்பாற்பட்டு வடிவமைக்க, பல நிலைகளிலும் இயங்கக்கூடிய சக்திவாய்ந்த, ஒருங்கிணைந்த அனுபவங்களை உருவாக்குகிறது.
**வண்ணக் காண்கை வேறுபாடுகளுக்கான வடிவமைப்பு:**
சுமார் 8% ஆண்களுக்கும் 0.5% பெண்களுக்கும் சில வடிவிலான வண்ணக் காண்கை வேறுபாடுகள் உள்ளன (சாதாரணமாக "வண்ண குருட்டுத்தனம்" என்று அழைக்கப்படுகிறது). மிக பொதுவான வகைகள்:
- **டூட்டரானோபியா**: சிவப்பு மற்றும் பச்சை வேறுபாட்டில் சிரமம்
- **புரோட்டானோபியா**: சிவப்பு மெதுவாக தெரிகிறது
- **ட்ரிடானோபியா**: நீலம் மற்றும் மஞ்சள் வேறுபாட்டில் சிரமம் (அதிகம் இல்லை)
**சேர்க்கப்பட்ட வண்ண மூலோபாயங்கள்:**
```css
/* ❌ Bad: Using only color to indicate status */
.error { color: red; }
.success { color: green; }
/* ✅ Good: Color plus icons and context */
.error {
color: #d32f2f;
border-left: 4px solid #d32f2f;
}
.error::before {
content: "⚠️";
margin-right: 8px;
}
.success {
color: #2e7d32;
border-left: 4px solid #2e7d32;
}
.success::before {
content: "✅";
margin-right: 8px;
}
```
**அடிப்படை எதிரொலி தேவைகள் அப்புறம்:**
- உங்கள் வண்ண தேர்வுகளை வண்ணக் குருட்டுத் திருமர்ஜனிகளுடன் சோதிக்கவும்
- வண்ண குறியாக்கத்துடன் கூடிய வடிவங்கள், மேற்பரப்புகள் அல்லது வடிவங்கள் பயன்படுத்தவும்
- வண்ணம் இல்லாவிடில் கூட தொடர்புக்கான நிலைகள் ஞாபகமாக இருக்கச் செய்யவும்
- உங்கள் வடிவமைப்பு உயர் எதிரொலி முறையில் எப்படி தோன்றுகிறது என்பதை பரிசீலிக்கவும்
✅ **உங்கள் வண்ண அணுகலை சோதிக்கவும்**: [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) போன்ற கருவிகளை பயன்படுத்தி, வெவ்வேறு வண்ணக் காண்கை வகைகள் உள்ள பயனர்களுக்கு உங்கள் தளம் எவ்வாறு தோன்றுகிறது என்பதை பாருங்கள்.
### கவனம் குறி மற்றும் தொடர்பு வடிவமைப்பு
கவனம் குறிகள் என்பது டிஜிட்டல் காட்டி போன்றது — இது விசைக்கட்டுகளைப் பயன்படுத்துவோருக்கு அவர்கள் பக்கத்தில் எங்கே இருக்கின்றார்கள் என்பதை காட்டுகிறது. நன்றாக வடிவமைக்கப்பட்ட கவனம் குறிகள் அனைவருக்கும் தொடர்பை தெளிவு மற்றும் எதிர்பார்க்கத்தக்கவாறு மேம்படுத்துகின்றன.
**புதிய கவனம் குறி சிறந்த நடைமுறைகள்:**
```css
/* Enhanced focus styles that work across browsers */
button:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25);
}
/* Remove focus outline for mouse users, preserve for keyboard users */
button:focus:not(:focus-visible) {
outline: none;
}
/* Focus-within for complex components */
.card:focus-within {
box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.5);
border-color: #4A90A4;
}
/* Ensure focus indicators meet contrast requirements */
.custom-focus:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 2px;
box-shadow: 0 0 0 6px #000000;
}
```
**கவனம் குறி தேவைகள்:**
- **தெளிவு**: சுற்றியுள்ள உருப்படிகளுடன் குறைந்தபட்சம் 3:1 எதிரொலி விகிதம் இருக்க வேண்டும்
- **அகலம்**: முழு உருப்படியிலும் குறைந்தபட்சம் 2px தடிமனாக இருக்க வேண்டும்
- **நிலைத்தன்மை**: கவனம் வேறு இடத்திற்கு செல்லும் வரை தெளிவாக இருக்க வேண்டும்
- **பலகை**: மற்ற UI நிலைகளிலிருந்து தனிப்பட்ட தோற்றம் இருக்க வேண்டும்
> 💡 **வடிவமைப்பு குறிப்பு**: சிறந்த கவனம் குறிகள் பொதுவாக குழுவாக, படுக்கை நிழல் மற்றும் வண்ண மாற்றங்களைப் பயன்படுத்தி வித்தியாசமான பின்னணிகளிலும் சூழலை சூழ்ந்து தெளிவு காக்கின்றன.
✅ **கவனம் குறிகளை மதிப்பாய்வு செய்யவும்**: உங்கள் வலைத்தளத்தில் டැப் செய்து, எந்த உருப்படிகளுக்கு தெளிவான கவனம் குறிகள் உள்ளன என்பதை கவனிக்கவும். பார்க்க கடினமானவை அல்லது நிறைய இல்லாதவையா?
### செமாண்டிக் HTML: அணுகலுக்கு அடித்தளம்
செமாண்டிக் HTML என்பது உதவியியல் தொழில்நுட்பங்களுக்கு உங்கள் வலைத்தளத்திற்கு GPS அமைப்பை வழங்குவது போன்றது. சரியான HTML கூறுகளை எதிர்பார்க்கப்பட்ட நோக்கத்திற்கு பயன்படுத்தினால், நீங்கள் ஸ்கிரீன்ரீடர்கள், விசைப்பலகைகள் மற்றும் பிற கருவிகளுக்கு பணியாற்றும் பயனர்களை சிறப்பாக வழிநடத்த ஒரு விரிவான வரைபடத்தை வழங்குகிறீர்கள்.
எனக்கு மிகவும் விளங்கிய ஒரு ஒப்பிடுகை இதோ: செமாண்டிக் HTML என்பது சிறப்பாக ஒழுங்குபட்ட நூலகம், தெளிவான வகைகளும் உதவும் குறிகளுடன் இருக்கும் நிலைக்கு ஒப்பிடும், மீதமுள்ள நூல்கள் இயல்பாகவோ பொறியோ இல்லாமல் சீராக கிடக்கும் கிடங்கிற்கு ஒப்பிடும். இரு இடங்களிலும் நூல்கள் ஒன்று தான், ஆனால் நீங்கள் எது ஒன்றில் ஒன்றைக் கண்டுபிடிக்க முயற்சிப்பீர்கள்? அதுவே!
```mermaid
flowchart TD
A[🏠 HTML ஆவணம்] --> B[📰 தலைப்பு]
A --> C[🧭 வழிசெலுத்தி]
A --> D[📄 முக்கிய பகுதியில்]
A --> E[📋 அடிக்குறிப்பு பகுதி]
B --> B1[h1: தளத்தின் பெயர் லோகோ & பிராண்டிங்]
C --> C1[ul: வழிசெலுத்தல் முக்கிய இணைப்புகள்]
D --> D1[article: உள்ளடக்கம் section: துணை பிரிவுகள்]
D --> D2[aside: பக்கக் கட்டம் சம்பந்தப்பட்ட உள்ளடக்கம்]
E --> E1[nav: அடிக்குறிப்பு இணைப்புகள் பதிப்புரிமை தகவல்]
D1 --> D1a[h1: பக்க தலைப்பு h2: முக்கிய பிரிவுகள் h3: துணை பிரிவுகள்]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
```
**அணுகலுக்கான பக்க கட்டமைப்பின் அடித்தளக் கட்டுகள்:**
```html
Your Site Name
Article Title
Published on
First Section
Content that relates to this section...
Second Section
More related content...
```
**செமாண்டிக் HTML எப்படி அணுகலை மாற்றுகிறது:**
| செமாண்டிக் கூறு | நோக்கம் | ஸ்கிரீன்ரீடர் பயன் |
|------------------|---------|----------------------|
| `` | பக்கம் அல்லது பிரிவு தலைப்பு | "பேன்சர் நிலைச்சுட்டி" - மேல் விரைவான வழிசெலவு |
| `