Príklad štruktúry 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">
        Názov sekcie 1
      </button>
    </h3>
    <div id="content-1" class="accordion-content" role="region" aria-labelledby="button-1">
      <p>Obsah pre sekciu 1 patrí sem.</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">
        Názov sekcie 2
      </button>
    </h3>
    <div id="content-2" class="accordion-content" role="region" aria-labelledby="button-2">
      <p>Obsah pre sekciu 2 patrí sem.</p>
    </div>
  </div>
</div>

2. Atribúty ARIA pre dynamický obsah

Role a stavy ARIA sú kľúčové pre informovanie asistenčných technológií o správaní akordeónu.

• `role="button"`: Na interaktívnom prvku (tlačidle), ktorý prepína obsah.
• `aria-expanded`: Nastavené na `true`, keď je panel obsahu viditeľný, a na `false`, keď je skrytý. Týmto sa priamo komunikuje stav čítačkám obrazovky.
• `aria-controls`: Na tlačidle, odkazujúce na `id` panelu obsahu, ktorý ovláda. Tým sa vytvára programové prepojenie.
• `aria-labelledby`: Na paneli obsahu, odkazujúce na `id` tlačidla, ktoré ho ovláda. Tým sa vytvára obojsmerné prepojenie.
• `role="region"`: Na paneli obsahu. To naznačuje, že obsah je vnímateľnou časťou stránky.
• `aria-hidden`: Hoci `aria-expanded` je preferovaný na ovládanie stavov viditeľnosti, `aria-hidden="true"` sa môže použiť na panely obsahu, ktoré nie sú aktuálne zobrazené, aby sa zabránilo ich oznamovaniu čítačkami obrazovky. Avšak, robustnejšie je zabezpečiť, aby bol obsah buď správne skrytý cez CSS (`display: none;`) alebo odstránený zo stromu prístupnosti.

Poznámka k `aria-hidden` vs. `display: none`: Použitie `display: none;` v CSS efektívne odstráni prvok zo stromu prístupnosti. Ak dynamicky zobrazujete/skrývate obsah pomocou JavaScriptu bez `display: none;`, `aria-hidden` sa stáva dôležitejším. Avšak `display: none;` je všeobecne preferovanou metódou na skrývanie panelov obsahu.

3. Ovládateľnosť klávesnicou

Zabezpečte, aby používatelia mohli interagovať s akordeónom pomocou štandardných klávesových príkazov.

• Navigácia tabulátorom: Hlavičky akordeónu by mali byť zamerateľné a mali by sa objaviť v prirodzenom poradí tabulátora stránky.
• Aktivácia: Stlačenie klávesu `Enter` alebo `Medzerník` na zameranej hlavičke akordeónu by malo prepnúť viditeľnosť jej panelu obsahu.
• Klávesy so šípkami (voliteľné, ale odporúčané): Pre vylepšenú skúsenosť zvážte implementáciu navigácie pomocou klávesov so šípkami:
  • `Šípka dole`: Presunie zameranie na nasledujúcu hlavičku akordeónu.
  • `Šípka hore`: Presunie zameranie na predchádzajúcu hlavičku akordeónu.
  • `Home`: Presunie zameranie na prvú hlavičku akordeónu.
  • `End`: Presunie zameranie na poslednú hlavičku akordeónu.
  • `Šípka vpravo` (alebo `Enter`/`Medzerník`): Rozbalí/zbalí aktuálnu položku akordeónu.
  • `Šípka vľavo` (alebo `Enter`/`Medzerník`): Zbalí aktuálnu položku akordeónu a presunie zameranie späť na hlavičku.

4. Vizuálne indikátory zamerania

Keď hlavička akordeónu získa zameranie klávesnicou, musí mať jasný vizuálny indikátor. Predvolené obrysy zamerania prehliadača sú často postačujúce, ale uistite sa, že nie sú odstránené pomocou CSS (napr. `outline: none;`) bez poskytnutia alternatívneho, vysoko viditeľného štýlu zamerania.

Príklad CSS pre zameranie:

.accordion-button:focus {
  outline: 3px solid blue; /* Alebo farba, ktorá spĺňa požiadavky na kontrast */
  outline-offset: 2px;
}

5. Viditeľnosť a prezentácia obsahu

