Przykładowa struktura 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">
        Tytuł sekcji 1
      </button>
    </h3>
    <div id="content-1" class="accordion-content" role="region" aria-labelledby="button-1">
      <p>Treść dla sekcji 1 znajduje się tutaj.</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">
        Tytuł sekcji 2
      </button>
    </h3>
    <div id="content-2" class="accordion-content" role="region" aria-labelledby="button-2">
      <p>Treść dla sekcji 2 znajduje się tutaj.</p>
    </div>
  </div>
</div>

2. Atrybuty ARIA dla treści dynamicznej

Role i stany ARIA są kluczowe dla informowania technologii wspomagających o zachowaniu akordeonu.

• `role="button"`: Na elemencie interaktywnym (przycisku), który przełącza treść.
• `aria-expanded`: Ustawione na `true`, gdy panel treści jest widoczny, i `false`, gdy jest ukryty. To bezpośrednio komunikuje stan czytnikom ekranu.
• `aria-controls`: Na przycisku, odwołując się do `id` panelu treści, którym steruje. To ustanawia programowe połączenie.
• `aria-labelledby`: Na panelu treści, odwołując się do `id` przycisku, który nim steruje. To tworzy dwukierunkowe połączenie.
• `role="region"`: Na panelu treści. Wskazuje to, że treść jest postrzegalną sekcją strony.
• `aria-hidden`: Chociaż `aria-expanded` jest preferowane do kontrolowania stanów widoczności, `aria-hidden="true"` można użyć na panelach treści, które nie są aktualnie wyświetlane, aby zapobiec ich ogłaszaniu przez czytniki ekranu. Jednak zapewnienie, że treść jest odpowiednio ukryta za pomocą CSS (`display: none;`) lub usunięta z drzewa dostępności, jest bardziej niezawodne.

Uwaga dotycząca `aria-hidden` a `display: none`: Użycie `display: none;` w CSS skutecznie usuwa element z drzewa dostępności. Jeśli dynamicznie pokazujesz/ukrywasz treść za pomocą JavaScriptu bez `display: none;`, `aria-hidden` staje się ważniejsze. Jednak `display: none;` jest generalnie preferowaną metodą ukrywania paneli treści.

3. Obsługa za pomocą klawiatury

Upewnij się, że użytkownicy mogą wchodzić w interakcję z akordeonem za pomocą standardowych poleceń klawiaturowych.

• Nawigacja klawiszem Tab: Nagłówki akordeonu powinny być fokusowalne i pojawiać się w naturalnej kolejności tabulacji na stronie.
• Aktywacja: Naciśnięcie `Enter` lub `Spacji` na sfokusowanym nagłówku akordeonu powinno przełączać widoczność jego panelu treści.
• Klawisze strzałek (opcjonalne, ale zalecane): Aby zapewnić lepsze wrażenia, rozważ zaimplementowanie nawigacji za pomocą klawiszy strzałek:
  • `Strzałka w dół`: Przesuń fokus na następny nagłówek akordeonu.
  • `Strzałka w górę`: Przesuń fokus na poprzedni nagłówek akordeonu.
  • `Home`: Przesuń fokus na pierwszy nagłówek akordeonu.
  • `End`: Przesuń fokus na ostatni nagłówek akordeonu.
  • `Strzałka w prawo` (lub `Enter`/`Spacja`): Rozwiń/zwiń bieżący element akordeonu.
  • `Strzałka w lewo` (lub `Enter`/`Spacja`): Zwiń bieżący element akordeonu i przenieś fokus z powrotem na nagłówek.

4. Wizualne wskaźniki fokusu

Gdy nagłówek akordeonu otrzymuje fokus z klawiatury, musi mieć wyraźny wskaźnik wizualny. Domyślne obrysy fokusu przeglądarki są często wystarczające, ale upewnij się, że nie są usuwane przez CSS (np. `outline: none;`) bez zapewnienia alternatywnego, dobrze widocznego stylu fokusu.

Przykładowy CSS dla fokusu:

.accordion-button:focus {
  outline: 3px solid blue; /* Lub kolor, który spełnia wymagania dotyczące kontrastu */
  outline-offset: 2px;
}

5. Widoczność i prezentacja treści

