Ga naar hoofdinhoud

NL Design System Baseline

Wij maken technologie voor gebruikers, daarom bepalen we hier welke browsers en hulpmiddelen zoveel gebruikt worden dat je moet zorgen dat het er goed mee werkt.

Met deze Baseline stellen we vast welke technologieën NL Design System ondersteunt. Het kernteam gebruikt de Baseline om mee te testen tijdens het ontwikkelen van de Candidate en Hall of Fame componenten en webpagina's.

We raden gebruik van de Baseline voor ontwikkelingen met NL Design System aan, maar het kernteam stelt deze niet verplicht voor Community bijdragen. Organisaties kunnen kiezen deze Baseline bij opdrachten of aanbestedingen wel verplicht te maken.

Als je een developer of tester bent, dan kun je de NL Design System Baseline gebruiken om vooraf te beslissen welke technologie je gebruikt, en achteraf gebruiken om een testplan mee uit te voeren.

Technologie met brede ondersteuning

De populaire website Can I Use biedt een gebruiksvriendelijk overzicht of de browserondersteuning voldoende is. Als een feature de Data Badge heeft met "Widely available across major browsers", dan kun mag je de feature gebruiken.

Features met de Data Badge "Newly available across major browsers" moet je alleen gebruiken als je ook een goed werkend alternatief biedt met Baseline ondersteuning.

We gebruiken Can I Use omdat ze een goed systeem hebben. Op basis van statistieken in de RUM Archive wordt bepaald welke browserversies wereldwijd veel gebruikt worden. Per technologie is bekend in welke browserversie de ondersteuning begint. Met de gecombineerde informatie kun je weten of browserondersteuning voldoende in browsersversies die tussen 30 maanden geleden en nu zijn gepubliceerd. Dit is wat Can I Use doet.

Bijvoorbeeld: CSS Grid Layout wordt goed ondersteund en daarom gebruiken we display: grid. Maar CSS Subgrid is eind 2024 nog gemarkeerd als "Newly available across major browsers" en daarom gebruiken we CSS Subgrid nog niet.

Software om mee te testen

De volgende combinaties van software moet je mee testen voor functionaliteit en WCAG 2.2 succescriteria. Gebruik de laatste versie van alle software. Niet elke screenreader werkt optimaal met elke browser. Het gebruik van een combinatie die niet genoemd wordt kan problemen opleveren

  • Chrome met de screenreader JAWS op Windows
  • Chrome met de screenreader NVDA op Windows
  • Chrome op Android
  • Chrome op Android met de screenreader Talkback
  • Chrome op Windows of macOS
  • Firefox
  • Firefox met de screenreader NVDA op Windows
  • Safari op iOS
  • Safari op iOS met de screenreader VoiceOver
  • Safari op macOS
  • Safari op macOS met de screenreader VoiceOver

Als bepaalde functionaliteit niet blijkt te werken in oudere softwareversies die minder oud zijn dan 30 maanden, overweeg dan wel om het probleem op te lossen en te testen in specifieke oudere softwareversies.

Testen voor toegankelijkheid

Om vast te kunnen stellen of iets toegankelijk is en voldoet volgens WCAG, mag je zelf kiezen welke technologie je ondersteunt: de Accessibility Support Baseline. Voor NL Design System is dat vastgelegd op deze pagina.

Het toegankelijkheidsdoel van NL Design System is WCAG 2.2 Niveau AA. Daarmee voldoen we aan de wettelijke eis voor WCAG 2.1, plus enkele nieuwe succescriteria.

Als je een WCAG-EM toegankelijkheidsonderzoek doet, test dan met elke combinatie van software in de lijst.

Je kunt de NL Design System Baseline noemen bij je onderzoeksrapport onder "basisniveau van toegankelijkheidsondersteuning". Je kunt verwijzen naar de Baseline momentopname onder "bij het onderzoek gebruikte browsers en softwareprogramma's".

100% toegankelijk

