Zakładki / Przełącznik Person: Format, Zasady i Przykłady

Przełącznik zakładek/person daje kilku czytelnikom odrębne ścieżki przez jeden ograniczony temat bez wysyłania ich na osobne strony. Etykiety identyfikują ścieżkę; wybranie jednej ujawnia jej panel w tym samym miejscu. Element jest użyteczny tylko wtedy, gdy panele są rzeczywiście równorzędne, a każdy panel pozostaje obecny w początkowym kodzie HTML strony.

Stan wyrenderowany pokazuje jeden aktywny panel, ale pozostałe dwa panele również znajdują się w modelu DOM (Document Object Model) — strukturalnej reprezentacji strony w przeglądarce. Są ukryte za pomocą natywnego atrybutu hidden, a nie żądane po kliknięciu. Produkcyjny renderer dodaje opisane poniżej zachowanie klawiatury i wskaźnika; umowa dotycząca tworzonej treści pozostaje taka sama na wszystkich platformach.

Dlaczego ten element ma znaczenie

Czytelnicy filtrują stronę przez swoją rolę, cel i poziom odpowiedzialności. Specjalista ds. treści może potrzebować instrukcji dotyczących tworzenia, specjalista SEO — zasad walidacji, a lider zespołu — zasad zarządzania. Dobrze oznaczony przełącznik person zmniejsza wysiłek związany z przekształcaniem ogólnych porad w pytanie „co to oznacza dla mnie?". Utrzymuje też wspólne założenie w jednym miejscu, co zapobiega konkurowaniu trzech prawie identycznych stron o tę samą intencję.

Psychologiczną zaletą jest rozpoznawanie zamiast interpretacji. Czytelnik szybciej rozpozna etykietę taką jak „Zespoły SEO", niż będzie skanować trzy akapity, aby wywnioskować, który z nich go dotyczy. Zakładki zachowują także kontekst przestrzenny: panel zmienia się w tym samym miejscu, więc czytelnik może porównywać równorzędne ścieżki bez wielokrotnego przewijania wspólnego wstępu.

Ta wygoda tworzy kompromis w zakresie ekstrahowalności maszynowej. Ekstrahowalność maszynowa to zdolność robota indeksującego, wyszukiwarki, technologii asystującej lub systemu wyszukiwania do izolowania treści przy zachowaniu jej tematu i relacji. Widoczne nagłówki i akapity pojawiają się w oczywistej sekwencji czytania. Panele zakładek wprowadzają stan interakcji: jeden jest widoczny, kilka nie, a oprogramowanie musi połączyć każdą etykietę zakładki z odpowiednim panelem. Słaba implementacja pozostawia w HTML tylko aktywny panel, ładuje pozostałe po kliknięciu lub powtarza ogólne nagłówki, takie jak „Korzyści", bez nazwy persony. W każdym przypadku maszyna otrzymuje mniej kontekstu niż widzi czytelnik.

Nawet poprawna implementacja może zmniejszyć ekstrahowalność w porównaniu ze zwykłymi sekcjami. Niektóre systemy priorytetyzują początkowo widoczny tekst, spłaszczają relacje interaktywne lub pomijają ukrytą treść we fragmentach. Zakładki są zatem narzędziem do kierowania informacjami, a nie sposobem na ukrywanie kluczowych odpowiedzi. Umieść wspólną odpowiedź, definicję, ostrzeżenie, warunek kwalifikowalności i podsumowanie poza zestawem zakładek. Używaj paneli do zastosowań specyficznych dla grupy odbiorców, przykładów, przepływów pracy lub dowodów, które pozostają przydatne po poznaniu wspólnej odpowiedzi.

Zastosuj zasady pisania elementów : najpierw opracuj pełne wyjaśnienie, a następnie sklasyfikuj rzeczywisty zestaw równorzędnych ścieżek czytelnika jako ten typowany element. Zasady na tej stronie mają pierwszeństwo w zakresie mapowania paneli, interakcji i limitów treści.

Kiedy go używać

Użyj przełącznika zakładek/person, gdy spełnione są wszystkie poniższe warunki:

1. Dwie do pięciu rozpoznawalnych grup odbiorców, kontekstów lub trybów potrzebuje różnych zastosowań tego samego tematu.
2. Każdy panel odpowiada na to samo pytanie na porównywalnym poziomie szczegółowości.
3. Większość czytelników potrzebuje jednego panelu na raz, podczas gdy mniejszość może porównywać dwa lub więcej.
4. Wspólna odpowiedź może być podana poza elementem bez zmuszania czytelnika do otwierania każdej zakładki.
5. Utrzymanie ścieżek na jednej stronie jest jaśniejsze niż tworzenie osobnych stron z w dużej mierze zduplikowanymi wstępami.

