Utfällbar sektion eller flikar: välj rätt

Flikar och dragspelskomponenter döljer och visar båda innehåll, så de blandas lätt ihop. Om du väljer fel mönster kan användarna bli desorienterade.

En flikuppsättning visar ömsesidigt uteslutande vyer: när en panel öppnas stängs de andra. Den passar innehåll som användaren jämför en del i taget.

En dragspelskomponent låter flera avsnitt vara öppna samtidigt. Den passar en lång FAQ-sida där användarna kan vilja läsa två svar sida vid sida.

En ensam visa-och-dölj-funktion är en disclosure: en knapp och en region. Använd den när det bara finns ett stycke valfri information att visa.

Mönstren använder olika ARIA. Flikar behöver tablist och piltangenter; en disclosure eller dragspelskomponent behöver bara en knapp med aria-expanded.

Flikar fungerar bäst när varje etikett är kort och raden får plats överst. Om etiketterna är långa blir en dragspelskomponent som staplas lodrätt lättare att läsa.

På smala skärmar får en horisontell flikrad ofta inte plats. En dragspelskomponent staplas naturligt, så många team byter mönster vid små skärmstorlekar.

Fråga dig om avsnitten är oberoende. Om användarna har nytta av att läsa flera samtidigt väljer du en dragspelskomponent; om bara en vy ryms väljer du flikar.

Undvik att bygga något av mönstren med vanliga länkar som skrollar. Länkar leder till platser; de här kontrollerna växlar innehåll och behöver därför knappsemantik.

Om valet mellan två mönster är tveksamt föredrar du det enklare. En disclosure eller dragspelskomponent har mindre ARIA som kan bli fel än en fullständig flikkomponent.

Rätt val utgår från innehållet, inte utseendet. Bestäm hur användarna behöver läsa och jämföra det och koppla sedan behovet till ett mönster.

Du har lärt dig att välja utifrån innehållets behov: flikar för vyer en i taget, dragspelskomponenter för flera öppna avsnitt och en disclosure för en enda utfällning.