Principes de conception

Accessibilité

Le DSBJ vise la conformité WCAG 2.1 niveau AA : contrastes suffisants entre texte et fond, cibles tactiles et focus visibles, structures sémantiques (titres, listes, landmarks).

La navigation au clavier doit permettre d’utiliser tous les composants sans souris. Les états (hover, focus, actif, désactivé) sont distincts et annoncés visuellement.

Les contenus dynamiques et les formulaires restent exploitables avec les lecteurs d’écran : textes alternatifs pertinents, associations étiquette/champ, messages d’erreur explicites, liens d’évitement vers le contenu principal.

Cohérence

Tous les composants et utilitaires utilisent le préfixe bj- pour éviter les collisions et clarifier l’origine du code.

Les jetons CSS (--bj-*) centralisent couleurs, espacements, typographie et ombres : préférez-les aux valeurs brutes pour rester aligné avec les mises à jour du système.

Les composants réutilisables (boutons, champs, en-tête, fil d’Ariane, etc.) assurent une expérience homogène d’un site ministériel à l’autre.

Sobriété

L’interface reflète une identité étatique : hiérarchie claire, vocabulaire administratif compréhensible, pas d’effets superflus ni de surcharge visuelle.

Chaque élément affiché doit avoir une utilité pour la tâche de l’usager ; le design privilégie la lisibilité et la confiance plutôt que l’originalité décorative.

Responsive

Le DSBJ adopte une approche mobile-first : les styles de base correspondent aux petits écrans, puis les media queries élargissent la mise en page.

Quatre points de rupture structurent la grille et les utilitaires responsives :

• SM - 576 px
• MD - 768 px
• LG - 992 px
• XL - 1248 px (largeur max. du conteneur principal)