Skip Link

[jeffreylauwers]

We willen graag meer leren over het Skip Link component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook of screenshots. Met deze informatie kunnen we bewijzen dat het component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

Skip Link

Doel

Verborgen mogelijkheid om snel naar een ander deel van de pagina te navigeren zonder gebruik te maken van een muis of touchscreen.

Onderzoek

Skip Link component - GOV.UK
Onder 'When to use this component' wordt de positie van de Skip Link in combinatie met een cookie melding benoemd maar ook dat een Skip Link niet in een nav element zou moeten staan.

Skip Link Github Discussion - GOV.UK
In deze Discussion van GOV.UK worden enkele toepassingen besproken zoals de Skip Link in combinatie met de Back link maar ook hoe de Skip Link kan helpen om een filter over te slaan.

Skip Navigation Links - WebAIM
Artikel bij WebAIM over het gebruik en toepassen van Skip Links.

scroll-margin-top - MDN docs
CSS techniek die kan helpen om iets meer margin-top mee te geven aan het onderdeel waar de Skip Link naartoe linkt.

Richtlijnen

• https://nldesignsystem.nl/wcag/2.4.1/
• https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html

[jeffreylauwers]

Amsterdam

• Storybook
• Figma
• Skip link toegepast op https://www.amsterdam.nl

---

Screenshots / Varianten

Storybook

Figma

Website

---

Notities

• Richtlijnen beschikbaar (Storybook).
• Positie: bovenaan, drukt content naar beneden.
• Visual design: Gecentreerde witte tekst op donkerblauw vlak die over de gehele breedte uitvult. Skip link op amsterdam.nl wijkt qua vorm (nog) af.
• Label: 'Direct naar inhoud'.
• Focus:
  • In de documentatie (Storybook) wordt aangegeven dat de focus bij een artikelpagina bijvoorbeeld naar de titel van het artikel kan verwijzen en op een zoekpagina naar het zoekveld.
  • Op homepage verwijst de Skip link naar een div met id="Content", deze bevindt zich direct onder de Page Header (inclusief navigatie).
  • Op een detailpagina en zoekpagina verwijst de Skip link naar een div met id="Content", deze bevindt zich direct onder de Breadcrumbs.
• De Skip link op de website staat in een <li> en heeft de class="skiplinks", wat doet vermoeden dat er meer links aan toegevoegd kunnen worden.
• De Skip link gaat vooraf aan de div waar de inhoud van de Page header in zit.

[jeffreylauwers]

Den Haag

• Figma - WIP
• Skip link wordt toegepast op https://www.denhaag.nl/

---

Screenshots / Varianten

Figma - WIP

Website

---

Notities

Website

• Positie: Linksboven, over de content heen.
• Visual design: Donkere tekst op lichtgeel vlak, breedte op basis van tekst.
• Label: 'Ga naar hoofdinhoud'
• Focus:
  • Op homepage verwijst de Skip link naar een main met id="site-content", dit onderdeel bevindt zich direct onder de Page Header (inclusief navigatie).
  • Op een detailpagina en zoekpagina verwijst de Skip link naar een main met id="site-content", de Breadcrumbs zijn het eerste onderdeel van main.
• De Skip link staat als losse link in header vlak voor het logo.

[jeffreylauwers]

DSO Toolkit

• Geen specifiek component gevonden in de documentatie website of Storybook. Wel is er documentatie over Skip links waarin wordt beschreven wanneer en hoe te gebruiken. Daarbij wordt ook een voorzet gedaan voor labels.
• Skip link wordt toegepast op https://aandeslagmetdeomgevingswet.nl/

---

Screenshots / Varianten

Website

---

Notities

Website

• Richtlijnen beschikbaar documentatie website.
• Positie: Bovenaan, over de content heen.
• Visual design: Gecentreerde donkere tekst op lichtgrijs vlak die over de gehele breedte uitvult.
• Label: 'Ga naar de inhoud'
• Focus:
  • Op homepage verwijst de Skip link naar de eerste, lege, div binnen een main met id="content-start" en tabindex="-1", dit onderdeel bevindt zich direct onder de Page Header (inclusief navigatie).
  • Op een detailpagina en zoekpagina verwijst de Skip link naar de eerste, lege, div binnen een main met id="content-start" en tabindex="-1", dit onderdeel bevindt zich direct onder de Page Header (inclusief navigatie als breadcrumb).
