Jolijn van der Kolk

NL Design System is een samenwerking tussen overheidsorganisaties en een community van 600+ leden met als doel herbruikbare design en ontwikkelingsresources te delen. Het systeem omvat een design kit, componentenbibliotheek, richtlijnen en inzichten uit gebruikersonderzoeken. Voorbeelden zijn te vinden op https://sonamalearning.design/, https://lion-web.netlify.net/, en https://nldesignsystem.nl/.

Het kernteam hanteert het Estafette model, waarbij de community bijdraagt en verbeteringen leiden tot Hall of Fame-erkenning. Het systeem is open source en houdt rekening met verschillende huisstijlen en digitale producten. De architectuur omvat CSS-componenten, design tokens in JSON, webcomponenten, framework componenten, en documentatie in Markdown met visuele regressie tests. Voorbeelden van componenten zijn Utrecht-alert en Utrecht-paragraph.

Design tokens worden gebruikt voor configuratie, met lagen voor huisstijl, algemene, en component tokens. Deze worden in JSON geplaatst, momenteel in Style Dictionary. Design tokens fungeren als API en zijn beschikbaar onder de EUPL-licentie. Webcomponenten worden ingezet voor hergebruik, en het systeem volgt webstandaarden in ontwikkeling. Toegankelijkheid wordt benadrukt, met testing library, accessibility tree testing, en forced colors mode. Lokalisatie omvat logical CSS properties voor links naar rechts en rechts naar links.

Fenna de Wilde

Fenna, een oud CMD-student en al 4,5 jaar actief als creative front-end developer, deelde recent haar ervaring met Accessibility Design & Development, met de focus op haar werk voor Phantom.

Bij het bouwen van websites benadrukte ze het belang van toegankelijkheid voor alle gebruikers. Enkele codevoorbeelden en overwegingen zijn:

Focus state voor toetsenbordgebruikers: Voeg een :focus-visible state toe bij een :hover-state. ARIA (Accessible Rich Internet Applications): Belangrijke attributen zoals aria-label, aria-controls, aria-expanded, en aria-live. Toegankelijke carrousels: Test kleurcontrast met een WAI-test, let op lettergroottes en lijnlengtes. Alt-tekst voor afbeeldingen: Essentieel voor begrijpelijke content. Verder benadrukte ze:

Het implementeren van een "Skip to content" knop. Actief gebruik maken van een screenreader. Autoplay video's/carrousels moeten pauzeerbaar zijn. Overweging van prefers-reduced-motion om gebruikers met gevoeligheid voor beweging tegemoet te komen.