Disclosure versus tabbladen: kies de juiste

Tabbladen en accordeons verbergen en tonen allebei inhoud, waardoor ze vaak worden verward. Het verkeerde patroon kiezen kan gebruikers in verwarring brengen.

Een tabbladenset toont elkaar uitsluitende weergaven: wanneer één paneel wordt geopend, worden de andere gesloten. Dit past bij inhoud die de gebruiker stukje voor stukje vergelijkt.

Met een accordeon kunnen meerdere secties tegelijk geopend blijven. Dit past bij een lange pagina met veelgestelde vragen, waarbij gebruikers misschien twee antwoorden naast elkaar willen lezen.

Een afzonderlijk element dat iets toont en verbergt, is een disclosure: één knop en één regio. Gebruik dit wanneer er slechts één stuk optionele informatie onthuld hoeft te worden.

De patronen gebruiken verschillende ARIA. Tabbladen hebben een tablist en pijltoetsen nodig; een disclosure of accordeon heeft alleen een knop met aria-expanded nodig.

Tabbladen werken het best wanneer elk label kort is en de rij bovenaan past. Zijn de labels lang, dan leest een verticaal gestapelde accordeon beter.

Op smalle schermen loopt een horizontale rij tabbladen vaak over. Een accordeon wordt vanzelf gestapeld, dus veel teams wisselen op kleine schermen van patroon.

Vraag je af of secties onafhankelijk zijn. Als gebruikers baat hebben bij het samen lezen van meerdere secties, kies je een accordeon; als er maar één weergave past, kies je tabbladen.

Vermijd het bouwen van een van beide patronen met gewone links die scrollen. Links brengen je ergens naartoe; deze bedieningselementen wisselen inhoud, dus ze hebben knopsemantiek nodig.

Als een patroon niet duidelijk de beste keuze is, geef dan de voorkeur aan het eenvoudigere patroon. Een disclosure of accordeon heeft minder ARIA die verkeerd kan worden toegepast dan een volledige tabbladwidget.

De juiste keuze volgt uit de inhoud, niet uit het uiterlijk. Bepaal hoe gebruikers de inhoud moeten lezen en vergelijken en koppel dat vervolgens aan een patroon.

Je hebt geleerd te kiezen op basis van de behoeften van de inhoud: tabbladen voor weergaven één voor één, accordeons voor secties die tegelijk geopend kunnen zijn en een disclosure voor één onthulling.