Accordion

Accordion viser og skjuler innhold i seksjoner. Den er nyttig når mye innhold skal gjøres oversiktlig: brukeren ser overskriftene og åpner kun det som er relevant. Komponenten bygger på native <details>/<summary>, så tastatur og skjermleser fungerer uten ekstra oppsett.

Egnet til

• Vanlige spørsmål (FAQ) og hjelpeinnhold
• Lange skjemaer eller innstillinger delt i logiske bolker
• Sekundær informasjon som ikke alle trenger samtidig
• Å gjøre tett innhold skannbart uten å skjule det helt

Uegnet til

• Innhold brukeren må se for å komme videre — vis det åpent
• Én enkelt seksjon — bruk heller en vanlig overskrift + tekst
• Navigasjon mellom sider — bruk lenker eller meny
• Når alt innholdet uansett må leses i rekkefølge

Bruk

Laster...

Laster...

Eksempler

Default-åpne seksjoner

Seksjonene er uavhengige — flere kan stå åpne samtidig. Marker de seksjonene som bør være åpne ved start med defaultOpen.

Laster...

Med prefiks-ikon

Accordion.Header tar ReactNode, så du kan sette et ikon foran tittelen. Teksten er alltid hovedbæreren — ikonet er kun støtte.

Laster...

Rikt innhold

Innholdet kan bestå av tekst, lister, lenker og andre komponenter.

Laster...

Retningslinjer

Skriv headere som kan leses alene

Headeren er det eneste brukeren har å gå etter før hen åpner seksjonen. Sett det viktigste ordet først, og hold den kort nok til å skannes nedover lista. Må seksjonen åpnes for at headeren skal gi mening, er headeren for vag.

Ikke legg accordion i accordion

To nivåer med åpne og lukkede seksjoner er vanskelig å holde oversikt over. Trenger du flere nivåer, del innholdet på egne sider eller i faner i stedet.

Start med det viktigste åpent

Sett defaultOpen på den seksjonen folk oftest er ute etter, så møter de innhold og ikke bare en liste med lukkede rader. Seksjonene er uavhengige, så flere kan stå åpne fra start.

Designvalg

Akseptansekriteriene beskriver en button-basert accordion (<button aria-expanded aria-controls> med et panel som har matchende id). Vi bygger i stedet på native <details>/<summary>. Den oppfyller samme intensjon uten eksplisitt aria-expanded/aria-controls: disclosure-knappen er fokuserbar, Enter og Space åpner og lukker, og skjermlesere annonserer tilstanden. Innholdet er programmessig knyttet til headeren ved å ligge inne i samme <details>, så aria-koblingen er overflødig. Løsningen er enklere, har bred innebygd støtte, og følger samme native-tilnærming som Digdir og Designsystemet.

Universell utforming

Hva du selv må sørge for

• Skriv kort og beskrivende header-tekst. Headeren er klikkflaten og må gi mening alene. Et valgfritt prefiks-ikon støtter, men teksten er alltid hovedbæreren.
• Plasser Accordion.Header først i hver Accordion.Item — native <details> krever at <summary> er første barn.
• Bruk overskriftsnivå ved behov. Inngår headerne i en dokumentstruktur, kan du legge en <Heading>/<h3> inni Accordion.Header for korrekt overskriftshierarki.

Hva komponenten gjør automatisk

• Disclosure-semantikk: header er en native <summary>: fokuserbar med Tab, åpnes/lukkes med Enter og Space, og åpen/lukket-tilstand annonseres av skjermlesere. Ingen ekstra ARIA er nødvendig.
• Programmessig kobling: innholdet ligger inne i samme <details> som headeren, så de er knyttet sammen uten aria-controls/id.
• Tilstandsindikator: en chevron roterer for å vise åpen/lukket. Animasjonen er kort og respekterer prefers-reduced-motion.
• Fokusindikator: tydelig fokusring på header (:focus-visible).

Tastaturnavigasjon

Tast	Handling
Tab	Flytter fokus til neste header (og til fokuserbare elementer i åpent innhold)
Shift+Tab	Flytter fokus til forrige fokuserbare element
Enter	Åpner eller lukker seksjonen når headeren har fokus
Space	Åpner eller lukker seksjonen når headeren har fokus

Skjermleser

• Header annonseres som en disclosure-knapp med åpen/lukket-tilstand (native <summary>) — f.eks. «Tittel, skjult/vist»
• Å åpne en seksjon eksponerer innholdet som ligger inne i <details>; tilstanden annonseres uten at fokus flyttes
• Seksjonene er uavhengige — å åpne én påvirker ikke de andre, og fokus blir værende på headeren brukeren aktiverte

WCAG-kriterier

Sist gjennomgått: 2026-06-24 — alle 56 WCAG 2.2-kriterier vurdert

WCAG-kriterier6 ditt ansvar · 15 håndtert · 36 ikke relevant · 0 ikke på plass

Ditt ansvar (6)

