Login Link

Community

Biedt de mogelijkheid om naar de beschikbare inlogmiddelen te navigeren.

Definition of Done

Afgevinkt.

Naam
Naam bepaald op basis van NL Design System naamgeving.
Afgevinkt.

Beschrijving
Doel van component is in één zin beschreven.
Afgevinkt.

Afbeelding
Afbeelding gemaakt om de component visueel duidelijk te maken.
Afgevinkt.

Discussion URL
Afgevinkt.

Backlog
Staat in de publieke backlog van NL Design System.
Afgevinkt.

Bruikbaar
Bewijs verzameld dat de component algemeen bruikbaar is.
Afgevinkt.

Link
Link beschikbaar naar component in Figma of Storybook met alle belangrijke states en varianten.
Afgevinkt.

Varianten
Naam en doel van benodigde varianten beschreven.
Afgevinkt.

Onderzoek
Nut van component is onderbouwd door gebruikersonderzoek.
Afgevinkt.

Kernteam
Kernteam verwacht dat dit component tot Hall of Fame kan komen.
Afgevinkt.

nldesignsystem.nl
Vindbaar op de NL Design System website.

Help Wanted projectbord op GitHub

Afgevinkt.

Welk bord
Afgevinkt.

GitHub (CSS)
Afgevinkt.

Storybook (CSS)
Afgevinkt.

Implementatie voldoet
Afgevinkt.

Minimale design tokens
Afgevinkt.

Prefix
Afgevinkt.

Naamgeving design tokens
Afgevinkt.

Licentie component
Afgevinkt.

Licentie documentatie
Afgevinkt.

Storybook thema's
Afgevinkt.

Visuele regressietest
Afgevinkt.

Figma URL
Afgevinkt.

nldesignsystem.nl
Afgevinkt.

Component assessment
Afgevinkt.

Promotie

Community projectbord op GitHub

Niet afgevinkt.

🔍 Huisstijl input
Niet afgevinkt.

🔍 Productie input
Niet afgevinkt.

🔍 WCAG input
Niet afgevinkt.

📝 Issues bekend
Niet afgevinkt.

📝 Varianten bepaald
Niet afgevinkt.

📝 Acceptatiecriteria a11y
Niet afgevinkt.

📝 Keywords en Aliassen bepaald
Niet afgevinkt.

📝 Anatomie bepaald
Niet afgevinkt.

📝 HTML bepaald
Niet afgevinkt.

📝 API bepaald
Niet afgevinkt.

📝 Design tokens bepaald
Niet afgevinkt.

📝 Stories en specs vastgelegd
Niet afgevinkt.

📝 Testcases voor gebruik
Niet afgevinkt.

🛠️ React component
Niet afgevinkt.

🛠️ CSS component
Niet afgevinkt.

🛠️ Figma component
Niet afgevinkt.

🛠️ Voorbeeld thema
Niet afgevinkt.

🛠️ Documentatie
Niet afgevinkt.

🧪 Design Tokens getest
Niet afgevinkt.

🧪 A11y getest
Niet afgevinkt.

🧪 Test coverage getest
Niet afgevinkt.

🧪 Testcases getest
Niet afgevinkt.

🧪 Documentatie getest
Niet afgevinkt.

🚀 NPM
Niet afgevinkt.

🚀 Figma - Start Bibliotheek
Niet afgevinkt.

🚀 Figma - Voorbeeld Bibliotheek
Niet afgevinkt.

🚀 Themes repository
Niet afgevinkt.

🚀 nldesignsystem.nl

Candidate projectbord op GitHub

Community implementaties

Logius

11 van 11 stappen gedocumenteerd op het Community Logius projectbord

Snel aan de slag

lux-login-link in CSS

Den Haag

10 van 11 stappen gedocumenteerd op het Community Den Haag projectbord

Snel aan de slag

denhaag-card-authentication in Figma

denhaag-card-authentication in CSS

Gerelateerde componenten: Button.

Acceptatiecriteria

Gebruik jij één van de implementaties van deze component of heb je je eigen component gemaakt? In beide gevallen geldt: met onderstaande acceptatiecriteria kun je nagaan of jouw gebruik van deze component klopt met NL Design System.

Als je implementatie voldoet aan de acceptatiecriteria voor deze component, kun je er vanuit gaan dat je gebruik van deze component voldoet aan WCAG, niveau A en AA.

Het label van de Login Link bestaat uit gewone tekst, niet uit een afbeelding van tekst

WCAG: 1.4.5 Afbeeldingen van tekst

Laat tekst buiten afbeeldingen.

Als je losse tekst een vergelijkbaar uiterlijk kan geven als in een afbeelding, laat het dan losse tekst zijn. Er is een uitzondering als de tekst onderdeel is van een logo.

Sommige mensen hebben teksten nodig met een ander uiterlijk. Dit kan bij losse tekst en niet bij afbeeldingen.

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

WCAG: 2.4.4 Linkdoel (in context)

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.

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

WCAG: 2.5.2 Aanwijzerannulering

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.

Voor knoppen waarbij het essentieel is dat ze activeren bij het indrukken (keydown) geldt een uitzondering. Dit geldt bijvoorbeeld voor knoppen in een schermtoetsenbord en pianotoetsen.

