Sector(s)

Visit the site

Visit the site

Organizations Involved

Challenge

Brussels Capital Region had 200+ fragmented government websites creating a digital maze for 1.2 million citizens seeking essential services. Poor accessibility, inconsistent navigation, and administrative silos made it nearly impossible for residents to find information efficiently.

Solution

Drupal 10-powered transformation into be.brussels - a single, unified digital portal with modern decoupled architecture:

  • Backend: Drupal 10
  • Frontend: NextJS
  • API: GraphQL
  • Infrastructure: Kubernetes, Redis caching

Key Features

  • WCAG 2.2 AA compliant throughout
  • 3,550+ fully accessible pages
  • Reusable component library
  • Automated accessibility testing
  • Screen reader optimized (NVDA/JAWS)

Results

  • 100,000+ monthly visitors
  • 20% reduction in bounce rate
  • 50% conversion success rate
  • Winner of Impact Award for Digital Accessibility
  • AnySurfer label certification

Impact

Transformed 200+ websites into one coherent ecosystem, setting new standards for government digital accessibility while reducing maintenance costs and improving citizen experience.

Live Site: be.brussels
Agency: iO Digital

About the project

The Challenge

The Brussels Capital Region faced a complex digital accessibility challenge. With over 200 websites managed by different government departments, citizens struggled to navigate a digital maze of fragmented information. Each department operated with its own digital logic, creating barriers for the 1.2 million residents seeking essential government services—from birth registration to parking permits, cultural events to social services.

The existing digital landscape presented multiple accessibility barriers:

  • Broken screen reader compatibility
  • Unusable keyboard navigation
  • Insufficient color contrast
  • Inconsistent user interface patterns
  • Administrative silos preventing logical information flow

The Drupal Solution

Working with digital agency iO, Brussels Capital Region implemented a comprehensive digital transformation using Drupal 10 as the content management foundation. The solution created be.brussels, a unified digital ecosystem that consolidates all government services into one accessible portal.

Technical Architecture

The project utilized a modern, decoupled architecture:

  • Backend: Drupal 10 - Robust content management platform
  • Frontend: NextJS - Modern JavaScript framework for enhanced user experience
  • API: GraphQL - Efficient communication between backend and frontend
  • Caching: Redis - Significantly improved page loading speeds
  • Image Processing: Imgproxy - Automatic visual optimization
  • Infrastructure: Kubernetes - Flexible, scalable deployment
  • CI/CD: GitLab - Full deployment automation with quality controls

Accessibility-First Approach

The project established new standards for digital accessibility in public services:

  • WCAG 2.2 AA compliance as the absolute minimum standard
  • Implementation of WAI-ARIA best practices for dynamic interfaces
  • Development of a reusable component library ensuring consistency
  • Automated accessibility testing integrated into the development workflow
  • Comprehensive validation with NVDA and JAWS screen readers
  • Keyboard-only navigation testing without mouse dependency
  • WCAG-compliant color contrast implementation

Implementation Process

1. Comprehensive Accessibility Audit

The team conducted an in-depth analysis of existing websites, mapping user barriers and identifying gaps between theoretical accessibility and practical reality.

2. Inclusive Co-Design Workshops

All administrative stakeholders participated in inclusive design workshops, ensuring user needs were integrated from the design phase forward.

3. Component Library Development

A comprehensive library of reusable, accessible components was developed to ensure technical consistency and compliance across all government services.

4. Phased Migration

The transformation involved migrating ten administrations to the new platform, with additional administrations currently being integrated.

Results and Impact

Accessibility Achievements

  • 3,550+ web pages made fully accessible
  • WCAG 2.2 AA compliance across the entire portal
  • Winner of the Impact Award for Digital Accessibility
  • Awarded the prestigious AnySurfer label
  • 200+ websites successfully consolidated into one coherent ecosystem

Performance Metrics

  • 100,000+ unique visitors per month
  • 20% decrease in bounce rate over two years
  • 50% successful conversion rate
  • Improved SEO through enhanced semantic structure
  • Optimized loading times and performance

Operational Benefits

  • Lower maintenance costs through standardized architecture
  • Reduced digital footprint
  • Simplified, intuitive user experience for all citizens
  • Scalable infrastructure supporting future growth

Cultural Impact

Beyond technical achievements, this project represents a fundamental shift in how government digital services approach accessibility. Rather than treating accessibility as a legal compliance requirement, Brussels Capital Region now embraces it as a core value embedded in every design and development process.

"Together with iO, we created digital solutions that simplify citizens' lives and contribute to an inclusive, sustainable digital future." — Benjamin Snick, Project Manager: Customer Relation, Product & Strategy – eCitizen

Key Takeaways for the Drupal Community

  • Accessibility by Design: Integrating WCAG 2.2 AA compliance from project inception
  • Component-Based Development: Creating reusable, accessible components for consistency
  • Decoupled Architecture: Leveraging Drupal 10 with modern frontend technologies
  • Automated Testing: Implementing accessibility testing in CI/CD pipelines
  • User-Centered Design: Conducting inclusive co-design workshops with all stakeholders
  • Performance Optimization: Using modern caching and image processing technologies

Drupal Modules and Configuration

While specific module details weren't disclosed, the project demonstrates best practices for:

  • GraphQL API implementation for decoupled architectures
  • Multi-site management and content consolidation
  • Accessibility-focused theming and component development
  • Performance optimization through caching strategies
  • Multilingual content management for diverse populations

Project Recognition

This project showcases how Drupal can serve as the foundation for large-scale digital transformation that prioritizes accessibility and user experience. The Brussels Capital Region case demonstrates that government digital services can be both technically excellent and genuinely inclusive.

Technologies Used: Drupal 10, NextJS, GraphQL, Redis, Imgproxy, Kubernetes, GitLab CI/CD

Why Drupal was chosen

Why Drupal Was Chosen for Brussels Capital Region

Government-Grade Requirements Met

Robust Content Management at Scale Brussels needed a platform capable of consolidating 200+ websites from different government departments into one cohesive system. Drupal 10's enterprise-level content management capabilities and proven track record with large-scale government implementations made it the ideal foundation.

Built-in Accessibility Framework Drupal's native accessibility features aligned perfectly with the project's WCAG 2.2 AA compliance requirements. The platform's semantic HTML output, keyboard navigation support, and screen reader compatibility provided a solid foundation for building accessible government services.

Multilingual Excellence Brussels serves a diverse, multilingual population. Drupal's robust multilingual capabilities allow seamless content management across multiple languages, essential for serving the capital region's international community.

Decoupled Architecture Support The project required modern frontend flexibility while maintaining content management power. Drupal 10's GraphQL capabilities enabled the decoupled architecture with NextJS, providing the performance and user experience benefits needed for 100,000+ monthly visitors.

Security & Compliance Government websites demand the highest security standards. Drupal's security-first approach, regular security updates, and compliance with government digital standards made it the trusted choice for handling sensitive citizen data and services.

Flexibility for Complex Content Structures With content from multiple government departments covering everything from birth registration to cultural events, Drupal's flexible content modeling allowed the team to create unified information architecture while preserving departmental workflows.

Open Source Sustainability For a public sector project, Drupal's open-source nature eliminated vendor lock-in while providing long-term sustainability and community support - crucial for government digital infrastructure that must serve citizens for decades.

Proven Government Track Record Drupal powers numerous government websites globally, from local municipalities to national portals, demonstrating its reliability and suitability for public sector digital transformation projects.

The combination of scalability, accessibility, security, and flexibility made Drupal 10 the natural choice for Brussels' ambitious digital unification project.

Technical Specifications

Drupal version: