Aller au contenu
Brussels Governance Monitor

Accessibilité

Brussels Governance Monitor s'engage à rendre son contenu accessible au plus grand nombre, conformément aux Directives pour l'accessibilité des contenus Web (WCAG) 2.2, niveau AA.

Statut de conformité

Ce site vise la conformité au référentiel WCAG 2.2 niveau AA. Un audit interne a été réalisé le 24 mars 2026 couvrant les critères 2.2 spécifiques (Focus Not Obscured, Focus Appearance, Target Size, Consistent Help, Accessible Authentication). Les vérifications de contraste réel et les tests avec lecteurs d'écran restent à compléter.

Mesures prises

  • Structure sémantique : balises HTML5 (header, main, nav, article, section, fieldset, legend), hiérarchie de titres cohérente, fil d'Ariane avec balisage Schema.org
  • Navigation au clavier : lien d'accès rapide au contenu (skip link), navigation clavier dans les menus déroulants (flèches, Échap, Home, End), piège de focus dans la boîte de recherche et le menu mobile
  • Formulaires accessibles : labels associés (htmlFor), fieldset/legend pour les groupes, messages d'erreur et de succès annoncés aux lecteurs d'écran (role="status", role="alert", aria-live), champs honeypot masqués (aria-hidden, tabIndex -1)
  • Contrastes : palette de couleurs en oklch vérifiée pour un rapport de contraste minimum de 4,5:1 sur tous les textes. Mode « contraste élevé » disponible (ratio 7:1, WCAG AAA)
  • Médias et mouvement : respect de la préférence « prefers-reduced-motion », aucune animation automatique
  • Langue : attribut lang dynamique sur chaque page (fr/nl/en/de). Lecteur vocal intégré avec détection de la langue (fr-BE, nl-BE, en-GB, de-DE)
  • Impression : feuille de style dédiée avec URLs visibles, suppression des éléments interactifs, marges de page, pagination des sections. Bouton « Imprimer » dans la barre d'accessibilité
  • Mode sombre : thème sombre complet via inversion des variables CSS. Détection automatique de la préférence système (prefers-color-scheme). Basculement manuel conservé dans localStorage
  • Taille du texte : mise à l'échelle de 85 % à 150 % via la barre d'accessibilité (basée sur rem, compatible avec le zoom navigateur)
  • Police dyslexie : option OpenDyslexic activable, chargée à la demande uniquement
  • Composants interactifs : aria-expanded, aria-controls et aria-pressed sur tous les éléments dépliables (métriques, sources, filtres, engagements). Recherche avec rôle combobox/listbox. Étoiles de notation avec role="radiogroup"
  • Liens externes : indication « ouvre dans un nouvel onglet » accessible aux lecteurs d'écran (texte masqué sr-only)

Barre d'outils d'accessibilité

Un bouton fixe en bas à droite de l'écran (icône d'accessibilité universelle) ouvre un panneau regroupant tous les réglages de confort :

  • Mode sombre / clair — bascule instantanée, mémorisée entre les visites
  • Contraste élevé — augmente le rapport de contraste à 7:1 (WCAG AAA)
  • Police dyslexie — remplace la police par OpenDyslexic
  • Taille du texte — A-/A+ (de 85 % à 150 %), avec remise à zéro
  • Lire à voix haute — synthèse vocale du contenu principal (Web Speech API, 4 langues)
  • Imprimer — déclenche l'impression native du navigateur

Technologies utilisées

HTML5, CSS (Tailwind CSS v4, variables oklch), JavaScript (React 19/Next.js 16), ARIA 1.2, Schema.org (JSON-LD), Web Speech API.

Accessibilité linguistique

Le contenu principal du site est disponible en quatre langues : français, néerlandais, anglais et allemand. L'attribut lang est défini dynamiquement sur chaque page. Le digest hebdomadaire (BGM Weekly Digest) est disponible dans plus de 80 langues, parce que Bruxelles compte 184 nationalités et que la gouvernance concerne tout le monde. Les traductions automatiques sont signalées comme telles.

Langage clair

BGM utilise un langage accessible et évite le jargon institutionnel. Chaque fiche domaine inclut un résumé « En bref » en lecture facile. Un travail d'adaptation complète en Facile à Lire et à Comprendre (FALC) est envisagé pour les contenus clés.

Limites connues

  • Les extraits de résultats de recherche sont rendus en HTML via Pagefind avec balises <mark> stylisées, mais la sémantique « highlight » n'est pas annoncée par tous les lecteurs d'écran
  • Le digest hebdomadaire utilise un layout séparé avec lang="en" sur la balise <html> (limitation Next.js pour les layouts imbriqués). Le contenu multilingue est correctement balisé via un attribut lang sur le conteneur intérieur
  • Les ratios de contraste exacts en mode sombre nécessitent une vérification en conditions réelles (les couleurs oklch ne sont pas convertibles statiquement)
  • La qualité de la synthèse vocale dépend du navigateur et du système d'exploitation de l'utilisateur
  • Le bouton d'accessibilité (fixé en bas à droite) peut partiellement masquer un élément recevant le focus clavier en bas de page (critère WCAG 2.4.11 Focus Not Obscured). Le contenu reste accessible par défilement

Ce site vise la conformité WCAG 2.2 niveau AA, le référentiel sur lequel repose le label AnySurfer. Une certification AnySurfer n'a pas encore été sollicitée.

Retour d'information

Si vous rencontrez un obstacle d'accessibilité sur ce site, utilisez le formulaire de feedback ou contactez-nous à contact@brusselsgovernance.be. Nous nous engageons à répondre dans un délai de 15 jours ouvrables.

Cette déclaration a été mise à jour le 24 mars 2026.