Příklad struktury 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ázev sekce 1
      </button>
    </h3>
    <div id="content-1" class="accordion-content" role="region" aria-labelledby="button-1">
      <p>Obsah pro sekci 1 patří 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ázev sekce 2
      </button>
    </h3>
    <div id="content-2" class="accordion-content" role="region" aria-labelledby="button-2">
      <p>Obsah pro sekci 2 patří sem.</p>
    </div>
  </div>
</div>

2. Atributy ARIA pro dynamický obsah

Role a stavy ARIA jsou klíčové pro informování asistenčních technologií o chování akordeonu.

• `role="button"`: Na interaktivním prvku (tlačítku), který přepíná obsah.
• `aria-expanded`: Nastaveno na `true`, když je obsahový panel viditelný, a na `false`, když je skrytý. Tímto se přímo sděluje stav čtečkám obrazovky.
• `aria-controls`: Na tlačítku, odkazující na `id` obsahového panelu, který ovládá. Tím se vytváří programové propojení.
• `aria-labelledby`: Na obsahovém panelu, odkazující na `id` tlačítka, které ho ovládá. Tím se vytváří obousměrné propojení.
• `role="region"`: Na obsahovém panelu. To naznačuje, že obsah je vnímatelnou sekcí stránky.
• `aria-hidden`: Ačkoli je pro ovládání stavů viditelnosti preferován `aria-expanded`, `aria-hidden="true"` lze použít na obsahových panelech, které nejsou aktuálně zobrazeny, aby se zabránilo jejich oznamování čtečkami obrazovky. Nicméně, robustnější je zajistit, aby byl obsah buď správně skryt pomocí CSS (`display: none;`), nebo odstraněn ze stromu přístupnosti.

Poznámka k `aria-hidden` vs. `display: none`: Použití `display: none;` v CSS účinně odstraní prvek ze stromu přístupnosti. Pokud dynamicky zobrazujete/skrýváte obsah pomocí JavaScriptu bez `display: none;`, stává se `aria-hidden` důležitějším. Nicméně, `display: none;` je obecně preferovanou metodou pro skrývání obsahových panelů.

3. Ovladatelnost pomocí klávesnice

Zajistěte, aby uživatelé mohli interagovat s akordeonem pomocí standardních klávesových příkazů.

• Navigace tabulátorem: Záhlaví akordeonu by měla být fokusovatelná a měla by se objevovat v přirozeném pořadí tabulátorů na stránce.
• Aktivace: Stisknutí klávesy `Enter` nebo `Mezerník` na zaměřeném záhlaví akordeonu by mělo přepnout viditelnost jeho obsahového panelu.
• Šipkové klávesy (volitelné, ale doporučené): Pro lepší zážitek zvažte implementaci navigace pomocí šipkových kláves:
  • `Šipka dolů`: Přesune fokus na další záhlaví akordeonu.
  • `Šipka nahoru`: Přesune fokus na předchozí záhlaví akordeonu.
  • `Home`: Přesune fokus na první záhlaví akordeonu.
  • `End`: Přesune fokus na poslední záhlaví akordeonu.
  • `Šipka doprava` (nebo `Enter`/`Mezerník`): Rozbalí/sbalí aktuální položku akordeonu.
  • `Šipka doleva` (nebo `Enter`/`Mezerník`): Sbalí aktuální položku akordeonu a přesune fokus zpět na záhlaví.

4. Vizuální indikátory fokusu

Když záhlaví akordeonu získá fokus z klávesnice, musí mít jasný vizuální indikátor. Výchozí obrysy fokusu v prohlížeči jsou často dostačující, ale ujistěte se, že nejsou odstraněny pomocí CSS (např. `outline: none;`), aniž by byl poskytnut alternativní, vysoce viditelný styl fokusu.

Příklad CSS pro fokus:

.accordion-button:focus {
  outline: 3px solid blue; /* Nebo barva, která splňuje požadavky na kontrast */
  outline-offset: 2px;
}

5. Viditelnost a prezentace obsahu