• Stan domyślny: Zdecyduj, czy sekcje akordeonu powinny być domyślnie zwinięte, czy rozwinięte. W przypadku FAQ lub gęstych informacji, rozpoczęcie od stanu zwiniętego jest często najlepsze. W przypadku nawigacji lub podsumowań funkcji, posiadanie jednej sekcji rozwiniętej domyślnie może być pomocne.
• Wizualne wskazówki: Używaj wyraźnych wskazówek wizualnych, aby wskazać, czy sekcja jest rozwinięta, czy zwinięta. Może to być ikona (np. znak „+” lub „-”, strzałka w górę/dół), która zmienia swój wygląd. Upewnij się, że te ikony są również dostępne (np. za pomocą `aria-label`, jeśli nie mają tekstu).
• Współczynniki kontrastu: Upewnij się, że treść tekstowa w akordeonie oraz przyciski przełączające spełniają wymagania WCAG dotyczące współczynnika kontrastu (4.5:1 dla normalnego tekstu, 3:1 dla dużego tekstu). Jest to kluczowe dla użytkowników z wadami wzroku.
• Brak utraty treści: Gdy sekcja się rozwija, upewnij się, że jej treść nie przepełnia kontenera ani nie zasłania innej kluczowej treści.

6. Zarządzanie focusem podczas przełączania

Jest to bardziej zaawansowany aspekt, ale kluczowy dla płynnego doświadczenia.

• Rozwijanie: Gdy użytkownik rozwija sekcję, rozważ przeniesienie fokusu na pierwszy element interaktywny w nowo odsłoniętej treści. Jest to szczególnie ważne, jeśli rozwinięta treść zawiera pola formularza lub linki.
• Zwijanie: Gdy użytkownik zwija sekcję, fokus powinien wrócić do nagłówka akordeonu, który został przełączony. Zapobiega to konieczności ponownego nawigowania przez wcześniej zwinięte sekcje.

Implementacja zarządzania focusem zazwyczaj wymaga użycia JavaScriptu do przechwytywania i programowego ustawiania fokusu.

Implementacja dostępnych akordeonów za pomocą JavaScriptu

Chociaż semantyczny HTML i ARIA to pierwsze kroki, JavaScript jest często wymagany do obsługi dynamicznego przełączania i potencjalnie zarządzania focusem. Oto koncepcyjne podejście w JavaScripcie:

// Koncepcyjny JavaScript dla funkcjonalności 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';
      
      // Przełącz stan aria-expanded
      button.setAttribute('aria-expanded', !isExpanded);

      // Przełącz widoczność treści (używając CSS dla dostępności)
      content.style.display = isExpanded ? 'none' : 'block'; // Lub użyj przełączania klas

      // Opcjonalnie: Zarządzanie focusem przy rozwijaniu
      // if (!isExpanded) {
      //   const firstFocusableElement = content.querySelector('a[href], button, input, [tabindex]');
      //   if (firstFocusableElement) {
      //     firstFocusableElement.focus();
      //   }
      // }
    }
  });

  // Opcjonalnie: Nawigacja za pomocą klawiatury (klawisze strzałek itp.) byłaby również zaimplementowana tutaj.
  // Na przykład, obsługa zdarzeń 'keydown'.
});

// Ustawienia początkowe: Domyślnie ukryj treść i ustaw aria-expanded na false
document.querySelectorAll('.accordion-content').forEach(content => {
  const headerButton = document.getElementById(content.getAttribute('aria-labelledby'));
  if (headerButton) {
    content.style.display = 'none'; // Początkowo ukryj treść
    headerButton.setAttribute('aria-expanded', 'false');
  }
});

Ważne uwagi dotyczące JavaScriptu:

• CSS do ukrywania: Najlepszą praktyką jest używanie CSS (np. `display: none;` lub klasy ustawiającej `height: 0; overflow: hidden;` dla płynniejszych przejść) do ukrywania treści. Zapewnia to usunięcie treści z drzewa dostępności, gdy nie jest ona widoczna.
• Stopniowa degradacja (Graceful Degradation): Upewnij się, że nawet jeśli JavaScript nie załaduje się lub nie wykona, treść akordeonu pozostaje dostępna (choć być może nie zwijalna). Semantyczny HTML powinien nadal zapewniać pewną strukturę.
• Frameworki i biblioteki: Jeśli używasz frameworków JavaScript (React, Vue, Angular) lub bibliotek UI, sprawdź ich dokumentację dotyczącą dostępności. Wiele z nich dostarcza dostępne komponenty akordeonowe od razu lub z określonymi atrybutami.

