Skip to content

Commit

Permalink
docs: update accessibility
Browse files Browse the repository at this point in the history
  • Loading branch information
eirikbacker committed Nov 26, 2024
1 parent edd811b commit 3aa0b5f
Showing 1 changed file with 1 addition and 3 deletions.
4 changes: 1 addition & 3 deletions packages/react/src/components/Details/Details.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -94,11 +94,9 @@ Details skal brukes til maksimalt to avsnitt innenfor hvert nedtrekk. Sørg for

## Tilgjengelighet

Som standard er `Details.Summary` et `h1` element. Du må selv velge riktig overskriftsnivå for din side. Hvis `Details.Summary` er en del av en større overskrift, kan du bruke `h2`, `h3` osv. for å opprettholde en logisk rekkefølge.

[`Chevron`](https://aksel.nav.no/ikoner/ChevronDown)-ikonet er bevisst plassert til venstre for teksten, av hensyn til brukerer med nedsatt synsfelt. Der er det lettere for brukeren å se det (fordi vi leser fra venstre). Mange brukere tror at de må peke på og velge ikonet for å åpne.

Ikke plasser andre interaktive elementer inn i `Details`-heading, da hele raden skal være klikkbar. Ikonet og teksten skal _ikke_ lenke til ulike handlinger (for eksempel at teksten går videre til en side, mens ikonet åpner listen). Brukerne forventer ikke at ikon og tekst skal gi ulikt resultat når de velger dem.
Ikke plasser andre interaktive elementer inn i `Details.Summary`, da hele raden skal være klikkbar. Ikonet og teksten skal _ikke_ lenke til ulike handlinger (for eksempel at teksten går videre til en side, mens ikonet åpner listen). Brukerne forventer ikke at ikon og tekst skal gi ulikt resultat når de velger dem.

`Tab` : Flytter fokus til neste element som kan ha fokus \
`Shift` + `Tab` : Flytter fokus til forrige element som kan ha fokus \
Expand Down

0 comments on commit 3aa0b5f

Please sign in to comment.