Silne zastosowania obejmują wskazówki implementacyjne dla „Programiści / Redaktorzy / Recenzenci", ścieżki wdrożeniowe dla „Solo / Zespół / Agencja" oraz jedną możliwość wyjaśnioną przez „Planuj / Produkuj / Mierz". Etykiety person powinny odzwierciedlać znaczące różnice w przepływie pracy, dowodach, uprawnieniach lub pożądanym rezultacie — a nie domysły demograficzne.

Przypadki bliskie granicy często wynikają z próby skrócenia strony. Nie umieszczaj sekwencyjnych kroków w zakładkach; ukrycie kroku drugiego do czasu, aż czytelnik go wybierze, niszczy porządek procedury. Nie twórz zakładek dla krótkiej listy definicji, ponieważ zwykłe nagłówki udostępniają te same informacje przy mniejszej interakcji. Nie używaj zakładek do szczegółowego porównania funkcji: tabela porównawcza utrzymuje kryteria jednocześnie widoczne. Nie używaj zakładek jako nawigacji między niepowiązanymi tematami i nie dziel informacji tylko dlatego, że strona wydaje się długa.

Akordeon jest lepszym rozwiązaniem, gdy sekcje są niezależnymi pytaniami w pionowym przepływie czytania lub gdy kilka odpowiedzi powinno pozostać otwartych. Osobne strony są lepsze, gdy każda grupa odbiorców potrzebuje odmiennej intencji wyszukiwania, tytułu, zestawu dowodów, ścieżki konwersji lub więcej niż około 300 słów unikalnej treści. Jeśli czytelnik potrzebuje wszystkich paneli, aby działać bezpiecznie lub poprawnie, zakładki są niewłaściwym komponentem.

Gdzie go umieścić

Umieść przełącznik po wspólnej odpowiedzi i akapicie wyjaśniającym, dlaczego ścieżki się różnią. Czytelnik powinien zrozumieć wspólny temat przed wyborem etykiety. Na stronie produktu lub rozwiązania oznacza to zazwyczaj po głównej propozycji wartości i wyjaśnieniu wspólnych możliwości, ale przed szczegółowymi dowodami i głównym działaniem zamykającym. W dokumentacji umieść go bezpośrednio przed instrukcjami specyficznymi dla roli, które kontroluje.

Nie umieszczaj zestawu zakładek przed bezpośrednią odpowiedzią strony, definicją lub obowiązkowym ostrzeżeniem. Nie umieszczaj go między twierdzeniem a jego źródłem, między wymaganiami wstępnymi a procedurą, którą regulują, ani między ceną a jej warunkami. Te relacje muszą przetrwać, nawet gdy żaden panel nie jest wybrany. Zestaw zakładek nie może znajdować się obok innego zestawu zakładek, akordeonu, dużej siatki porównawczej ani karuzeli; sąsiadujące modele interakcji tworzą konkurujące ze sobą elementy sterujące i niejasny porządek czytania.

Unikaj zagnieżdżonych zakładek. Zewnętrzny wybór ukrywa wewnętrzny wybór, tworzy trudne zachowanie klawiatury i sprawia, że bezpośrednie linkowanie jest niejednoznaczne. Unikaj również umieszczania przełącznika person bezpośrednio nad innym selektorem grupy odbiorców w formularzu lub wezwaniu do działania. Jeśli oba elementy sterujące używają podobnych etykiet, czytelnicy mogą nie wiedzieć, czy zmieniają widoczną treść, czy wysyłają preferencję.

Anatomia

Anatomia składa się z jednego oznaczonego kontenera, jednej uporządkowanej listy zakładek i jednego panelu dla każdej zakładki. Zrzut ekranu musi pokazywać nieaktywne panele w inspektorze DOM, a także stan widoczny, ponieważ obecność w źródle jest częścią elementu, a nie szczegółem implementacyjnym.

