எடுத்துக்காட்டு HTML கட்டமைப்பு:

<div class="accordion">
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" aria-expanded="false" aria-controls="content-1" id="button-1">
        பிரிவு 1 தலைப்பு
      </button>
    </h3>
    <div id="content-1" class="accordion-content" role="region" aria-labelledby="button-1">
      <p>பிரிவு 1க்கான உள்ளடக்கம் இங்கே வரும்.</p>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" aria-expanded="false" aria-controls="content-2" id="button-2">
        பிரிவு 2 தலைப்பு
      </button>
    </h3>
    <div id="content-2" class="accordion-content" role="region" aria-labelledby="button-2">
      <p>பிரிவு 2க்கான உள்ளடக்கம் இங்கே வரும்.</p>
    </div>
  </div>
</div>

2. டைனமிக் உள்ளடக்கத்திற்கான ARIA பண்புக்கூறுகள்

அக்கார்டியனின் நடத்தை பற்றி உதவித் தொழில்நுட்பங்களுக்குத் தெரிவிக்க ARIA பாத்திரங்கள் மற்றும் நிலைகள் முக்கியமானவை.

• `role="button"`: உள்ளடக்கத்தை மாற்றும் ஊடாடும் உறுப்பில் (பொத்தான்).
• `aria-expanded`: உள்ளடக்கப் பலகம் தெரியும் போது `true` ஆகவும், மறைக்கப்பட்டிருக்கும் போது `false` ஆகவும் அமைக்கவும். இது நிலையை நேரடியாக ஸ்கிரீன் ரீடர்களுக்குத் தெரிவிக்கிறது.
• `aria-controls`: பொத்தானில், அது கட்டுப்படுத்தும் உள்ளடக்கப் பலகத்தின் `id` ஐக் குறிப்பிடுகிறது. இது ஒரு நிரல் ரீதியான இணைப்பை நிறுவுகிறது.
• `aria-labelledby`: உள்ளடக்கப் பலகத்தில், அதைக் கட்டுப்படுத்தும் பொத்தானின் `id` ஐக் குறிப்பிடுகிறது. இது ஒரு இரு திசை இணைப்பை உருவாக்குகிறது.
• `role="region"`: உள்ளடக்கப் பலகத்தில். இது உள்ளடக்கம் பக்கத்தின் உணரக்கூடிய பகுதி என்பதைக் குறிக்கிறது.
• `aria-hidden`: தெரிவுநிலை நிலைகளைக் கட்டுப்படுத்த `aria-expanded` விரும்பப்பட்டாலும், தற்போது காட்டப்படாத உள்ளடக்கப் பலகங்களில் `aria-hidden="true"` ஐப் பயன்படுத்தி ஸ்கிரீன் ரீடர்களால் அறிவிக்கப்படுவதைத் தடுக்கலாம். இருப்பினும், உள்ளடக்கம் CSS (`display: none;`) வழியாக சரியாக மறைக்கப்பட்டுள்ளதா அல்லது அணுகல் மரத்திலிருந்து அகற்றப்பட்டதா என்பதை உறுதி செய்வது மிகவும் வலுவானது.

`aria-hidden` மற்றும் `display: none` பற்றிய குறிப்பு: CSS இல் `display: none;` ஐப் பயன்படுத்துவது அணுகல் மரத்திலிருந்து உறுப்பை திறம்பட நீக்குகிறது. நீங்கள் `display: none;` இல்லாமல் ஜாவாஸ்கிரிப்ட் மூலம் உள்ளடக்கத்தை மாறும் வகையில் காட்டுகிறீர்கள்/மறைக்கிறீர்கள் என்றால், `aria-hidden` மிகவும் முக்கியமானதாகிறது. இருப்பினும், உள்ளடக்கப் பலகங்களை மறைக்க `display: none;` பொதுவாக விரும்பப்படும் முறையாகும்.

3. விசைப்பலகை செயல்பாடு