Het uitgangspunt van NL Design System is toegankelijk en gebruiksvriendelijk ontwerpen en ontwikkelen. De standaardversie van een website moet helemaal toegankelijk zijn. Toegankelijke alternatieven voor niet-toegankelijke kleuren, teksten en techniek zijn daarom geen onderdeel van de NL Design System baseline.

Functies zoals een hoogcontrastknop of toegankelijkheidswidget zijn alleen toegestaan wanneer de standaardversie toegankelijk is en je op een toegankelijke manier terug kan naar de standaardversie.

Instellingen voor persoonlijke voorkeuren

Besturingssystemen en browsers bieden verschillende opties om persoonlijke voorkeuren voor toegankelijkheid in te stellen.

Test of je website de volgende instellingen ondersteunt:

  • forced-colors: active, oftewel: forced colors mode
  • prefers-reduced-motion: reduce
  • prefers-reduced-transparency: reduce

Daarnaast zijn er nog een aantal instellingen die optioneel kunnen worden ondersteund:

  • prefers-color-scheme: dark, oftewel: dark mode
  • prefers-contrast: more, oftewel: high contrast mode

Forced colors mode

Forced Colors Mode is een toegankelijkheidsfunctie in besturingssystemen zoals Windows. Gebruikers kiezen hiermee een beperkte set aan kleuren om teksten en onderdelen op een pagina beter zichtbaar te maken. De CSS media-feature forced-colors detecteert of deze functie actief is en overschrijft de kleuren van de website.

De website moet goed werken wanneer forced colors mode actief is. Dat betekent:

  • De visuele hiërarchie moet duidelijk blijven, eventueel door gebruik van extra borders.
  • Buttons en links zijn herkenbaar aan de kleur, door het gebruik van CSS system colors.
  • Disabled buttons, links, formulierelementen en placeholders zijn herkenbaar aan de kleur, door gebruik van CSS system colors.
  • SVG-afbeeldingen zoals iconen zijn goed zichtbaar, door gebruik van CSS system colors.
  • Alle tekst is goed leesbaar doordat een CSS system color als achtergrondkleur is ingesteld. Let hierbij in het bijzonder op componenten die overlappen met andere onderdelen op de pagina, zoals:
    • Select Combobox
    • Dialog, Alert Dialog en Modal Dialog
    • Drawer
    • Skip Link
    • Toggletip

Momentopname

Technologie verandert elke maand, dus de precieze betekenis van de Baseline verandert. Op de NL Design System website publiceren we periodiek een momentopname van welke softwareversies op dat moment worden bedoeld met de Baseline.

Maak duidelijke afspraken welke versie van de Baseline je kiest als doel. Er zijn heel veel opties denkbaar, bijvoorbeeld:

  • Spreek voor een toegankelijkheidsonderzoek af dat de meest recente versies van alle software wordt gebruikt.
  • Spreek bij het aanbesteden van software af dat de meest recente Baseline momentopname geldt die beschikbaar is bij de start van de werkzaamheden.

Voor wie is de Baseline bedoeld?

De Baseline is in eerste instantie bedoeld voor ontwikkelingen waarin het kernteam een rol speelt:

  • Candidate componenten
  • Voorbeeld-webpagina's
  • Toegankelijkheidsonderzoeken naar de NL Design System website en voorbeeld-webpagina's

Hall of Fame

Voor Hall of Fame componenten vragen we nog feedback aan stakeholders zoals belangenorganisaties, testers en ontwikkelaars in de Community. Welke software en welke softwareversies zijn belangrijk om op te nemen in de Baseline?

Deel je inzichten met het kernteam, dat waarderen wij enorm!

Community

De baseline is niet verplicht voor Community componenten en als je met NL Design System werkt.

Organisaties kunnen natuurlijk wel vrijwillig de NL Design System Baseline vereisen bij het aanbesteden van nieuwe ontwikkelingen en bij toegankelijkheidsonderzoeken, als ze een op zoek zijn naar een goede Accessibility Support Baseline.