@amsterdam/design-system-css 0.1.2 → 0.1.4

package/dist/unordered-list/unordered-list.css

@@ -0,0 +1,47 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+/*
+  The breakpoint is 854px / 16 = 53.375rems
+  https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
+*/
+.amsterdam-unordered-list {
+  color: var(--amsterdam-unordered-list-color);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--amsterdam-unordered-list-font-family);
+  font-size: var(--amsterdam-unordered-list-font-size-narrow);
+  font-weight: var(--amsterdam-unordered-list-font-weight);
+  gap: var(--amsterdam-unordered-list-gap);
+  line-height: var(--amsterdam-unordered-list-line-height);
+  list-style: var(--amsterdam-unordered-list-list-style);
+  box-sizing: border-box;
+  margin-block: 0;
+  -webkit-text-size-adjust: 100%;
+}
+@media screen and (width > 53.375rem) {
+  .amsterdam-unordered-list {
+    font-size: var(--amsterdam-unordered-list-font-size-wide);
+  }
+}
+
+.amsterdam-unordered-list__item {
+  padding-inline: var(--amsterdam-unordered-list-item-padding-inline);
+}
+
+.amsterdam-unordered-list .amsterdam-unordered-list {
+  list-style-type: var(--amsterdam-unordered-list-unordered-list-list-style-type);
+  padding-block: var(--amsterdam-unordered-list-unordered-list-padding-block);
+  padding-inline: var(--amsterdam-unordered-list-unordered-list-padding-inline);
+}
+
+.amsterdam-unordered-list .amsterdam-unordered-list .amsterdam-unordered-list__item {
+  padding-inline: var(--amsterdam-unordered-list-unordered-list-item-padding-inline);
+}
+
+/*# sourceMappingURL=unordered-list.css.map */

package/dist/unordered-list/unordered-list.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/unordered-list/unordered-list.scss","../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADQA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAdA;EACA;EACA;;AAcA;EAXF;IAYI;;;;AAMJ;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE","file":"unordered-list.css"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.2",
+  "version": "0.1.4",
   "author": "Community for NL Design System",
   "description": "CSS files for components for the City of Amsterdam based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -17,11 +17,12 @@
     "build": "sass src/:dist/",
     "clean": "rimraf dist/"
   },
-  "dependencies": {
-    "normalize.css": "8.0.1"
-  },
   "devDependencies": {
-    "sass": "1.58.0"
+    "@amsterdam/design-system-tokens": "0.1.3",
+    "sass": "1.63.6"
+  },
+  "dependencies": {
+    "@utrecht/components": "1.0.0-alpha.492"
   },
-  "gitHead": "89f67a928d30a512e8fa7f31b8dae925846fc411"
+  "gitHead": "43a949072edf58e9f8d198a2eca9b5457f01ccc8"
 }

package/src/accordion/README.md

@@ -0,0 +1,19 @@
+# Accordion
+
+Het accordion component is een klikbare (verticaal gestapelde) lijst van koppen om bijbehorende inhoud te verbergen of te vertonen. Met een accordion toon je inhoud op een progressieve manier aan gebruikers.
+
+Een accordion bestaat uit meerdere accordionsecties. Gebruik minimaal 3 en maximaal 10 secties onder elkaar. Je kunt door een accordion navigeren met je toetsenbord:
+
+| key                  | element                                                                                                                      |
+| -------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| Enter of Space       | Open of sluit de accordionsectie die de focus heeft                                                                          |
+| Tab                  | Ga naar het volgende element dat focus kan hebben                                                                            |
+| Shift + Tab          | Ga naar het volgende element dat focus kan hebben                                                                            |
+| Pijltje naar beneden | Als een accordionsectie focus heeft: ga naar de volgende sectie. Als de laatste sectie focus heeft, ga naar de eerste sectie |
+| Pijltje omhoog       | Als een accordionsectie focus heeft: ga naar de vorige sectie. Als de eerste sectie focus heeft, ga naar de laatste sectie   |
+| Home                 | Als een accordionsectie focus heeft: ga naar de eerste sectie                                                                |
+| End                  | Als een accordionsectie focus heeft: ga naar de laatste sectie                                                               |
+
+## Referenties
+
+- [W3C - Accordion Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)

package/src/accordion/accordion.scss

