ఉదాహరణ 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` vs. `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, Arrow keys) ఉపయోగించి అకార్డియన్‌ను నావిగేట్ చేసి ఆపరేట్ చేయండి. అన్ని ఇంటరాక్టివ్ ఎలిమెంట్‌లు అందుబాటులో మరియు ఆపరేట్ చేయగలవని నిర్ధారించుకోండి.
• స్క్రీన్ రీడర్ టెస్టింగ్: ప్రముఖ స్క్రీన్ రీడర్‌లతో (NVDA, JAWS, VoiceOver) పరీక్షించండి. అకార్డియన్ నిర్మాణం మరియు స్థితి మార్పులు ఎలా ప్రకటించబడుతున్నాయో వినండి. అది అర్థవంతంగా ఉందా? `aria-expanded` స్థితి సరిగ్గా తెలియజేయబడిందా?
• వినియోగదారు టెస్టింగ్: వీలైతే, మీ టెస్టింగ్ ప్రక్రియలో వికలాంగులను చేర్చుకోండి. వారి అభిప్రాయం వాస్తవ-ప్రపంచ వినియోగ సమస్యలను గుర్తించడానికి అమూల్యమైనది.
• బ్రౌజర్ మరియు పరికర టెస్టింగ్: రెండరింగ్ మరియు జావాస్క్రిప్ట్ ప్రవర్తన మారవచ్చు కాబట్టి, వివిధ బ్రౌజర్‌లు మరియు పరికరాలలో పరీక్షించండి.

ప్రపంచ దృక్కోణాలు మరియు స్థానికీకరణ

ప్రపంచ ప్రేక్షకుల కోసం డిజైన్ చేసేటప్పుడు, ఈ కారకాలను పరిగణించండి:

• భాష: బటన్ లేబుల్‌లు మరియు కంటెంట్‌తో సహా అన్ని టెక్స్ట్ స్పష్టంగా, సంక్షిప్తంగా మరియు సులభంగా అనువదించదగినదిగా ఉందని నిర్ధారించుకోండి. జాతీయాలు లేదా సాంస్కృతికంగా నిర్దిష్ట సూచనలను నివారించండి.
• కంటెంట్ పొడవు: కంటెంట్ విస్తరణ పేజీ లేఅవుట్‌ను గణనీయంగా ప్రభావితం చేస్తుంది. అనువదించబడిన కంటెంట్ అసలు కంటెంట్ కంటే పొడవుగా లేదా పొట్టిగా ఉండవచ్చని గుర్తుంచుకోండి. మీ అకార్డియన్ వివిధ కంటెంట్ పొడవులను ఎలా నిర్వహిస్తుందో పరీక్షించండి.
• సాంస్కృతిక UI సంప్రదాయాలు: అకార్డియన్ల యొక్క ప్రధాన కార్యాచరణ సార్వత్రికమైనప్పటికీ, సూక్ష్మ డిజైన్ ఎలిమెంట్‌లు సంస్కృతుల మధ్య విభిన్నంగా గ్రహించబడవచ్చు. స్థాపించబడిన ప్యాటర్న్‌లు మరియు స్పష్టమైన అఫర్డెన్స్‌లకు కట్టుబడి ఉండండి.
• పనితీరు: నెమ్మదిగా ఇంటర్నెట్ కనెక్షన్‌లు ఉన్న ప్రాంతాల్లోని వినియోగదారుల కోసం, మీ జావాస్క్రిప్ట్ ఆప్టిమైజ్ చేయబడిందని మరియు అకార్డియన్‌లలోని కంటెంట్ ప్రారంభ పేజీ లోడ్ సమయాలను అధికంగా ప్రభావితం చేయదని నిర్ధారించుకోండి.

యాక్సెసిబుల్ అకార్డియన్ల ఉదాహరణలు

అనేక ప్రసిద్ధ సంస్థలు యాక్సెసిబుల్ అకార్డియన్ ప్యాటర్న్‌లను ప్రదర్శిస్తాయి:

• GOV.UK డిజైన్ సిస్టమ్: యాక్సెసిబిలిటీకి దాని నిబద్ధత కోసం తరచుగా ఉదహరించబడింది, GOV.UK WCAGకి కట్టుబడి ఉండే అకార్డియన్‌లతో సహా బాగా-డాక్యుమెంట్ చేయబడిన కాంపోనెంట్‌లను అందిస్తుంది.
• MDN వెబ్ డాక్స్: Mozilla డెవలపర్ నెట్‌వర్క్ ARIA వాడకంపై స్పష్టమైన వివరణలతో, అకార్డియన్‌లతో సహా యాక్సెసిబుల్ విడ్జెట్‌లను సృష్టించడంపై వివరణాత్మక గైడ్‌లు మరియు ఉదాహరణలను అందిస్తుంది.
• పెద్ద టెక్ కంపెనీల నుండి డిజైన్ సిస్టమ్స్: Google (Material Design), Microsoft (Fluent UI), మరియు Apple వంటి కంపెనీలు తరచుగా యాక్సెసిబిలిటీకి ప్రాధాన్యత ఇచ్చే డిజైన్ సిస్టమ్ కాంపోనెంట్‌లను అందిస్తాయి. వీటిని సూచించడం బలమైన అమలు ప్యాటర్న్‌లను అందించగలదు.

ముగింపు

అకార్డియన్ విడ్జెట్‌లు కంటెంట్‌ను నిర్వహించడానికి మరియు వినియోగదారు అనుభవాన్ని మెరుగుపరచడానికి శక్తివంతమైన సాధనాలు. అయితే, వాటి డైనమిక్ స్వభావం యాక్సెసిబిలిటీకి ఒక మనస్సాక్షియుత విధానాన్ని కోరుతుంది. WCAG మార్గదర్శకాలకు కట్టుబడి, సెమాంటిక్ HTMLను ఉపయోగించుకోవడం, ARIAను సరిగ్గా అమలు చేయడం, బలమైన కీబోర్డ్ నావిగేషన్‌ను నిర్ధారించడం మరియు సమగ్ర పరీక్షలు నిర్వహించడం ద్వారా, మీరు ప్రపంచవ్యాప్తంగా ప్రతి ఒక్కరికీ ఉపయోగపడే మరియు ఆనందించదగిన అకార్డియన్ కాంపోనెంట్‌లను సృష్టించవచ్చు. ప్రారంభం నుండే యాక్సెసిబిలిటీకి ప్రాధాన్యత ఇవ్వడం కేవలం అనుగుణతను నిర్ధారించడమే కాకుండా, అందరికీ మరింత సమ్మిళిత మరియు వినియోగదారు-స్నేహపూర్వక ఉత్పత్తికి దారితీస్తుంది.

గుర్తుంచుకోండి, యాక్సెసిబుల్ డిజైన్ ఒక అనంతర ఆలోచన కాదు; ఇది మంచి డిజైన్‌లో ఒక అంతర్భాగం. యాక్సెసిబుల్ అకార్డియన్ విడ్జెట్‌ల అమలులో నైపుణ్యం సాధించడం ద్వారా, మీరు వినియోగదారులందరికీ మరింత సమానమైన మరియు ఉపయోగపడే వెబ్‌కు దోహదపడతారు.