HTML struktūras piemērs:

<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">
        Section 1 Title
      </button>
    </h3>
    <div id="content-1" class="accordion-content" role="region" aria-labelledby="button-1">
      <p>Content for section 1 goes here.</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">
        Section 2 Title
      </button>
    </h3>
    <div id="content-2" class="accordion-content" role="region" aria-labelledby="button-2">
      <p>Content for section 2 goes here.</p>
    </div>
  </div>
</div>

2. ARIA atribūti dinamiskam saturam

ARIA lomas un stāvokļi ir būtiski, lai informētu palīgtehnoloģijas par akordeona uzvedību.

• `role="button"`: Uz interaktīvā elementa (pogas), kas pārslēdz saturu.
• `aria-expanded`: Iestatiet uz `true`, kad satura panelis ir redzams, un `false`, kad tas ir paslēpts. Tas tieši paziņo stāvokli ekrāna lasītājiem.
• `aria-controls`: Uz pogas, atsaucoties uz tā kontrolētā satura paneļa `id`. Tas izveido programmatisku saiti.
• `aria-labelledby`: Uz satura paneļa, atsaucoties uz to kontrolējošās pogas `id`. Tas izveido divvirzienu saiti.
• `role="region"`: Uz satura paneļa. Tas norāda, ka saturs ir uztverama lapas sadaļa.
• `aria-hidden`: Lai gan `aria-expanded` ir priekšroka redzamības stāvokļu kontrolei, `aria-hidden="true"` var izmantot uz satura paneļiem, kas pašlaik nav redzami, lai novērstu to, ka ekrāna lasītāji tos paziņo. Tomēr robustāka ir satura pareiza paslēpšana ar CSS (`display: none;`) vai tā noņemšana no piekļūstamības koka.

Piezīme par `aria-hidden` pret `display: none`: Izmantojot `display: none;` CSS, elements tiek efektīvi noņemts no piekļūstamības koka. Ja jūs dinamiski rādāt/slēpjat saturu, izmantojot JavaScript bez `display: none;`, `aria-hidden` kļūst svarīgāks. Tomēr `display: none;` parasti ir vēlamā metode satura paneļu slēpšanai.

3. Darbībspēja ar tastatūru

Nodrošiniet, lai lietotāji varētu mijiedarboties ar akordeonu, izmantojot standarta tastatūras komandas.

• Navigācija ar Tab taustiņu: Akordeona galvenēm jābūt fokusējamām un jāparādās dabiskajā lapas tabulēšanas secībā.
• Aktivizēšana: Nospiežot `Enter` vai `Spacebar` uz fokusētas akordeona galvenes, jāpārslēdz tās satura paneļa redzamība.
• Bulttaustiņi (pēc izvēles, bet ieteicams): Lai nodrošinātu uzlabotu pieredzi, apsveriet iespēju ieviest navigāciju ar bulttaustiņiem:
  • `Arrow Down`: Pārvieto fokusu uz nākamo akordeona galveni.
  • `Arrow Up`: Pārvieto fokusu uz iepriekšējo akordeona galveni.
  • `Home`: Pārvieto fokusu uz pirmo akordeona galveni.
  • `End`: Pārvieto fokusu uz pēdējo akordeona galveni.
  • `Arrow Right` (vai `Enter`/`Space`): Izvērš/savieno pašreizējo akordeona elementu.
  • `Arrow Left` (vai `Enter`/`Space`): Savieno pašreizējo akordeona elementu un pārvieto fokusu atpakaļ uz galveni.

4. Vizuālie fokusa indikatori

Kad akordeona galvene saņem tastatūras fokusu, tai jābūt ar skaidru vizuālu indikatoru. Pēc noklusējuma pārlūkprogrammas fokusa kontūras bieži ir pietiekamas, bet pārliecinieties, ka tās nav noņemtas ar CSS (piemēram, `outline: none;`), nenodrošinot alternatīvu, labi pamanāmu fokusa stilu.

CSS fokusa piemērs:

.accordion-button:focus {
  outline: 3px solid blue; /* Or a color that meets contrast requirements */
  outline-offset: 2px;
}

5. Satura redzamība un noformējums

