Datavisning
Accordion & FAQ
En accordion folder indhold ud og sammen under klikbare overskrifter — et klassisk disclosure-mønster, der korter lange sider ned og skaber overblik, især på mobil. Men hvert klik koster, skjult tekst kan blive overset, og en FAQ bygget forkert bliver en losseplads for indhold, der burde stå inline. Her er evidensen, best practices og de typiske faldgruber.
Definition
Accordion (også kaldet foldeliste eller expand/collapse) er et disclosure-mønster: et lodret sæt overskrifter, hvor hver overskrift er en knap, der viser eller skjuler sin tilhørende sektion. FAQ-sider bruger ofte mønstret til at liste spørgsmål, man kan folde ud ét ad gangen.
Hvorfor det virker
En accordion korter en lang side ned og lader brugeren gå direkte til den sektion, der er relevant, i stedet for at scrolle forbi alt det, der ikke er. Den fungerer som en lille indholdsfortegnelse: man får overblikket først og detaljerne bagefter.1
På mobil er gevinsten størst. Accordions »løser ofte problemet med at vise for meget indhold på for lidt skærmplads« og lader brugeren danne sig et overblik, før de dykker ned i detaljerne — uden endeløs scrolling.2
Men foldemekanikken har en pris. Nielsen Norman Group kalder det interaktionsomkostning: at scrolle, skanne overskrifterne, beslutte hvilken der skal foldes ud, ramme klikket og vente på indholdet — hvert delskridt er lille, men de lægger sig oven i hinanden. Accordions er derfor kun en gevinst, når brugeren nøjes med få sektioner; skal de bruge det meste af indholdet, bliver det tungt at folde hver enkelt ud.1
At skjule indhold bag navigation svækker folks bevidsthed om, at det findes: »værdifuldt indhold, der er skjult under en accordion, kan blive overset helt«. Derfor egner mønstret sig til sekundært detaljeindhold — ikke til det, der bærer siden.1
Hvornår du bruger det — og hvornår ikke
Hvornår du bruger det
- Lange, skimbare sider hvor brugeren kun har brug for få af mange sektioner — resten kan blive foldet sammen.
- Mobil, hvor pladsen er knap: en accordion giver overblik over sidens indhold og sparer endeløs scrolling.
- Sekundært detaljeindhold (specifikationer, leveringsvilkår, mindre spørgsmål) der understøtter, men ikke bærer, sidens hovedbudskab.
Hvornår du bør undgå det
- Når brugeren har brug for det meste eller alt indholdet på siden — så koster det at folde hver sektion ud enkeltvis, og det er bedre at vise alt på én gang.
- Til kritisk indhold (pris, sikkerhed, kernebudskab): det må ikke ligge gemt bag et klik, hvor det kan blive overset eller ikke fundet via søg-på-siden.
Best practices
Brug kun accordions, når brugeren nøjes med få sektioner
Passer, når folk kun skal bruge et par stykker af mange sektioner og springer resten over. Har de brug for det meste eller alt indholdet, så vis det hele på én gang — ellers straffer du dem med et klik pr. sektion.1
Gør skjult tekst søgbar med hidden=until-found
Indhold i et sammenfoldet panel »kan ikke findes med søg-på-siden«. Sætter du hidden="until-found" på panelet, kan browseren søge i den skjulte tekst og folde sektionen ud ved match (via beforematch-hændelsen) — samtidig bliver indholdet tilgængeligt for søgemaskiner.4
Skriv overskrifter, der afslører indholdet
Overskriften er det eneste, brugeren ser, før de klikker. En vag overskrift, der ikke forudsiger, hvad panelet gemmer, får folk til at overse relevant indhold — så vær konkret og forudsigelig.1
Byg accordion-knappen med korrekt semantik
Hver overskrift skal være et element med role button, pakket ind i en heading med et passende aria-level. Knappen har aria-expanded="true", når panelet er synligt, og "false", når det er skjult, samt aria-controls, der peger på panelets id.3
Sørg for tastaturbetjening og tydelig region
Enter eller mellemrum folder panelet ud og sammen, og Tab flytter mellem overskrifterne i den normale fokusrækkefølge. Panelet kan have role region med aria-labelledby, der refererer til knappen — men undgå region på accordions med mere end ca. 6 samtidigt åbne paneler for ikke at oversvømme skærmlæseren med landemærker.3
Lad en FAQ afspejle rigtige spørgsmål — ikke opdigtede
Lytter du til brugerne, ved du, hvad de spørger om. NN/g advarer mod at finde på spørgsmål, ingen stiller — opdigtede FAQ-spørgsmål underminerer tilliden. Indgående spørgsmål er samtidig spor til UX-problemer, du bør løse andetsteds på sitet.5
Typiske fejl
Alt gemt bag accordions
Når hele siden er foldet sammen, og brugeren skal bruge det meste af den, bliver hvert klik en told. Har folk brug for størstedelen af indholdet, så vis det på én gang.
Kritisk indhold kun bag et klik
Pris, vilkår eller kernebudskab gemt i et foldet panel bliver overset — og fanges ikke af søg-på-siden, hvis panelet ikke er gjort søgbart.
FAQ som losseplads
En FAQ bør ikke være et opsamlingssted for indhold, der hører hjemme inline på de rigtige sider. Opdigtede »ofte stillede« spørgsmål, ingen reelt stiller, skader troværdigheden.
Knap uden semantik
En div, man kan klikke på, uden role button, aria-expanded og aria-controls, fortæller ikke skærmlæseren, at sektionen kan foldes ud — eller om den er åben eller lukket.
Eksempler i praksis
GOV.UK Design System (ofte fremhævet)
GOV.UK’s accordion-komponent er ofte fremhævet som forbilledlig: den bygger på en rigtig knap med aria-expanded, og designsystemet fraråder eksplicit mønstret, når brugeren har brug for at se det meste af indholdet på siden.
Produkt- og supportsiders FAQ (ofte fremhævet)
Webshops og supportsider bruger ofte accordions til sekundære detaljer — levering, returnering, mindre spørgsmål — så hovedbudskabet står frit, mens detaljerne kan foldes ud efter behov. Mønstret rammer rigtigt, når det skjulte er understøttende, ikke bærende.
Ofte stillede spørgsmål
Hvad er en accordion?
Et disclosure-mønster: et lodret sæt klikbare overskrifter, hvor hver overskrift folder sin tilhørende sektion ud eller sammen. Det bruges til at korte lange sider ned og give overblik, så brugeren kan gå direkte til det relevante.
Hvornår gør accordions mere skade end gavn?
Når brugeren har brug for det meste eller alt indholdet på siden. Så bliver det tungt at folde hver sektion ud enkeltvis, og NN/g anbefaler i stedet at vise alt indhold på én gang.
Kan man finde tekst i et foldet panel med Ctrl+F?
Ikke som udgangspunkt — indhold i et sammenfoldet panel kan ikke findes med browserens søg-på-siden. Med attributten hidden="until-found" kan browseren dog søge i den skjulte tekst og folde panelet ud ved match, og indholdet bliver samtidig synligt for søgemaskiner.
Er en FAQ-side en god idé?
Kun hvis den afspejler rigtige spørgsmål fra brugerne. En FAQ må ikke blive en losseplads for indhold, der hører hjemme inline på de rigtige sider, og opdigtede spørgsmål, ingen stiller, underminerer tilliden til sitet.
Hvad skal der til for at gøre en accordion tilgængelig?
Overskriften skal være et element med role button i en heading med passende aria-level, med aria-expanded (true/false) og aria-controls, der peger på panelets id. Enter eller mellemrum folder ud og sammen, og Tab flytter mellem overskrifterne.
Kilder
Relaterede mønstre
Udforsk videre
Progressiv afsløring
Vis kun kompleksitet, når brugeren faktisk har brug for den.
Se mønster →Sorterbar datatabel
Store datasæt med sortering, kolonnestyring og sidenavigation.
Se mønster →Kortbaseret layout
Skimbar oversigt hvor hvert kort er én selvstændig enhed.
Se mønster →