Mechanizm ujawniania czy karty: wybierz właściwy

Karty i akordeony zarówno ukrywają, jak i pokazują zawartość, dlatego łatwo je pomylić. Wybór niewłaściwego wzorca może zdezorientować użytkowników.

Zestaw kart prezentuje wzajemnie wykluczające się widoki: otwarcie jednego panelu zamyka pozostałe. Sprawdza się w przypadku treści, które użytkownik porównuje po jednym fragmencie naraz.

Akordeon pozwala pozostawić otwartych kilka sekcji jednocześnie. Pasuje do długiej strony z często zadawanymi pytaniami, na której użytkownicy mogą chcieć czytać dwie odpowiedzi obok siebie.

Pojedynczy element pokazujący i ukrywający zawartość to disclosure: jeden przycisk i jeden region. Użyj go, gdy chcesz ujawnić tylko jeden fragment opcjonalnych szczegółów.

Wzorce używają różnych ról ARIA. Karty wymagają elementu tablist i klawiszy strzałek; disclosure lub akordeon potrzebuje tylko przycisku z aria-expanded.

Karty sprawdzają się najlepiej, gdy każda etykieta jest krótka, a cały wiersz mieści się u góry. Jeśli etykiety są długie, lepiej czyta się akordeon ułożony pionowo.

Na wąskich ekranach poziomy wiersz kart często wychodzi poza obszar widoku. Akordeon naturalnie układa się pionowo, dlatego wiele zespołów przełącza wzorzec przy małych rozmiarach ekranu.

Zastanów się, czy sekcje są niezależne. Jeśli użytkownicy zyskują na czytaniu kilku z nich razem, wybierz akordeon; jeśli pasuje tylko jeden widok, wybierz karty.

Unikaj budowania któregoś z tych wzorców ze zwykłych linków, które przewijają stronę. Linki prowadzą w inne miejsce, a te kontrolki przełączają zawartość, więc potrzebują semantyki przycisku.

Jeśli wybór wzorca nie jest oczywisty, preferuj prostszy. Disclosure lub akordeon daje mniej możliwości popełnienia błędu w ARIA niż pełny widżet kart.

Właściwy wybór wynika z treści, a nie z wyglądu. Zdecyduj, jak użytkownicy muszą ją czytać i porównywać, a następnie dopasuj do tego wzorzec.

Dowiedziałeś się, jak wybierać na podstawie potrzeb treści: karty do widoków wyświetlanych pojedynczo, akordeony do sekcji, z których może być otwartych wiele, a disclosure do pojedynczego ujawnienia.