• Predvolený stav: Rozhodnite, či majú byť sekcie akordeónu v predvolenom nastavení zbalené alebo rozbalené. Pre často kladené otázky alebo husté informácie je často najlepšie začať so zbaleným stavom. Pre navigáciu alebo zhrnutia funkcií môže byť užitočné mať jednu sekciu v predvolenom nastavení rozbalenú.
• Vizuálne signály: Používajte jasné vizuálne signály na označenie, či je sekcia rozbalená alebo zbalená. Môže to byť ikona (napr. znamienko '+' alebo '-', šípka hore/dole), ktorá mení svoj vzhľad. Zabezpečte, aby tieto ikony boli tiež prístupné (napr. prostredníctvom `aria-label`, ak nemajú text).
• Kontrastné pomery: Zabezpečte, aby textový obsah v akordeóne a prepínacie tlačidlá spĺňali požiadavky WCAG na kontrastný pomer (4.5:1 pre bežný text, 3:1 pre veľký text). To je životne dôležité pre používateľov so slabým zrakom.
• Žiadna strata obsahu: Keď sa sekcia rozbalí, zabezpečte, aby jej obsah nepretekal z kontajnera alebo nezakrýval iný dôležitý obsah.

6. Správa zamerania pri prepínaní

Toto je pokročilejší aspekt, ale kľúčový pre bezproblémovú skúsenosť.

• Rozbalenie: Keď používateľ rozbalí sekciu, zvážte presunutie zamerania na prvý interaktívny prvok v rámci novo odhaleného obsahu. Toto je obzvlášť dôležité, ak rozbalený obsah obsahuje polia formulára alebo odkazy.
• Zbalenie: Keď používateľ zbalí sekciu, zameranie by sa malo vrátiť na hlavičku akordeónu, ktorá bola prepnutá. Tým sa zabráni tomu, aby sa používatelia museli vracať späť cez predtým zbalené sekcie.

Implementácia správy zamerania zvyčajne zahŕňa JavaScript na zachytenie a programové nastavenie zamerania.

Implementácia prístupných akordeónov pomocou JavaScriptu

Hoci sémantické HTML a ARIA sú prvé kroky, JavaScript je často potrebný na zvládnutie dynamického prepínania a potenciálne aj správy zamerania. Tu je koncepčný prístup v JavaScripte:

// Konceptuálny JavaScript pre funkcionalitu akordeónu

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

      // Prepnutie viditeľnosti obsahu (pomocou CSS pre prístupnosť)
      content.style.display = isExpanded ? 'none' : 'block'; // Alebo použite prepínanie triedy

      // Voliteľné: Správa zamerania pri rozbalení
      // if (!isExpanded) {
      //   const firstFocusableElement = content.querySelector('a[href], button, input, [tabindex]');
      //   if (firstFocusableElement) {
      //     firstFocusableElement.focus();
      //   }
      // }
    }
  });

  // Voliteľné: Navigácia klávesnicou (šípky, atď.) by sa implementovala tiež tu.
  // Napríklad spracovanie udalostí 'keydown'.
});

// Počiatočné nastavenie: Štandardne skryť obsah a 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'; // Spočiatku skryť obsah
    headerButton.setAttribute('aria-expanded', 'false');
  }
});

Dôležité aspekty pre JavaScript:

• CSS na skrytie: Najlepšou praxou je použiť CSS (napr. `display: none;` alebo triedu, ktorá nastavuje `height: 0; overflow: hidden;` pre plynulejšie prechody) na skrytie obsahu. Tým sa zabezpečí, že obsah bude odstránený zo stromu prístupnosti, keď nie je viditeľný.
• Postupná degradácia: Zabezpečte, aby aj v prípade, že sa JavaScript nenačíta alebo nespustí, obsah akordeónu zostal prístupný (aj keď možno nie rozbaliteľný). Sémantické HTML by malo stále poskytovať určitú štruktúru.
• Frameworky a knižnice: Ak používate JavaScriptové frameworky (React, Vue, Angular) alebo knižnice UI, skontrolujte ich dokumentáciu o prístupnosti. Mnohé poskytujú prístupné komponenty akordeónu priamo alebo so špecifickými atribútmi.

Testovanie prístupnosti

