HTML Struktūros Pavyzdys:

<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 skyriaus pavadinimas
      </button>
    </h3>
    <div id="content-1" class="accordion-content" role="region" aria-labelledby="button-1">
      <p>Čia pateikiamas 1 skyriaus turinys.</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 skyriaus pavadinimas
      </button>
    </h3>
    <div id="content-2" class="accordion-content" role="region" aria-labelledby="button-2">
      <p>Čia pateikiamas 2 skyriaus turinys.</p>
    </div>
  </div>
</div>

2. ARIA Atributai Dinaminiam Turiniui

ARIA vaidmenys ir būsenos yra labai svarbūs informuojant pagalbines technologijas apie akordeono elgseną.

• `role="button"`: Ant interaktyvaus elemento (mygtuko), kuris perjungia turinį.
• `aria-expanded`: Nustatoma į `true`, kai turinio skydelis matomas, ir `false`, kai jis paslėptas. Tai tiesiogiai praneša būseną ekrano skaitytuvams.
• `aria-controls`: Ant mygtuko, nurodant valdomo turinio skydelio `id`. Tai sukuria programinį ryšį.
• `aria-labelledby`: Ant turinio skydelio, nurodant jį valdančio mygtuko `id`. Tai sukuria dvipusį ryšį.
• `role="region"`: Ant turinio skydelio. Tai nurodo, kad turinys yra suvokiama puslapio dalis.
• `aria-hidden`: Nors `aria-expanded` yra pageidautinas matomumo būsenoms valdyti, `aria-hidden="true"` gali būti naudojamas ant turinio skydelių, kurie šiuo metu nerodomi, kad ekrano skaitytuvai jų neskelbtų. Tačiau užtikrinti, kad turinys būtų tinkamai paslėptas per CSS (`display: none;`) arba pašalintas iš prieinamumo medžio, yra patikimiau.

Pastaba dėl `aria-hidden` ir `display: none`: Naudojant `display: none;` CSS, elementas efektyviai pašalinamas iš prieinamumo medžio. Jei dinamiškai rodote/slepiate turinį naudodami JavaScript be `display: none;`, `aria-hidden` tampa svarbesnis. Tačiau `display: none;` paprastai yra pageidaujamas metodas turinio skydeliams slėpti.

3. Valdymas Klaviatūra

Užtikrinkite, kad vartotojai galėtų sąveikauti su akordeonu naudodami standartines klaviatūros komandas.

• Naršymas „Tab“ klavišu: Akordeono antraštės turi būti fokusuojamos ir atsirasti natūralioje puslapio „Tab“ klavišo sekoje.
• Aktyvavimas: Paspaudus `Enter` arba `Spacebar` ant sufokusuotos akordeono antraštės, turėtų būti perjungiamas jos turinio skydelio matomumas.
• Rodyklių Klavišai (Nebūtina, bet Rekomenduojama): Siekiant geresnės patirties, apsvarstykite galimybę įdiegti naršymą rodyklių klavišais:
  • `Rodyklė žemyn`: Perkelia fokusą į kitą akordeono antraštę.
  • `Rodyklė aukštyn`: Perkelia fokusą į ankstesnę akordeono antraštę.
  • `Home`: Perkelia fokusą į pirmąją akordeono antraštę.
  • `End`: Perkelia fokusą į paskutinę akordeono antraštę.
  • `Rodyklė dešinėn` (arba `Enter`/`Space`): Išskleidžia/suskleidžia dabartinį akordeono elementą.
  • `Rodyklė kairėn` (arba `Enter`/`Space`): Suskleidžia dabartinį akordeono elementą ir perkelia fokusą atgal į antraštę.

4. Vaizdiniai Fokuso Indikatoriai

Kai akordeono antraštė gauna klaviatūros fokusą, ji turi turėti aiškų vaizdinį indikatorių. Numatytieji naršyklės fokuso kontūrai dažnai yra pakankami, tačiau įsitikinkite, kad jie nėra pašalinti CSS (pvz., `outline: none;`) nepateikiant alternatyvaus, gerai matomo fokuso stiliaus.

CSS fokuso pavyzdys:

.accordion-button:focus {
  outline: 3px solid blue; /* Arba spalva, atitinkanti kontrasto reikalavimus */
  outline-offset: 2px;
}

5. Turinio Matomumas ir Pateikimas