@@ -0,0 +1,63 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+.amsterdam-accordion__header {
+  display: flex;
+  margin-block: 0;
+  margin-inline: 0;
+}
+
+.amsterdam-accordion__button {
+  background-color: transparent;
+  border: 0;
+  color: var(--amsterdam-accordion-button-color);
+  cursor: pointer;
+  display: flex;
+  font-family: var(--amsterdam-accordion-button-font-family);
+  font-size: var(--amsterdam-accordion-button-font-size-narrow);
+  font-weight: var(--amsterdam-accordion-button-font-weight);
+  justify-content: space-between;
+  line-height: var(--amsterdam-accordion-button-line-height);
+  padding-block: 0.75rem;
+  padding-inline: 1rem;
+  width: 100%;
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-accordion-button-font-size-wide);
+  }
+
+  &:focus {
+    outline-offset: var(--amsterdam-accordion-button-focus-outline-offset);
+  }
+
+  &:hover {
+    box-shadow: var(--amsterdam-accordion-button-hover-box-shadow);
+  }
+
+  svg {
+    transform: rotate(0deg);
+    transition: transform 0.3s ease;
+
+    @media (prefers-reduced-motion) {
+      transition: none;
+    }
+  }
+}
+
+.amsterdam-accordion__button[aria-expanded="true"] svg {
+  transform: rotate(180deg);
+}
+
+.amsterdam-accordion__panel {
+  display: none;
+  padding-block: 1rem;
+  padding-inline: 1rem;
+}
+
+.amsterdam-accordion__panel--expanded {
+  display: block;
+}

package/src/button/README.md

