Akordeony z button i aria-expanded

Akordeon to stos nagłówków, które można rozwijać i zwijać, aby pokazywać zawartość. Każda sekcja może otwierać się niezależnie, inaczej niż w przypadku kart.

Utwórz każdy nagłówek akordeonu jako prawdziwy button. Przyciski można fokusować, działają z klawiszami Enter i Spacja oraz są automatycznie rozpoznawane przez czytniki ekranu.

Uważaj na klikalny element div użyty jako nagłówek. Nie można na nim ustawić fokusu, nie reaguje na klawiaturę i nie przekazuje technologiom asystującym informacji o swojej funkcji.

Dodaj aria-expanded do przycisku, aby czytniki ekranu ogłaszały, czy sekcja jest zwinięta, czy rozwinięta. Ten pojedynczy stan sprawia, że akordeon jest dostępny.

Gdy użytkownik aktywuje przycisk, przełączaj aria-expanded między true i false. Wartość musi być zgodna z tym, czy panel jest faktycznie wyświetlany.

Użyj na przycisku atrybutu aria-controls ustawionego na id otwieranego panelu. Użytkownicy dowiedzą się, jaką zawartość pokazuje ten nagłówek.

Gdy sekcja jest zamknięta, nadaj jej panelowi atrybut hidden. Spowoduje to usunięcie panelu ze strony i drzewa dostępności aż do jego ponownego otwarcia.

Umieść każdy przycisk w prawdziwym nagłówku, takim jak h3. Użytkownicy czytników ekranu będą mogli przechodzić między sekcjami za pomocą nawigacji po nagłówkach.

Pojedynczy element pokazujący i ukrywający zawartość to disclosure, a nie zestaw kart. Potrzebuje tylko przycisku z aria-expanded — bez ról tablist ani tab.

Po przełączeniu pozostaw fokus na przycisku, który nacisnął użytkownik. Nie przenoś fokusu do panelu — zaskoczyłoby to użytkowników klawiatury.

Ponieważ przycisk zawiera własny stan, czytnik ekranu za każdym razem informuje, czy element jest rozwinięty, czy zwinięty. Użytkownicy zawsze wiedzą, co się stanie po jego aktywowaniu.

Dowiedziałeś się, że nagłówek akordeonu to button with aria-expanded umieszczony w nagłówku. Przełączaj stan, wskazuj panel i ukrywaj go po zamknięciu.