Primer strukture 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">
        Naslov razdelka 1
      </button>
    </h3>
    <div id="content-1" class="accordion-content" role="region" aria-labelledby="button-1">
      <p>Vsebina za razdelek 1 je tukaj.</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">
        Naslov razdelka 2
      </button>
    </h3>
    <div id="content-2" class="accordion-content" role="region" aria-labelledby="button-2">
      <p>Vsebina za razdelek 2 je tukaj.</p>
    </div>
  </div>
</div>

2. Atributi ARIA za dinamično vsebino

Vloge in stanja ARIA so ključnega pomena za obveščanje podpornih tehnologij o obnašanju harmonike.

• `role="button"`: Na interaktivnem elementu (gumb), ki preklaplja vsebino.
• `aria-expanded`: Nastavljen na `true`, ko je vsebinska plošča vidna, in `false`, ko je skrita. To neposredno sporoča stanje bralnikom zaslona.
• `aria-controls`: Na gumbu, ki se nanaša na `id` vsebinske plošče, ki jo nadzoruje. To vzpostavi programsko povezavo.
• `aria-labelledby`: Na vsebinski plošči, ki se nanaša na `id` gumba, ki jo nadzoruje. To ustvari dvosmerno povezavo.
• `role="region"`: Na vsebinski plošči. To označuje, da je vsebina zaznaven del strani.
• `aria-hidden`: Čeprav je `aria-expanded` prednosten za nadzor stanj vidnosti, se lahko `aria-hidden="true"` uporabi na vsebinski plošči, ki trenutno ni prikazana, da se prepreči njeno naznanjanje s strani bralnikov zaslona. Vendar je zagotavljanje, da je vsebina bodisi pravilno skrita prek CSS (`display: none;`) bodisi odstranjena iz drevesa dostopnosti, bolj robustno.

Opomba o `aria-hidden` v primerjavi z `display: none`: Uporaba `display: none;` v CSS učinkovito odstrani element iz drevesa dostopnosti. Če dinamično prikazujete/skrivate vsebino z uporabo JavaScripta brez `display: none;`, postane `aria-hidden` pomembnejši. Vendar je `display: none;` na splošno prednostna metoda za skrivanje vsebinskih plošč.

3. Operabilnost s tipkovnico

Zagotovite, da lahko uporabniki sodelujejo s harmoniko z uporabo standardnih ukazov na tipkovnici.

• Navigacija s tipko Tab: Glave harmonike morajo biti fokusabilne in se pojaviti v naravnem vrstnem redu tabulatorja na strani.
• Aktivacija: Pritisk na `Enter` ali `preslednico` na osredotočeni glavi harmonike naj preklopi vidnost njene vsebinske plošče.
• Puščične tipke (neobvezno, a priporočljivo): Za izboljšano izkušnjo razmislite o implementaciji navigacije s puščičnimi tipkami:
  • `Puščica dol`: Premakne fokus na naslednjo glavo harmonike.
  • `Puščica gor`: Premakne fokus na prejšnjo glavo harmonike.
  • `Home`: Premakne fokus na prvo glavo harmonike.
  • `End`: Premakne fokus na zadnjo glavo harmonike.
  • `Puščica desno` (ali `Enter`/`preslednica`): Razširi/zloži trenutni element harmonike.
  • `Puščica levo` (ali `Enter`/`preslednica`): Zloži trenutni element harmonike in premakne fokus nazaj na glavo.

4. Vizualni indikatorji fokusa

Ko glava harmonike prejme fokus s tipkovnice, mora imeti jasen vizualni indikator. Privzeti obrisi fokusa v brskalniku so pogosto zadostni, vendar zagotovite, da niso odstranjeni s CSS (npr. `outline: none;`), ne da bi zagotovili alternativni, zelo viden slog fokusa.

Primer CSS za fokus:

.accordion-button:focus {
  outline: 3px solid blue; /* Ali barva, ki ustreza zahtevam kontrasta */
  outline-offset: 2px;
}

5. Vidnost in predstavitev vsebine