• De Skip link staat binnen een div als losse link in header.

[jeffreylauwers]

DUO

• Geen specifiek component gevonden in de documentatie website. Wel is er documentatie over Skip links waarin wordt beschreven wanneer en hoe te gebruiken. Daarbij wordt ook een voorzet gedaan voor code en label.
• Skip link wordt toegepast op https://duo.nl/particulier/

---

Screenshots / Varianten

Website

---

Notities

Website

• Richtlijnen beschikbaar documentatie website.
• Positie: Linksboven, drukt content naar beneden.
• Visual design: als algemene link, breedte op basis van tekst.
• Label: 'Ga direct naar inhoud'
• Focus:
  • Op homepage verwijst de Skip link naar een main met id="content" inclusief class="skiplink-target main" en tabindex="-1", dit onderdeel bevindt zich direct onder de Page Header (zonder navigatie).
  • Op een detailpagina en zoekpagina verwijst de Skip link naar een main met id="content" inclusief class="skiplink-target main" en tabindex="-1", dit onderdeel bevindt zich direct onder de Page Header (met navigatie).
• De Skip link staat als losse link in een div vlak voor de navigatie naar Particulier, Zakelijk, etc.

[jeffreylauwers]

OpenGemeenten

• Patternlab (tab toets gebruiken)
• Skip link wordt toegepast op https://www.lenteveld.nl/

---

Screenshots / Varianten

Website

---

Notities

Website

• Positie: Linksboven, over de content heen.
• Visual design: Witte tekst op donkerblauw vlak, breedte op basis van tekst.
• Labels:
  • 'Naar hoofdinhoud'
  • 'Naar hoofdnavigatiemenu'
  • 'Naar footer'
  • 'Naar zoekveld'
• Focus:
  • Op homepage verwijzen de Skip links naar verschillende onderdelen:
    • 'Naar hoofdinhoud' verwijst direct naar main al heeft deze ook id="content", dit onderdeel bevindt zich direct onder de Page header (inclusief navigatie).
    • 'Naar hoofdnavigatiemenu' verwijst naar een nav met id="page-header__menu", dit onderdeel bevindt zich in de header.
    • 'Naar footer' verwijst naar een footer met id="page-footer", dit onderdeel bevindt zich onder de Page content.
    • 'Naar zoekveld' verwijst naar een input met id="page-header__search__input", dit onderdeel bevindt zich in de header.
  • Op een detailpagina en zoekpagina verwijzen de Skip links naar verschillende onderdelen:
    • 'Naar hoofdinhoud' verwijst direct naar main al heeft deze ook id="content", dit onderdeel bevindt zich direct onder de Page header (inclusief navigatie). Breadcrumbs (en eventuele Alert) vallen binnen deze main.
    • 'Naar hoofdnavigatiemenu' verwijst naar een nav met id="page-header__menu", dit onderdeel bevindt zich in de header.
    • 'Naar footer' verwijst naar een footer met id="page-footer", dit onderdeel bevindt zich onder de Page content.
    • 'Naar zoekveld' verwijst naar een input met id="page-header__search__input", dit onderdeel bevindt zich in de header. Dus niet naar het 2e zoekveld binnen main.
• De Skip links staan als 4 losse links in een nav met aria-label="skipnav menu". Deze nav met Skip links bevinden zich in een div vooraf aan een div met class="page-container waarbinnen de header, main, footer staan.

[jeffreylauwers]

Rotterdam

Geen specifiek component gevonden in Figma of Storybook maar de Skip link wordt toegepast op https://www.rotterdam.nl/

---

Screenshots / Varianten

Website

---

Notities

Website

• Positie: Bovenaan in het midden, over de content heen.
• Visual design: Witte tekst op groen vlak, breedte op basis van tekst.
• Schuift van bovanaf in beeld.
• Label: 'Ga naar de hoofdinhoud'
• Focus:
  • Op homepage verwijst de Skip link naar een main met id="top-of-content", dit onderdeel bevindt zich direct onder de Page Header (inclusief navigatie).
  • Datzelfde geldt voor een detailpagina waarbij de breadcrumbs binnen de main vallen.
  • En ook voor een zoekpagina waarbij de complete inhoud van de pagina zich binnen deze main bevindt.