• Noklusējuma stāvoklis: Izlemiet, vai akordeona sadaļām pēc noklusējuma jābūt savilktām vai izvērstām. BUJ vai blīvai informācijai vislabāk ir sākt ar savilktām sadaļām. Navigācijai vai funkciju kopsavilkumiem varētu būt noderīgi, ja viena sadaļa ir izvērsta pēc noklusējuma.
• Vizuālās norādes: Izmantojiet skaidras vizuālās norādes, lai parādītu, vai sadaļa ir izvērsta vai savilkta. Tā varētu būt ikona (piemēram, a '+' vai '-' zīme, augšup/lejup vērsta bultiņa), kas maina savu izskatu. Nodrošiniet, lai šīs ikonas būtu arī pieejamas (piemēram, izmantojot `aria-label`, ja tām nav teksta).
• Kontrasta attiecības: Nodrošiniet, lai teksta saturs akordeonā un pārslēgšanas pogas atbilstu WCAG kontrasta attiecības prasībām (4.5:1 parastam tekstam, 3:1 lielam tekstam). Tas ir vitāli svarīgi lietotājiem ar vāju redzi.
• Nav satura zuduma: Kad sadaļa izvēršas, nodrošiniet, ka tās saturs neiziet ārpus konteinera vai neaizsedz citu svarīgu saturu.

6. Fokusa pārvaldība pārslēgšanas laikā

Šis ir sarežģītāks aspekts, bet būtisks nevainojamai pieredzei.

• Izvēršana: Kad lietotājs izvērš sadaļu, apsveriet iespēju pārvietot fokusu uz pirmo interaktīvo elementu jaunatklātajā saturā. Tas ir īpaši svarīgi, ja izvērstais saturs satur veidlapu laukus vai saites.
• Savilkšana: Kad lietotājs savelk sadaļu, fokusam jāatgriežas pie akordeona galvenes, kas tika pārslēgta. Tas novērš nepieciešamību lietotājiem navigēt atpakaļ cauri iepriekš savilktajām sadaļām.

Fokusa pārvaldības ieviešana parasti ietver JavaScript, lai fiksētu un programmatiski iestatītu fokusu.

Pieejamu akordeonu ieviešana ar JavaScript

Lai gan semantiskais HTML un ARIA ir pirmie soļi, bieži vien ir nepieciešams JavaScript, lai apstrādātu dinamisku pārslēgšanu un potenciāli fokusa pārvaldību. Šeit ir konceptuāla JavaScript pieeja:

// Konceptuāls JavaScript akordeona funkcionalitātei

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';
      
      // Pārslēgt aria-expanded stāvokli
      button.setAttribute('aria-expanded', !isExpanded);

      // Pārslēgt satura redzamību (izmantojot CSS piekļūstamībai)
      content.style.display = isExpanded ? 'none' : 'block'; // Vai izmantot klases pārslēgšanu

      // Neobligāti: Fokusa pārvaldība izvērstā stāvoklī
      // if (!isExpanded) {
      //   const firstFocusableElement = content.querySelector('a[href], button, input, [tabindex]');
      //   if (firstFocusableElement) {
      //     firstFocusableElement.focus();
      //   }
      // }
    }
  });

  // Neobligāti: Tastatūras navigācija (bulttaustiņi utt.) tiktu ieviesta arī šeit.
  // Piemēram, apstrādājot 'keydown' notikumus.
});

// Sākotnējā iestatīšana: Pēc noklusējuma paslēpt saturu un iestatīt aria-expanded uz false
document.querySelectorAll('.accordion-content').forEach(content => {
  const headerButton = document.getElementById(content.getAttribute('aria-labelledby'));
  if (headerButton) {
    content.style.display = 'none'; // Sākotnēji paslēpt saturu
    headerButton.setAttribute('aria-expanded', 'false');
  }
});

Svarīgi apsvērumi par JavaScript:

• CSS slēpšanai: Labākā prakse ir izmantot CSS (piemēram, `display: none;` vai klasi, kas iestata `height: 0; overflow: hidden;` gludākām pārejām), lai paslēptu saturu. Tas nodrošina, ka saturs tiek noņemts no piekļūstamības koka, kad tas nav redzams.
• Gracioza degradācija: Nodrošiniet, ka pat tad, ja JavaScript neizdodas ielādēt vai izpildīt, akordeona saturs paliek pieejams (lai gan varbūt ne savelkams). Semantiskajam HTML joprojām vajadzētu nodrošināt zināmu struktūru.
• Ietvari un bibliotēkas: Ja izmantojat JavaScript ietvarus (React, Vue, Angular) vai UI bibliotēkas, pārbaudiet to piekļūstamības dokumentāciju. Daudzi nodrošina pieejamus akordeona komponentus jau gatavus vai ar specifiskiem atribūtiem.

Piekļūstamības testēšana

Rūpīga testēšana ir vitāli svarīga, lai nodrošinātu, ka jūsu akordeona logrīki ir patiesi pieejami.

