Alert

Dette må du sjekke selv

Alert som vises eller oppdateres etter at siden er lastet skal bli kunngjort automatisk av skjermlesere.

Bruk role="alert" for kritiske meldinger som krever umiddelbar oppmerksomhet.
Bruk role="status" for mindre kritiske meldinger.

Alert skal være plassert slik at den følger leserekkefølgen.

Dette betyr at Alert skal ligge i DOM på en måte som gir en logisk leserekkefølge for skjermlesere.
Hvis Alert har en overskrift, skal overskriftsnivået være korrekt i sidestrukturen.

Alert-tekst skal forklare hva som har skjedd og hva det betyr for brukeren.

Eksempel: “Endringene dine er lagret” eller “Det oppstod en feil ved lagring. Prøv igjen senere”. Ikke bare: “Feil” eller “Advarsel”.

Se mønsteret for systemvarsler for anbefalinger om tekst.

Alert i live region

Dersom du vil at varselet skal bli lest opp dynamisk, må du legge Alert i en live region. Regionen skal være rundt Alert-komponenten, ikke på den.

Ut av boksen blir Alert presentert for skjermleserbrukere som vanlig statisk innhold. For varsler som oppstår dynamisk kan du selv definere en live region for skjermlesere, men vær oppmerksom på hvilken oppførsel dette medfører. Du kan lese mer om dette i MDN sin dokumentasjon om ARIA live regions.

Legg spesielt merke til at live-regionen — altså elementet med attributt role="alert", role="status" eller aria-live med verdi "assertive" eller "polite" — må eksistere på siden før varselet som skal leses opp.

For dynamiske varsler er det mest aktuelt å bruke role="alert" for kritiske varsel eller role="status" for mindre kritiske varsel, som beskrevet i mønsteret for systemvarsler. Se også alert role og status role hos MDN.

Ikke kombiner role="alert" og aria-live, siden dette kan føre til at varselet leses opp dobbelt i VoiceOver (mozilla.org).

Du bør kombinere role="status" og aria-live="polite" for å maksimere kompatibilitet (mozilla.org).

Unable to parse html

const CorrectLiveRegionReact = () => {
  const [showAlert, setShowAlert] = useState(false);
  return (
    <>
      <Button
        data-size='sm'
        variant='secondary'
        onClick={() => setShowAlert((value) => !value)}
      >
        {showAlert ? 'Skjul varsel' : 'Handling som fører til varsel'}
      </Button>
      {/* Korrekt bruk: role="alert" ligger på elementet der varselet dukker opp */}
      <div role='alert'>
        {showAlert && (
          <Alert data-color='warning'>
            <Heading
              level={2}
              data-size='xs'
              style={{
                marginBottom: 'var(--ds-size-2)',
              }}
            >
              Vi klarer ikke lagre skjemaet
            </Heading>
            <Paragraph>
              Vi har mistet forbindelsen med serveren og får ikke lagret
              skjemaet. Vent litt og prøv en gang til.
            </Paragraph>
          </Alert>
        )}
      </div>
    </>
  );
};

render(<CorrectLiveRegionReact />)