De zichtbare naam van de Login Link komt voor in de toegankelijke naam

WCAG: 2.5.3 Label in 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:

De zichtbare naam moet overeenkomen met de toegankelijke naam

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

WCAG: 3.1.2 Taal van onderdelen

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.

NL Design System richtlijnen:

De juiste taal instellen

De contrastverhouding van de tekstkleur in Login Link met de achtergrondkleur is hoog genoeg.

WCAG: 1.4.3 Contrast (minimum)

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:

Als het zichtbare label van de Login Link alleen een afbeelding of icoon is, dan is het contrast tussen de afbeelding en de achtergrond minimaal 3:1

WCAG: 1.4.11 Contrast van niet-tekstuele content

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:

Zorg voor voldoende kleurcontrast voor niet-tekstuele content

De Login Link heeft een aanklikbaar gedeelte van ten minste 44 bij 44 pixels

WCAG: 2.5.5 Grootte van het aanwijsgebied (uitgebreid)

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:

Login Links met gelijke functies hebben hetzelfde uiterlijk en hetzelfde label

WCAG: 3.2.4 Consistente identificatie

Logius geeft voor het inloggen met DigiD, eHerkenning en European login "Opmaakrichtlijnen voor inlogmiddelknoppen" in de Stijlhandleiding aansluiten Toegang.

NL Design System richtlijnen:

Respecteer conventies

Als je de tekst vergroot tot 200% blijft deze in zijn geheel zichtbaar

WCAG: 1.4.4 Herschalen van tekst

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

Zorg ervoor dat de 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 overflow-wrap: break-word; hyphens: auto; eventueel in combinatie met text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur op :root niveau.

NL Design System richtlijnen:

Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar

WCAG: 1.4.12 Tekstafstand

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.

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:

Als het label van de Login Link uit een icoon bestaat, dan heeft deze een goed tekstalternatief

WCAG: 1.1.1 Niet-tekstuele content

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>

Logius geeft voor het inloggen met DigiD, eHerkenning en European login "Opmaakrichtlijnen voor inlogmiddelknoppen" in de Stijlhandleiding aansluiten Toegang.

NL Design System richtlijnen:

De Login Link heeft een rol van link en een toegankelijke naam die duidelijk maakt waar de Login Link voor dient

WCAG: 4.1.2 Naam, rol, waarde

De link heeft een rol van link en een toegankelijke naam die duidelijk maakt waar de link voor dient.

HTML-elementen hebben een impliciete rol. Maak daar gebruik van. Kies daarom een a-element met het href attribuut als je een link nodig hebt:

<a href="url">Contact</a>

Het is mogelijk om met ARIA een role="link" toe te voegen aan een ander element dan een a, maar dit is niet aan te raden. Heb je het absoluut nodig, zorg er dan voor dat het gekozen element ook voldoet aan de verwachte toetsenbordinteractie, focusstijl, etc. Let erop dat je hiervoor JavaScript nodig hebt.

Help om deze component te verbeteren

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

Vul de GitHub Discussion aan met de eisen en wensen voor jouw project of organisatie.
Draag bij aan de voortgang van Login Link door te zorgen dat deze aan meer checkpoints van de Definition of Done voldoet. Deze houden we bij in de projectborden bij de publieke GitHub Backlog.

Login Link

Definition of Done

Help Wanted - 11 van 11

Naam

Beschrijving

Afbeelding

Discussion URL

Backlog

Bruikbaar

Link

Varianten

Onderzoek

Kernteam

nldesignsystem.nl

Community - 15 van 15

Welk bord

GitHub (CSS)

Storybook (CSS)

Implementatie voldoet

Minimale design tokens

Prefix

Naamgeving design tokens

Licentie component

Licentie documentatie

Storybook thema's

Visuele regressietest

Figma URL

nldesignsystem.nl

Component assessment

Promotie

Candidate - 0 van 15

🔍 Huisstijl input

🔍 Productie input

🔍 WCAG input

📝 Issues bekend

📝 Varianten bepaald

📝 Acceptatiecriteria a11y

📝 Keywords en Aliassen bepaald

📝 Anatomie bepaald

📝 HTML bepaald

📝 API bepaald

📝 Design tokens bepaald

📝 Stories en specs vastgelegd

📝 Testcases voor gebruik

🛠️ React component

🛠️ CSS component

🛠️ Figma component

🛠️ Voorbeeld thema

🛠️ Documentatie

🧪 Design Tokens getest

🧪 A11y getest

🧪 Test coverage getest

🧪 Testcases getest

🧪 Documentatie getest

🚀 NPM

🚀 Figma - Start Bibliotheek

🚀 Figma - Voorbeeld Bibliotheek

🚀 Themes repository

🚀 nldesignsystem.nl

Community implementaties

Logius

Snel aan de slag

lux-login-link in CSS

Den Haag

Snel aan de slag

denhaag-card-authentication in CSS

Acceptatiecriteria

Toegankelijkheid algemeen

Toegankelijkheid visueel ontwerp

Toegankelijkheid zoom en herschalen

Toegankelijkheid toetsenbord

Toegankelijkheid screenreader

Help om deze component te verbeteren