Testowanie dostępności

Dokładne testowanie jest kluczowe, aby upewnić się, że Twoje widżety akordeonowe są naprawdę dostępne.

• Narzędzia zautomatyzowane: Używaj rozszerzeń przeglądarki (takich jak Axe, WAVE) lub narzędzi online do sprawdzania, aby zidentyfikować powszechne problemy z dostępnością.
• Testowanie za pomocą klawiatury: Nawiguj i obsługuj akordeon używając tylko klawiatury (Tab, Shift+Tab, Enter, Spacja, klawisze strzałek). Upewnij się, że wszystkie interaktywne elementy są osiągalne i funkcjonalne.
• Testowanie czytnikiem ekranu: Przetestuj z popularnymi czytnikami ekranu (NVDA, JAWS, VoiceOver). Posłuchaj, jak ogłaszana jest struktura akordeonu i zmiany jego stanu. Czy ma to sens? Czy stan `aria-expanded` jest prawidłowo przekazywany?
• Testowanie z użytkownikami: Jeśli to możliwe, zaangażuj użytkowników z niepełnosprawnościami w proces testowania. Ich opinie są nieocenione w identyfikowaniu rzeczywistych problemów z użytecznością.
• Testowanie przeglądarek i urządzeń: Testuj na różnych przeglądarkach i urządzeniach, ponieważ renderowanie i zachowanie JavaScriptu mogą się różnić.

Globalne perspektywy i lokalizacja

Projektując dla globalnej publiczności, weź pod uwagę następujące czynniki:

• Język: Upewnij się, że cały tekst, w tym etykiety przycisków i treść, jest jasny, zwięzły i łatwy do przetłumaczenia. Unikaj idiomów i odniesień specyficznych kulturowo.
• Długość treści: Rozwijanie treści może znacząco wpłynąć na układ strony. Pamiętaj, że przetłumaczona treść może być dłuższa lub krótsza od oryginału. Przetestuj, jak Twój akordeon radzi sobie z różnymi długościami treści.
• Kulturowe konwencje UI: Chociaż podstawowa funkcjonalność akordeonów jest uniwersalna, subtelne elementy projektowe mogą być postrzegane różnie w różnych kulturach. Trzymaj się ustalonych wzorców i wyraźnych afordancji.
• Wydajność: Dla użytkowników w regionach z wolniejszymi połączeniami internetowymi, upewnij się, że Twój JavaScript jest zoptymalizowany, a treść w akordeonach nie wpływa nadmiernie na początkowy czas ładowania strony.

Przykłady dostępnych akordeonów

Wiele renomowanych organizacji demonstruje dostępne wzorce akordeonów:

• System projektowy GOV.UK: Często cytowany za swoje zaangażowanie w dostępność, GOV.UK dostarcza dobrze udokumentowane komponenty, w tym akordeony, które są zgodne z WCAG.
• MDN Web Docs: Mozilla Developer Network oferuje szczegółowe przewodniki i przykłady tworzenia dostępnych widżetów, w tym akordeonów, z jasnymi wyjaśnieniami użycia ARIA.
• Systemy projektowe dużych firm technologicznych: Firmy takie jak Google (Material Design), Microsoft (Fluent UI) i Apple dostarczają komponenty systemów projektowych, które często priorytetowo traktują dostępność. Odwoływanie się do nich może zaoferować solidne wzorce implementacyjne.

Wnioski

Widżety akordeonowe są potężnymi narzędziami do organizowania treści i poprawy doświadczeń użytkownika. Jednak ich dynamiczny charakter wymaga sumiennego podejścia do dostępności. Przestrzegając wytycznych WCAG, wykorzystując semantyczny HTML, prawidłowo implementując ARIA, zapewniając solidną nawigację za pomocą klawiatury i przeprowadzając dokładne testy, można tworzyć komponenty akordeonowe, które są użyteczne i przyjemne dla wszystkich na całym świecie. Priorytetowe traktowanie dostępności od samego początku nie tylko zapewnia zgodność, ale także prowadzi do bardziej włączającego i przyjaznego dla użytkownika produktu dla wszystkich.

Pamiętaj, dostępny projekt to nie dodatek; to integralna część dobrego projektu. Opanowując implementację dostępnych widżetów akordeonowych, przyczyniasz się do tworzenia bardziej sprawiedliwej i użytecznej sieci dla wszystkich użytkowników.