DsSkipLink

Hopp-til-innhold-lenke for tastaturnavigasjon og tilgjengelighet.

Bruk

Når bør du bruke DsSkipLink?

• Plasser den øverst på hver side slik at tastaturbrukere kan hoppe direkte til hovedinnholdet.
• Når siden har en kompleks navigasjonsstruktur som er tidkrevende å tabulere gjennom.
• For å oppfylle WCAG 2.1 suksesskriterium 2.4.1 (Hopp over blokker).

Når bør du unngå DsSkipLink?

• Når siden har svært lite navigasjon og innholdet er umiddelbart tilgjengelig.
• Ikke bruk den som en generell intern lenke — den er spesifikt designet for å hoppe over gjentakende innhold.

Eksempler

Grunnleggende bruk

DsSkipLink — interaktiv forhåndsvisning

Åpne i nytt vindu ↗

final hovedinnholdFokus = FocusNode();

DsSkipLink(
  label: 'Hopp til hovedinnhold',
  onActivate: () => hovedinnholdFokus.requestFocus(),
)

Hopp ved å rulle til målelementet

final hovedinnholdKey = GlobalKey();

DsSkipLink(
  label: 'Hopp til søkeresultater',
  onActivate: () => Scrollable.ensureVisible(
    hovedinnholdKey.currentContext!,
  ),
)

Retningslinjer

• Plasser DsSkipLink som det første fokuserbare elementet i widgettreet.
• La onActivate flytte fokus til (eller rulle til) et element som finnes og kan motta fokus.
• Ha kun én DsSkipLink per side for å unngå forvirring.

Tekst

• Bruk klart og konsist språk, f.eks. «Hopp til hovedinnhold».
• Unngå tekniske termer — brukeren skal umiddelbart forstå hva lenken gjør.

Egenskaper

Egenskap	Type	Standard	Beskrivelse
label	String	påkrevd	Teksten som vises i lenken.
onActivate	VoidCallback	påkrevd	Kalles ved aktivering (Enter, Space eller trykk); flytter vanligvis fokus til hovedinnholdet.
color	DsColor?	null	Overstyrer fargen fra omkringliggende DsColorScope.

Import

import 'package:designsystemet_flutter/components.dart';

Semantikk

• Synlig kun ved fokusering, slik at den ikke forstyrrer det visuelle oppsettet for musebrukere.
• Lar tastaturbrukere hoppe over gjentakende navigasjon og gå direkte til hovedinnholdet.

Tastaturinteraksjon

Tast	Handling
Tab	Gir fokus til skip-lenken (første fokuserbare element).
Enter	Aktiverer lenken ved å kalle onActivate.
Space	Aktiverer lenken ved å kalle onActivate.

Fokusindikator

• Synlig fokusindikator ved tastaturnavigasjon.

Fargekontrast

• Oppfyller WCAG 2.1 AA kontrastkrav.

Har du innspill til denne komponenten? Send innspill på GitHub