@@ -0,0 +1,24 @@
+# Button
+
+De button gebruik je zodat de gebruiker acties kan uit te voeren en de user interface kan bedienen.
+
+## Richtlijnen
+
+- Een label tekst die beschrijft wat de functie van de button is.
+- Een duidelijke constrasterende kleurstelling zodat deze goed te herkennen is en snel te lokaliseren valt.
+- Gebruik het juiste type button voor de daarbijhorende toepassing. Bijvoorbeeld een button binnen een formulier moet altijd het het type `submit` zijn.
+- Zorg dat een button ook met een keyboard te bedienen is.
+
+## Relevante WCAG eisen
+
+- [WCAG eis 2.1.3](https://www.w3.org/TR/WCAG21/#keyboard-no-exception): je kan de button activeren met `Enter` of `Space`, en het is mogelijk met `Tab` de button te focussen. `Space` gebruiken heeft dan niet het effect dat de pagina scrollt.
+- [WCAG eis 2.4.6](https://www.w3.org/TR/WCAG21/#headings-and-labels): de label van de button moet duidelijk zijn
+- [WCAG eis 2.5.2](https://www.w3.org/TR/WCAG21/#pointer-cancellation):
+  - gebruik niet de `mousedown` event om de button te activeren, gebruik liever de `click` event
+  - `mousedown` mag alleen gebruikt worden als `mouseup` het effect weer ongedaan maakt, bijvoorbeeld een "_fast foward_" button om audio of video door te spoelen.
+- [WCAG eis 2.5.5](https://www.w3.org/TR/WCAG21/#target-size): de button moet groot genoeg zijn om aan te klikken, en kleine buttons moeten niet te dicht op een andere button staan.
+
+## Referenties
+
+- [W3C - Focus Visible](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html)
+- [W3C - Headings & labels](https://www.w3.org/TR/WCAG21/#headings-and-labels)

package/src/button/button-css.md

@@ -0,0 +1,12 @@
+# CSS Button
+
+Het button component maakt gebruik van de CSS library van de gemeente Utrecht. Daarop is het Amsterdam Design toegepast. Concreet betekent dit dat de Utrecht class names worden gebruikt met de Amsterdamse css attribuut waarden.
+Een voorbeeld van een HTML button met de Amsterdamse styling is:
+
+```html
+<button class="utrecht-button">Amsterdam Button</button>
+```
+
+Deze button wordt getoond met de Amsterdamse button styling.
+
+Vedere documentatie van de Utrecht button is terug te vinden in hun [github](https://github.com/nl-design-system/utrecht/tree/main/components/button) repository.

package/src/button/button.scss

@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../node_modules/@utrecht/components/button/css";
+@import "../../utils/breakpoint";
+
+.amsterdam-button {
+  font-size: var(--amsterdam-button-font-size-narrow);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-button-font-size-wide);
+  }
+}
+
+.amsterdam-button--secondary:hover {
+  box-shadow: var(--amsterdam-button-secondary-hover-box-shadow);
+}

package/src/form-label/README.md

@@ -0,0 +1,3 @@
+# Form label
+
+Een label element gebruik je om een formulierelement te beschrijven. Koppel een formulierelement (zoals een `input` of `textarea`) altijd aan een label.

package/src/form-label/form-label.scss

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+.amsterdam-form-label {
+  color: var(--amsterdam-form-label-color);
+  font-family: var(--amsterdam-form-label-font-family);
+  font-size: var(--amsterdam-form-label-font-size-narrow);
+  font-weight: var(--amsterdam-form-label-font-weight);
+  line-height: var(--amsterdam-form-label-line-height);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-form-label-font-size-wide);
+  }
+}

package/src/heading/README.md

@@ -0,0 +1,23 @@
+# Heading
+
+Een heading zegt iets over de onderstaande content. Met behulp van headings kan de gebruiker snel een overzicht krijgen van de structuur van de webpagina.
+
+## Richtlijnen
+
+- Een heading omschrijft de content eronder.
+- Gebruik een heading niet voor opmaak en styling, maar om de structuur van de pagina weer te geven.
+- Gebruik headings hierarchisch en sla geen heading niveaus over. Dus na een `h1` volgt een `h2` en dus niet een `h3`.
+
+## Relevante WCAG eisen
+
+- [WCAG 1.3.1](https://www.w3.org/WAI/WCAG21/quickref/#qr-content-structure-separation-programmatic):
+  Tekst die er uit ziet als een heading wordt ook door een computer herkend als een heading. Door gebruik te maken van het juiste heading niveau is voor alle gebruikers duidelijk hoe de pagina is gestructeerd.
+- [WCAG 2.4.1](https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-skip): Headings kunnen gebruikt worden om naar een volgende sectie te navigeren met het toetsenbord
+- [WCAG 2.4.6](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels): Beschrijf met headings het doel of het onderwerp van de onderliggende content
+- [WCAG 2.4.10](https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-headings): Gebruik headings om de content te structureren
+
+## Referenties
+
+- [W3C - Headings](https://www.w3.org/WAI/tutorials/page-structure/headings/)
+- [W3C - Headings & labels](https://www.w3.org/TR/WCAG21/#headings-and-labels)
+- [A11Y project - Heading structure](https://www.a11yproject.com/posts/how-to-accessible-heading-structure/)

package/src/heading/heading-css.md

@@ -0,0 +1,3 @@
+# CSS Heading
+
+Gebruik de juiste heading HTML-elementen als je van deze classes gebruik maakt. De beschikbare elementen zijn: `h1`, `h2`, `h3`, `h4`, `h5` en `h6`. Let bij het kiezen van een heading niveau op de structuur van de pagina. Heading niveaus worden gebruikt om informatie te groeperen. De titel van de pagina krijgt een `h1`. De eerste subtitel een `h2`. De daarna volgende titels van secties die horen bij die subtitel krijgen een `h3`, enzovoort. Als je een nieuwe sectie begint, gebruik je weer een `h2`. Het is toegestaan om stijl en semantiek los van elkaar te trekken. Een `h1` kan bijvoorbeeld de class `amsterdam-heading-2` krijgen.

package/src/heading/heading.scss

@@ -1,42 +1,58 @@
-@import "../../utils/calculate-fluid-style";
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
 
-.amsterdam-heading {
+@import "../../utils/breakpoint";
+
+@mixin reset {
+  box-sizing: border-box;
   break-after: avoid;
   break-inside: avoid;
-  color: black;
-  font-weight: 800;
-  margin-block-end: 0;
-  margin-block-start: 0;
-  margin-inline-end: 0;
-  margin-inline-start: 0;
+  margin-block: 0;
+  margin-inline: 0;
+}
+
+.amsterdam-heading {
+  color: var(--amsterdam-heading-color);
+  font-family: var(--amsterdam-heading-font-family);
+  font-weight: var(--amsterdam-heading-font-weight);
+
+  @include reset;
 }
 
 .amsterdam-heading-1 {
-  font-size: calculate-fluid-style(32, 80);
-  line-height: calculate-fluid-style(35, 80);
+  font-size: var(--amsterdam-heading-1-font-size-narrow);
+  line-height: var(--amsterdam-heading-1-line-height);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-heading-1-font-size-wide);
+  }
 }
 
 .amsterdam-heading-2 {
-  font-size: calculate-fluid-style(28, 56);
-  line-height: calculate-fluid-style(34, 62);
+  font-size: var(--amsterdam-heading-2-font-size-narrow);
+  line-height: var(--amsterdam-heading-2-line-height);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-heading-2-font-size-wide);
+  }
 }
 
 .amsterdam-heading-3 {
-  font-size: calculate-fluid-style(24, 40);
-  line-height: calculate-fluid-style(32, 48);
-}
+  font-size: var(--amsterdam-heading-3-font-size-narrow);
+  line-height: var(--amsterdam-heading-3-line-height);
 
-.amsterdam-heading-4 {
-  font-size: calculate-fluid-style(22, 32);
-  line-height: calculate-fluid-style(31, 38);
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-heading-3-font-size-wide);
+  }
 }
 
-.amsterdam-heading-5 {
-  font-size: calculate-fluid-style(18, 24);
-  line-height: calculate-fluid-style(25, 31);
-}
+.amsterdam-heading-4 {
+  font-size: var(--amsterdam-heading-4-font-size-narrow);
+  line-height: var(--amsterdam-heading-4-line-height);
 
-.amsterdam-heading-6 {
-  font-size: calculate-fluid-style(16, 18);
-  line-height: calculate-fluid-style(22, 23);
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-heading-4-font-size-wide);
+  }
 }