• Numatytoji Būsena: Nuspręskite, ar akordeono sekcijos turėtų būti suskleistos, ar išskleistos pagal numatytuosius nustatymus. DUK ar tankiai informacijai dažnai geriausia pradėti nuo suskleistos būsenos. Naršymui ar funkcijų santraukoms gali būti naudinga, jei viena sekcija yra išskleista pagal numatytuosius nustatymus.
• Vaizdinės Užuominos: Naudokite aiškias vaizdines užuominas, rodančias, ar sekcija yra išskleista, ar suskleista. Tai gali būti piktograma (pvz., „+“ arba „-“ ženklas, rodyklė aukštyn/žemyn), kuri keičia savo išvaizdą. Užtikrinkite, kad šios piktogramos taip pat būtų prieinamos (pvz., per `aria-label`, jei jos neturi teksto).
• Kontrasto Santykiai: Užtikrinkite, kad tekstinis turinys akordeone ir perjungimo mygtukai atitiktų WCAG kontrasto santykio reikalavimus (4.5:1 normaliam tekstui, 3:1 dideliam tekstui). Tai gyvybiškai svarbu silpnaregiams vartotojams.
• Jokio Turinio Praradimo: Kai sekcija išsiskleidžia, užtikrinkite, kad jos turinys neišeitų už konteinerio ribų ir neuždengtų kito svarbaus turinio.

6. Fokuso Valdymas Perjungiant

Tai yra pažangesnis aspektas, bet labai svarbus sklandžiai patirčiai.

• Išskleisti: Kai vartotojas išskleidžia sekciją, apsvarstykite galimybę perkelti fokusą į pirmąjį interaktyvų elementą naujai atskleistame turinyje. Tai ypač svarbu, jei išskleistame turinyje yra formos laukų ar nuorodų.
• Suskleisti: Kai vartotojas suskleidžia sekciją, fokusas turėtų grįžti į akordeono antraštę, kuri buvo perjungta. Tai neleidžia vartotojams vėl naršyti per anksčiau suskleistas sekcijas.

Fokuso valdymo įgyvendinimas paprastai apima JavaScript, skirtą fokusui užfiksuoti ir programiškai nustatyti.

Prieinamų Akordeonų Įdiegimas su JavaScript

Nors semantinis HTML ir ARIA yra pirmieji žingsniai, JavaScript dažnai reikalingas dinamiškam perjungimui ir galbūt fokuso valdymui. Štai konceptualus JavaScript metodas:

// Konceptualus JavaScript akordeono funkcionalumui

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';
      
      // Perjungti aria-expanded būseną
      button.setAttribute('aria-expanded', !isExpanded);

      // Perjungti turinio matomumą (naudojant CSS dėl prieinamumo)
      content.style.display = isExpanded ? 'none' : 'block'; // Arba naudoti klasės perjungimą

      // Nebūtina: fokuso valdymas išskleidžiant
      // if (!isExpanded) {
      //   const firstFocusableElement = content.querySelector('a[href], button, input, [tabindex]');
      //   if (firstFocusableElement) {
      //     firstFocusableElement.focus();
      //   }
      // }
    }
  });

  // Nebūtina: naršymas klaviatūra (rodyklių klavišai ir kt.) taip pat būtų įgyvendinamas čia.
  // Pavyzdžiui, apdorojant 'keydown' įvykius.
});

// Pradinė sąranka: paslėpti turinį pagal nutylėjimą ir nustatyti aria-expanded į false
document.querySelectorAll('.accordion-content').forEach(content => {
  const headerButton = document.getElementById(content.getAttribute('aria-labelledby'));
  if (headerButton) {
    content.style.display = 'none'; // Iš pradžių paslėpti turinį
    headerButton.setAttribute('aria-expanded', 'false');
  }
});

Svarbūs Aspektai Naudojant JavaScript:

• CSS Slėpimui: Geriausia praktika yra naudoti CSS (pvz., `display: none;` arba klasę, kuri nustato `height: 0; overflow: hidden;` sklandesniems perėjimams) turiniui slėpti. Tai užtikrina, kad turinys yra pašalinamas iš prieinamumo medžio, kai jis nematomas.
• Sklandus Degradavimas: Užtikrinkite, kad net jei JavaScript nepavyksta įkelti ar įvykdyti, akordeono turinys išliktų prieinamas (nors galbūt ne išskleidžiamas). Semantinis HTML vis tiek turėtų suteikti tam tikrą struktūrą.
• Karkasai ir Bibliotekos: Jei naudojate JavaScript karkasus (React, Vue, Angular) ar UI bibliotekas, patikrinkite jų prieinamumo dokumentaciją. Daugelis jų siūlo prieinamus akordeono komponentus iš karto arba su specifiniais atributais.

Prieinamumo Testavimas

