Ga naar hoofdinhoud

Link

Link

Candidate

Een verwijzing om een externe bron of bestand te openen of te navigeren binnen dezelfde pagina of website.

Anatomie

Candidate component gebruiken

Design tokens

name type
nl.link.color color
nl.link.text-decoration-color color
nl.link.text-decoration-line textDecoration
nl.link.text-decoration-thickness other
nl.link.text-underline-offset other
nl.link.active.color color
nl.link.current.cursor other
nl.link.disabled.color color
nl.link.disabled.cursor other
nl.link.hover.color color
nl.link.hover.text-decoration-line textDecoration
nl.link.hover.text-decoration-thickness other

CSS

De CSS van deze component is gepubliceerd in een npm package:

@nl-design-system-candidate/link-css versie 1.

Gebruik de nl-link class name op een a element:

<a href="https://example.com" class="nl-link">example.com</a>

Je kunt de CSS zo in je project installeren:

npm install --save-dev @nl-design-system-candidate/link-css

Als je een CDN gebruikt, dan kun je de CSS zo importeren:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nl-design-system-candidate/link-css@1/dist/link.css" />

Gebruik je geen CDN, dan kun je de CSS uit node_modules/ importeren:

<link rel="stylesheet" href="node_modules/@nl-design-system-candidate/link-css/dist/link.css" />

Als je CSS imports gebruikt vanuit JavaScript:

import "@nl-design-system-candidate/link-css/link.css";

Om te zorgen dat de states van een Link component goed werken als een link om een inline-box element zoals een Image is gezet gebruik je de nl-link class name in combinatie met nl-link--inline-box class name.

React

De React component is gepubliceerd in een npm package:

@nl-design-system-candidate/link-react versie 1.

Je kunt de npm package zo installeren:

npm install --save-dev @nl-design-system-candidate/link-react

Je kunt de React component zo gebruiken:

import { Link } from "@nl-design-system-candidate/link-react";


export const MyPage = () => {
  return (
    <html>
      <body>
        <p>
          <Link href="https://example.com">example.com</Link>
        </p>
      </body>
    </html>
  );
};

Figma

De Figma component staat in NL Design System Voorbeeld Bibliotheek — Link.

Checklist voor toegankelijkheid

Hier beschrijven we waar de component al aan voldoet en wat je zelf nog moet doen om de component toegankelijk én gebruiksvriendelijk in te zetten.

Acceptatiecriteria bij gebruik

Een component gebruik je in de context van een pagina, website of applicatie. Hoe toegankelijk en gebruiksvriendelijk een component is, hangt daarom voor een groot deel af van context. We hebben onderstaande criteria verdeeld op rol: de developer, de designer en de contentmaker. Vanuit iedere rol kun je je steentje bijdragen om een toegankelijke en gebruiksvriendelijke ervaring te bieden aan je gebruikers.

Ik ben:
Alle onderwerpen worden getoond.
  • Als het label van de Link uit een icoon bestaat, dan heeft deze een goed tekstalternatief.

    Als het label van de link alleen uit een icoon of logo bestaat, dan heeft deze afbeelding een goed tekstalternatief, zodat de link een naam heeft die duidelijk maakt waar de link voor dient.

    Het beste is om altijd visueel een tekst te tonen naast of onder het icoon. Iconen zijn immers niet altijd voor iedereen duidelijk. Een tekstalternatief voor de afbeelding is niet nodig als er naast de afbeelding ook tekst in de link staat die uitlegt waar de link naartoe gaat. Een img kan dan een leeg alt-attribuut krijgen (alt="").

    Is het toch gewenst om alleen een icoon of logo te tonen, hou dan rekening met het volgende.

    Een img met een alt-attribuut is een robuuste manier om een alternatieve tekst toe te voegen. De waarde van het alt-attribuut vormt de toegankelijke naam van de link:

    <a href="url">
  <img src="ideal.svg" alt="iDeal" />