• Privzeto stanje: Odločite se, ali naj bodo razdelki harmonike privzeto zloženi ali razširjeni. Za pogosta vprašanja ali goste informacije je pogosto najbolje začeti z zloženimi. Za navigacijo ali povzetke funkcij je lahko koristen en privzeto razširjen razdelek.
• Vizualni namigi: Uporabite jasne vizualne namige, ki kažejo, ali je razdelek razširjen ali zložen. To je lahko ikona (npr. znak '+' ali '-', puščica gor/dol), ki spreminja svoj videz. Zagotovite, da so te ikone tudi dostopne (npr. prek `aria-label`, če nimajo besedila).
• Kontrastna razmerja: Zagotovite, da besedilna vsebina znotraj harmonike in gumbi za preklop ustrezajo zahtevam WCAG glede kontrastnega razmerja (4,5:1 za normalno besedilo, 3:1 za veliko besedilo). To je ključnega pomena za uporabnike s slabšim vidom.
• Brez izgube vsebine: Ko se razdelek razširi, zagotovite, da njegova vsebina ne presega svojega vsebnika ali zakriva druge ključne vsebine.

6. Upravljanje fokusa pri preklapljanju

To je naprednejši vidik, a ključen za brezhibno izkušnjo.

• Razširitev: Ko uporabnik razširi razdelek, razmislite o premiku fokusa na prvi interaktivni element znotraj novo razkrite vsebine. To je še posebej pomembno, če razširjena vsebina vsebuje polja obrazca ali povezave.
• Zlaganje: Ko uporabnik zloži razdelek, bi se moral fokus vrniti na glavo harmonike, ki je bila preklopljena. To preprečuje, da bi se morali uporabniki pomikati nazaj skozi predhodno zložene razdelke.

Implementacija upravljanja fokusa običajno vključuje JavaScript za zajemanje in programsko nastavitev fokusa.

Implementacija dostopnih harmonik z JavaScriptom

Čeprav so semantični HTML in ARIA prvi koraki, je JavaScript pogosto potreben za upravljanje dinamičnega preklapljanja in potencialno upravljanje fokusa. Tukaj je konceptualni pristop z JavaScriptom:

// Konceptualni JavaScript za funkcionalnost harmonike

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';
      
      // Preklopi stanje aria-expanded
      button.setAttribute('aria-expanded', !isExpanded);

      // Preklopi vidnost vsebine (z uporabo CSS za dostopnost)
      content.style.display = isExpanded ? 'none' : 'block'; // Ali uporabi preklop razreda

      // Neobvezno: Upravljanje fokusa ob razširitvi
      // if (!isExpanded) {
      //   const firstFocusableElement = content.querySelector('a[href], button, input, [tabindex]');
      //   if (firstFocusableElement) {
      //     firstFocusableElement.focus();
      //   }
      // }
    }
  });

  // Neobvezno: Navigacija s tipkovnico (puščične tipke itd.) bi se implementirala tudi tukaj.
  // Na primer, obravnavanje dogodkov 'keydown'.
});

// Začetna nastavitev: Privzeto skrij vsebino in nastavi aria-expanded na false
document.querySelectorAll('.accordion-content').forEach(content => {
  const headerButton = document.getElementById(content.getAttribute('aria-labelledby'));
  if (headerButton) {
    content.style.display = 'none'; // Sprva skrij vsebino
    headerButton.setAttribute('aria-expanded', 'false');
  }
});

Pomembni premisleki za JavaScript:

• CSS za skrivanje: Najboljša praksa je uporaba CSS (npr. `display: none;` ali razreda, ki nastavi `height: 0; overflow: hidden;` za bolj gladke prehode) za skrivanje vsebine. To zagotavlja, da je vsebina odstranjena iz drevesa dostopnosti, ko ni vidna.
• Postopno poslabšanje: Zagotovite, da tudi če se JavaScript ne uspe naložiti ali izvesti, vsebina harmonike ostane dostopna (čeprav morda ne zložljiva). Semantični HTML bi moral še vedno zagotavljati nekaj strukture.
• Okvirji in knjižnice: Če uporabljate JavaScript okvirje (React, Vue, Angular) ali UI knjižnice, preverite njihovo dokumentacijo o dostopnosti. Mnogi ponujajo dostopne komponente harmonike že v osnovi ali s posebnimi atributi.

Testiranje dostopnosti

Temeljito testiranje je ključnega pomena za zagotovitev, da so vaši gradniki za harmoniko resnično dostopni.

