Message
Message formidler status eller resultatet av en handling uten å avbryte flyten. Den finnes i fire varianter: informasjon, suksess, advarsel og feil. Komponenten brukes inline, tett på innholdet den forklarer, og kan strekkes til full bredde av forelderen.
For at meldinger skal annonseres pålitelig for skjermlesere må <Message> ligge inni en <MessageRegion>. Regionen eier de stabile ARIA-live-regionene som annonseringen skriver til. En <Message> uten region rendres visuelt, men annonseres ikke (og logger en advarsel i utviklingsmodus).
Egnet til
- Vise informasjon som gir kontekst eller forklaring
- Bekrefte at noe har gått bra
- Gjøre brukeren oppmerksom på noe viktig
- Vise advarsler eller feil som ikke stopper flyten
- Forklare konsekvenser eller neste steg
Uegnet til
- Kritiske feil som stopper videre fremdrift
- Midlertidige bekreftelser (bruk toast)
- Situasjoner som krever aktiv bekreftelse (bruk Modal)
- Globale systembeskjeder (bruk SystemMessage)
- Lange eller komplekse forklaringer som krever egen side
Bruk
Eksempler
Varianter
Velg status ut fra budskapet: info for nøytral informasjon, success for bekreftelse, warning for noe brukeren bør være oppmerksom på, og danger for noe som har gått galt og bør følges opp. Hver status har et fast statusikon som rendres automatisk. Fargene kobles via data-status, som setter --ix-color-status-*-variablene. Meldingsflaten bruker surface-fargen for sin status.
Med tittel
Budskapet (children) er alltid med og bærer innholdet. Trenger meldingen en overskrift, kan du legge til en valgfri title over budskapet. Den løfter fram hovedpoenget når meldingen er lengre. En kort melding klarer seg ofte uten tittel.
Med lenke
En lenke kan peke videre til mer informasjon. Lenken er ikke en egen prop. Den skrives som en del av innholdet med den vanlige Indeks-lenken LinkText (React) / .ix-link-text (HTML). Det er ingenting message-spesifikt ved lenken. Lenketeksten skal beskrive målet og være meningsfull lest alene.
Med lukkeknapp
En valgfri lukkeknapp lar brukeren skjule meldingen. I React skjuler komponenten seg selv når brukeren klikker på krysset; onClose kalles i tillegg hvis du trenger å rydde opp egen tilstand. I ren HTML må du fjerne eller skjule elementet selv. Lukkeknappen må ha et tilgjengelig navn (closeLabel / aria-label).
Full bredde
Sett fullWidth (React) / data-full-width (HTML) for at meldingen skal strekke seg til full bredde av forelderen. I en vertikal VStack / ix-stack (align-items: flex-start) krymper en melding ellers til innholdsbredden; fullWidth overstyrer det så den fyller bredden. Avrundede hjørner beholdes. Full bredde kombineres ofte med en lukkeknapp.
Retningslinjer
Velg status etter hva brukeren skal gjøre
info gir kontekst uten å kreve noe. success bekrefter at handlingen gikk gjennom. warning
ber brukeren se opp for noe. danger sier at noe er galt og må ryddes opp i. Velger du etter
farge istedenfor etter budskap, blir alt viktig.
Plasser meldingen ved det den gjelder
En melding om et felt hører ved feltet, en melding om siden hører øverst på siden. Gjelder
budskapet hele seksjonen eller kolonnen, sett fullWidth så meldingen fyller bredden i stedet
for å krympe til teksten sin. Hører den til et avgrenset innhold, la den krympe.
Skriv kort, og uten teknisk språk
Én tittel som sier hva som skjedde, og noen få setninger som sier hva brukeren gjør nå. Feilkoder og systemnavn hjelper ingen som ikke har lest koden.
Ikke avslutt tittel eller enkeltsetning med punktum
Titler står alltid uten punktum. Er meldingen én setning, sløyfer du punktumet der også: det leses som en beskjed, ikke som en tekstblokk. Er brødteksten flere setninger, setter du punktum som normalt.
Bruk færre meldinger
Fem meldinger på en side er fem ting brukeren skal veie mot hverandre, og da veier ingen av dem noe. Slå sammen det som hører sammen, og fjern det som bare bekrefter det åpenbare.
La teksten bære budskapet
Ikonet og fargen sier hvilken type melding det er, men aldri hva den handler om. En bruker som ikke skiller rødt fra grønt, skal få akkurat samme beskjed. Selve flaten er ikke interaktiv, så en handling må ligge i en knapp eller lenke inni meldingen.
Designvalg
Alle meldinger leses opp fortløpende i én polite-region, i stedet for at en melding avbryter en
annen. Message brukes typisk som tilbakemelding på skjema eller andre brukerhandlinger, og som
regel er det bare én melding om gangen. Dukker flere opp samtidig, prioriterer vi at alt blir lest
framfor at noe hoppes over. Det betyr at status (info, success, warning, danger) bare styrer farge
og ikon, ikke annonseringsprioritet: også en danger-melding leses høflig i kø.
Universell utforming
Hva du selv må sørge for
- Pakk meldinger i en
<MessageRegion>. Regionen eier de stabile ARIA-live-regionene som annonseringen skriver til. Uten den annonseres ikke meldingen. Se MessageRegion. - Skriv alltid beskrivende tekst. Message skal alltid ha et budskap (children) som bærer innholdet (tittel er en valgfri overskrift), og teksten må stå alene uten å være avhengig av ikon eller farge.
- Gi lukkeknappen et tilgjengelig navn. Send inn
closeLabel(React) elleraria-label(HTML), f.eks. «Lukk melding». Konsumenten er ansvarlig for riktig språk; det finnes ingen hardkodet fallback. - Skriv meningsfull lenketekst. Lenketeksten skal beskrive målet og gi mening lest alene, ikke «klikk her».
- Sett
announceOnPageLoadfor meldinger som er til stede ved sidelast. Meldinger som settes inn dynamisk (etter en handling) annonseres automatisk, men en melding som allerede er der ved sidelast er stille som standard. SettannounceOnPageLoadfor f.eks. server-rendret success/feil etter en redirect. - Sett opp egen live-region ved ren HTML-bruk.
MessageRegion-automatikken finnes kun i React. I ren HTML må du selv ha en stabil, tomrole="status"-region (aria-live="polite",aria-atomic="false") i DOM og legge meldingsteksten til som en egen node når meldingen settes inn.
Hva komponenten gjør automatisk
- Annonsering via
<MessageRegion>: det synlige Message-elementet har bevisst ingenrole/aria-live. I stedet legger komponenten meldingsteksten til som en egen node i en stabil, skjultpolitelive-region i<MessageRegion>. Stabile regioner er det som gjør annonsering pålitelig: en region som settes inn samtidig med innholdet annonseres ofte ikke. Hver melding blir en egen node (aria-atomic="false"), slik at flere meldinger som dukker opp tett etter hverandre alle leses opp fortløpende i tur, uten å avbryte hverandre. - Stille ved sidelast: meldinger som finnes ved første sidelast leses ikke opp automatisk (så en side full av meldinger ikke leser seg selv opp). Bruk
announceOnPageLoadfor å overstyre. Meldinger som settes inn senere annonseres automatisk. - Statusikon rendres som en dekorativ
<ix-icon data-badge name="…" aria-hidden="true">: en sirkel i status-fill(følgerdata-status) med en lys glyf oppå (info_i,checkellerpriority_highper status).aria-hidden="true"holder den ute av tilgjengelighetstreet; varianten formidles av teksten. - Fokusindikator: meldingen får ingen ring rundt seg selv; kun lukkeknappen har sin egen
:focus-visible-ring. Lenker bruker:focus-visible.
Tastaturnavigasjon
| Tast | Handling |
|---|---|
| Tab | Flytter fokus til lenke og/eller lukkeknapp |
| Shift+Tab | Flytter fokus til forrige fokuserbare element |
| Enter | Aktiverer fokusert element — følger lenke eller lukker meldingen |
| Space | Aktiverer lukkeknappen når den har fokus |
Skjermleser
- Dynamisk innsetting: teksten legges til som en egen node i MessageRegion sin stabile polite-region (role="status") og annonseres høflig når skjermleseren er ledig
- Flere meldinger samtidig: hver melding blir en egen node og leses fortløpende i tur (aria-atomic="false"), uten at den siste overskriver eller avbryter de andre
- Til stede ved sidelast: stille som standard — annonseres kun hvis announceOnPageLoad er satt
- Lukkeknapp ved fokus: "[closeLabel], knapp"
WCAG-kriterier
Sist gjennomgått: 2026-06-24 — alle 56 WCAG 2.2-kriterier vurdert
WCAG-kriterier9 ditt ansvar · 15 håndtert · 38 ikke relevant · 0 ikke på plass
Ditt ansvar (9)
| Kriterium | Nivå | Hva du må gjøre |
|---|---|---|
| 4.1.3 Statusmeldinger | AA | Pakk Message i en MessageRegion. For at meldinger skal annonseres pålitelig for skjermlesere må <Message> ligge inni en <MessageRegion>. Regionen eier de stabile, alltid-tilstedeværende ARIA-live-regionene som annonseringen skriver til. Det synlige Message-elementet har bevisst ingen role/aria-live, fordi en live-region som settes inn samtidig med innholdet annonseres upålitelig. En Message uten region rendres visuelt, men annonseres ikke (og logger en advarsel i utviklingsmodus). |
| 1.4.1 Bruk av farge | A | Beskrivende tekst er påkrevd og må stå alene. Message skal alltid ha et budskap (children) som bærer innholdet (tittel er en valgfri overskrift). Teksten må formidle budskapet uten å være avhengig av ikon eller farge. For varianten danger/warning bør teksten også forklare konsekvensen eller hva brukeren bør gjøre videre. |
| 1.1.1 Ikke-tekstlig innhold | A | Beskrivende tekst er påkrevd og må stå alene. Message skal alltid ha et budskap (children) som bærer innholdet (tittel er en valgfri overskrift). Teksten må formidle budskapet uten å være avhengig av ikon eller farge. For varianten danger/warning bør teksten også forklare konsekvensen eller hva brukeren bør gjøre videre. |
| 4.1.3 Statusmeldinger | AA | Sett announceOnPageLoad for meldinger til stede ved sidelast. Meldinger som settes inn dynamisk (etter en handling) annonseres automatisk via MessageRegion. En melding som allerede er til stede ved første sidelast er stille som standard, slik at en side full av meldinger ikke leser seg selv opp. Sett announceOnPageLoad=true for meldinger som er til stede ved sidelast og likevel skal leses opp — typisk server-rendret success/feil etter en redirect tilbake fra en tredjepart. |
| 4.1.2 Navn, rolle, verdi | A | Gi lukkeknappen et tilgjengelig navn via closeLabel. Lukkeknappen har kun et dekorativt ikon. Send inn closeLabel (React) eller aria-label (HTML), f.eks. «Lukk melding». Uten dette hører skjermleserbrukeren bare «knapp». Konsumenten er ansvarlig for riktig språk (bokmål «Lukk melding», nynorsk «Steng melding», engelsk «Close message») — komponenten har ingen hardkodet fallback. |
| 2.4.6 Overskrifter og ledetekster | AA | Gi lukkeknappen et tilgjengelig navn via closeLabel. Lukkeknappen har kun et dekorativt ikon. Send inn closeLabel (React) eller aria-label (HTML), f.eks. «Lukk melding». Uten dette hører skjermleserbrukeren bare «knapp». Konsumenten er ansvarlig for riktig språk (bokmål «Lukk melding», nynorsk «Steng melding», engelsk «Close message») — komponenten har ingen hardkodet fallback. |
| 2.4.4 Formål med lenke (i kontekst) | A | Skriv meningsfull lenketekst. Lenke er ikke en egen prop — den skrives som en del av innholdet med den vanlige Indeks-lenken LinkText (React) eller .ix-link-text (HTML). Lenketeksten skal beskrive målet, ikke være «klikk her» eller «les mer» uten kontekst, og gi mening lest isolert av en skjermleser. Lenketeksten er aldri hardkodet — konsumenten sender den inn på riktig språk. |
| 2.4.9 2.4.9 | ? | Skriv meningsfull lenketekst. Lenke er ikke en egen prop — den skrives som en del av innholdet med den vanlige Indeks-lenken LinkText (React) eller .ix-link-text (HTML). Lenketeksten skal beskrive målet, ikke være «klikk her» eller «les mer» uten kontekst, og gi mening lest isolert av en skjermleser. Lenketeksten er aldri hardkodet — konsumenten sender den inn på riktig språk. |
| 4.1.3 Statusmeldinger | AA | Sett opp en stabil live-region selv ved ren HTML-bruk. MessageRegion-automatikken finnes kun i React. Bruker du ren HTML må du selv legge én stabil, tom live-region i DOM ved sidelast — role="status" aria-live="polite" aria-atomic="false" — og legge meldingsteksten til som en egen node når meldingen settes inn. Regionen må eksistere før teksten settes inn for at skjermlesere skal fange opp endringen, og aria-atomic="false" gjør at flere meldinger leses fortløpende i tur i stedet for at den siste overskriver de andre. |
Håndtert av komponenten (15)
| Kriterium | Nivå | Hva komponenten gjør |
|---|---|---|
| 1.3.1 Informasjon og relasjoner | A | Semantisk struktur: tittel i <strong>, brødtekst i <p>. |
| 1.3.2 Meningsfull rekkefølge | A | Innhold følger naturlig leserekkefølge i DOM: ikon, tittel, tekst, evt. lenke, og lukkeknapp til slutt. |
| 1.4.1 Bruk av farge | A | Variant kommuniseres med ikon + tekst i tillegg til farge — farge er aldri eneste signal. |
| 1.4.3 Kontrast (minimum) | AA | Tekst bruker --ix-color-foreground-main-default på status-surface, som oppfyller kontrastkravet for alle statuser i både light og dark mode. |
| 1.4.4 Endre tekststørrelse | AA | Relative enheter (font-size-tokens) — skalerer korrekt ved 200 % zoom. |
| 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 oppfyller 3:1 kontrastkrav via --ix-outline-default. Kun lukkeknappen har sin egen ring (:focus-visible) — meldingen ringes ikke rundt seg selv. |
| 2.1.1 Tastatur | A | Lukkeknapp er native <button> og aktiveres med Enter/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. |
| 2.4.7 Synlig fokus | AA | Tydelig fokusindikator: kun lukkeknappen har sin egen ring (:focus-visible) — meldingen ringes ikke rundt seg selv. Lenker bruker :focus-visible. |
| 2.5.8 Målstørrelse (minimum) | AA | Lukkeknappen har min. 44×44 px touch-mål. |
| 3.2.1 Ved fokus | A | Ingen kontekstendring ved fokus. Containeren er ikke klikkbar og har ingen hover-state. |
| 4.1.2 Navn, rolle, verdi | A | Native <button> for lukk (rolle button, navn fra aria-label). |
| 4.1.3 Statusmeldinger | AA | Annonsering skjer via én stabil, alltid-tilstedeværende polite live-region i <MessageRegion>. Det synlige elementet har ingen role/aria-live; hver melding legges til som en egen node (aria-atomic="false") etter at regionen er montert, slik at dynamisk innsatte meldinger annonseres pålitelig og flere meldinger leses fortløpende i tur uten å avbryte hverandre. Meldinger til stede ved sidelast er stille med mindre announceOnPageLoad er satt. |
Ikke relevant (38)
| Kriterium | Nivå | Hvorfor ikke relevant |
|---|---|---|
| 1.1.1 Ikke-tekstlig innhold | A | Statusikonet er en dekorativ <ix-icon data-badge> (sirkel + glyf via mask-image). Den er rent dekorativ og merkes aria-hidden="true", så den eksponeres ikke for skjermlesere; varianten formidles av tekst. Derfor er ingen alt-tekst nødvendig. |
| 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 | Ingen blinkende eller glimtende innhold. |
| 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.4.11 Fokus ikke skjult (minimum) | AA | Native <button> dekkes ikke av andre elementer ved fokus. |
| 2.5.1 Pekerbevegelser | A | Ingen gestbaserte interaksjoner — enkelt klikk/tap. |
| 2.5.2 Avbryt peker | A | Native elementer — nettleseren håndterer pekerinteraksjon (pointer-cancel). |
| 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.2 Ved inndata | A | Ingen automatisk kontekstendring ved fokus eller input. |
| 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
| Prop | Type | Standard | Beskrivelse |
|---|---|---|---|
status | 'info' | 'success' | 'warning' | 'danger' | Status; styrer farge og ikon. Settes som data-status slik at fargevariablene kobles automatisk. Påkrevd | |
title | string | Valgfri overskrift over budskapet. Overstyrer HTML-attributtet title (nettleserens tooltip): teksten rendres synlig og settes ikke på rot-elementet | |
children | ReactNode | Budskapet — påkrevd. Rendres rått — skriv selv <p> og evt. en lenke med LinkText. Påkrevd | |
closeLabel | string | aria-label på lukkeknappen. Lukkeknappen vises kun når denne er satt | |
onClose | () => void | Kalles etter at meldingen er skjult ved klikk på lukkeknappen. Komponenten skjuler seg selv; onClose er kun for ev. opprydding | |
fullWidth | boolean | false | Strekk meldingen til full bredde av forelderen (i stedet for å krympe til innholdsbredden i en vertikal stack). Settes som data-full-width |
announceOnPageLoad | boolean | false | Annonser meldingen selv om den er til stede ved første sidelast. Krever en omsluttende <MessageRegion> |
announceText | string | Overstyr teksten som leses opp. Standard er den synlige teksten (tittel + brødtekst). Bruk for å lese opp noe kortere ved rikt innhold | |
announce | boolean | true | Sett false for å ikke annonsere meldingen i det hele tatt. Bruk det når noe annet allerede får meldingen lest opp — typisk at du flytter fokus til den |
className | string | Ekstra CSS-klasser på rot-elementet |
Øvrige div-attributter (id, tabIndex, role, aria-*, data-*, onClick …) sendes videre til rot-elementet. Det gjør at meldingen kan brukes som fokus- eller ankermål — for eksempel som feiloppsummering i et skjema:
<Message
status="danger"
title="Skjemaet har 3 feil som må rettes"
role="group"
aria-label="Skjemaet har 3 feil som må rettes"
tabIndex={-1}
ref={oppsummeringRef}
announce={false}
>
…
</Message>
role="group" er med fordi en <div tabindex="-1"> uten rolle ikke får lest opp sin aria-label. announce={false} fordi fokusflyttingen allerede leser opp meldingen; uten den leses den to ganger.
Attributtene komponenten eier selv (data-status, data-full-width) kan ikke overstyres — de utledes av status og fullWidth.
MessageRegion
MessageRegion er en obligatorisk wrapper rundt React-meldinger. Den rendrer ingenting synlig selv. Den legger én stabil, skjult ARIA-live-region (polite) i DOM som meldingene annonseres gjennom. Uten en omsluttende MessageRegion rendres <Message> visuelt, men annonseres ikke for skjermlesere (og logger en advarsel i utviklingsmodus).
Stabile, alltid-tilstedeværende regioner er det som gjør annonseringen pålitelig: en live-region som settes inn i DOM samtidig med innholdet rekker ofte ikke å bli registrert før teksten er der, og annonseres da ikke. MessageRegion har derfor regionen klar fra start og legger kun teksten til ved behov. Hver melding legges til som en egen node, slik at flere meldinger leses opp fortløpende i tur i stedet for at den siste overskriver de andre.
Du kan ha én felles MessageRegion rundt et helt skjema eller en hel side, eller én rundt hver melding. Begge fungerer. Det enkleste er å plassere én region høyt i treet og la alle meldinger ligge inni den.
Annonsering ved sidelast
Meldinger som settes inn dynamisk (etter at siden er ferdig lastet, f.eks. som svar på en handling) annonseres automatisk. Meldinger som allerede er til stede ved første sidelast er stille som standard, slik at en side full av meldinger ikke leser seg selv opp ved innlasting.
Noen meldinger er server-rendret eller til stede ved sidelast og skal likevel leses opp. Det typiske tilfellet er en success- eller feilmelding etter en redirect tilbake fra en tredjepart. Da setter du announceOnPageLoad på selve <Message>:
<MessageRegion>
<Message status="success" announceOnPageLoad>
Betalingen er gjennomført
</Message>
</MessageRegion>
MessageRegion Props / API
| Prop | Type | Standard | Beskrivelse |
|---|---|---|---|
children | ReactNode | Innholdet regionen omslutter, typisk én eller flere <Message>. Regionen rendrer i tillegg én skjult live-region |
Tilpasning med CSS
Trenger du ix-message-stylingen på HTML du setter sammen selv, uten React-komponenten, kan du bruke klassene direkte på elementene dine. Det finnes ingen web component for Message; rotklassen .ix-message brukes på en <div>.
Tilgjengelige klasser og selektorer
| Element/tilstand | Selektor / attributt |
|---|---|
| Rot (melding) | .ix-message |
| Status | data-status="info" / "success" / "warning" / "danger" (kobler --ix-color-status-* automatisk) |
| Statusikon | <ix-icon data-badge name="…" aria-hidden="true"> (første barn — sirkel følger data-status, glyf via name) |
| Tekstblokk | .ix-message__body |
| Tittel | .ix-message__title |
| Lenke | .ix-link-text (vanlig Indeks-lenke — ingen message-spesifikk klasse) |
| Lukkeknapp | .ix-interactive-icon (+ .ix-message__close for plassering) med <ix-icon name="close"> |
| Full bredde | data-full-width (strekker meldingen til full bredde av forelderen) |
Statusikonet skrives som <ix-icon data-badge name="…" aria-hidden="true"> som første barn av .ix-message. data-badge gir sirkelen, som følger status-fill via data-status på meldingen; glyfen settes med name (info_i, check eller priority_high).
Annonsering for skjermlesere uten React
React-komponenten annonserer via en <MessageRegion> (en stabil, skjult live-region). I ren HTML finnes ikke denne automatikken. Du må sette opp regionen selv. Den pålitelige oppskriften:
- Legg en stabil, tom live-region i DOM ved sidelast (den må eksistere før du skriver tekst inn i den):
<div class="ix-sr-only" role="status" aria-live="polite" aria-atomic="false"></div>
- Når du setter inn en melding dynamisk, legg den opplest teksten til som en egen node i regionen (i stedet for å erstatte innholdet). Med
aria-atomic="false"leses kun den nye noden, slik at flere meldinger som dukker opp tett etter hverandre alle leses opp fortløpende i tur. Fjern gjerne noden igjen etter et lite øyeblikk; det avbryter ikke opplesningen og hindrer at gammel tekst leses på nytt ved navigasjon.
Den enkle varianten er å sette role/aria-live rett på .ix-message-elementet, som i eksempelet under. Det fungerer rimelig for role="alert" ved dynamisk innsetting, men er upålitelig for aria-live="polite", og meldinger som er til stede ved sidelast blir ikke annonsert i det hele tatt.
Eksempel: ren HTML
<div class="ix-message" data-status="info" aria-live="polite">
<ix-icon data-badge name="info_i" aria-hidden="true"></ix-icon>
<div class="ix-message__body">
<strong class="ix-message__title">Behandling pågår</strong>
<p>Vi har mottatt søknaden din og behandler den nå</p>
<a class="ix-link-text" href="/saksbehandling">Les mer om saksbehandling</a>
</div>
<button class="ix-interactive-icon ix-message__close" data-size="md" type="button" aria-label="Lukk melding">
<ix-icon name="close" aria-hidden="true" class="ix-icon"></ix-icon>
</button>
</div>
<div class="ix-message" data-status="info" data-full-width aria-live="polite">
<ix-icon data-badge name="info_i" aria-hidden="true"></ix-icon>
<div class="ix-message__body">
<p>Vi oppdaterer nettbanken i natt mellom 02 og 04</p>
</div>
<button class="ix-interactive-icon ix-message__close" data-size="md" type="button" aria-label="Lukk melding">
<ix-icon name="close" aria-hidden="true" class="ix-icon"></ix-icon>
</button>
</div>