பயனர்கள் நிலையான விசைப்பலகை கட்டளைகளைப் பயன்படுத்தி அக்கார்டியனுடன் தொடர்பு கொள்ள முடியும் என்பதை உறுதிப்படுத்தவும்.

• டேப் வழிசெலுத்தல்: அக்கார்டியன் தலைப்புகள் ஃபோகஸ் செய்யக்கூடியதாக இருக்க வேண்டும் மற்றும் பக்கத்தின் இயல்பான டேப் வரிசையில் தோன்ற வேண்டும்.
• செயல்படுத்தல்: ஒரு ஃபோகஸ் செய்யப்பட்ட அக்கார்டியன் தலைப்பில் `Enter` அல்லது `Spacebar` ஐ அழுத்துவது அதன் உள்ளடக்கப் பலகத்தின் தெரிவுநிலையை மாற்ற வேண்டும்.
• அம்பு விசைகள் (விருப்பத்தேர்வு ஆனால் பரிந்துரைக்கப்படுகிறது): மேலும் மேம்பட்ட அனுபவத்திற்கு, அம்பு விசை வழிசெலுத்தலைச் செயல்படுத்தவும்:
  • `Arrow Down`: அடுத்த அக்கார்டியன் தலைப்பிற்கு ஃபோகஸை நகர்த்தவும்.
  • `Arrow Up`: முந்தைய அக்கார்டியன் தலைப்பிற்கு ஃபோகஸை நகர்த்தவும்.
  • `Home`: முதல் அக்கார்டியன் தலைப்பிற்கு ஃபோகஸை நகர்த்தவும்.
  • `End`: கடைசி அக்கார்டியன் தலைப்பிற்கு ஃபோகஸை நகர்த்தவும்.
  • `Arrow Right` (அல்லது `Enter`/`Space`): தற்போதைய அக்கார்டியன் உருப்படியை விரிவாக்க/சுருக்க.
  • `Arrow Left` (அல்லது `Enter`/`Space`): தற்போதைய அக்கார்டியன் உருப்படியை சுருக்கி, ஃபோகஸை தலைப்பிற்கு மீண்டும் நகர்த்தவும்.

4. காட்சி ஃபோகஸ் குறிகாட்டிகள்

ஒரு அக்கார்டியன் தலைப்பு விசைப்பலகை ஃபோகஸைப் பெறும்போது, அது ஒரு தெளிவான காட்சி குறிகாட்டியைக் கொண்டிருக்க வேண்டும். இயல்புநிலை உலாவி ஃபோகஸ் அவுட்லைன்கள் பெரும்பாலும் போதுமானவை, ஆனால் அவை CSS ஆல் அகற்றப்படவில்லை என்பதை உறுதிப்படுத்தவும் (எ.கா., `outline: none;`) ஒரு மாற்று, மிகவும் தெரியும் ஃபோகஸ் பாணியை வழங்காமல்.

ஃபோகஸிற்கான எடுத்துக்காட்டு CSS:

.accordion-button:focus {
  outline: 3px solid blue; /* அல்லது மாறுபட்ட தேவைகளைப் பூர்த்தி செய்யும் ஒரு நிறம் */
  outline-offset: 2px;
}

5. உள்ளடக்கத் தெரிவுநிலை மற்றும் வழங்கல்