• Avtomatizirana orodja: Uporabite razširitve za brskalnike (kot so Axe, WAVE) ali spletne preverjevalnike za prepoznavanje pogostih težav z dostopnostjo.
• Testiranje s tipkovnico: Navigirajte in upravljajte harmoniko samo s tipkovnico (Tab, Shift+Tab, Enter, preslednica, puščične tipke). Zagotovite, da so vsi interaktivni elementi dosegljivi in operabilni.
• Testiranje z bralniki zaslona: Testirajte s priljubljenimi bralniki zaslona (NVDA, JAWS, VoiceOver). Poslušajte, kako se naznanjajo struktura in spremembe stanja harmonike. Ali je smiselno? Ali je stanje `aria-expanded` pravilno sporočeno?
• Uporabniško testiranje: Če je mogoče, vključite uporabnike z oviranostmi v vaš proces testiranja. Njihove povratne informacije so neprecenljive za prepoznavanje resničnih težav z uporabnostjo.
• Testiranje v brskalnikih in na napravah: Testirajte v različnih brskalnikih in na različnih napravah, saj se lahko upodabljanje in obnašanje JavaScripta razlikujeta.

Globalne perspektive in lokalizacija

Pri oblikovanju za globalno občinstvo upoštevajte te dejavnike:

• Jezik: Zagotovite, da je vse besedilo, vključno z oznakami gumbov in vsebino, jasno, jedrnato in enostavno prevedljivo. Izogibajte se idiomom ali kulturno specifičnim referencam.
• Dolžina vsebine: Razširitev vsebine lahko pomembno vpliva na postavitev strani. Zavedajte se, da je lahko prevedena vsebina daljša ali krajša od izvirnika. Preizkusite, kako se vaša harmonika obnese z različnimi dolžinami vsebine.
• Kulturne konvencije uporabniškega vmesnika: Čeprav je osnovna funkcionalnost harmonik univerzalna, se lahko subtilni oblikovalski elementi v različnih kulturah dojemajo različno. Držite se uveljavljenih vzorcev in jasnih namigov.
• Učinkovitost: Za uporabnike v regijah s počasnejšimi internetnimi povezavami zagotovite, da je vaš JavaScript optimiziran in da vsebina znotraj harmonik ne vpliva pretirano na začetni čas nalaganja strani.

Primeri dostopnih harmonik

Številne ugledne organizacije prikazujejo vzorce dostopnih harmonik:

• Oblikovalski sistem GOV.UK: Pogosto citiran zaradi svoje zavezanosti dostopnosti, GOV.UK ponuja dobro dokumentirane komponente, vključno s harmonikami, ki so v skladu z WCAG.
• MDN Web Docs: Mozilla Developer Network ponuja podrobne vodnike in primere o ustvarjanju dostopnih gradnikov, vključno s harmonikami, z jasnimi pojasnili o uporabi ARIA.
• Oblikovalski sistemi velikih tehnoloških podjetij: Podjetja, kot so Google (Material Design), Microsoft (Fluent UI) in Apple, ponujajo komponente oblikovalskih sistemov, ki pogosto dajejo prednost dostopnosti. Sklicevanje na te lahko ponudi robustne vzorce implementacije.

Zaključek

Gradniki za harmoniko so močna orodja za organiziranje vsebine in izboljšanje uporabniške izkušnje. Vendar pa njihova dinamična narava zahteva vesten pristop k dostopnosti. Z upoštevanjem smernic WCAG, uporabo semantičnega HTML, pravilno implementacijo ARIA, zagotavljanjem robustne navigacije s tipkovnico in izvajanjem temeljitega testiranja lahko ustvarite komponente harmonike, ki so uporabne in prijetne za vse, po vsem svetu. Dajanje prednosti dostopnosti že od samega začetka ne zagotavlja le skladnosti, ampak vodi tudi do bolj vključujočega in uporabniku prijaznega izdelka za vse.

Ne pozabite, dostopno oblikovanje ni naknadna misel; je sestavni del dobrega oblikovanja. Z obvladovanjem implementacije dostopnih gradnikov za harmoniko prispevate k bolj pravičnemu in uporabnemu spletu za vse uporabnike.