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
Bruk
Laster...
Eksempler
Åpen som standard
Marker seksjonen med open (HTML) eller defaultOpen (React) om innholdet bør vises ved start.
Laster...
Rikt innhold
Innholdet kan bestå av tekst, lister, lenker og andre komponenter.
Laster...
Retningslinjer
Si hva som kommer når brukeren åpner
Labelen er alt brukeren har å gå etter, så den må gi mening lest alene, med det viktigste ordet først. «Slik regner vi ut renten» forteller hva som ligger bak. «Les mer» gjør det ikke.
Bruk ReadMore alene, Accordion for flere
ReadMore er én forklaring i en tekstflate. Har du flere seksjoner som hører sammen og bør stå samlet, hører de i en Accordion.
Designvalg
ReadMore bygger på native <details>/<summary> i stedet for en button-basert disclosure med
aria-expanded/aria-controls. Begrunnelsen er den samme som for
Accordion.
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 utenaria-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).
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-09-04 — 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-component-button-tertiary-foreground-default (samme tekstfarge som en tertiary-knapp) 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 er målt til 36px høy (chevron-ikonet på 20,25px + 2 × 8px padding) og strekker seg over hele label-teksten i bredden — godt over minimumskravet på 24 × 24 CSS-piksler. Med [data-density='compact'] er den 28px, fortsatt over kravet. |
| 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> |
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 og selektorer
| 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.