Kriterium	Nivå	Hva du må gjøre
2.4.6 Overskrifter og ledetekster	AA	Skriv kort og beskrivende header-tekst. Hver Accordion.Header er klikkflaten og skal beskrive innholdet i seksjonen slik at den gir mening lest alene. Hold den kort. Et valgfritt prefiks-ikon kan støtte forståelsen, men teksten er alltid hovedbæreren — ikonet skal ikke være eneste informasjon.
1.1.1 Ikke-tekstlig innhold	A	Skriv kort og beskrivende header-tekst. Hver Accordion.Header er klikkflaten og skal beskrive innholdet i seksjonen slik at den gir mening lest alene. Hold den kort. Et valgfritt prefiks-ikon kan støtte forståelsen, men teksten er alltid hovedbæreren — ikonet skal ikke være eneste informasjon.
1.3.1 Informasjon og relasjoner	A	Plasser Accordion.Header først i hver Accordion.Item. Native <details> krever at <summary> (Accordion.Header) er første barn for at klikk og tastatur skal fungere. Skriv alltid Accordion.Header før Accordion.Content.
2.1.1 Tastatur	A	Plasser Accordion.Header først i hver Accordion.Item. Native <details> krever at <summary> (Accordion.Header) er første barn for at klikk og tastatur skal fungere. Skriv alltid Accordion.Header før Accordion.Content.
1.3.1 Informasjon og relasjoner	A	Bruk overskriftsnivå i header ved behov. Hvis seksjonene inngår i en dokumentstruktur der headerne fungerer som overskrifter, kan du legge et passende overskriftselement (f.eks. en <Heading> / <h3>) inni Accordion.Header for korrekt overskriftshierarki. Knapp-semantikken kommer fra <summary>.
2.4.10 2.4.10	?	Bruk overskriftsnivå i header ved behov. Hvis seksjonene inngår i en dokumentstruktur der headerne fungerer som overskrifter, kan du legge et passende overskriftselement (f.eks. en <Heading> / <h3>) inni Accordion.Header for korrekt overskriftshierarki. Knapp-semantikken kommer fra <summary>.

Håndtert av komponenten (15)

Kriterium	Nivå	Hva komponenten gjør
1.3.1 Informasjon og relasjoner	A	Semantisk struktur via native <details>/<summary>: header er en disclosure-knapp, innholdet er programmessig knyttet til den ved å ligge inne i samme <details>. Skillelinjer mellom seksjoner er rent visuelle.
1.3.2 Meningsfull rekkefølge	A	Innhold følger naturlig leserekkefølge i DOM: header (summary) før innhold (content), seksjon for seksjon.
1.4.1 Bruk av farge	A	Åpen/lukket-tilstand formidles av native disclosure-semantikk (annonseres av skjermleser) og chevron-ikon — ikke av farge alene.
1.4.3 Kontrast (minimum)	AA	Tekst bruker --ix-color-foreground-main-default på --ix-color-surface-main, som oppfyller kontrastkravet i både light og dark mode.
1.4.4 Endre tekststørrelse	AA	Relative enheter (font-size-tokens) — tekst skalerer korrekt ved 200 % zoom uten at innhold brytes.
1.4.10 Omflyt	AA	Mobile-first uten faste bredder — reflower korrekt ned til 320px viewport uten horisontal scroll.
1.4.11 Kontrast for ikke-tekstlig innhold	AA	Fokusindikator på header oppfyller 3:1 kontrastkrav via --ix-outline-default.
2.1.1 Tastatur	A	Header er en native <summary> — fokuserbar med Tab og åpnes/lukkes med Enter og Space. Fullt opererbart med tastatur.
2.1.2 Ingen tastaturfelle	A	Ingen tastaturfeller — fokus navigeres fritt ut med Tab/Shift+Tab.
2.4.3 Fokusrekkefølge	A	Følger naturlig tab-rekkefølge i DOM: header etter header.
2.4.7 Synlig fokus	AA	Tydelig fokusindikator på header (:focus-visible).
2.5.8 Målstørrelse (minimum)	AA	Header har min. 44px høyde (touch-mål) via min-height + padding.
3.2.1 Ved fokus	A	Ingen kontekstendring ved fokus. Å åpne/lukke en seksjon flytter ikke fokus og laster ikke ny kontekst.
3.2.2 Ved inndata	A	Å aktivere en header gjør kun det forventede (viser/skjuler innhold) — ingen automatisk kontekstendring.
4.1.2 Navn, rolle, verdi	A	Native <details>/<summary> gir korrekt rolle og åpne/lukke-tilstand til skjermlesere uten ekstra ARIA. Komponenten er ren CSS og setter ingen ARIA.

Ikke relevant (36)