• De Skip link staat als losse link in een div vlak voor een div waar de complete Page header (dus inclusief navigatie element met 'zoeken', 'contact', etc) mee is opgemaakt.

[jeffreylauwers]

RVO

• Storybook
• Figma
• Skip link wordt toegepast op https://www.rvo.nl/

---

Screenshots / Varianten

Storybook

Figma

Website

---

Notities

Website

• Positie: bovenaan, drukt content naar beneden.
• Visual design: Gecentreerde witte tekst op donkerblauw vlak die over de gehele breedte uitvult.
• Label: 'Direct naar de content'
• Focus:
  • Op homepage verwijst de Skip link naar een div met id="main-content" inclusief role="main" en tabindex="0", dit onderdeel bevindt zich direct onder de Page Header (inclusief navigatie).
  • Datzelfde geldt voor een detailpagina waarbij de breadcrumbs binnen deze div vallen. Wat opvalt is dat de url van de Skip link de gehele url (href="https://www.rvo.nl/onderwerpen/vissersvaartuigen#main-content") benoemd in plaats van enkel een verwijzing naar eenid.
  • Datzelfde geldt voor een zoekpagina waarbij de complete inhoud van de pagina zich binnen deze div bevindt. Ook op deze pagina bevat de Skip link de gehele url (href="https://www.rvo.nl/search?query=zaken%20doen%20in%20nederland%20do#main-content").
• De Skip link staat als losse link vlak voor een div waar de complete Page header mee is opgemaakt.

De opmaak van de website wijkt af van de code in Storybook waar wel direct naar #main wordt gelinkt.

[jeffreylauwers]

Utrecht

• Storybook
• Figma

---

Screenshots / Varianten

Storybook

Figma

Website

---

Notities

Uitgebreide documentatie in Storybook.

Website

• Positie: Linksboven maar rechts van logo, over de content heen.
• Visual design: Rode tekst op wit vlak, breedte op basis van tekst.
• Labels:
  • 'Naar inhoud'
  • 'Naar menu'
  • 'Naar zoekveld'
• Focus:
  • Op de homepage verwijzen de Skip links naar verschillende onderdelen:
    • 'Naar inhoud' verwijst naar article met id="page-content", dit onderdeel bevindt zich direct onder de Page header (inclusief navigatie).
    • 'Naar menu' verwijst naar een nav met id="menu" en tabindex="-1", dit onderdeel bevindt zich in de header.
    • 'Naar zoekveld' verwijst naar een input met id="searchHomepage", dit onderdeel bevindt zich in de header.
  • Op een detailpagina verwijzen de Skip links naar verschillende onderdelen:
    • 'Naar inhoud' verwijst naar article met id="page-content", dit onderdeel bevindt zich direct onder de Breadcrumbs.
    • 'Naar menu' verwijst naar een nav met id="menu" en tabindex="-1", dit onderdeel bevindt zich in de header.
    • 'Naar zoekveld' verwijst naar een input met id="searchHomepage", dit onderdeel bevindt zich in de header.
  • Op een zoekpagina verwijzen de Skip links naar verschillende onderdelen:
    • 'Naar inhoud' verwijst naar article met id="page-content", dit onderdeel bevindt zich direct onder de Breadcrumbs.
    • 'Naar menu' verwijst naar een nav met id="menu" en tabindex="-1", dit onderdeel bevindt zich in de header.
    • 'Naar zoekveld' verwijst naar een input met id="searchHomepage", dit onderdeel bevindt zich in de header.
• De Skip links staan als 3 losse links in een div binnen header vlak voor het logo. Deze links bevatten naast title ook accesskey.

[Ollie-nl]

We hebben een andere variant op ons loket staan:
Deze komt uit het Design System (is een nieuwere omgeving)

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Skip link op het Community bord

[Rozerinay]

✨ Dit component is nu Community ✨

Help je mee hem door de Candidate stappen te krijgen?
Skip link op het Candidate bord