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

Kom i gang

Result

Loading...

Kode

Live Editor

<Accordion>
  <Accordion.Item defaultOpen>
    <Accordion.Header>Hvordan logger jeg inn?</Accordion.Header>
    <Accordion.Content>
      <p>Du logger inn med BankID eller BankID på mobil øverst til høyre.</p>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Header>Hvordan endrer jeg passord?</Accordion.Header>
    <Accordion.Content>
      <p>Gå til Innstillinger → Sikkerhet og velg «Endre passord».</p>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>

Result

Loading...

Kode

Live Editor

<div class="ix-accordion">
  <details class="ix-accordion__item" open>
    <summary class="ix-accordion__header">Hvordan logger jeg inn?</summary>
    <div class="ix-accordion__content">
      <p>Du logger inn med BankID eller BankID på mobil øverst til høyre.</p>
    </div>
  </details>
  <details class="ix-accordion__item">
    <summary class="ix-accordion__header">Hvordan endrer jeg passord?</summary>
    <div class="ix-accordion__content">
      <p>Gå til Innstillinger → Sikkerhet og velg «Endre passord».</p>
    </div>
  </details>
</div>

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.

Result

Loading...

Kode

Live Editor

<Accordion>
  <Accordion.Item defaultOpen>
    <Accordion.Header>Første seksjon</Accordion.Header>
    <Accordion.Content>
      <p>Denne er åpen som standard.</p>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item defaultOpen>
    <Accordion.Header>Andre seksjon</Accordion.Header>
    <Accordion.Content>
      <p>Denne er også åpen — begge kan stå åpne samtidig.</p>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>

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.

Result

Loading...

Kode

Live Editor

<Accordion>
  <Accordion.Item>
    <Accordion.Header>
      <Icon name="betalingskort" /> Kort og betaling
    </Accordion.Header>
    <Accordion.Content>
      <p>Administrer kortene dine, sperr kort og se betalinger.</p>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Header>
      <Icon name="innstillinger" /> Sikkerhet
    </Accordion.Header>
    <Accordion.Content>
      <p>Endre passord og se påloggingshistorikk.</p>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>

Rikt innhold

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

Result

Loading...

Kode

Live Editor

<Accordion>
  <Accordion.Item defaultOpen>
    <Accordion.Header>Hva er inkludert?</Accordion.Header>
    <Accordion.Content>
      <p>Avtalen inkluderer blant annet:</p>
      <ListElement as="ul">
        <li>Nettbank og mobilbank</li>
        <li>Gratis kortbruk i Norge</li>
        <li>Varsling på SMS</li>
      </ListElement>
      <p>
        Les mer i <LinkText href="#">vilkårene</LinkText>.
      </p>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Header>Hva koster det?</Accordion.Header>
    <Accordion.Content>
      <p>Se gjeldende priser i prislisten.</p>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>

Retningslinjer

Innhold og formulering

• Skriv korte, beskrivende headere som gir mening lest alene.
• Start med det viktigste ordet i headeren — den skal være lett å skanne.
• Unngå at brukeren må åpne seksjoner for å forstå hva de inneholder.

Unngå overdreven nøsting

Accordion i accordion blir fort uoversiktlig. Vurder å dele opp innholdet på en annen måte hvis du trenger flere nivåer.

Default-åpne seksjoner

Marker den eller de viktigste seksjonene med defaultOpen slik at brukeren ser noe innhold med en gang. Seksjonene er uavhengige, så du kan starte flere åpne samtidig.

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).

Avvik fra akseptansekriteriene: <summary> framfor <button>

Kriteriene beskriver en button-basert accordion (<button aria-expanded aria-controls> + panel med matchende id). Vi bygger i stedet på native <details>/<summary>, som oppfyller samme intensjon — fokuserbar disclosure-knapp, Enter/Space og åpen/lukket-tilstand annonsert av skjermlesere — uten eksplisitt aria-expanded/aria-controls. Innholdet er programmessig knyttet til headeren ved å ligge inne i samme <details>, så aria-koblingen er overflødig. Dette er enklere, har bred innebygd støtte og følger samme native-tilnærming som Digdir/Designsystemet.

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

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.