• Automatizētie rīki: Izmantojiet pārlūkprogrammas paplašinājumus (piemēram, Axe, WAVE) vai tiešsaistes pārbaudītājus, lai identificētu izplatītākās piekļūstamības problēmas.
• Testēšana ar tastatūru: Navigējiet un darbiniet akordeonu, izmantojot tikai tastatūru (Tab, Shift+Tab, Enter, Spacebar, bulttaustiņi). Pārliecinieties, ka visi interaktīvie elementi ir sasniedzami un darbināmi.
• Testēšana ar ekrāna lasītāju: Pārbaudiet ar populāriem ekrāna lasītājiem (NVDA, JAWS, VoiceOver). Klausieties, kā tiek paziņota akordeona struktūra un stāvokļa izmaiņas. Vai tam ir jēga? Vai `aria-expanded` stāvoklis tiek pareizi nodots?
• Lietotāju testēšana: Ja iespējams, iesaistiet lietotājus ar invaliditāti savā testēšanas procesā. Viņu atsauksmes ir nenovērtējamas, lai identificētu reālās dzīves lietojamības problēmas.
• Pārlūkprogrammu un ierīču testēšana: Pārbaudiet dažādās pārlūkprogrammās un ierīcēs, jo renderēšana un JavaScript uzvedība var atšķirties.

Globālās perspektīvas un lokalizācija

Izstrādājot globālai auditorijai, ņemiet vērā šos faktorus:

• Valoda: Nodrošiniet, lai viss teksts, ieskaitot pogu etiķetes un saturu, būtu skaidrs, kodolīgs un viegli tulkojams. Izvairieties no idiomām vai kultūrspecifiskām atsaucēm.
• Satura garums: Satura izvēršana var būtiski ietekmēt lapas izkārtojumu. Atcerieties, ka tulkotais saturs var būt garāks vai īsāks nekā oriģināls. Pārbaudiet, kā jūsu akordeons tiek galā ar dažādu garumu saturu.
• Kultūras UI konvencijas: Lai gan akordeonu pamatfunkcionalitāte ir universāla, smalki dizaina elementi dažādās kultūrās var tikt uztverti atšķirīgi. Pieturieties pie vispārpieņemtiem modeļiem un skaidrām norādēm.
• Veiktspēja: Lietotājiem reģionos ar lēnāku interneta savienojumu nodrošiniet, ka jūsu JavaScript ir optimizēts un ka saturs akordeonos pārmērīgi neietekmē sākotnējo lapas ielādes laiku.

Pieejamu akordeonu piemēri

Daudzas cienījamas organizācijas demonstrē pieejamu akordeonu modeļus:

• GOV.UK dizaina sistēma: Bieži minēta par tās apņemšanos nodrošināt piekļūstamību, GOV.UK piedāvā labi dokumentētus komponentus, tostarp akordeonus, kas atbilst WCAG.
• MDN Web Docs: Mozilla Developer Network piedāvā detalizētus ceļvežus un piemērus par pieejamu logrīku, tostarp akordeonu, izveidi, ar skaidriem ARIA lietošanas paskaidrojumiem.
• Lielo tehnoloģiju uzņēmumu dizaina sistēmas: Uzņēmumi, piemēram, Google (Material Design), Microsoft (Fluent UI), un Apple, nodrošina dizaina sistēmas komponentus, kas bieži vien prioritizē piekļūstamību. Atsaucoties uz tiem, var iegūt robustus ieviešanas modeļus.

Noslēgums

Akordeona logrīki ir spēcīgi rīki satura organizēšanai un lietotāja pieredzes uzlabošanai. Tomēr to dinamiskais raksturs prasa apzinātu pieeju piekļūstamībai. Ievērojot WCAG vadlīnijas, izmantojot semantisko HTML, pareizi ieviešot ARIA, nodrošinot robustu navigāciju ar tastatūru un veicot rūpīgu testēšanu, jūs varat izveidot akordeona komponentus, kas ir lietojami un patīkami ikvienam visā pasaulē. Piekļūstamības prioritizēšana jau no paša sākuma ne tikai nodrošina atbilstību, bet arī noved pie iekļaujošāka un lietotājam draudzīgāka produkta visiem.

Atcerieties, pieejams dizains nav pēcpārdoma; tā ir neatņemama laba dizaina sastāvdaļa. Apgūstot pieejamu akordeona logrīku ieviešanu, jūs veicināt taisnīgāku un lietojamāku tīmekli visiem lietotājiem.