From 38f5bd4bb59129fe2e5e7e6ee45cabce82e38c7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marianne=20R=C3=B8svik?= Date: Mon, 29 Apr 2024 11:47:33 +0200 Subject: [PATCH] docs: added guidelines for the SkipLink component (#1879) Co-authored-by: Tobias Barsnes --- .../src/components/SkipLink/SkipLink.mdx | 35 ++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/SkipLink/SkipLink.mdx b/packages/react/src/components/SkipLink/SkipLink.mdx index 18e7e7b7a0..7ea15850d6 100644 --- a/packages/react/src/components/SkipLink/SkipLink.mdx +++ b/packages/react/src/components/SkipLink/SkipLink.mdx @@ -6,7 +6,7 @@ import * as SkipLinkStories from './SkipLink.stories'; # SkipLink -Skiplink-komponenten hjelper de som bruker tastatur og skjermleser med å hoppe over gjentakende innhold og raskt få tilgang til viktige seksjoner eller funksjoner på siden. +Vi bruker snarvei-komponenten `SkipLink` når vi vil hjelpe folk som kun bruker tastaturet til å navigere, slik at de enkelt kan gå til det viktigste innholdet på en side. Snarveien bør være det første elementet markøren går til når du navigerer med tastaturet. @@ -22,3 +22,36 @@ import { SkipLink } from '@digdir/designsystemet-react'; Region som kan motta fokus fra skiplink. ``` + +## Retningslinjer for `SkipLink` + +Noen brukere navigerer med Tab på tastaturet når de skal flytte markøren forbi lenker eller skjemalementer på en nettside. Når vi inkluderer en snarvei-komponent på siden, får disse brukerne muligheten til å gå forbi alle navigeringslenkene øverst på siden, og kan gå direkte til hovedinnholdet. + +Det er vanligvis et krav at det skal være med en snarvei-komponent i faste sidemaler til alle nettsteder. + +Hvis det er færre enn fem tab-stopp til hovedinnholdet er det ikke sikkert at du trenger å legge inn en `SkipLink`, det fører bare til at det blir flere knapper å forholde seg til. + +Vi plasserer snarveien som det første fokuserbare elementet. Hvis siden har et varsel om informasjonskapsler, legger du `SkipLink` rett etter koden for dette varselet. + +Snarveien bør skille seg tydelig ut fra resten av innholdet, slik at folk som kan se, men bruker tastaturet til å navigere, kjenner igjen dette element før de flytter videre. + +
+ +## Tekst i komponenten + +Pass på at teksten tydelig sier hva snarveien skal brukes til. Bruk en enkel tekst, som for eksempel «Gå direkte til innholdet» eller «Hopp direkte til innholdet». + +
+ +## Tilgjengelighet + +Snarvei-komponenten er vanligvis ikke synlig før et trykk på tastaturet aktiverer den. + +- Snarveien må bli godt synlig når den får fokus. +- Teksten på snarveien må ha riktig fargekontrast. + +
+ +Vær oppmerksom på at noen automatiske tester for tilgjengelighet kan varsle om at snarveien mangler i et landemerke. Dette varslet gjelder ikke for snarveier, så det kan du overse. + +Pass på at snarveier oppfører seg forutsigbart. En snarvei med teksten «Gå direkte til innholdet» skal flytte brukerens fokus til starten på innholdet, ikke til starten av første avsnitt under overskriften.