Akordeon (accordion) to element interfejsu składający się z listy nagłówków, z których każdy po kliknięciu rozwija lub zwija powiązaną sekcję treści. Pozwala uporządkować dużą ilość informacji na małej przestrzeni.
Kiedy używać akordeonu?
Dla treści, które użytkownik czyta wybiórczo, np. pytania i odpowiedzi, szczegóły produktu lub regulaminy. Nie ukrywaj w nim informacji, które powinni zobaczyć wszyscy.
Jak zbudować dostępny akordeon?
Najprościej użyć elementów <details> i <summary>, które działają bez JavaScript. Przy własnej implementacji dodaj przyciski z aria-expanded i obsługę klawiatury.
Akordeon a SEO
Google indeksuje treść ukrytą w akordeonie, jeśli znajduje się w kodzie HTML strony po wczytaniu. Treści ładowane dopiero po kliknięciu mogą jednak nie zostać zindeksowane.
Treść ukryta w akordeonie jest zwykle indeksowana, o ile znajduje się w HTML.
Akordeon a użyteczność
Akordeon porządkuje długie treści, ale ukrywa je za dodatkowym kliknięciem, więc najważniejsze informacje zostaw na wierzchu. Pozwól otwierać kilka sekcji jednocześnie, jeśli użytkownicy porównują treści, oraz wyraźnie oznacz stan strzałką lub ikoną plus i minus. Na stronach z rozbudowanymi opisami produktów częściej wygrywa lista nagłówków z treścią widoczną od razu.
W pracy nad produktem uwzględnia się to na kolejnych etapach, jakie obejmuje proces projektowania UX.
Zobacz w praktyce
Proces projektowania UX krok po kroku – od badań do testów 
Jak zmniejszyć rozmiar DOM i przyspieszyć stronę 
Działanie strony internetowej w przeglądarce