Primjer HTML strukture:

<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 odjeljka 1
      </button>
    </h3>
    <div id="content-1" class="accordion-content" role="region" aria-labelledby="button-1">
      <p>Sadržaj za odjeljak 1 ide ovdje.</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 odjeljka 2
      </button>
    </h3>
    <div id="content-2" class="accordion-content" role="region" aria-labelledby="button-2">
      <p>Sadržaj za odjeljak 2 ide ovdje.</p>
    </div>
  </div>
</div>

2. ARIA Atributi za Dinamički Sadržaj

ARIA uloge i stanja ključni su za informiranje pomoćnih tehnologija o ponašanju accordiona.

• `role="button"`: Na interaktivnom elementu (gumbu) koji prebacuje sadržaj.
• `aria-expanded`: Postavlja se na `true` kada je panel sa sadržajem vidljiv i `false` kada je skriven. To izravno komunicira stanje čitačima zaslona.
• `aria-controls`: Na gumbu, referencira `id` panela sa sadržajem kojim upravlja. To uspostavlja programsku vezu.
• `aria-labelledby`: Na panelu sa sadržajem, referencira `id` gumba koji ga kontrolira. To stvara dvosmjernu vezu.
• `role="region"`: Na panelu sa sadržajem. To označava da je sadržaj percipirajući dio stranice.
• `aria-hidden`: Iako se `aria-expanded` preferira za kontrolu stanja vidljivosti, `aria-hidden="true"` se može koristiti na panelima sa sadržajem koji trenutno nisu prikazani kako bi se spriječilo njihovo najavljivanje od strane čitača zaslona. Međutim, osiguravanje da je sadržaj ili pravilno skriven putem CSS-a (`display: none;`) ili uklonjen iz stabla pristupačnosti je robusnije.

Napomena o `aria-hidden` naspram `display: none`: Korištenje `display: none;` u CSS-u učinkovito uklanja element iz stabla pristupačnosti. Ako dinamički prikazujete/skrivate sadržaj pomoću JavaScripta bez `display: none;`, `aria-hidden` postaje važniji. Međutim, `display: none;` je općenito preferirana metoda za skrivanje panela sa sadržajem.

3. Operabilnost Pomoću Tipkovnice

Osigurajte da korisnici mogu interagirati s accordionom koristeći standardne naredbe tipkovnice.

• Tab Navigacija: Zaglavlja accordiona trebaju biti fokusabilna i pojavljivati se u prirodnom redoslijedu tabulatora stranice.
• Aktivacija: Pritiskom na `Enter` ili `Razmaknicu` na fokusiranom zaglavlju accordiona treba se prebaciti vidljivost njegovog panela sa sadržajem.
• Tipke sa strelicama (Opcionalno, ali preporučeno): Za poboljšano iskustvo, razmislite o implementaciji navigacije tipkama sa strelicama:
  • `Strelica dolje`: Premješta fokus na sljedeće zaglavlje accordiona.
  • `Strelica gore`: Premješta fokus na prethodno zaglavlje accordiona.
  • `Home`: Premješta fokus na prvo zaglavlje accordiona.
  • `End`: Premješta fokus na zadnje zaglavlje accordiona.
  • `Strelica desno` (ili `Enter`/`Space`): Proširuje/skuplja trenutnu stavku accordiona.
  • `Strelica lijevo` (ili `Enter`/`Space`): Skuplja trenutnu stavku accordiona i vraća fokus na zaglavlje.

4. Vizualni Pokazatelji Fokusa

Kada zaglavlje accordiona dobije fokus tipkovnice, mora imati jasan vizualni pokazatelj. Zadane konture fokusa preglednika često su dovoljne, ali osigurajte da nisu uklonjene CSS-om (npr. `outline: none;`) bez pružanja alternativnog, visoko vidljivog stila fokusa.

Primjer CSS-a za fokus:

.accordion-button:focus {
  outline: 3px solid blue; /* Ili boja koja zadovoljava zahtjeve kontrasta */
  outline-offset: 2px;
}

5. Vidljivost i Prezentacija Sadržaja

