Work↗02 — Featured↗Accessibility · Germany

BarriereHilfe.

Un écosystème d'accessibilité numérique en 3 tiers délivrant des solutions WCAG natives à grande échelle.

Visit Live Project↗
CLIENT
BarriereHilfe
ROLE
Full-Stack Architect & DevOps Lead
YEAR
2025
DURATION
June 2025 - Nov 2025
STATUS
Completed
barrierehilfe
§01 — OVERVIEW
BarriereHilfe est une plateforme d'accessibilité numérique de pointe conçue pour rendre instantanément les sites web conformes aux directives WCAG. Structuré comme un système distribué et interconnecté en 3 tiers, le projet comprend un site marketing et d'audit sous Next.js, un widget d'accessibilité en JavaScript natif léger servi de manière sécurisée par un CDN dédié, et une console d'administration robuste sous PHP. L'écosystème permet aux entreprises et aux administrations publiques d'intégrer des outils d'accessibilité en ajoutant une simple balise script, tout en permettant aux administrateurs de personnaliser et de sécuriser les fonctionnalités depuis une console centrale.
§02 — CHALLENGE

Distribution d'un Script Multi-Tenant Ultra-Léger

Le plugin d'accessibilité étant injecté sur les sites de tiers, il devait s'exécuter instantanément sans dépendances ni frameworks lourds pour ne pas dégrader le score de performance (PageSpeed) de l'hôte, tout en chargeant dynamiquement ses configurations personnalisées.

Sécurisation du CDN & Protection des Origines

Le script étant accessible publiquement via 'cdn.barrierehilfe.de', il était vulnérable au vol de bande passante et au hotlinking non autorisé. Le CDN nécessitait des règles de sécurité strictes pour interdire le chargement du script en dehors des domaines clients sous licence.

Interopérabilité entre Technologies Distribuées

La coordination en temps réel des données entre une console administrative PHP, une vitrine moderne Next.js et un widget client en JS natif exigeait des API sécurisées, légères et un routage de conteneurs hautement performant sous Kubernetes.

§03 — THE BUILD
Centralized PHP administrative control dashboard showing custom WCAG styling configurations
Sleek vanilla JS accessibility compliance widget rendering on a corporate website
BarriereHilfe Next.js portal showing a website audit report view
Tableau de bord d'administration centralisé en PHP affichant les configurations de style
§04 — APPROACH
J'ai conçu l'architecture pour séparer strictement les préoccupations. Le widget d'accessibilité a été développé en JavaScript, HTML et CSS natifs ultra-optimisés, pesant moins de 20 Ko et évitant toute surcharge de framework. Pour sécuriser la distribution, j'ai configuré des politiques de CORS strictes, des en-têtes d'origine HTTP et des restrictions par référent de domaine sur le serveur CDN afin de bloquer les appels non autorisés. J'ai conçu des points d'accès API sécurisés entre la console d'administration PHP et le CDN pour diffuser instantanément les configurations personnalisées des clients. Enfin, j'ai déployé l'ensemble du réseau sur un cluster Kubernetes (K8s) doté de règles d'Ingress personnalisées, d'autoscaling de pods et d'environnements Docker pour garantir une haute disponibilité et des déploiements fluides.
STACK
Next.jsPHPVanilla JSCDNKubernetesDocker
§05 — OUTCOMES
3-Tiers
Systèmes interconnectés (Next.js + PHP + CDN Natif)
<45ms
Temps de réponse moyen du script CDN
100%
Conformité technique aux normes WCAG AA/AAA
K8s
Infrastructure DevOps conteneurisée et hautement disponible
NEXT PROJECT
03 / 5
Kodschul→

Autonomiser les équipes d'entreprise et les développeurs grâce à des formations informatiques et IA pratiques et de haut niveau.