• இயல்புநிலை நிலை: அக்கார்டியன் பிரிவுகள் இயல்பாக சுருக்கப்பட்டதா அல்லது விரிவாக்கப்பட்டதா என்பதை முடிவு செய்யுங்கள். FAQs அல்லது அடர்த்தியான தகவல்களுக்கு, சுருக்கப்பட்ட நிலையில் தொடங்குவது பெரும்பாலும் சிறந்தது. வழிசெலுத்தல் அல்லது அம்சச் சுருக்கங்களுக்கு, ஒரு பிரிவு இயல்பாக விரிவாக்கப்பட்டிருப்பது உதவியாக இருக்கலாம்.
• காட்சிக் குறிப்புகள்: ஒரு பிரிவு விரிவாக்கப்பட்டதா அல்லது சுருக்கப்பட்டதா என்பதைக் குறிக்க தெளிவான காட்சிக் குறிப்புகளைப் பயன்படுத்தவும். இது ஒரு ஐகானாக இருக்கலாம் (எ.கா., '+' அல்லது '-' குறி, மேல்/கீழ் அம்பு) அதன் தோற்றத்தை மாற்றும். இந்த ஐகான்களும் அணுகக்கூடியவை என்பதை உறுதிப்படுத்தவும் (எ.கா., உரை இல்லையென்றால் `aria-label` வழியாக).
• மாறுபட்ட விகிதங்கள்: அக்கார்டியனுக்குள் உள்ள உரை உள்ளடக்கம் மற்றும் மாற்று பொத்தான்கள், WCAG மாறுபட்ட விகிதத் தேவைகளைப் பூர்த்தி செய்வதை உறுதிப்படுத்தவும் (சாதாரண உரைக்கு 4.5:1, பெரிய உரைக்கு 3:1). இது குறைந்த பார்வை உள்ள பயனர்களுக்கு முக்கியமானது.
• உள்ளடக்க இழப்பு இல்லை: ஒரு பிரிவு விரிவடையும்போது, அதன் உள்ளடக்கம் அதன் கொள்கலனை மீறவில்லை அல்லது மற்ற முக்கியமான உள்ளடக்கத்தை மறைக்கவில்லை என்பதை உறுதிப்படுத்தவும்.

6. மாற்றும்போது ஃபோகஸை நிர்வகித்தல்

இது ஒரு மேம்பட்ட அம்சம் ஆனால் ஒரு தடையற்ற அனுபவத்திற்கு முக்கியமானது.

• விரிவாக்கு: ஒரு பயனர் ஒரு பிரிவை விரிவுபடுத்தும்போது, புதிதாக வெளிப்படுத்தப்பட்ட உள்ளடக்கத்திற்குள் உள்ள முதல் ஊடாடும் உறுப்பிற்கு ஃபோகஸை நகர்த்துவதைக் கவனியுங்கள். விரிவாக்கப்பட்ட உள்ளடக்கத்தில் படிவ புலங்கள் அல்லது இணைப்புகள் இருந்தால் இது மிகவும் முக்கியம்.
• சுருக்கு: ஒரு பயனர் ஒரு பிரிவைச் சுருக்கும்போது, மாற்றப்பட்ட அக்கார்டியன் தலைப்பிற்கு ஃபோகஸ் திரும்ப வேண்டும். இது பயனர்கள் முன்னர் சுருக்கப்பட்ட பிரிவுகள் வழியாக மீண்டும் செல்ல வேண்டியதைத் தடுக்கிறது.

ஃபோகஸ் மேலாண்மையை செயல்படுத்துவது பொதுவாக ஃபோகஸைப் பிடிக்கவும் நிரல் ரீதியாக அமைக்கவும் ஜாவாஸ்கிரிப்டை உள்ளடக்கியது.

ஜாவாஸ்கிரிப்ட் மூலம் அணுகக்கூடிய அக்கார்டியன்களைச் செயல்படுத்துதல்

சொற்பொருள் HTML மற்றும் ARIA முதல் படிகளாக இருந்தாலும், மாறும் மாற்றங்கள் மற்றும் சாத்தியமான ஃபோகஸ் மேலாண்மையைக் கையாள ஜாவாஸ்கிரிப்ட் பெரும்பாலும் தேவைப்படுகிறது. இங்கே ஒரு கருத்தியல் ஜாவாஸ்கிரிப்ட் அணுகுமுறை:

// அக்கார்டியன் செயல்பாட்டிற்கான கருத்தியல் ஜாவாஸ்கிரிப்ட்

