Card as Link

[jeffreylauwers]

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

Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de 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

Card as Link

Doel

Korte sectie die als geheel een link is naar een gerelateerde pagina.

Gerelateerde componenten

Case Card

Onderzoek

What makes an accessible card? - Rian Rietveld - Youtube
In deze video vertelt Rian dat je liever geen <a> om alles in de Card moet zetten, omdat een screenreader dan alle inhoud voorleest.
Ze legt ook uit wat je in dit geval kunt doen, zoals het gebruiken van een <span>.

Cards - Inclusive components
Uitgebreid artikel over het toegankelijk opzetten van een Card component.

Block Links, Cards, Clickable regions
Adrian Roselli heeft een uitgebreid blogpost geschreven inclusief video's van het gedrag met screenreaders bij verschillende implementaties. Daarnaast geeft hij ook aan dat een gehele card klikbaar maken ervoor zorgt dat je de tekst niet gemakkelijk kan selecteren.

[emma-koole]

Den Haag

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Default

Hover

Focus

Website

---

Notities

• Richtlijnen beschikbaar (Storybook).
• In Figma zowel mobile als desktop beschikbaar.
• Het wordt zowel nieuwscard als content card genoemd.
• De card as links worden op dit moment gebruik op de website van denhaag.nl. Ze worden gebruikt als ingang naar nieuws(waardige content).

[emma-koole]

Amsterdam

• Storybook
• Github

---

Screenshots / Varianten

Storybook

Default

With tagline

With image

---

Notities

• Richtlijnen beschikbaar (Storybook): voor de card component gelden ook de richtlijnen voor links en headings.
• Er is geen border aanwezig.

[emma-koole]

Rotterdam

---

Screenshots / Varianten

Website

[emma-koole]

Onderzoek

NN-Group over Cards: UI-Component Definition
Quite often, cards use a slight drop shadow to show depth, which is a clickability signifier. For most implementations, clicking or tapping anywhere on the card link to a details page (though some cards, like the one in our previous example, also include some secondary call-to-action buttons or links in addition to the main link available). This larger touch zone substantially improves usability on both touchscreen devices and mouse-based devices (due to Fitts’ Law).

[erikkroes]

Lastige dingen altijd, die cards!

Geabstraheerd is de "card as link" zoiets als een flinke link met veel inhoud (namelijk: de hele card). Waar loop je dan potentieel tegenaan? (Los van de content van de card, die natuurlijk ook goed moet zijn)

• WCAG 1.3.1: Afhankelijk van context en toepassing, kan het zijn dat "Informatie, structuur en relaties" overgebracht worden door de presentatie. Zo kan het zijn dat je meerdere cards in een lijst zet, dat je in de code ook duidelijk wil maken dat je een groepering hebt, of dat je card standaard (visueel) een kopje heeft (en die wil je ook in de code).
• WCAG 1.3.2: Let op je hierarchie in code en visueel. Visueel hebben cards vaak een afbeelding als eerste onderdeel. In de code wil je mogelijk de heading als eerste hebben.
• WCAG 1.4.11: Een link is een "user interface component". Je wil dat dat wat de link identificeert (herkenbaar maakt) voldoende contrast heeft.
• WCAG 2.1.1: Met betrekking tot deze, maar ook algemener. Wat is het interactieve deel, en is dit los te benaderen? ( Dit is -Card as Link-. Dat is 1 groot interactief ding. Willen we ook cards met verschillende interactieve items als content? Dat is een ander patroon, en kan verwarrend zijn als ze beide beschikbaar zijn en gecombineerd worden.)
• WCAG 2.4.4/WCAG 2.5.3/WCAG 4.1.2: 3 criteria rond eenzelfde punt; deze belangrijk voor card as link. Welk naam geef je het ding? En hoe verhoudt zich dat tot wat je ziet? En hoe werkt dat bijvoorbeeld met spraaksoftware? Kritiek punt.
• WCAG 2.4.6: Je wilt -goede- kopjes voor je cards!

