Overview

DON Front-end provides guidance on building accessible Dutch government web apps, implementing NL Design System components, and ensuring WCAG compliance. It consolidates official references to help teams deliver consistent, accessible interfaces.

How This Skill Works

The skill organizes documentation by topic (NL Design System, accessibility, formatting and linting) and links to authoritative references. Users browse topics, implement NL Design System components, and run automated checks like run-axe to verify WCAG conformance.

When to Use It

• Kick off a new government web application requiring accessibility by default
• Implement NL Design System components in a UI
• Audit or improve WCAG conformance on an existing site
• Set up formatting, linting, and accessibility tooling for a frontend project
• Research and align with official digitoegankelijk standards and tools

Quick Start

1. Step 1: Open References index and NL Design System docs to understand patterns
2. Step 2: Choose an NL Design System component and implement it in your page
3. Step 3: Run formatting/linting and perform accessibility checks (run-axe) to verify WCAG conformance

Best Practices

• Follow NL Design System guidelines for components, patterns, and accessibility basics
• Aim for WCAG AA conformance across pages and interactions
• Use automated checks (linting, formatting, run-axe) as part of CI
• Reuse documented patterns and components to avoid custom, inconsistent UI
• Document architectural and design decisions with explicit references to the official docs

Example Use Cases

• Build a citizen portal using NL Design System components and WCAG-compliant forms
• Migrate an existing municipal site to NL Design System for consistent UI
• Integrate GemeentenIconen with accessible markup and proper ARIA labeling
• Run axe-based accessibility checks on a form-heavy page and address violations
• Implement a map-based service using Maps.developers.amsterdam with accessible controls

Frequently Asked Questions