1. Wspólny tytuł: Określa wspólne pytanie lub zadanie, któremu poświęcony jest każdy panel.
2. Lista zakładek: Grupuje od dwóch do pięciu równorzędnych etykiet w stabilnej autorskiej kolejności.
3. Etykieta zakładki: Nazywa grupę odbiorców, kontekst lub tryb w języku rozpoznawalnym przez czytelników.
4. Stan wybrany: Komunikuje aktywną zakładkę poprzez semantykę tekstu i widoczną oprawę graficzną, nie tylko kolor.
5. Panel: Zawiera samodzielny nagłówek i treść dla jednej etykiety.
6. Relacja programowa: aria-controls na zakładce i aria-labelledby na panelu łączą każdą parę.
7. Kolejność awaryjna: Utrzymuje znaczenie wspólnego tytułu, etykiet i całej treści paneli, gdy skrypty lub style nie działają.

Odstępy, obramowanie, kształt wskaźnika, animacja i punkt graniczny należą do renderera. Autorzy kontrolują etykiety, kolejność w źródle, treść paneli oraz opcjonalny stabilny identyfikator fragmentu.

Przykłady projektowe

Komponent obsługuje cztery warianty. Każdy wariant wykorzystuje ten sam model treści i wymagania DOM.

Zakładki person: Używaj etykiet ról, gdy przepływy pracy, dowody lub następne działania rzeczywiście różnią się w zależności od czytelnika. Preferuj ustalony język klientów, taki jak „Zespoły wewnętrzne", zamiast wymyślonych person, takich jak „Guru wzrostu".

Zakładki kontekstowe: Używaj stanów niebędących personami, takich jak wielkość zespołu, model operacyjny lub tryb implementacji. Wspólny tytuł musi nazywać zmieniający się wymiar, aby etykiety nie były mylone z nawigacją strony.

Zakładki pionowe: Używaj tylko wtedy, gdy etykiety potrzebują więcej miejsca w poziomie i jest ich nie więcej niż pięć. Kolejność w DOM i na klawiaturze pozostaje zakładka pierwsza do piątej, a następnie powiązane z nimi panele zgodnie z wybraną dostępną implementacją.

Stan wąskiego okna i awaryjny: Etykiety mogą przewijać się w poziomie, gdy widoczna wskazówka ujawnia przepełnienie, lub renderer może wyświetlać panele jako ułożone w stos oznaczone sekcje. Nie może obcinać etykiet do niejednoznacznych fragmentów ani usuwać nieaktywnej treści z HTML.

Parametry

Umowa dotycząca treści utrzymuje jawną relację, pozostawiając zachowanie wizualne i responsywne rendererowi.

Etykiety są atrybutami, ponieważ obsługują element sterujący; tytuły paneli pochodzą z pierwszego nagłówka, ponieważ należą do treści. Oba mogą być podobne, ale zwięzła etykieta zakładki może mapować się na pełniejszy, ekstrahowalny nagłówek panelu. Treść paneli dopuszcza akapity, krótką listę, kod wbudowany, jeden obraz i jedno kontekstowe działanie. Nie dopuszcza kolejnego zestawu zakładek, akordeonu, tabeli danych, formularza, odtwarzacza wideo ani wieloetapowej procedury.

Składnia i przykłady kodu

Wszystkie trzy notacje zachowują jeden tytuł, uporządkowane etykiety, nagłówki paneli, treść paneli, stabilne ID i początkowy domyślny wybór. Przenośna dyrektywa Markdown jest kanoniczną formą autorską.

Przenośna dyrektywa Markdown

:::tabs-persona-switcher{default=content-teams variant=horizontal}
## Choose your team

::item{label="Content teams" id=content-teams}
### Turn the brief into a repeatable draft

Start with the required answer, evidence, and element set. Draft the reasoning in full before applying components.
::

::item{label="SEO teams" id=seo-teams}
### Verify discovery and extraction

Inspect the rendered HTML, internal links, headings, and structured fields. Confirm that every panel arrives in the initial response.
::

::item{label="Team leaders" id=team-leaders}
### Review the system, not just the page

Approve the shared promise once, then review where each audience genuinely needs a different workflow, proof point, or next action.
::
:::

Treść nadrzędna mapuje swój pierwszy nagłówek na title. Każdy zagnieżdżony element pobiera label i id z atrybutów, mapuje swój pierwszy nagłówek na item.title, a pozostałą część na item.content.

Shortcode Hugo

