ReadMore

ReadMore viser og skjuler én frittstående tekstblokk bak en klikkbar label. Den er nyttig for utdypende, sekundær informasjon som ikke alle trenger med en gang: brukeren ser labelen og åpner forklaringen kun ved behov. Komponenten bygger på native <details>/<summary>, så tastatur og skjermleser fungerer uten ekstra oppsett.

Egnet til

• Utdypende forklaringer til et enkelt begrep eller spørsmål
• Sekundær informasjon som støtter, men ikke er nødvendig for hovedinnholdet
• Å holde tett innhold skannbart uten å skjule det helt
• Korte «les mer»-avsnitt inne i tekstflaten

Uegnet til

• Flere seksjoner som hører sammen — bruk heller Accordion
• Innhold brukeren må se for å komme videre — vis det åpent
• Navigasjon mellom sider — bruk lenker eller meny
• Lange, strukturerte tekstmengder som bør ha egne overskrifter

Kom i gang

Result

Loading...

Kode

Live Editor

<details class="ix-read-more">
  <summary>Hva regnes som helsemessige begrensninger?</summary>
  <div class="ix-read-more__content">
    <p>Med helsemessige begrensninger mener vi funksjonshemming, sykdom eller skade som påvirker hverdagen din over tid.</p>
  </div>
</details>

Result

Loading...

Kode

Live Editor

<ReadMore label="Hva regnes som helsemessige begrensninger?">
  <p>Med helsemessige begrensninger mener vi funksjonshemming, sykdom eller skade som påvirker hverdagen din over tid.</p>
</ReadMore>

Eksempler

Åpen som standard

Marker seksjonen med open (HTML) eller defaultOpen (React) om innholdet bør vises ved start.

Result

Loading...

Kode

Live Editor

<details class="ix-read-more" open>
  <summary>Hva er inkludert?</summary>
  <div class="ix-read-more__content">
    <p>Avtalen inkluderer nettbank, mobilbank og gratis kortbruk i Norge.</p>
  </div>
</details>

Result

Loading...

Kode

Live Editor

<ReadMore label="Hva er inkludert?" defaultOpen>
  <p>Avtalen inkluderer nettbank, mobilbank og gratis kortbruk i Norge.</p>
</ReadMore>

Rikt innhold

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

Result

Loading...

Kode

Live Editor

<details class="ix-read-more" open>
  <summary>Hva er inkludert?</summary>
  <div class="ix-read-more__content">
    <p>Avtalen inkluderer blant annet:</p>
    <ul class="ix-list-element">
      <li>Nettbank og mobilbank</li>
      <li>Gratis kortbruk i Norge</li>
      <li>Varsling på SMS</li>
    </ul>
    <p>Les mer i <a class="ix-link-text" href="#">vilkårene</a>.</p>
  </div>
</details>

Result

Loading...

Kode

Live Editor

<ReadMore label="Hva er inkludert?" defaultOpen>
  <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>
</ReadMore>

Retningslinjer

Innhold og formulering

• Skriv en kort, beskrivende label som gir mening lest alene.
• Start med det viktigste ordet — labelen skal være lett å skanne.
• Unngå at brukeren må åpne seksjonen for å forstå hva den inneholder.

ReadMore eller Accordion?

Bruk ReadMore for én enkeltstående forklaring i tekstflaten. Har du flere seksjoner som hører sammen og bør stå i et samlet kort, bruk Accordion i stedet.

Tilpasning med CSS

Trenger du ix-read-more-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	.ix-read-more på et <details>-element
Åpen	[open] på <details> (native)
Label	<summary> (første barn — styles via .ix-read-more > summary)
Innhold	.ix-read-more__content på <div> (etter label)

Eksempel: ren HTML

<details class="ix-read-more">
  <summary>Hva regnes som helsemessige begrensninger?</summary>
  <div class="ix-read-more__content">
    <p>Med helsemessige begrensninger mener vi funksjonshemming, sykdom eller skade som påvirker hverdagen din over tid.</p>
  </div>
</details>

Den myke åpne/lukke-animasjonen er en progressiv CSS-enhancement; nettlesere uten støtte hopper bare åpent/lukket.

Universell utforming

Hva du selv må sørge for