Algemenere kwesties, en mogelijk niet nodig expliciet te noemen:

• WCAG 1.4.1: Ontwerp je card niet zo dat hij op kleur leunt.
• WCAG 1.4.3: Vooral gericht op content, er moet genoeg contrast zijn.
• WCAG 1.4.4: Wat gebeurt er als de tekst schaalt, past alles dan nog?
• WCAG 1.4.5: Maar al te vaak komen er afbeeldingen met tekst op cards terecht. Mogelijk iets om in de documentatie te noemen.
• WCAG 2.4.7: Je wil het component (zichtbaar) kunnen focussen.
• WCAG 2.5.8: Je wil een minimumformaat voor je card. 🤷
• WCAG 3.2.4: Als je naar pagina's gaat linked wil je consistent zijn in je benaming. Meer een content-ding (en website-breed/component-oversteigend), dan voor het component zelf.

Naast de genoemde resources, ook nog een oude video (met audio problemen): https://www.youtube.com/watch?v=7sE2IsU8X0c

[emma-koole]

DUO

Website

Screenshots / Varianten

Geen afbeelding

Flag card - met afbeelding

Card met afbeelding

[eslook]

We hebben dit onderwerp ook besproken in het Developer Open Hour van donderdag 27 maart 2025. Bij deze een samenvatting van wat er besproken is. @mennovanslooten Kan jij deze comment nog even editten met jouw bevindingen?

Card as Link versus Card zonder Link

Wat als de Card geen Link bevat, maar verder visueel precies (minus de link) een Card is?

• Maken we dan gebruik van Card as Link component, variant zonder link?
• Word het een los Card component met zijn eigen discussie en eigen documentatie?

Implementatie van een volledig klikbare Card

Er zijn meerdere manieren om dit op te lossen;

• aria-describedby
• position relative op de card met een position absolute'd pseudo element welke de hele card overlapt
• volledige card in een anchor element
  • In lange lijsten met veel informatie in elke card (metadata, breadcrumb, titel, omschrijving) wil je deze oplossing mogelijk niet, omdat het onoverzichtelijk word
• het gebruik van JavaScript om bij interactie met de card, een link te openen
• een combinatie van een link en JavaScript

Een fancy versie van Jaws (bron: Robbert, edit: Fusion) maakt het mogelijk om te wijzen naar elementen, en daar de informatie van op te lezen. De pseudo selector oplossing kan dit in de weg staan voor bijvoorbeeld informatie over de afbeelding.
Moet een Card uberhaupt wel volledig klikbaar zijn? Is dit een aangeleerd patroon dat mogelijk afgeleerd moet worden?

Wat is een Card (of een Card as Link)?

Niet elk blokje met een link is een Card as Link.
Bijvoorbeeld voor Search Result. Het kan visueel hetzelfde zijn; een volledige klikbare card aldanwel zonder afbeelding. Maar afhankelijk van de zoekresultaten, kan er de wens zijn om verschillende weergaven van de card te hebben.
Stel je hebt verschillende Cards; een Search Result Card, Product Card, News Card - schrijf je dan ook dubbele documentatie voor elk component?
In het geval van een Table Row, welke visueel hetzelfde kan zijn als een Card as Link:

• Moet de volledige Table Row klikbaar zijn? Dit maakt de tekst minder goed selecteerbaar, vooral in een Table kan dit vervelend zijn.

Hebben we mogelijk een Simple Card as Link versus Complex Card as Link nodig?
Is een Card mogelijk meer eenzelfde iets als een Modal Dialog, Drawer of Accordion, waar je een aantal functionaliteiten vast hebt staan, maar de body volledig vrij ingevuld kan worden?

[Robbert]

Met de fancy versie van Jaws bedoelde ik Fusion

[emma-koole]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Card as Link op het Community bord

[Ollie-nl]

Wat bij ons nu online staat, maar een update gaat krijgen en nodig heeft:

[eslook]

✨ Dit component is nu Community ✨

Help je mee hem door de Candidate stappen te krijgen?
Card as Link op het Candidate bord