` கூறுகளைப் பயன்படுத்துதல்.

சரியானது:

<table>
  <caption>அக்டோபர் 2024 க்கான காலண்டர்</caption>
  <thead>
    <tr>
      <th scope="col">ஞா</th>
      <th scope="col">தி</th>
      <th scope="col">செ</th>
      <th scope="col">பு</th>
      <th scope="col">வி</th>
      <th scope="col">வெ</th>
      <th scope="col">ச</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>29</td>
      <td>30</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <!-- மேலும் வரிசைகள் -->
  </tbody>
</table>

2. ARIA பண்புக்கூறுகள்

ARIA (அணுகக்கூடிய ரிச் இணையப் பயன்பாடுகள்) பண்புக்கூறுகள் உதவித் தொழில்நுட்பங்களுக்குக் கூடுதல் சொற்பொருள் தகவல்களை வழங்குகின்றன, ஊடாடும் கூறுகளைப் பற்றிய அவற்றின் புரிதலை மேம்படுத்துகின்றன. ARIA பண்புக்கூறுகளைப் பின்வருவனவற்றிற்குப் பயன்படுத்தவும்:

• பங்குகளை வரையறுத்தல்: காலண்டர் கட்டத்திற்கு `role="grid"` மற்றும் ஒவ்வொரு தேதி கலத்திற்கும் `role="gridcell"` போன்ற கூறுகளின் நோக்கத்தைக் குறிக்கவும்.
• லேபிள்களை வழங்குதல்: கூறுகளுக்கு விளக்கமான லேபிள்களை வழங்க `aria-label` அல்லது `aria-labelledby` ஐப் பயன்படுத்தவும், குறிப்பாகக் காட்சி லேபிள் போதுமானதாக இல்லாதபோது.
• நிலையைக் குறித்தல்: தேர்ந்தெடுக்கப்பட்ட தேதியைக் குறிக்க `aria-selected` மற்றும் முடக்கப்பட்ட தேதிகளைக் குறிக்க `aria-disabled` போன்ற பண்புக்கூறுகளைப் பயன்படுத்தவும்.
• விளக்கங்களை வழங்குதல்: ஒரு கூறுடன் கூடுதல் தகவல்களைத் தொடர்புபடுத்த `aria-describedby` ஐப் பயன்படுத்தவும், அதாவது தேதி வடிவத்தின் விளக்கம்.

எடுத்துக்காட்டு:

<table role="grid" aria-labelledby="date-picker-label">
  <caption id="date-picker-label">ஒரு தேதியைத் தேர்ந்தெடுக்கவும்</caption>
  <thead>
    <tr>
      <th scope="col">ஞா</th>
      <th scope="col">தி</th>
      <th scope="col">செ</th>
      <th scope="col">பு</th>
      <th scope="col">வி</th>
      <th scope="col">வெ</th>
      <th scope="col">ச</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td role="gridcell" aria-disabled="true">29</td>
      <td role="gridcell" aria-disabled="true">30</td>
      <td role="gridcell"><button aria-label="அக்டோபர் 1, 2024">1</button></td>
      <td role="gridcell"><button aria-label="அக்டோபர் 2, 2024">2</button></td>
      <td role="gridcell"><button aria-label="அக்டோபர் 3, 2024">3</button></td>
      <td role="gridcell"><button aria-label="அக்டோபர் 4, 2024">4</button></td>
      <td role="gridcell"><button aria-label="அக்டோபர் 5, 2024">5</button></td>
    </tr>
    <tr>
      <td role="gridcell"><button aria-label="அக்டோபர் 6, 2024">6</button></td>
      <td role="gridcell"><button aria-label="அக்டோபர் 7, 2024">7</button></td>
      <td role="gridcell"><button aria-label="அக்டோபர் 8, 2024">8</button></td>
      <td role="gridcell"><button aria-label="அக்டோபர் 9, 2024">9</button></td>
      <td role="gridcell"><button aria-label="அக்டோபர் 10, 2024">10</button></td>
      <td role="gridcell"><button aria-label="அக்டோபர் 11, 2024">11</button></td>
      <td role="gridcell"><button aria-label="அக்டோபர் 12, 2024">12</button></td>
    </tr>
    <!-- மேலும் வரிசைகள் -->
  </tbody>
</table>

குறிப்பு: ARIA பண்புக்கூறுகள் சரியாக விளக்கப்படுகின்றன என்பதை உறுதிப்படுத்த உண்மையான ஸ்கிரீன் ரீடர்களுடன் எப்போதும் சோதிக்கவும்.

3. விசைப்பலகை வழிசெலுத்தல்

மவுஸ் அல்லது பிற சுட்டும் சாதனத்தைப் பயன்படுத்த முடியாத பயனர்களுக்கு விசைப்பலகை வழிசெலுத்தல் அவசியம். தேதி தேர்ந்தெடுப்பானில் உள்ள அனைத்து ஊடாடும் கூறுகளும் விசைப்பலகை வழியாக அணுகக்கூடியவை என்பதை உறுதிப்படுத்தவும்.

• கவன மேலாண்மை: கவன வரிசையைக் கட்டுப்படுத்த `tabindex` பண்புக்கூறைப் பயன்படுத்தவும். கவனம் தேதி தேர்ந்தெடுப்பான் வழியாக தர்க்கரீதியாக நகர்வதை உறுதிசெய்யவும். பயனர் விட்ஜெட்டுடன் தொடர்பு கொள்ளும்போது கவனத்தை நிர்வகிக்க ஜாவாஸ்கிரிப்டைப் பயன்படுத்தவும்.
• அம்புக்குறி விசைகள்: தேதிகளுக்கு இடையில் செல்ல அம்புக்குறி விசைகளைப் பயன்படுத்தி விசைப்பலகை வழிசெலுத்தலைச் செயல்படுத்தவும். இடது மற்றும் வலது அம்புக்குறி விசைகள் முறையே முந்தைய மற்றும் அடுத்த நாட்களுக்கு நகர வேண்டும். மேல் மற்றும் கீழ் அம்புக்குறி விசைகள் முறையே முந்தைய மற்றும் அடுத்த வாரங்களில் அதே நாளுக்கு நகர வேண்டும்.
• Home மற்றும் End விசைகள்: Home விசை தற்போதைய வாரத்தின் முதல் நாளுக்கும், End விசை தற்போதைய வாரத்தின் கடைசி நாளுக்கும் நகர வேண்டும்.
• Page Up மற்றும் Page Down விசைகள்: Page Up விசை முந்தைய மாதத்திற்கும், Page Down விசை அடுத்த மாதத்திற்கும் நகர வேண்டும்.
• Enter விசை: Enter விசை கவனம் செலுத்தப்பட்ட தேதியைத் தேர்ந்தெடுக்க வேண்டும்.
• Escape விசை: Escape விசை தேதி தேர்ந்தெடுப்பானை மூடி, அதைத் தூண்டிய உள்ளீட்டுப் புலம் அல்லது பொத்தானுக்குக் கவனத்தைத் திருப்ப வேண்டும்.

எடுத்துக்காட்டு (ஜாவாஸ்கிரிப்ட்):

// விசைப்பலகை வழிசெலுத்தலைக் கையாளும் எடுத்துக்காட்டு
const datePicker = document.getElementById('date-picker');

datePicker.addEventListener('keydown', function(event) {
  switch (event.key) {
    case 'ArrowLeft':
      // கவனத்தை முந்தைய நாளுக்கு நகர்த்தவும்
      break;
    case 'ArrowRight':
      // கவனத்தை அடுத்த நாளுக்கு நகர்த்தவும்
      break;
    case 'ArrowUp':
      // கவனத்தை முந்தைய வாரத்தில் அதே நாளுக்கு நகர்த்தவும்
      break;
    case 'ArrowDown':
      // கவனத்தை அடுத்த வாரத்தில் அதே நாளுக்கு நகர்த்தவும்
      break;
    case 'Enter':
      // கவனம் செலுத்தப்பட்ட தேதியைத் தேர்ந்தெடுக்கவும்
      break;
    case 'Escape':
      // தேதி தேர்ந்தெடுப்பானை மூடவும்
      break;
  }
});

4. ஸ்கிரீன் ரீடர் இணக்கத்தன்மை

ஸ்கிரீன் ரீடர்கள் பயனர்களுக்குத் தகவல்களை வழங்க சொற்பொருள் HTML மற்றும் ARIA பண்புக்கூறுகளைச் சார்ந்துள்ளன. உங்கள் தேதி தேர்ந்தெடுப்பான் NVDA, JAWS, மற்றும் VoiceOver போன்ற பிரபலமான ஸ்கிரீன் ரீடர்களுடன் இணக்கமாக இருப்பதை உறுதிசெய்யவும்.

• விளக்கமான லேபிள்கள்: அனைத்து ஊடாடும் கூறுகளுக்கும் தெளிவான மற்றும் சுருக்கமான லேபிள்களை வழங்கவும். கூடுதல் சூழலை வழங்க `aria-label` அல்லது `aria-labelledby` ஐப் பயன்படுத்தவும்.
• நிலை அறிவிப்புகள்: தேர்ந்தெடுக்கப்பட்ட தேதிக்கு `aria-selected` மற்றும் முடக்கப்பட்ட தேதிகளுக்கு `aria-disabled` போன்ற கூறுகளின் நிலையைக் குறிக்க ARIA பண்புக்கூறுகளைப் பயன்படுத்தவும். ஸ்கிரீன் ரீடர்கள் இந்த நிலைகளைப் பயனருக்கு அறிவிக்கும்.
• நேரடிப் பகுதிகள்: பயனர் வேறு மாதத்திற்குச் செல்லும்போது போன்ற தேதி தேர்ந்தெடுப்பானில் ஏற்படும் மாறும் மாற்றங்களை அறிவிக்க ARIA நேரடிப் பகுதிகளைப் (எ.கா., `aria-live="polite"`) பயன்படுத்தவும். இது ஸ்கிரீன் ரீடர்கள் பயனரின் பணிப்பாய்வுக்கு இடையூறு விளைவிக்காமல் மாற்றத்தை அறிவிக்க அனுமதிக்கிறது.
• பிழை கையாளுதல்: ஏதேனும் பிழைகள் அல்லது சரிபார்ப்புச் சிக்கல்கள் இருந்தால், ஸ்கிரீன் ரீடர்களுக்கு அணுகக்கூடிய தெளிவான மற்றும் தகவலறிந்த பிழைச் செய்திகளை வழங்கவும். பிழைச் செய்தியைத் தொடர்புடைய உள்ளீட்டுப் புலத்துடன் தொடர்புபடுத்த `aria-describedby` ஐப் பயன்படுத்தவும்.

எடுத்துக்காட்டு:

<div aria-live="polite">
  <!-- மாறும் உள்ளடக்கம், அதாவது மாத வழிசெலுத்தல் -->
</div>

5. காட்சி வடிவமைப்பு

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

• வண்ண வேறுபாடு: WCAG (Web Content Accessibility Guidelines) 2.1 நிலை AA தரநிலைகளைப் பூர்த்தி செய்ய உரை மற்றும் பின்னணி வண்ணங்களுக்கு இடையே போதுமான வண்ண வேறுபாட்டை உறுதிசெய்யவும். வேறுபாட்டு விகிதத்தைச் சரிபார்க்க வண்ண வேறுபாடு சரிபார்ப்பு கருவியைப் பயன்படுத்தவும்.
• கவன குறிகாட்டிகள்: அனைத்து ஊடாடும் கூறுகளுக்கும் தெளிவான மற்றும் புலப்படும் கவன குறிகாட்டியை வழங்கவும். கவன குறிகாட்டி சுற்றியுள்ள கூறுகளிலிருந்து வேறுபட்டதாக இருக்க வேண்டும் மற்றும் பிற கூறுகளால் மறைக்கப்படக்கூடாது.
• எழுத்துரு அளவு மற்றும் இடைவெளி: வாசிப்பு மற்றும் பயன்பாட்டினை மேம்படுத்தப் படிக்கக்கூடிய எழுத்துரு அளவையும் கூறுகளுக்கு இடையே போதுமான இடைவெளியையும் பயன்படுத்தவும்.
• தகவலுக்கு நிறத்தை மட்டும் சார்ந்திருப்பதைத் தவிர்க்கவும்: தகவலைத் தெரிவிக்க நிறத்தை மட்டும் சார்ந்து இருக்க வேண்டாம். வண்ணக் குறியீட்டை நிறைவு செய்ய ஐகான்கள் அல்லது உரை போன்ற பிற காட்சி குறிப்புகளைப் பயன்படுத்தவும்.

6. உள்ளூர்மயமாக்கல் மற்றும் சர்வதேசமயமாக்கல்

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

• தேதி வடிவங்கள்: DD/MM/YYYY (ஐரோப்பா மற்றும் ஆசியாவின் சில பகுதிகளில் பொதுவானது) மற்றும் MM/DD/YYYY (வட அமெரிக்காவில் பொதுவானது) போன்ற வெவ்வேறு தேதி வடிவங்களை ஆதரிக்கும் ஒரு நெகிழ்வான தேதி வடிவமைப்பு நூலகத்தைப் பயன்படுத்தவும். பயனர்கள் தங்கள் விருப்பங்களுக்கு ஏற்ப தேதி வடிவத்தைத் தனிப்பயனாக்க அனுமதிக்கவும்.
• காலண்டர் அமைப்புகள்: கிரிகோரியன் காலண்டர் (மிகவும் பரவலாகப் பயன்படுத்தப்படும் காலண்டர்) மற்றும் ஹிஜ்ரி காலண்டர் (பல இஸ்லாமிய நாடுகளில் பயன்படுத்தப்படுகிறது) போன்ற வெவ்வேறு காலண்டர் அமைப்புகளை ஆதரிக்கவும்.
• மொழி ஆதரவு: மாதப் பெயர்கள், நாள் பெயர்கள் மற்றும் லேபிள்கள் உட்பட தேதி தேர்ந்தெடுப்பானில் உள்ள அனைத்து உரை கூறுகளுக்கும் மொழிபெயர்ப்புகளை வழங்கவும்.
• வலமிருந்து இடமாக (RTL) ஆதரவு: தேதி தேர்ந்தெடுப்பான் அரபு மற்றும் ஹீப்ரு போன்ற RTL மொழிகளில் சரியாகக் காட்டப்படுவதை உறுதிசெய்யவும். இதற்கு விட்ஜெட்டின் தளவமைப்பு மற்றும் வடிவமைப்பைச் சரிசெய்ய வேண்டியிருக்கலாம்.
• நேர மண்டலங்கள்: தேதிகளைக் கையாளும்போது நேர மண்டலங்களின் தாக்கங்களைக் கருத்தில் கொள்ளவும். தேதிகளை ஒரு நிலையான நேர மண்டலத்தில் (எ.கா., UTC) சேமித்து, அவற்றைக் காட்டும்போது பயனரின் உள்ளூர் நேர மண்டலத்திற்கு மாற்றவும்.

எடுத்துக்காட்டு: தேதி வடிவமைப்பு மற்றும் உள்ளூர்மயமாக்கலைக் கையாள `moment.js` அல்லது `date-fns` போன்ற ஒரு ஜாவாஸ்கிரிப்ட் நூலகத்தைப் பயன்படுத்தவும்.

7. மொபைல் அணுகல்

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

• தொடு இலக்குகள்: அனைத்து ஊடாடும் கூறுகளும் மொபைல் சாதனங்களில் எளிதாகத் தட்டப்படுவதற்குப் போதுமான பெரிய தொடு இலக்குகளைக் கொண்டிருப்பதை உறுதிசெய்யவும். ஆப்பிள் குறைந்தபட்சம் 44x44 பிக்சல்கள் தொடு இலக்கு அளவைப் பரிந்துரைக்கிறது.
• பதிலளிக்கக்கூடிய வடிவமைப்பு: தேதி தேர்ந்தெடுப்பான் வெவ்வேறு திரை அளவுகள் மற்றும் நோக்குநிலைகளுக்கு ஏற்ப மாற்றியமைக்கப்படுவதை உறுதிசெய்ய பதிலளிக்கக்கூடிய வடிவமைப்பு நுட்பங்களைப் பயன்படுத்தவும்.
• விசைப்பலகை உள்ளீடு: தேதி தேர்ந்தெடுப்பானுக்கு விசைப்பலகை உள்ளீடு தேவைப்பட்டால், தேதி உள்ளீட்டிற்கு உகந்ததாக்கப்பட்ட மொபைல்-நட்பு விசைப்பலகையை வழங்கவும்.
• சைகைகள்: இயக்கக் குறைபாடுகள் உள்ள பயனர்களுக்குக் கடினமாக இருக்கக்கூடிய சைகைகளை மட்டும் சார்ந்திருப்பதைத் தவிர்க்கவும். விசைப்பலகை வழிசெலுத்தல் அல்லது குரல் கட்டுப்பாடு போன்ற மாற்று உள்ளீட்டு முறைகளை வழங்கவும்.

சோதனை மற்றும் சரிபார்ப்பு

உங்கள் தேதி தேர்ந்தெடுப்பானின் அணுகலை உறுதிப்படுத்த முழுமையான சோதனை முக்கியமானது. தானியங்கு மற்றும் கைமுறை சோதனை முறைகளின் கலவையைப் பயன்படுத்தவும்:

• தானியங்கு சோதனை: பொதுவான அணுகல் சிக்கல்களை அடையாளம் காண Axe அல்லது WAVE போன்ற அணுகல் சோதனை கருவிகளைப் பயன்படுத்தவும்.
• கைமுறை சோதனை: ஊனமுற்றவர்களால் பயன்படுத்தக்கூடியதா என்பதைச் சரிபார்க்க ஸ்கிரீன் ரீடர் மற்றும் விசைப்பலகை வழிசெலுத்தலைப் பயன்படுத்தி தேதி தேர்ந்தெடுப்பானை கைமுறையாகச் சோதிக்கவும்.
• பயனர் சோதனை: கருத்துக்களைச் சேகரிக்கவும், முன்னேற்றத்திற்கான பகுதிகளை அடையாளம் காணவும் ஊனமுற்றவர்களுடன் பயனர் சோதனையை நடத்தவும்.
• WCAG இணக்கம்: உங்கள் தேதி தேர்ந்தெடுப்பான் WCAG 2.1 நிலை AA இன் தேவைகளைப் பூர்த்தி செய்வதை உறுதிசெய்யவும்.

அணுகக்கூடிய தேதி தேர்ந்தெடுப்பான்களின் எடுத்துக்காட்டுகள்

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

• React Datepicker: ARIA ஆதரவு மற்றும் விசைப்பலகை வழிசெலுத்தலுடன் கூடிய ஒரு பிரபலமான React கூறு.
• Air Datepicker: நல்ல அணுகல் அம்சங்களுடன் கூடிய இலகுரக மற்றும் தனிப்பயனாக்கக்கூடிய தேதி தேர்ந்தெடுப்பான்.
• FullCalendar: விரிவான அணுகல் ஆதரவுடன் கூடிய முழு அம்ச காலண்டர் கூறு.

ஒரு தேதி தேர்ந்தெடுப்பான் நூலகத்தைத் தேர்ந்தெடுக்கும்போது, அதன் அணுகல் அம்சங்களை கவனமாக மதிப்பீடு செய்து, அது உங்கள் குறிப்பிட்ட தேவைகளைப் பூர்த்தி செய்வதை உறுதிப்படுத்தவும்.

அணுகக்கூடிய தேதி தேர்ந்தெடுப்பான்களை உருவாக்குவதற்கான சிறந்த நடைமுறைகள்

அணுகக்கூடிய தேதி தேர்ந்தெடுப்பான்களை உருவாக்குவதற்கான சிறந்த நடைமுறைகளின் சுருக்கம் இங்கே:

• தேதி தேர்ந்தெடுப்பானைக் கட்டமைக்க சொற்பொருள் HTML ஐப் பயன்படுத்தவும்.
• கூடுதல் சொற்பொருள் தகவல்களை வழங்க ARIA பண்புக்கூறுகளைப் பயன்படுத்தவும்.
• விசைப்பலகை வழிசெலுத்தல் முழுமையாகச் செயல்படுத்தப்பட்டுள்ளதை உறுதிசெய்யவும்.
• இணக்கத்தன்மையைச் சரிபார்க்க ஸ்கிரீன் ரீடர்களுடன் சோதிக்கவும்.
• போதுமான வண்ண வேறுபாடு மற்றும் தெளிவான கவன குறிகாட்டிகளை வழங்கவும்.
• உலகளாவிய பயனர்களுக்காக தேதி தேர்ந்தெடுப்பானை உள்ளூர்மயமாக்கி சர்வதேசமயமாக்கவும்.
• மொபைல் சாதனங்களுக்காக தேதி தேர்ந்தெடுப்பானை மேம்படுத்தவும்.
• முழுமையான சோதனை மற்றும் சரிபார்ப்பை நடத்தவும்.

முடிவுரை

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

மேலும் ஆதாரங்கள்

• WAI-ARIA ஆக்க நடைமுறைகள் வழிகாட்டி (APG) - காலண்டர்
• இணைய உள்ளடக்க அணுகல் வழிகாட்டுதல்கள் (WCAG) 2.1
• Deque University