Išsamus testavimas yra gyvybiškai svarbus siekiant užtikrinti, kad jūsų akordeono valdikliai būtų tikrai prieinami.

• Automatizuoti Įrankiai: Naudokite naršyklės plėtinius (pvz., Axe, WAVE) arba internetinius tikrintuvus, kad nustatytumėte dažniausiai pasitaikančias prieinamumo problemas.
• Testavimas Klaviatūra: Naršykite ir valdykite akordeoną naudodami tik klaviatūrą (Tab, Shift+Tab, Enter, Spacebar, rodyklių klavišai). Užtikrinkite, kad visi interaktyvūs elementai būtų pasiekiami ir valdomi.
• Testavimas Ekrano Skaitytuvu: Išbandykite su populiariais ekrano skaitytuvais (NVDA, JAWS, VoiceOver). Klausykitės, kaip skelbiama akordeono struktūra ir būsenos pokyčiai. Ar tai prasminga? Ar `aria-expanded` būsena teisingai perteikiama?
• Vartotojų Testavimas: Jei įmanoma, įtraukite neįgalius vartotojus į savo testavimo procesą. Jų atsiliepimai yra neįkainojami nustatant realias naudojimo problemas.
• Naršyklių ir Įrenginių Testavimas: Išbandykite įvairiose naršyklėse ir įrenginiuose, nes atvaizdavimas ir JavaScript elgsena gali skirtis.

Pasaulinės Perspektyvos ir Lokalizacija

Kurdami pasaulinei auditorijai, atsižvelkite į šiuos veiksnius:

• Kalba: Užtikrinkite, kad visas tekstas, įskaitant mygtukų etiketes ir turinį, būtų aiškus, glaustas ir lengvai verčiamas. Venkite idiomų ar kultūriškai specifinių nuorodų.
• Turinio Ilgis: Turinio išskleidimas gali ženkliai paveikti puslapio išdėstymą. Atkreipkite dėmesį, kad išverstas turinys gali būti ilgesnis ar trumpesnis už originalą. Išbandykite, kaip jūsų akordeonas tvarkosi su skirtingo ilgio turiniu.
• Kultūrinės UI Konvencijos: Nors pagrindinė akordeonų funkcija yra universali, subtilūs dizaino elementai gali būti suvokiami skirtingai įvairiose kultūrose. Laikykitės nusistovėjusių modelių ir aiškių nuorodų.
• Našumas: Vartotojams regionuose su lėtesniu interneto ryšiu užtikrinkite, kad jūsų JavaScript būtų optimizuotas ir kad turinys akordeonuose pernelyg nepaveiktų pradinio puslapio įkėlimo laiko.

Prieinamų Akordeonų Pavyzdžiai

Daugelis gerbiamų organizacijų demonstruoja prieinamus akordeono modelius:

• GOV.UK Dizaino Sistema: Dažnai cituojama dėl savo atsidavimo prieinamumui, GOV.UK pateikia gerai dokumentuotus komponentus, įskaitant akordeonus, kurie atitinka WCAG.
• MDN Web Docs: Mozilla Developer Network siūlo išsamius vadovus ir pavyzdžius, kaip kurti prieinamus valdiklius, įskaitant akordeonus, su aiškiais ARIA naudojimo paaiškinimais.
• Didelių Technologijų Įmonių Dizaino Sistemos: Įmonės, tokios kaip Google (Material Design), Microsoft (Fluent UI) ir Apple, pateikia dizaino sistemos komponentus, kuriuose dažnai teikiama pirmenybė prieinamumui. Remiantis jais galima rasti patikimų įgyvendinimo modelių.

Išvada

Akordeono valdikliai yra galingi įrankiai turiniui organizuoti ir vartotojo patirčiai gerinti. Tačiau jų dinamiška prigimtis reikalauja sąžiningo požiūrio į prieinamumą. Laikydamiesi WCAG gairių, naudodami semantinį HTML, teisingai įgyvendindami ARIA, užtikrindami patikimą naršymą klaviatūra ir atlikdami išsamų testavimą, galite sukurti akordeono komponentus, kurie būtų naudojami ir malonūs visiems, visame pasaulyje. Prieinamumo prioritetizavimas nuo pat pradžių ne tik užtikrina atitiktį, bet ir veda prie įtraukesnio ir patogesnio produkto visiems.

Prisiminkite, prieinamas dizainas nėra pavėluota mintis; tai yra neatsiejama gero dizaino dalis. Įvaldę prieinamų akordeono valdiklių įdiegimą, prisidedate prie teisingesnio ir patogesnio žiniatinklio visiems vartotojams.