• Zadano stanje: Odlučite trebaju li odjeljci accordiona biti skupljeni ili prošireni po zadanom. Za ČPP ili guste informacije, najbolje je započeti sa skupljenim stanjem. Za navigaciju ili sažetke značajki, može biti korisno imati jedan odjeljak proširen po zadanom.
• Vizualni znakovi: Koristite jasne vizualne znakove kako biste naznačili je li odjeljak proširen ili skupljen. To može biti ikona (npr. znak '+' ili '-', strelica gore/dolje) koja mijenja svoj izgled. Osigurajte da su i ove ikone pristupačne (npr. putem `aria-label` ako nemaju tekst).
• Omjeri kontrasta: Osigurajte da tekstualni sadržaj unutar accordiona i gumbi za prebacivanje zadovoljavaju zahtjeve WCAG omjera kontrasta (4.5:1 za normalan tekst, 3:1 za veliki tekst). To je ključno za korisnike sa slabim vidom.
• Bez gubitka sadržaja: Kada se odjeljak proširi, osigurajte da njegov sadržaj ne prelazi svoj spremnik ili ne zaklanja drugi kritični sadržaj.

6. Upravljanje Fokusom Prilikom Prebacivanja

Ovo je napredniji aspekt, ali ključan za besprijekorno iskustvo.

• Proširivanje: Kada korisnik proširi odjeljak, razmislite o premještanju fokusa na prvi interaktivni element unutar novootkrivenog sadržaja. To je posebno važno ako prošireni sadržaj sadrži polja obrasca ili poveznice.
• Skupljanje: Kada korisnik skupi odjeljak, fokus bi se trebao vratiti na zaglavlje accordiona koje je prebačeno. To sprječava korisnike da se moraju vraćati kroz prethodno skupljene odjeljke.

Implementacija upravljanja fokusom obično uključuje JavaScript za hvatanje i programsko postavljanje fokusa.

Implementacija Pristupačnih Accordiona s JavaScriptom

Iako su semantički HTML i ARIA prvi koraci, JavaScript je često potreban za rukovanje dinamičkim prebacivanjem i potencijalnim upravljanjem fokusom. Evo konceptualnog pristupa JavaScriptom:

// Konceptualni JavaScript za funkcionalnost accordiona

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

      // Prebaci vidljivost sadržaja (koristeći CSS za pristupačnost)
      content.style.display = isExpanded ? 'none' : 'block'; // Ili koristite prebacivanje klase

      // Opcionalno: Upravljanje fokusom pri proširivanju
      // if (!isExpanded) {
      //   const firstFocusableElement = content.querySelector('a[href], button, input, [tabindex]');
      //   if (firstFocusableElement) {
      //     firstFocusableElement.focus();
      //   }
      // }
    }
  });

  // Opcionalno: Navigacija tipkovnicom (tipke sa strelicama, itd.) također bi se implementirala ovdje.
  // Na primjer, rukovanje 'keydown' događajima.
});

// Početno postavljanje: Sakrij sadržaj po zadanom i postavi aria-expanded na false
document.querySelectorAll('.accordion-content').forEach(content => {
  const headerButton = document.getElementById(content.getAttribute('aria-labelledby'));
  if (headerButton) {
    content.style.display = 'none'; // Sakrij sadržaj u početku
    headerButton.setAttribute('aria-expanded', 'false');
  }
});

Važna Razmatranja za JavaScript:

• CSS za skrivanje: Najbolja praksa je koristiti CSS (npr. `display: none;` ili klasu koja postavlja `height: 0; overflow: hidden;` za glađe prijelaze) za skrivanje sadržaja. To osigurava da je sadržaj uklonjen iz stabla pristupačnosti kada nije vidljiv.
• Postupno smanjivanje funkcionalnosti (Graceful Degradation): Osigurajte da, čak i ako se JavaScript ne uspije učitati ili izvršiti, sadržaj accordiona ostane pristupačan (iako možda ne i sklopiv). Semantički HTML bi i dalje trebao pružati neku strukturu.
• Okviri i biblioteke: Ako koristite JavaScript okvire (React, Vue, Angular) ili UI biblioteke, provjerite njihovu dokumentaciju o pristupačnosti. Mnogi pružaju pristupačne accordion komponente "out-of-the-box" ili s određenim atributima.