{{< tabs-persona-switcher title="Choose your team" default="content-teams" variant="horizontal" >}}
  {{< tab-item label="Content teams" id="content-teams" title="Turn the brief into a repeatable draft" >}}
  Start with the required answer, evidence, and element set. Draft the reasoning in full before applying components.
  {{< /tab-item >}}
  {{< tab-item label="SEO teams" id="seo-teams" title="Verify discovery and extraction" >}}
  Inspect the rendered HTML, internal links, headings, and structured fields. Confirm that every panel arrives in the initial response.
  {{< /tab-item >}}
  {{< tab-item label="Team leaders" id="team-leaders" title="Review the system, not just the page" >}}
  Approve the shared promise once, then review where each audience genuinely needs a different workflow, proof point, or next action.
  {{< /tab-item >}}
{{< /tabs-persona-switcher >}}

Adapter używa tylko nazwanych parametrów. Musi renderować wszystkie treści elementów podczas odpowiedzi serwera, odrzucać zduplikowane ID i inicjalizować interakcję bez przepisywania modelu treści.

Blok WordPress

<!-- wp:amicited/tabs-persona-switcher {"title":"Choose your team","default":"content-teams","variant":"horizontal"} -->
  <!-- wp:amicited/tab-item {"label":"Content teams","id":"content-teams","title":"Turn the brief into a repeatable draft"} -->
  <p>Start with the required answer, evidence, and element set. Draft the reasoning in full before applying components.</p>
  <!-- /wp:amicited/tab-item -->
  <!-- wp:amicited/tab-item {"label":"SEO teams","id":"seo-teams","title":"Verify discovery and extraction"} -->
  <p>Inspect the rendered HTML, internal links, headings, and structured fields. Confirm that every panel arrives in the initial response.</p>
  <!-- /wp:amicited/tab-item -->
  <!-- wp:amicited/tab-item {"label":"Team leaders","id":"team-leaders","title":"Review the system, not just the page"} -->
  <p>Approve the shared promise once, then review where each audience genuinely needs a different workflow, proof point, or next action.</p>
  <!-- /wp:amicited/tab-item -->
<!-- /wp:amicited/tabs-persona-switcher -->

WordPress powinien ograniczać bloki wewnętrzne do zarejestrowanych elementów zakładek. Podgląd, zapisany kod i renderowanie na froncie muszą zachować każdy panel; wygoda edytora nie może zamieniać nieaktywnych elementów w treść pobieraną po stronie klienta.

Przykłady

Dobry przykład

Wybierz ścieżkę implementacji

Platforma hostowana — Uruchom bez utrzymywania infrastruktury

Podłącz zatwierdzone źródło danych, skonfiguruj role i zweryfikuj wyniki w środowisku testowym. Dostawca utrzymuje aktualizacje i monitorowanie; Twój zespół odpowiada za zatwierdzanie treści i przegląd dostępu.

Samodzielny hosting — Kontroluj wdrożenie i granice danych

Wdróż obsługiwany pakiet w swoim środowisku, podłącz to samo zatwierdzone źródło danych i wyznacz osobę odpowiedzialną za aktualizacje, monitorowanie, kopie zapasowe i przegląd dostępu.

To działa, ponieważ oba panele odpowiadają na to samo pytanie implementacyjne, nazywają różnicę operacyjną i zawierają porównywalne obowiązki. „Platforma hostowana" i „Samodzielny hosting" to rozpoznawalne etykiety. Wspólna decyzja pozostaje jasna, jeśli oba panele zostaną spłaszczone do kolejności źródłowej.

Zły przykład

Odkryj wszystko

Przegląd: Nasza platforma czyni nowoczesne zespoły bardziej efektywnymi.

Cennik: Skontaktuj się z działem handlowym, aby uzyskać spersonalizowaną wycenę i ważne warunki umowy.

Bezpieczeństwo: Przeczytaj naszą dokumentację bezpieczeństwa.

Kariera: Dołącz do naszego rozwijającego się zespołu.

To nawigacja witryny udająca zakładki. Panele nie odpowiadają na jedno wspólne pytanie, etykiety mieszają informacje dla kupujących z treściami korporacyjnymi, a ważne warunki cenowe są ukryte za interakcją. Zastąp zestaw zwykłymi sekcjami strony i prawdziwą nawigacją. Jeśli opcje cenowe wymagają jednoczesnej oceny, użyj struktury cenowej lub porównawczej zamiast zakładek.

Znaczniki schematu i dostępność