• Výchozí stav: Rozhodněte, zda mají být sekce akordeonu ve výchozím stavu sbalené nebo rozbalené. U často kladených otázek nebo hustých informací je často nejlepší začít se sbaleným stavem. U navigace nebo shrnutí funkcí může být užitečné mít jednu sekci ve výchozím stavu rozbalenou.
• Vizuální vodítka: Používejte jasné vizuální vodítka k označení, zda je sekce rozbalená nebo sbalená. Může to být ikona (např. znaménko '+' nebo '-', šipka nahoru/dolů), která mění svůj vzhled. Ujistěte se, že tyto ikony jsou také přístupné (např. pomocí `aria-label`, pokud nemají text).
• Kontrastní poměry: Ujistěte se, že textový obsah v akordeonu a přepínací tlačítka splňují požadavky WCAG na kontrastní poměr (4,5:1 pro normální text, 3:1 pro velký text). To je životně důležité pro uživatele se slabým zrakem.
• Žádná ztráta obsahu: Když se sekce rozbalí, ujistěte se, že její obsah nepřetéká z kontejneru nebo nezakrývá jiný kritický obsah.

6. Správa fokusu při přepínání

Toto je pokročilejší aspekt, ale klíčový pro bezproblémový zážitek.

• Rozbalení: Když uživatel rozbalí sekci, zvažte přesunutí fokusu na první interaktivní prvek v nově odhaleném obsahu. To je zvláště důležité, pokud rozbalený obsah obsahuje formulářová pole nebo odkazy.
• Sbalení: Když uživatel sbalí sekci, fokus by se měl vrátit na záhlaví akordeonu, které bylo přepnuto. Tím se zabrání tomu, aby uživatelé museli navigovat zpět přes dříve sbalené sekce.

Implementace správy fokusu obvykle zahrnuje JavaScript pro zachycení a programové nastavení fokusu.

Implementace přístupných akordeonů pomocí JavaScriptu

Zatímco sémantické HTML a ARIA jsou prvními kroky, JavaScript je často nutný pro zpracování dynamického přepínání a potenciálně správy fokusu. Zde je koncepční přístup v JavaScriptu:

// Konceptuální JavaScript pro funkcionalitu akordeonu

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

      // Přepnutí viditelnosti obsahu (použitím CSS pro přístupnost)
      content.style.display = isExpanded ? 'none' : 'block'; // Nebo použijte přepínání třídy

      // Volitelné: Správa fokusu při rozbalení
      // if (!isExpanded) {
      //   const firstFocusableElement = content.querySelector('a[href], button, input, [tabindex]');
      //   if (firstFocusableElement) {
      //     firstFocusableElement.focus();
      //   }
      // }
    }
  });

  // Volitelné: Klávesnicová navigace (šipky atd.) by se implementovala také zde.
  // Například zpracování událostí 'keydown'.
});

// Počáteční nastavení: Ve výchozím stavu skrýt obsah a nastavit aria-expanded na false
document.querySelectorAll('.accordion-content').forEach(content => {
  const headerButton = document.getElementById(content.getAttribute('aria-labelledby'));
  if (headerButton) {
    content.style.display = 'none'; // Zpočátku skrýt obsah
    headerButton.setAttribute('aria-expanded', 'false');
  }
});

Důležitá upozornění pro JavaScript:

• CSS pro skrývání: Nejlepší praxí je používat CSS (např. `display: none;` nebo třídu, která nastavuje `height: 0; overflow: hidden;` pro plynulejší přechody) ke skrytí obsahu. Tím se zajistí, že obsah bude odstraněn ze stromu přístupnosti, když není viditelný.
• Elegantní degradace: Zajistěte, aby i v případě, že se JavaScript nepodaří načíst nebo spustit, obsah akordeonu zůstal přístupný (i když možná ne sbalitelný). Sémantické HTML by mělo stále poskytovat nějakou strukturu.
• Frameworky a knihovny: Pokud používáte JavaScriptové frameworky (React, Vue, Angular) nebo UI knihovny, zkontrolujte jejich dokumentaci k přístupnosti. Mnohé poskytují přístupné komponenty akordeonu přímo z krabice nebo se specifickými atributy.