Kriterium	Nivå	Hvorfor ikke relevant
1.1.1 Ikke-tekstlig innhold	A	Komponenten har ikke eget bildeinnhold. Et valgfritt prefiks-ikon i headeren er konsumentens ansvar (Icon-komponenten håndterer alt-tekst/aria-hidden).
1.2.1 Bare lyd og bare video (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.2 Teksting (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.3 Synstolking eller mediealternativ (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.4 Teksting (direkte)	AA	Ingen medieelementer.
1.2.5 Synstolking (forhåndsinnspilt)	AA	Ingen medieelementer.
1.3.3 Sensoriske egenskaper	A	Formidler ikke instruksjoner basert på sensoriske egenskaper.
1.3.4 Visningsretning	AA	Ingen fast orientering — tilpasser seg visningsretning.
1.3.5 Identifiser formål med inndata	AA	Ikke et skjemafelt som ber om personlig informasjon.
1.4.2 Styring av lyd	A	Ingen lydelementer.
1.4.5 Bilder av tekst	AA	Ingen bilder av tekst.
1.4.12 Tekstavstand	AA
1.4.13 Innhold ved hover eller fokus	AA
2.1.4 Tastatursnarveier	A	Ingen egendefinerte tastatursnarveier.
2.2.1 Justerbar hastighet	A	Ingen tidsbegrensede funksjoner.
2.2.2 Pause, stopp, skjul	A	Ingen animasjon eller automatisk oppdatering.
2.3.1 Terskelverdi på tre glimt	A	Chevron-animasjon er kort og respekterer prefers-reduced-motion; ingen blink.
2.4.1 Hoppe over blokker	A	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.2 Sidetitler	A	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.5 Flere måter	AA	Sidekrav — gjelder ikke enkeltkomponenter.
2.5.1 Pekerbevegelser	A	Ingen gestbaserte interaksjoner — enkelt klikk/tap på header.
2.5.2 Avbryt peker	A	Native <summary> — nettleseren håndterer pekerinteraksjon.
2.5.4 Bevegelsesaktivering	A	Ingen bevegelsesbasert interaksjon.
2.5.6 Samtidige inndatamekanismer	A
2.5.7 Drabevegelser	A	Ingen drag-and-drop.
3.1.1 Språk på siden	A	Sidekrav — gjelder ikke enkeltkomponenter.
3.1.2 Språk på deler av innhold	AA	Komponenten setter ikke lang-attributt — innhold er på sidespråket.
3.2.3 Konsistent navigasjon	AA	Sidekrav — gjelder ikke enkeltkomponenter.
3.2.4 Konsistent identifikasjon	AA	Systemkrav — gjelder konsistens på tvers av sider, ikke enkeltkomponenter.
3.2.6 Konsistent hjelp	A	Sidekrav — gjelder plassering av hjelpefunksjon på tvers av sider.
3.3.1 Identifikasjon av feil	A
3.3.2 Ledetekster eller instruksjoner	A
3.3.3 Forslag ved feil	AA
3.3.4 Forhindring av feil (juridisk, økonomisk, data)	AA	Flytkrav — gjelder bekreftelse/reversering av transaksjoner, ikke enkeltfelter.
3.3.7 Redundant oppføring	A	Flytkrav — gjelder at brukeren ikke skal gjenta informasjon i en prosess.
3.3.8 Tilgjengelig autentisering (minimum)	AA	Ikke en autentiseringskomponent.

Props / API

Accordion

Prop	Type	Standard	Beskrivelse
children	ReactNode		Accordion.Item-seksjoner
className	string		Ekstra CSS-klasser på rot-elementet (<div class="ix-accordion">)

Accordion.Item

Prop	Type	Standard	Beskrivelse
children	ReactNode		En Accordion.Header (først) og en Accordion.Content
defaultOpen	boolean	false	Start seksjonen åpen. Speiler native <details open>
className	string		Ekstra CSS-klasser på <details>

Accordion.Header

Prop	Type	Standard	Beskrivelse
children	ReactNode		Tittel (kort og beskrivende), kan inkludere et prefiks-ikon
className	string		Ekstra CSS-klasser på <summary>

Accordion.Content

Prop	Type	Standard	Beskrivelse
children	ReactNode		Innholdet — tekst, lister eller andre komponenter
className	string		Ekstra CSS-klasser på innholds-<div>

Tilpasning med CSS

Trenger du ix-accordion-stylingen på HTML du setter sammen selv, kan du bruke klassene direkte. Native <details>/<summary> gir semantikk og tastatur — ingen JavaScript er nødvendig.

Tilgjengelige klasser og selektorer

Element/tilstand	Selektor / attributt
Rot (gruppe)	.ix-accordion på et container-element (f.eks. <div>)
Seksjon	.ix-accordion__item på <details>
Åpen seksjon	[open] på <details> (native)
Header	.ix-accordion__header på <summary> (første barn)
Innhold	.ix-accordion__content på <div> (etter header)

Eksempel: ren HTML

<div class="ix-accordion">
  <details class="ix-accordion__item" open>
    <summary class="ix-accordion__header">Første seksjon</summary>
    <div class="ix-accordion__content">
      <p>Innhold i første seksjon.</p>
    </div>
  </details>
  <details class="ix-accordion__item">
    <summary class="ix-accordion__header">Andre seksjon</summary>
    <div class="ix-accordion__content">
      <p>Innhold i andre seksjon.</p>
    </div>
  </details>
</div>

Seksjonene er uavhengige native <details> — flere kan stå åpne samtidig. Den myke åpne/lukke-animasjonen er en progressiv CSS-enhancement; nettlesere uten støtte hopper bare åpent/lukket.