Zakładki i przełączniki person nie tworzą dedykowanego typu Schema.org. Ich treść pozostaje częścią otaczającego Article, TechArticle, Product lub WebPage, gdy ta strona niezależnie się kwalifikuje. Nie oznaczaj zakładek jako ItemList tylko dlatego, że się powtarzają, i nie generuj wielu encji Person z etykiet person. Etykieta taka jak „Agencja" opisuje ścieżkę czytelnika, a nie faktyczne stwierdzenie encji.

Używaj wzorca zakładek WAI-ARIA tylko wtedy, gdy interfejs rzeczywiście zachowuje się jak zakładki. Kontener ma role="tablist"; każdy element sterujący ma role="tab", unikalne ID, aria-controls i dokładną wartość aria-selected; każdy panel ma role="tabpanel" i aria-labelledby. Używaj przycisków do elementów sterujących, a nie linków z fałszywymi miejscami docelowymi. Wybrana zakładka należy do porządku kart na stronie; nieaktywne zakładki używają ruchomego tabindex="-1" i pozostają osiągalne za pomocą klawiszy strzałek. Home i End przesuwają do pierwszej i ostatniej zakładki. Aktywacja może następować po foc usie tylko wtedy, gdy przełączanie paneli jest natychmiastowe; w przeciwnym razie Enter lub Spacja aktywuje focusowaną zakładkę.

Focus musi pozostać przewidywalny. Wybór zakładki nie przenosi automatycznie focusu do jej panelu. Panel może używać tabindex="0", gdy jego pierwsza treść nie jest inaczej focusowalna, umożliwiając użytkownikom klawiatury przejście do niego. Widoczny wskaźnik focusu i wskaźnik wybrania muszą się różnić i żaden nie może polegać wyłącznie na kolorze.

Wszystkie panele muszą być wyrenderowane w początkowej odpowiedzi HTML. Ukrywanie nieaktywnych paneli za pomocą hidden, CSS lub progresywnie ulepszonego odpowiednika jest dopuszczalne; tworzenie ich dopiero po kliknięciu — nie. Bez JavaScript, rozwiązanie awaryjne musi udostępniać każdy oznaczony panel w kolejności źródłowej lub zapewniać rzeczywiste linki do wyrenderowanych po stronie serwera miejsc docelowych. Stabilne fragmenty mogą aktywować panel, ale strona kanoniczna pozostaje jednym URL-em. Testuj przybliżenie, wąskie ekrany, długie przetłumaczone etykiety, relacje czytnika ekranu, kolejność klawiatury i awarię skryptów.

Zasady pisania

