designsystemet icon indicating copy to clipboard operation
designsystemet copied to clipboard
verified publisher icon digdir

a11y test on `Badge`

Open Barsnes opened this issue 8 months ago • 2 comments

We are currently unsure about what a11y tips to give to consumers. Currently badge won't give any info to screenreaders, since they are rendered using only CSS.

The element connected to Badge needs to tell the user the same info using aria-label. We need to investigate what recommend:

Here are some usecases we need to check, to make sure they work the same (or if they don't)

  • badge around an icon in a button
  • badge around a button
  • inline badge

Ref: https://linje.entur.no/komponenter/feedback/badge

Barsnes avatar May 08 '25 11:05 Barsnes

Currently badge won't give any info to screenreaders, since they are rendered using only CSS.

This is false, at least for NVDA in Chrome on windows Image

Barsnes avatar Nov 06 '25 08:11 Barsnes

VoiceOver + Edge: "99+ Innboks, knapp, gruppe" "10 Meldinger, knapp, gruppe" VoiceOver + Safari: "99+ Innboks, knapp" "10 Meldinger, knapp"

Camulos avatar Nov 06 '25 09:11 Camulos

Elementet går inte att markera och få uppläst i Safari+VoiceOver (macOS), fungerar i Chrome+VoiceOver

42tte avatar Dec 04 '25 08:12 42tte