Dôkladné testovanie je nevyhnutné na zabezpečenie, že vaše akordeónové widgety sú skutočne prístupné.

• Automatizované nástroje: Používajte rozšírenia prehliadača (ako Axe, WAVE) alebo online kontrolóry na identifikáciu bežných problémov s prístupnosťou.
• Testovanie klávesnicou: Navigujte a ovládajte akordeón iba pomocou klávesnice (Tab, Shift+Tab, Enter, Medzerník, klávesy so šípkami). Uistite sa, že všetky interaktívne prvky sú dosiahnuteľné a ovládateľné.
• Testovanie čítačkou obrazovky: Testujte s populárnymi čítačkami obrazovky (NVDA, JAWS, VoiceOver). Počúvajte, ako sú oznamované zmeny štruktúry a stavu akordeónu. Dáva to zmysel? Je stav `aria-expanded` správne sprostredkovaný?
• Používateľské testovanie: Ak je to možné, zapojte do procesu testovania používateľov so zdravotným postihnutím. Ich spätná väzba je neoceniteľná pri identifikácii reálnych problémov s použiteľnosťou.
• Testovanie v prehliadačoch a na zariadeniach: Testujte v rôznych prehliadačoch a na rôznych zariadeniach, pretože vykresľovanie a správanie JavaScriptu sa môže líšiť.

Globálne perspektívy a lokalizácia

Pri navrhovaní pre globálne publikum zvážte tieto faktory:

• Jazyk: Uistite sa, že všetok text, vrátane popisov tlačidiel a obsahu, je jasný, stručný a ľahko preložiteľný. Vyhnite sa idiómom alebo kultúrne špecifickým odkazom.
• Dĺžka obsahu: Rozbalenie obsahu môže výrazne ovplyvniť rozloženie stránky. Majte na pamäti, že preložený obsah môže byť dlhší alebo kratší ako originál. Otestujte, ako váš akordeón zvláda rôzne dĺžky obsahu.
• Kultúrne konvencie UI: Hoci základná funkcionalita akordeónov je univerzálna, jemné dizajnové prvky môžu byť vnímané rôzne v rôznych kultúrach. Držte sa zavedených vzorov a jasných affordancií.
• Výkon: Pre používateľov v regiónoch s pomalším internetovým pripojením zabezpečte, aby bol váš JavaScript optimalizovaný a aby obsah v akordeónoch nadmerne neovplyvňoval čas počiatočného načítania stránky.

Príklady prístupných akordeónov

Mnoho renomovaných organizácií demonštruje prístupné vzory akordeónov:

• GOV.UK Design System: Často citovaný pre svoj záväzok k prístupnosti, GOV.UK poskytuje dobre zdokumentované komponenty, vrátane akordeónov, ktoré dodržiavajú WCAG.
• MDN Web Docs: Mozilla Developer Network ponúka podrobné sprievodcov a príklady na vytváranie prístupných widgetov, vrátane akordeónov, s jasným vysvetlením použitia ARIA.
• Dizajnové systémy od veľkých technologických spoločností: Spoločnosti ako Google (Material Design), Microsoft (Fluent UI) a Apple poskytujú komponenty dizajnových systémov, ktoré často uprednostňujú prístupnosť. Odkazovanie na ne môže ponúknuť robustné implementačné vzory.

Záver

Akordeónové widgety sú silné nástroje na organizovanie obsahu a zlepšenie používateľskej skúsenosti. Ich dynamická povaha si však vyžaduje svedomitý prístup k prístupnosti. Dodržiavaním smerníc WCAG, využívaním sémantického HTML, správnou implementáciou ARIA, zabezpečením robustnej navigácie klávesnicou a vykonávaním dôkladného testovania môžete vytvoriť komponenty akordeónu, ktoré sú použiteľné a príjemné pre všetkých, na celom svete. Uprednostňovanie prístupnosti od samého začiatku nielenže zaisťuje súlad s predpismi, ale vedie aj k inkluzívnejšiemu a používateľsky prívetivejšiemu produktu pre všetkých.

Pamätajte, že prístupný dizajn nie je dodatočný nápad; je to neoddeliteľná súčasť dobrého dizajnu. Zvládnutím implementácie prístupných akordeónových widgetov prispievate k spravodlivejšiemu a použiteľnejšiemu webu pre všetkých používateľov.