package/src/icon/README.md

@@ -0,0 +1,19 @@
+# Icon
+
+Iconen zijn visuele symbolen die worden gebruikt om ideeën, thema’s of acties weer te geven. Ze communiceren in één oogopslag de boodschap en vestigen de aandacht op belangrijke (interactieve) informatie. Gebruik altijd een `Icon` component om een SVG icoon heen voor de juiste vormgeving en maatvoering.
+
+## Interactieve elementen
+
+Ter ondersteuning van tekstuele interactie-elementen, zoals knoppen en links, kunnen iconen gebruikt worden. Probeer altijd een icoon te voorzien van begeleidende tekst. Iconen zonder begeleidende tekst mogen alleen gebruikt worden als ze aan internationale standaarden voldoen, zoals menu (hamburger icoon), zoek (vergrootglas), volgende, vorige, play, pauze, enz.
+
+## Kleur
+
+Iconen zijn zwart of wit. Bij interactie zijn ze donkerblauw. Uitgeschakeld zijn ze grijs. En ze moeten voldoen aan dezelfde contrastverhouding voor toegankelijkheid als typografie bij een achtergrondkleur. Het icoon neemt standaard de kleur van de _container_ waar deze in zit over.
+
+## Uitlijning
+
+Iconen staan standaard links van de tekst en zijn verticaal in het midden van de eerste regel tekst uitgelijnd.
+
+## Grootte
+
+De iconen gebruiken dezelfde tekstniveaus als alle typografische componenten om hun grootte te bepalen. Hierdoor zijn icoon en tekst makkelijk op elkaar af te stemmen. [Bekijk de documentatie over typografie voor meer informatie](/docs/docs-designrichtlijnen-typografie--docs#tekstniveaus).

package/src/icon/icon.scss

@@ -1,34 +1,104 @@
-@import "../../utils/calculate-fluid-style";
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
 
 .amsterdam-icon {
   align-items: center;
   display: inline-flex;
+}
 
-  /* TODO: this height should be provided by the text element its part of? */
-  height: calculate-fluid-style(24, 26);
+.amsterdam-icon svg {
+  fill: currentColor;
+}
 
-  /* TODO: 12px is not part of the design system, what should this be? */
-  margin-inline-end: 12px;
+.amsterdam-icon-size-3 {
+  height: calc(var(--amsterdam-icon-size-3-icon-size-narrow) * var(--amsterdam-icon-size-3-container-multiplier));
 
-  /* Offset icon by 3px, because Amsterdam Sans vertical alignment is off */
-  padding-block-end: 3px;
+  @media screen and (width > $amsterdam-breakpoint) {
+    height: calc(var(--amsterdam-icon-size-3-icon-size-wide) * var(--amsterdam-icon-size-3-container-multiplier));
+  }
 }
 
-.amsterdam-icon svg {
-  fill: currentColor;
+.amsterdam-icon-size-3 svg {
+  height: var(--amsterdam-icon-size-3-icon-size-narrow);
+  width: var(--amsterdam-icon-size-3-icon-size-narrow);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    height: var(--amsterdam-icon-size-3-icon-size-wide);
+    width: var(--amsterdam-icon-size-3-icon-size-wide);
+  }
+}
+.amsterdam-icon-size-4 {
+  height: calc(var(--amsterdam-icon-size-4-icon-size-narrow) * var(--amsterdam-icon-size-4-container-multiplier));
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    height: calc(var(--amsterdam-icon-size-4-icon-size-wide) * var(--amsterdam-icon-size-4-container-multiplier));
+  }
 }
 
-.amsterdam-icon-small svg {
-  height: 1rem;
-  width: 1rem;
+.amsterdam-icon-size-4 svg {
+  height: var(--amsterdam-icon-size-4-icon-size-narrow);
+  width: var(--amsterdam-icon-size-4-icon-size-narrow);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    height: var(--amsterdam-icon-size-4-icon-size-wide);
+    width: var(--amsterdam-icon-size-4-icon-size-wide);
+  }
 }
 