• Skriv kort og beskrivende label-tekst — labelen er klikkflaten og må gi mening alene.
• Ikke gjem nødvendig innhold — ReadMore er for utdypende, sekundær informasjon. Innhold brukeren må se for å komme videre skal vises åpent.
• Bruk overskriftsnivå ved behov — inngår labelen i en dokumentstruktur, kan du legge en <Heading>/<h3> inni labelen for korrekt overskriftshierarki.

Hva komponenten gjør automatisk

• Disclosure-semantikk — labelen 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 labelen, 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å labelen (:focus-visible).

Avvik fra akseptansekriteriene: <summary> framfor <button>

En button-basert løsning (<button aria-expanded aria-controls> + panel med matchende id) er et vanlig mønster for disclosure. 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 labelen 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 Accordion.

Tastaturnavigasjon

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

Skjermleser

• Labelen annonseres som en disclosure-knapp med åpen/lukket-tilstand (native <summary>) — f.eks. «Les mer, skjult/vist»
• Å åpne seksjonen eksponerer innholdet som ligger inne i <details>; tilstanden annonseres uten at fokus flyttes
• Å lukke seksjonen skjuler innholdet igjen; fokus blir værende på labelen brukeren aktiverte

WCAG-kriterier

Sist gjennomgått: 2026-07-20 — alle 56 WCAG 2.2-kriterier vurdert

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

Ditt ansvar (4)

Kriterium	Nivå	Hva du må gjøre
2.4.6 Overskrifter og ledetekster	AA	Skriv kort og beskrivende label-tekst. Labelen er klikkflaten og skal beskrive hva som avsløres slik at den gir mening lest alene. Hold den kort. Teksten sendes inn av konsumenten (bokmål, nynorsk eller engelsk); komponenten har ingen hardkodet tekst.
1.3.1 Informasjon og relasjoner	A	Bruk overskriftsnivå i label ved behov. Hvis labelen inngår i en dokumentstruktur der den fungerer som en overskrift, kan du legge et passende overskriftselement (f.eks. en <Heading> / <h3>) inni labelen for korrekt overskriftshierarki. Knapp-semantikken kommer fra <summary>.
2.4.10 2.4.10	?	Bruk overskriftsnivå i label ved behov. Hvis labelen inngår i en dokumentstruktur der den fungerer som en overskrift, kan du legge et passende overskriftselement (f.eks. en <Heading> / <h3>) inni labelen for korrekt overskriftshierarki. Knapp-semantikken kommer fra <summary>.
1.3.1 Informasjon og relasjoner	A	Ikke skjul innhold brukeren må se for å komme videre. ReadMore er for utdypende, sekundær informasjon. Innhold som er nødvendig for å forstå eller fullføre en oppgave skal vises åpent, ikke gjemmes bak en label.

Håndtert av komponenten (15)

Kriterium	Nivå	Hva komponenten gjør
1.3.1 Informasjon og relasjoner	A	Semantisk struktur via native <details>/<summary>: labelen er en disclosure-knapp, innholdet er programmessig knyttet til den ved å ligge inne i samme <details>. Ingen ekstra ARIA er nødvendig.
1.3.2 Meningsfull rekkefølge	A	Innhold følger naturlig leserekkefølge i DOM: label (summary) før innhold (content).
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	Label bruker --ix-color-foreground-accent-default og innhold --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å label oppfyller 3:1 kontrastkrav via --ix-outline-default.
2.1.1 Tastatur	A	Labelen 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: label før innhold.
2.4.7 Synlig fokus	AA	Tydelig fokusindikator på label (:focus-visible).
2.5.8 Målstørrelse (minimum)	AA	Labelen har min. 44px høyde (touch-mål) via min-height + padding.
3.2.1 Ved fokus	A	Ingen kontekstendring ved fokus. Å åpne/lukke seksjonen flytter ikke fokus og laster ikke ny kontekst.
3.2.2 Ved inndata	A	Å aktivere labelen 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 — labelen er ren tekst sendt inn av konsumenten.
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- og åpne/lukke-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å label.
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

ReadMore

Prop	Type	Standard	Beskrivelse
label	ReactNode		Klikkbar label (kort og beskrivende)
children	ReactNode		Innholdet som avsløres — tekst, lister eller andre komponenter
defaultOpen	boolean	false	Start seksjonen åpen. Speiler native <details open>
className	string		Ekstra CSS-klasser på rot-<details>