document.querySelectorAll('.accordion-button').forEach(button => {
  button.addEventListener('click', () => {
    const controlsId = button.getAttribute('aria-controls');
    const content = document.getElementById(controlsId);

    if (content) {
      const isExpanded = button.getAttribute('aria-expanded') === 'true';
      
      // aria-expanded நிலையை மாற்று
      button.setAttribute('aria-expanded', !isExpanded);

      // உள்ளடக்கத் தெரிவுநிலையை மாற்று (அணுகலுக்காக CSS ஐப் பயன்படுத்துதல்)
      content.style.display = isExpanded ? 'none' : 'block'; // அல்லது ஒரு கிளாஸ் மாற்றத்தைப் பயன்படுத்தவும்

      // விருப்பத்தேர்வு: விரிவாக்கும்போது ஃபோகஸ் மேலாண்மை
      // if (!isExpanded) {
      //   const firstFocusableElement = content.querySelector('a[href], button, input, [tabindex]');
      //   if (firstFocusableElement) {
      //     firstFocusableElement.focus();
      //   }
      // }
    }
  });

  // விருப்பத்தேர்வு: விசைப்பலகை வழிசெலுத்தல் (அம்பு விசைகள், முதலியன) இங்கேயும் செயல்படுத்தப்படும்.
  // எடுத்துக்காட்டாக, 'keydown' நிகழ்வுகளைக் கையாளுதல்.
});

// ஆரம்ப அமைப்பு: இயல்பாக உள்ளடக்கத்தை மறைத்து, aria-expanded ஐ false ஆக அமைக்கவும்
document.querySelectorAll('.accordion-content').forEach(content => {
  const headerButton = document.getElementById(content.getAttribute('aria-labelledby'));
  if (headerButton) {
    content.style.display = 'none'; // ஆரம்பத்தில் உள்ளடக்கத்தை மறை
    headerButton.setAttribute('aria-expanded', 'false');
  }
});

ஜாவாஸ்கிரிப்டிற்கான முக்கியக் கருத்தாய்வுகள்:

• மறைப்பதற்கான CSS: உள்ளடக்கத்தை மறைக்க CSS ஐப் பயன்படுத்துவது சிறந்த நடைமுறை (எ.கா., `display: none;` அல்லது மென்மையான மாற்றங்களுக்கு `height: 0; overflow: hidden;` ஐ அமைக்கும் ஒரு கிளாஸ்). இது உள்ளடக்கத்தை அணுகல் மரத்திலிருந்து தெரியாதபோது அகற்றப்படுவதை உறுதி செய்கிறது.
• அருள்மிகு சிதைவு: ஜாவாஸ்கிரிப்ட் ஏற்ற அல்லது செயல்படுத்தத் தவறினால் கூட, அக்கார்டியன் உள்ளடக்கம் அணுகக்கூடியதாக இருப்பதை உறுதிப்படுத்தவும் (ஒருவேளை மடக்க முடியாததாக இருந்தாலும்). சொற்பொருள் HTML இன்னும் சில கட்டமைப்பை வழங்க வேண்டும்.
• கட்டமைப்புகள் மற்றும் நூலகங்கள்: ஜாவாஸ்கிரிப்ட் கட்டமைப்புகள் (React, Vue, Angular) அல்லது UI நூலகங்களைப் பயன்படுத்தினால், அவற்றின் அணுகல் ஆவணங்களைச் சரிபார்க்கவும். பல அணுகக்கூடிய அக்கார்டியன் கூறுகளை பெட்டியிலிருந்து அல்லது குறிப்பிட்ட பண்புக்கூறுகளுடன் வழங்குகின்றன.

அணுகலுக்காகச் சோதித்தல்

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