-.amsterdam-icon-medium svg {
-  height: 1.5rem;
-  width: 1.5rem;
+.amsterdam-icon-size-5 {
+  height: calc(var(--amsterdam-icon-size-5-icon-size-narrow) * var(--amsterdam-icon-size-5-container-multiplier));
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    height: calc(var(--amsterdam-icon-size-5-icon-size-wide) * var(--amsterdam-icon-size-5-container-multiplier));
+  }
 }
 
-.amsterdam-icon-large svg {
-  height: 2rem;
-  width: 2rem;
+.amsterdam-icon-size-5 svg {
+  height: var(--amsterdam-icon-size-5-icon-size-narrow);
+  width: var(--amsterdam-icon-size-5-icon-size-narrow);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    height: var(--amsterdam-icon-size-5-icon-size-wide);
+    width: var(--amsterdam-icon-size-5-icon-size-wide);
+  }
+}
+
+.amsterdam-icon-size-6 {
+  height: calc(var(--amsterdam-icon-size-6-icon-size-narrow) * var(--amsterdam-icon-size-6-container-multiplier));
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    height: calc(var(--amsterdam-icon-size-6-icon-size-wide) * var(--amsterdam-icon-size-6-container-multiplier));
+  }
+}
+
+.amsterdam-icon-size-6 svg {
+  height: var(--amsterdam-icon-size-6-icon-size-narrow);
+  width: var(--amsterdam-icon-size-6-icon-size-narrow);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    height: var(--amsterdam-icon-size-6-icon-size-wide);
+    width: var(--amsterdam-icon-size-6-icon-size-wide);
+  }
+}
+
+.amsterdam-icon-size-7 {
+  height: calc(var(--amsterdam-icon-size-7-icon-size-narrow) * var(--amsterdam-icon-size-7-container-multiplier));
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    height: calc(var(--amsterdam-icon-size-7-icon-size-wide) * var(--amsterdam-icon-size-7-container-multiplier));
+  }
+}
+
+.amsterdam-icon-size-7 svg {
+  height: var(--amsterdam-icon-size-7-icon-size-narrow);
+  width: var(--amsterdam-icon-size-7-icon-size-narrow);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    height: var(--amsterdam-icon-size-7-icon-size-wide);
+    width: var(--amsterdam-icon-size-7-icon-size-wide);
+  }
 }

package/src/link/README.md

@@ -0,0 +1,26 @@
+# Link
+
+## Introductie
+
+Nederlandse term: koppeling
+
+Links worden gebruikt als navigatie-elementen en kunnen op zichzelf of inline met tekst worden gebruikt. Het is de lichtgewicht variant voor navigatie.
+
+## Bezochte stijl
+
+Bezochte koppelingen geven aan dat een gebruiker de koppeling al heeft geopend. Gebruikte stijlen raden we af bij koppelingen, omdat ze de pagina vaak onoverzichtelijk maken. Het maakt navigeren door een pagina moeilijker. De inline koppeling heeft wel een bezochte stijl. Het vormt geen onderdeel van navigatie elementen die veel gescand worden.
+
+## Referenties
+
+- [Links to cross-origin destinations are unsafe](https://developer.chrome.com/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/): Vermijd `target="_blank"` of gebruik `rel="noopener"` als het moet.
+- [_A comprehensive guide to designing perfect links in UX_, op Prototypr](https://blog.prototypr.io/a-guide-to-designing-perfect-links-in-ux-414558f35730): best practices rondom links.
+- [_Writing Hyperlinks: Salient, Descriptive, Start with Keyword_ door Norman Nielsen Group](https://www.nngroup.com/articles/writing-links/): hoe schrijf je goede links? Een uitgebreid artikel over links.
+- [_Hover, focus, active_, door Wunder](https://wunder.io/wunderpedia/accessibility/accessible-uis/hover-focus-active/): goede uitleg over de states die elementen zoals de link en button hebben in browsers.
+- [MDN: `<a>`: The Anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a): uitgebreid overzicht van alle mogelijkheden van links in HTML.
+
+### Relevante WCAG-regels
+
+- [WCAG 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum)
+- [WCAG 2.4.4](https://www.w3.org/TR/WCAG21/#link-purpose-in-context)
+- [WCAG 2.5.3](https://www.w3.org/TR/WCAG21/#label-in-name)
+- [WCAG 3.1.2](https://www.w3.org/TR/WCAG21/#language-of-parts)