</a>

    Maar duidelijker is:

    <a href="url"> Betaal met iDeal <img src="ideal.svg" alt="" /> </a>

    NL Design System richtlijnen:

    designercontentmakerWCAG 1.1.1Niveau A
  • De contrastverhouding van de tekstkleur van de Link met de achtergrondkleur is hoog genoeg.

    De contrastverhouding van de tekstkleur met de achtergrondkleur is hoog genoeg. Minimale contrastverhoudingen:

    • 4,5:1 contrast voor normale tekst.
    • 3:1 contrast voor grotere letters (vanaf 24 pixels).
    • 3:1 contrast voor vette letters (vet en groter of gelijk aan 19 pixels).

    Hogere verhoudingen mogen natuurlijk altijd. Met de Contrast checker kun je controleren of je gekozen kleuren voldoen. Denk erom dat dit moet gelden voor alle achtergrondkleuren waarop de tekst geplaatst kan worden. Het kan dus zijn dat je meerdere checks moet doen.

    NL Design System richtlijnen:

    designercontentmakerWCAG 1.4.3Niveau AA
  • Het label van de Link bestaat uit gewone tekst, niet uit een afbeelding van tekst.

    Gebruik geen afbeeldingen van tekst, wanneer je ook gewone tekst kan gebruiken met vergelijkbare visuele opmaak.

    Wanneer het technisch niet mogelijk is om een tekst er uit te laten zien zoals bedoeld, dan zijn er twee uitzondering om een afbeelding te gebruiken.

    • De tekst in een logo, die hoort bij het beeldmerk.
    • De gebruiker kan weergave van de afbeelding wijzigen, zoals font, kleur en tekstgrootte.
    designercontentmakerWCAG 1.4.5Niveau AA
  • Als het zichtbare label van de Link alleen een afbeelding of icoon is, dan is het contrast tussen de afbeelding en de achtergrond minimaal 3:1.

    Als de inhoud van de link niet uit tekst bestaat, maar uit bijvoorbeeld een icoon of logo dan moet het aanklikbare gedeelte goed te onderscheiden zijn. Het contrast tussen een icoon, of kader rond een logo, en de achtergrond moet minimaal 3:1 zijn. Dit is te controleren met de Contrast checker.

    NL Design System richtlijnen:

    designercontentmakerWCAG 1.4.11Niveau AA
  • De linktekst van de Link vertelt eenduidig aan de gebruiker waar de link naar toe gaat (het linkdoel).

    De linktekst vertelt eenduidig aan de gebruiker waar de link naar toe gaat (het linkdoel).

    Wat is een linktekst? Het is de tekst die zichtbaar is, maar ook de tekst die aan een gebruiker van hulpsoftware wordt voorgelezen.

    Wat is het linkdoel? De locatie waar de link naartoe gaat. Bijvoorbeeld de contactpagina, een nieuwsbericht, een andere website of een download van een document.

    Wat betekent In context? Het doel van de link kan ook door omringende content worden aangegeven. Dit moet dan wel ook voor gebruikers van hulpmiddelen duidelijk zijn, bijvoorbeeld door aanvullende tekst of een afbeelding naast de link. Dit laatste is onderwerp van veel discussie. Het beste is om altijd goed in de linktekst zelf te vertellen want het doel is.

    designercontentmakerWCAG 2.4.4Niveau A
  • Als de Link de toetsenbordfocus krijgt, is het element niet volledig bedekt door andere inhoud

    Een onderdeel dat toetsenbordfocus heeft mag niet volledig bedekt zijn.

    developerdesignerWCAG 2.4.11Niveau AA
  • Als de tekst van de Link in een andere taal is dan de taal van de pagina, dan heeft het element een lang-attribuut met de juiste taalcode.

    Als een tekst in een andere taal is dan de taal van de pagina, dan heeft het element een lang-attribuut met de juiste taalcode.

    Denk bijvoorbeeld aan buttons voor het veranderen van de taal van een pagina, bij meertalige websites. Of aan een citaat in het Engels, op een Nederlandstalige pagina.

    developercontentmakerWCAG 3.1.2Niveau AA
  • Links met gelijke functies hebben hetzelfde uiterlijk en hetzelfde label

    Elementen met gelijke functies hebben hetzelfde uiterlijk en hetzelfde label.

    NL Design System richtlijnen:

    developerdesignercontentmakerWCAG 3.2.4Niveau AA

Acceptatiecriteria van de component

Als je de NL Design System component gebruikt kun je er vanuit gaan dat onderstaande checks zijn gedaan. Maar door keuzes in de website of applicaties kan het natuurlijk zijn dat ze toch niet helemaal werken. Voor de zekerheid is het dus goed om ook op onderstaande punten te letten.

Ik ben:
Alle onderwerpen worden getoond.
  • Als je de tekst vergroot tot 200% blijft deze in zijn geheel zichtbaar.

    Als je de tekst vergroot tot 200%, via browserzoom of via de browserinstellingen voor tekstgrootte, blijft de tekst volledig zichtbaar.

    Zorg ervoor dat het component meegroeit met de tekst. Definieer hoogte en de breedte niet in px, maar gebruik een relatieve waarde als em of rem.

    Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld word-break: break-word; hyphens: auto; in combinatie met text-wrap-style: pretty of text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur niet alleen op de specifieke styling van het element of component, maar op globaal (:root) niveau.

    NL Design System richtlijnen:

    developerWCAG 1.4.4Niveau AA
  • Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar.

    Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar. Dit gaat om regelhoogte, afstand tussen alinea's, letterafstand en ruimte tussen woorden. Gebruikers kunnen dit instellen vanuit hun browser. Het is niet nodig om hier buttons voor te maken in de website zelf.

    Zorg ervoor dat de component mee kan groeien met de tekst. Geef de breedte en de hoogte dus niet hard op in pixels.

    Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld word-break: break-word; hyphens: auto; in combinatie met text-wrap-style: pretty of text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur niet alleen op de specifieke styling van het element of component, maar op globaal (:root) niveau.

    Je moet de afstand kunnen vergroten naar deze waardes:

    • Regelhoogte (regelafstand) naar ten minste 1,5 keer de lettergrootte.
    • Afstand tussen alinea's naar ten minste 2 keer de lettergrootte.
    • Letterafstand (spatiëren van letters) naar ten minste 0,12 keer de lettergrootte.
    • Spatiëren van woorden naar ten minste 0,16 keer de lettergrootte.

    Dit is te testen met een extensie zoals Stylus of User CSS, een bookmarklet of door in de inspector van de browser de volgende code toe te voegen aan de head van de pagina:

    <style>
