Eksempler

Retningslinjer

Antall per side

Hvis du har flere alerts på samme side vil de stjele oppmersomhet fra hverandre. Tenk spesielt over bruken av info-varianten. Den skal ikke brukes som et dekorativt panel.

Ikke lag andre versjoner

Det er viktig at alerts har samme utseende og formspråk på tvers av produktene, så den skal ikke justeres.

Gjør

Unngå

Lenker

Lenker i komponenten skal være svart med underline for å ivareta fargekontrast. Dette skjer automatisk hvis du bruker Link-komponenten.

Innhold

Det er ikke alle som har en intuitiv forståelse av betydningen av ikonene og fargene, derfor er det viktig at ordene du velger gjør det åpenbart for brukerne hvordan de skal forholde seg til informasjonen i varselet. Særlig for feilmeldinger er det viktig at du forteller om det er noe de må eller kan gjøre for å komme videre med oppgaven sin.

Knapper

Hvis du legger til egne knapper i alerten, bruk kun secondary-neutral. Ikke bruk knapper i inline-varianten.

Tilgjengelighet

Alternativtekst

Ikonene har default alternativtekst som kommuniserer alvorlighetsgrad: "Informasjon", "Suksess", "Advarsel" og "Feil". Den alternative teksten blir presentert som en del av innholdet for skjermleserbrukere.

Interaksjon med skjermleser

Alert-komponenten presenteres som vanlig statisk innhold for skjermleserbrukere. Benyttes variant="error" er det sannsynlig at beskjeden krever brukerens umiddelbare oppmerksomhet eller handlinger. Da kan du legge til role="alert" som gjør at innholdet i komponenten leses opp umiddelbart.

Hvis du bruker variant="warning" eller variant="success", kan du vurdere å bruke role="status". Da skal skjermlesere gjøre seg ferdig med det som leses før innholdet i Alert leses opp.

Ved bruk av varianten "info" trengs ikke role="alert" eller role="status".

Props

Tokens