• தானியங்கு கருவிகள்: பொதுவான அணுகல் சிக்கல்களை அடையாளம் காண உலாவி நீட்டிப்புகள் (Axe, WAVE போன்றவை) அல்லது ஆன்லைன் சரிபார்ப்பான்களைப் பயன்படுத்தவும்.
• விசைப்பலகை சோதனை: விசைப்பலகையை மட்டும் பயன்படுத்தி அக்கார்டியனை வழிநடத்தி இயக்கவும் (Tab, Shift+Tab, Enter, Spacebar, அம்பு விசைகள்). அனைத்து ஊடாடும் கூறுகளும் அடையக்கூடியதாகவும் இயக்கக்கூடியதாகவும் இருப்பதை உறுதிப்படுத்தவும்.
• ஸ்கிரீன் ரீடர் சோதனை: பிரபலமான ஸ்கிரீன் ரீடர்களுடன் (NVDA, JAWS, VoiceOver) சோதிக்கவும். அக்கார்டியனின் கட்டமைப்பு மற்றும் நிலை மாற்றங்கள் எவ்வாறு அறிவிக்கப்படுகின்றன என்பதைக் கேளுங்கள். அது அர்த்தமுள்ளதாக இருக்கிறதா? `aria-expanded` நிலை சரியாகத் தெரிவிக்கப்படுகிறதா?
• பயனர் சோதனை: முடிந்தால், உங்கள் சோதனைச் செயல்பாட்டில் ஊனமுற்ற பயனர்களை ஈடுபடுத்துங்கள். நிஜ உலகப் பயன்பாட்டுச் சிக்கல்களை அடையாளம் காண அவர்களின் கருத்து விலைமதிப்பற்றது.
• உலாவி மற்றும் சாதன சோதனை: வெவ்வேறு உலாவிகள் மற்றும் சாதனங்களில் சோதிக்கவும், ஏனெனில் ரெண்டரிங் மற்றும் ஜாவாஸ்கிரிப்ட் நடத்தை மாறுபடலாம்.

உலகளாவிய கண்ணோட்டங்கள் மற்றும் உள்ளூர்மயமாக்கல்

உலகளாவிய பார்வையாளர்களுக்காக வடிவமைக்கும்போது, இந்த காரணிகளைக் கவனியுங்கள்:

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

அணுகக்கூடிய அக்கார்டியன்களின் எடுத்துக்காட்டுகள்

பல புகழ்பெற்ற நிறுவனங்கள் அணுகக்கூடிய அக்கார்டியன் வடிவங்களை நிரூபிக்கின்றன:

• GOV.UK வடிவமைப்பு அமைப்பு: அணுகலுக்கான அதன் அர்ப்பணிப்புக்காக அடிக்கடி மேற்கோள் காட்டப்படும், GOV.UK, WCAG க்கு இணங்க, அக்கார்டியன்கள் உட்பட நன்கு ஆவணப்படுத்தப்பட்ட கூறுகளை வழங்குகிறது.
• MDN வலை ஆவணங்கள்: மொஸில்லா டெவலப்பர் நெட்வொர்க், ARIA பயன்பாட்டின் தெளிவான விளக்கங்களுடன், அக்கார்டியன்கள் உட்பட அணுகக்கூடிய விட்ஜெட்டுகளை உருவாக்குவது குறித்த விரிவான வழிகாட்டிகள் மற்றும் எடுத்துக்காட்டுகளை வழங்குகிறது.
• பெரிய தொழில்நுட்ப நிறுவனங்களின் வடிவமைப்பு அமைப்புகள்: கூகிள் (மெட்டீரியல் டிசைன்), மைக்ரோசாப்ட் (ஃப்ளூயண்ட் UI), மற்றும் ஆப்பிள் போன்ற நிறுவனங்கள் பெரும்பாலும் அணுகலுக்கு முன்னுரிமை அளிக்கும் வடிவமைப்பு அமைப்பு கூறுகளை வழங்குகின்றன. இவற்றைக் குறிப்பிடுவது வலுவான செயல்படுத்தல் வடிவங்களை வழங்க முடியும்.

முடிவுரை

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

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