Testiranje Pristupačnosti

Temeljito testiranje je ključno kako bi se osiguralo da su vaši accordion widgeti zaista pristupačni.

• Automatizirani alati: Koristite proširenja za preglednike (poput Axe, WAVE) ili online provjere za identifikaciju uobičajenih problema s pristupačnošću.
• Testiranje tipkovnicom: Krećite se i upravljajte accordionom koristeći samo tipkovnicu (Tab, Shift+Tab, Enter, Razmaknica, tipke sa strelicama). Osigurajte da su svi interaktivni elementi dostupni i operabilni.
• Testiranje čitačem zaslona: Testirajte s popularnim čitačima zaslona (NVDA, JAWS, VoiceOver). Slušajte kako se najavljuju struktura i promjene stanja accordiona. Ima li smisla? Je li stanje `aria-expanded` ispravno preneseno?
• Korisničko testiranje: Ako je moguće, uključite korisnike s invaliditetom u vaš proces testiranja. Njihove povratne informacije su neprocjenjive za identificiranje stvarnih problema s upotrebljivošću.
• Testiranje preglednika i uređaja: Testirajte na različitim preglednicima i uređajima, jer se renderiranje i ponašanje JavaScripta mogu razlikovati.

Globalne Perspektive i Lokalizacija

Prilikom dizajniranja za globalnu publiku, uzmite u obzir sljedeće faktore:

• Jezik: Osigurajte da je sav tekst, uključujući oznake gumba i sadržaj, jasan, sažet i lako prevodiv. Izbjegavajte idiome ili kulturno specifične reference.
• Dužina sadržaja: Proširivanje sadržaja može značajno utjecati na izgled stranice. Imajte na umu da prevedeni sadržaj može biti duži ili kraći od originala. Testirajte kako vaš accordion rukuje različitim dužinama sadržaja.
• Kulturne konvencije korisničkog sučelja: Iako je osnovna funkcionalnost accordiona univerzalna, suptilni elementi dizajna mogu se različito percipirati u različitim kulturama. Držite se uspostavljenih obrazaca i jasnih affordancesa (znakova mogućnosti interakcije).
• Performanse: Za korisnike u regijama sa sporijim internetskim vezama, osigurajte da je vaš JavaScript optimiziran i da sadržaj unutar accordiona ne utječe pretjerano na početno vrijeme učitavanja stranice.

Primjeri Pristupačnih Accordiona

Mnoge ugledne organizacije demonstriraju pristupačne obrasce accordiona:

• GOV.UK Design System: Često se navodi zbog svoje predanosti pristupačnosti, GOV.UK pruža dobro dokumentirane komponente, uključujući accordione, koje se pridržavaju WCAG-a.
• MDN Web Docs: Mozilla Developer Network nudi detaljne vodiče i primjere o stvaranju pristupačnih widgeta, uključujući accordione, s jasnim objašnjenjima upotrebe ARIA-e.
• Sustavi dizajna velikih tehnoloških tvrtki: Tvrtke poput Googlea (Material Design), Microsofta (Fluent UI) i Applea pružaju komponente sustava dizajna koje često daju prioritet pristupačnosti. Referenciranje na njih može ponuditi robusne obrasce implementacije.

Zaključak

Accordion widgeti su moćni alati za organiziranje sadržaja i poboljšanje korisničkog iskustva. Međutim, njihova dinamična priroda zahtijeva savjestan pristup pristupačnosti. Pridržavanjem WCAG smjernica, korištenjem semantičkog HTML-a, ispravnom implementacijom ARIA-e, osiguravanjem robusne navigacije tipkovnicom i provođenjem temeljitog testiranja, možete stvoriti accordion komponente koje su upotrebljive i ugodne za sve, diljem svijeta. Davanje prioriteta pristupačnosti od samog početka ne samo da osigurava sukladnost, već vodi i do inkluzivnijeg i korisnički prilagođenijeg proizvoda za sve.

Zapamtite, pristupačan dizajn nije naknadna misao; to je sastavni dio dobrog dizajna. Ovladavanjem implementacije pristupačnih accordion widgeta, pridonosite pravednijem i upotrebljivijem webu za sve korisnike.