Testování přístupnosti

Důkladné testování je nezbytné pro zajištění, že vaše widgety akordeon jsou skutečně přístupné.

• Automatizované nástroje: Používejte rozšíření prohlížeče (jako Axe, WAVE) nebo online kontrolní nástroje k identifikaci běžných problémů s přístupností.
• Testování pomocí klávesnice: Navigujte a ovládejte akordeon pouze pomocí klávesnice (Tab, Shift+Tab, Enter, Mezerník, šipkové klávesy). Ujistěte se, že všechny interaktivní prvky jsou dosažitelné a ovladatelné.
• Testování se čtečkou obrazovky: Testujte s populárními čtečkami obrazovky (NVDA, JAWS, VoiceOver). Poslouchejte, jak jsou oznamovány změny struktury a stavu akordeonu. Dává to smysl? Je stav `aria-expanded` správně sdělen?
• Uživatelské testování: Pokud je to možné, zapojte do testovacího procesu uživatele se zdravotním postižením. Jejich zpětná vazba je neocenitelná pro identifikaci problémů s použitelností v reálném světě.
• Testování v prohlížečích a na zařízeních: Testujte v různých prohlížečích a na různých zařízeních, protože vykreslování a chování JavaScriptu se může lišit.

Globální perspektivy a lokalizace

Při navrhování pro globální publikum zvažte tyto faktory:

• Jazyk: Ujistěte se, že veškerý text, včetně popisků tlačítek a obsahu, je jasný, stručný a snadno přeložitelný. Vyhněte se idiomům nebo kulturně specifickým odkazům.
• Délka obsahu: Rozbalení obsahu může výrazně ovlivnit rozložení stránky. Mějte na paměti, že přeložený obsah může být delší nebo kratší než originál. Otestujte, jak váš akordeon zvládá různé délky obsahu.
• Kulturní konvence UI: Zatímco základní funkčnost akordeonů je univerzální, jemné designové prvky mohou být v různých kulturách vnímány odlišně. Držte se zavedených vzorů a jasných afordancí.
• Výkon: Pro uživatele v regionech s pomalejším internetovým připojením zajistěte, aby byl váš JavaScript optimalizován a aby obsah v akordeonech nadměrně neovlivňoval počáteční dobu načítání stránky.

Příklady přístupných akordeonů

Mnoho renomovaných organizací demonstruje přístupné vzory akordeonů:

• GOV.UK Design System: Často citovaný pro svůj závazek k přístupnosti, GOV.UK poskytuje dobře zdokumentované komponenty, včetně akordeonů, které dodržují WCAG.
• MDN Web Docs: Mozilla Developer Network nabízí podrobné průvodce a příklady vytváření přístupných widgetů, včetně akordeonů, s jasným vysvětlením použití ARIA.
• Designové systémy velkých technologických společností: Společnosti jako Google (Material Design), Microsoft (Fluent UI) a Apple poskytují komponenty designových systémů, které často upřednostňují přístupnost. Odkazování na ně může nabídnout robustní implementační vzory.

Závěr

Widgety akordeon jsou mocnými nástroji pro organizaci obsahu a zlepšení uživatelské zkušenosti. Jejich dynamická povaha však vyžaduje svědomitý přístup k přístupnosti. Dodržováním pokynů WCAG, využíváním sémantického HTML, správnou implementací ARIA, zajištěním robustní klávesnicové navigace a prováděním důkladného testování můžete vytvořit komponenty akordeonu, které jsou použitelné a příjemné pro každého na celém světě. Upřednostňování přístupnosti od samého počátku nejen zajišťuje shodu, ale také vede k inkluzivnějšímu a uživatelsky přívětivějšímu produktu pro všechny.

Pamatujte, že přístupný design není dodatečný nápad; je to nedílná součást dobrého designu. Zvládnutím implementace přístupných widgetů akordeon přispíváte k spravedlivějšímu a použitelnějšímu webu pro všechny uživatele.