Zacznij od wspólnego pytania. Jeśli każdy proponowany panel odpowiada na inne pytanie, nie używaj zakładek. Napisz od dwóch do pięciu elementów, z preferowanymi trzema lub czterema. Utrzymuj etykiety w zakresie od jednego do czterech słów i 28 znaków tam, gdzie to możliwe. Używaj równoległej gramatyki: wszystkie role („Redaktorzy / Recenzenci"), wszystkie tryby („Hostowany / Samodzielny") lub wszystkie etapy („Planuj / Produkuj / Mierz"). Nie mieszaj roli, czasownika i frazy marketingowej.

Nadaj każdemu panelowi nagłówek składający się z 3–10 słów, który nazywa zarówno odpowiednią ścieżkę, jak i jej rezultat, gdy sama etykieta zakładki jest niewystarczająca. Napisz 40–180 słów na panel, z maksymalnie 300 jako absolutną granicą. Panele powinny mieć porównywalną głębię, ale nie muszą mieć identycznej liczby słów. Używaj bezpośredniego języka i konkretnych różnic w zadaniach, dowodach, uprawnieniach, ograniczeniach lub działaniach. Zmiana tylko zaimków z „ty" na „Twój zespół" nie uzasadnia kolejnego panelu.

Trzymaj wspólne informacje poza elementem. Powtarzanie tego samego zdania otwierającego w każdym panelu tworzy dryf konserwacyjny i sprawia, że wyodrębnione fragmenty wyglądają na zduplikowane. Umieszczaj różnice wewnątrz paneli i spraw, aby każda różnica była wystarczająco wyraźna, aby przetrwać ekstrakcję. Preferuj „Zespoły agencyjne mogą przypisywać role na poziomie klienta" zamiast „Zyskujesz większą kontrolę", co traci podmiot po oddzieleniu od wybranej etykiety.

Nigdy nie umieszczaj wewnątrz zestawu zakładek:

• Jedynej definicji strony, bezpośredniej odpowiedzi, wniosku, ostrzeżenia bezpieczeństwa, zastrzeżenia prawnego, zasady kwalifikowalności lub przypisania źródła.
• Sekwencyjnych kroków, które każdy czytelnik musi wykonać, lub wymagań wstępnych, które dotyczą treści poza jednym panelem.
• Innego zestawu zakładek, akordeonu, karuzeli, złożonej tabeli danych, formularza wielopolowego lub odtwarzacza z autoodtwarzaniem.
• Więcej niż jednego głównego wezwania do działania na panel lub działań prowadzących do niepowiązanych etapów lejka.
• Treści ładowanej dopiero po interakcji, nawet jeśli stan ładowania jest szybki dla człowieka.
• Etykiet takich jak „Inne", „Więcej", „Ogólne" lub „Zasoby", które ukrywają nieokreśloną relację.

Jeśli każdy panel przekracza 300 słów, potrzebuje własnego zestawu dowodów lub jest skierowany na inną intencję wyszukiwania, opublikuj dedykowane sekcje lub strony. Jeśli czytelnicy muszą porównać kilka kryteriów naraz, użyj tabeli. Jeśli treść jest jedynie opcjonalnym szczegółem, użyj prozy lub akordeonu, w zależności od relacji.

Typy postów, które go używają

Pole postTypes w metadanych jest źródłem tej tabeli. Oznacza to, że format może obsługiwać zakładki, ale nie czyni ich obowiązkowymi.

Lista kontrolna QA

• Jedno wspólne pytanie: Każdy panel odpowiada na to samo ograniczone pytanie dla innej grupy odbiorców, kontekstu lub trybu.
• Odpowiednia liczba: Zestaw zawiera od dwóch do pięciu zakładek, najlepiej trzy lub cztery, ze zwięzłymi równoległymi etykietami.
• Widoczna wspólna odpowiedź: Definicja, główna odpowiedź, obowiązkowe zastrzeżenie i podsumowanie pozostają poza zestawem zakładek.
• Obecność w początkowym DOM: Każdy panel i jego pełna autorska treść pojawia się w początkowym HTML-u wyrenderowanym przez serwer.
• Wyraźny kontekst: Każdy nagłówek panelu i zdanie otwierające pozostają zrozumiałe po wyodrębnieniu bez wizualnego stanu zakładki.
• Poprawne relacje: ID zakładek i paneli są unikalne; aria-controls i aria-labelledby łączą je poprawnie.
• Zachowanie klawiatury: Działanie klawiszy Strzałki, Home, End, Enter, Spacji, Tab i Shift+Tab jest zgodne z wybranym modelem aktywacji.
• Wyraźność focusu: Focus i zaznaczenie są wizualnie odrębne, a zaznaczenie nie przenosi focusu w nieoczekiwany sposób.
• Stabilne rozwiązanie awaryjne: Awaria skryptu ujawnia oznaczone treści lub użyteczne miejsca docelowe wyrenderowane przez serwer bez utraty informacji.
• Zachowanie responsywne: Etykiety pozostają kompletne i wykrywalne przy wąskich szerokościach, 200% przybliżeniu i dłuższym przetłumaczonym tekście.
• Bezpieczne umiejscowienie: Komponent nie oddziela twierdzenia od dowodów, ostrzeżenia od jego zakresu ani wymagań wstępnych od instrukcji.
• Brak złożonych zagnieżdżeń: Panele zawierają ograniczoną prozę i prostą treść pomocniczą, a nie kolejny system interakcji.
• Ograniczenie schematu: Renderer nie tworzy schematu listy, osoby ani odbiorców na podstawie etykiet prezentacyjnych.
• Równoważność notacji: Markdown, Hugo i WordPress zachowują tę samą kolejność, ID, domyślny wybór, etykiety, nagłówki i treść paneli.

Recenzent powinien odrzucić komponent, gdy nieaktywna treść wymaga żądania sieciowego wywołanego kliknięciem, gdy istotne informacje istnieją tylko wewnątrz jednego panelu lub gdy etykiety nie opisują równorzędnych ścieżek. Są to błędy treści i architektury; poprawki wizualne nie mogą ich naprawić.

FAQ

Strukturalne wpisy FAQ w metadanych dotyczą indeksowania, fragmentów URL, liczby zakładek, wezwań do działania oraz rozróżnienia między zakładkami a akordeonami. Są celowo umieszczone poza elementem interaktywnym, aby każdy czytelnik i renderer otrzymał te same wskazówki implementacyjne.