body * {
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}
body p {
    margin-bottom: 2em !important;
}
</style>

    NL Design System richtlijnen:

    developerWCAG 1.4.12Niveau AA
  • Je kunt de Link focussen met de tabtoets en activeren met de entertoets.

    Je kunt de link focussen met de tabtoets (en in omgekeerde richting met shift + tabtoets) en activeren met de entertoets. Als je gebruik maakt van het a-element hoef je hier niets aan aan te passen.

    developerWCAG 2.1.1Niveau A
  • De functionaliteit van de Link veroorzaakt geen toetsenbordval.

    Wanneer een gebruiker met het toetsenbord de focus verplaatst naar een deel van de pagina, dan moet deze ook weer weg kunnen gaan met het toetsenbord. De gebruiker kan daarvoor bijvoorbeeld de Tab-toets, Escape-toets of de pijltjestoetsen gebruiken. Zo niet, beschrijf dan met welke toets het wel kan.

    Als een toetsenbordgebruiker niet verder kan in de pagina, zonder goede uitleg, dan zit deze in de val. Dit is een blokkade bij het navigeren van een website met het toetsenbord alleen.

    developerWCAG 2.1.2Niveau A
  • Wanneer de Link de toetsenbordfocus krijgt is de focus zichtbaar.

    Wanneer het element de toetsenbordfocus krijgt is de focus zichtbaar.

    Verberg de standaard browserfocusstijl nooit met outline:none zonder er een goede focusstijl voor in de plaats te zetten die rekening houdt met goede zichtbaarheid.

    NL Design System richtlijnen:

    developerdesignerWCAG 2.4.7Niveau AA
  • Als de gebruiker de Link indrukt met een aanwijzer zoals een muis of vinger, is er de mogelijkheid om de actie te voorkomen of ongedaan te maken.

    Als de gebruiker een interactief element indrukt met een aanwijzer zoals een muis of vinger, is er de mogelijkheid om de actie te voorkomen of ongedaan te maken.

    Gebruik hiervoor het click-event. Dit is een apparaatonafhankelijke methode. Zo activeert de actie niet als de bezoeker de aanwijzer indrukt, maar pas als de bezoeker de aanwijzer weer loslaat. De bezoeker kan de aanwijzer nog verplaatsen naar buiten het element om de actie weer ongedaan te maken.

    developerWCAG 2.5.2Niveau A
  • De zichtbare naam van de Link komt voor in de toegankelijke naam.

    De zichtbare naam van de link is gelijk aan, of begint met de toegankelijke naam.

    Dit is het eenvoudigst te realiseren door een a-element te gebruiken met daarin tekst.

    Pas op met het gebruik van aria-label om een naam te geven aan een link. Een aria-label overschrijft de tekstinhoud van een link. Zodoende kan een link een toegankelijke naam krijgen die anders is dan de zichtbare naam, waardoor mensen die hulpsoftware gebruiken moeilijkheden kunnen krijgen met het bedienen van de link. Als je echt een aria-label nodig hebt, zorg dan dat de waarde van het aria-label begint met de exacte tekst die zichtbaar is in de link.

    Dus niet:

    <!-- Foute code, niet gebruiken -->
<a href="login-url" aria-label="Klik hier om in te loggen">Log in met DigiD</a>

    Maar:

    <a href="login-url">Log in met DigiD</a>

    NL Design System richtlijnen:

    developerWCAG 2.5.3Niveau A
  • De Link heeft een aanklikbaar gedeelte van ten minste 44 bij 44 pixels.

    Zorg ervoor dat het element een minimale grootte heeft van 44 bij 44 pixels. Definieer hoogte en de breedte niet in px, maar gebruik een relatieve waarde als em of rem. Anders kan het element niet goed meegroeien wanneer de gebruiker inzoomt.

    Let op: Links in zinnen en paragrafen van tekst zijn uitgezonderd. De grootte van het aanwijsgebied is hier afhankelijk van de grootte van de linktekst zelf.

    NL Design System richtlijnen:

    developerWCAG 2.5.5Niveau AAA

Community implementaties

Amsterdam

11 van 11 stappen gedocumenteerd op het Community Amsterdam projectbord

Snel aan de slag

ams-link in CSS
ams-link in React

Utrecht

11 van 11 stappen gedocumenteerd op het Community Utrecht projectbord

Snel aan de slag

utrecht-link in CSS
utrecht-link in HTML
utrecht-link in Web Component
utrecht-link in React
utrecht-link in Vue
utrecht-link in Angular

Definition of Done

Help component verbeteren

We vinden het belangrijk dat de component Link goed te gebruiken is door iedereen. Help je mee?