Hopp til hovedinnhold

Hva leter du etter?

Prøv å søke etter…

Komponenter

Badge

Badge er ein ikkje-interaktiv komponent som viser status med eller utan innhald. Bruk tag dersom du skal ha tekst i staden for tal.

Dette må du sjekke selv

Badge som viser viktig informasjon skal inngå i det interaktive elementets tilgjengelige navn.

Hvis badge plasseres inline (inni elementet), blir innholdet en del av det tilgjengelige navnet. Eksempel: <button> med teksten "Innboks" og badge med "2" leses opp som "Innboks 2".

WCAG: 1.3.1 informasjon og relasjoner


Pass på at det helhetlige budskapet kommer frem i tilfeller der en badge står utenfor den tilhørende komponenten eller mangler innhold.

Dette er særlig relevant når en badge vises i hjørnet av en knapp eller et ikon. I slike tilfeller bør informasjonen i badgen inkluderes i elementets tilgjengelige navn, for eksempel ved hjelp av aria-label.

WCAG: 1.3.1 informasjon og relasjoner


Badge som endrer verdi (for eksempel 1 → 2) skal annonseres til skjermlesere

WCAG: 4.1.3 Statusbeskjeder

Rediger denne siden på github.com (åpnes i ny fane)