# Système de design DSFR ## Aperçu de l’interface du système de design DSFR Comparez les sections liées et indépendantes à l’aide de commandes utilisables au clavier et d’un retour visuel indiquant l’état développé. ## Référence de conception du système de design DSFR Documentation officielle DSFR v1.15 et métadonnées vérifiées du paquet @gouvfr/dsfr 1.15.3. Ces valeurs sont des références officielles ; l’aperçu neutre illustre la structure d’interaction sans reprendre l’identité visuelle de l’État. ### Typographie officielle | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Primary / supplementary families | Marianne / Spectral | Polices institutionnelles ; les conditions d’utilisation applicables doivent être respectées. | | Fallback families | Arial / Georgia | Substitutions documentées. | | Standard text | 16px / 24px | Style de texte fr-text pour le corps de texte. | | Article text | 18px / 28px | Rôle éditorial fr-text--lg. | | H1 mobile → desktop | 32/40px → 40/48px | Taille de police / hauteur de ligne ; changement au point d’arrêt MD. | ### Grille officielle | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | SM / MD / LG / XL | 576 / 768 / 992 / 1248px | Seuils des points d’arrêt documentés. | | XL content maximum | 1200px | Largeur maximale du conteneur dans la référence de grille. | | Optional gutters | 16px small; 24px LG and above | Par défaut, la grille de code n’active pas les gouttières. | ### Espacement | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Base progression | Multiples of 4px | Rythme courant de mise en page. | | Documented exceptions | −6, −2, 2, 6px | Ajustements spécifiques, et non nouvelle échelle arbitraire. | ### Règles de l’accordéon | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | fr-accordions-group | Linked by default | L’ouverture d’un élément ferme l’autre. | | data-fr-group="false" | Multiple panels may stay open | Mode indépendant explicite. | | aria-controls | Matches panel id | Relation entre la commande et le panneau. | | fr-collapse--expanded | Runtime expanded class | Géré par DSFR JavaScript. | ## Guide complet du système de design DSFR Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Contexte institutionnel du système de design DSFR ### Un système d’identité de l’État > DSFR est le système de design de l’État français. Les conditions officielles en vigueur le destinent aux services .gouv.fr et aux applications mobiles de l’État, et distinguent les utilisateurs et opérateurs de l’État des organismes extérieurs. Il s’agit d’une limite d’adoption essentielle, et non d’une note de bas de page que l’on peut faire disparaître en masquant un logo. Une équipe éligible doit suivre le processus officiel d’approbation et de mise en œuvre du projet. Un produit sans lien avec l’État peut s’inspirer de l’architecture de l’information documentée et des principes d’accessibilité sans se présenter sous l’identité de l’État français. L’aperçu de cette page est un exercice original et neutre sur les accordéons : il ne charge ni les styles, ni les polices, ni les scripts de DSFR. Consultez la spécification associée ## Référence typographique officielle du système de design DSFR ### Usages de Marianne et polices de remplacement La documentation typographique indique Marianne et Spectral, avec Arial et Georgia comme polices de remplacement respectives. Le texte courant standard est en 16px/24px ; le texte d’article, en 18px/28px. Le H1 passe de 32px/40px sur mobile à 40px/48px sur ordinateur. Ces valeurs décrivent le système officiel ; la démonstration utilise un traitement typographique neutre qui lui est propre. Les classes de taille de texte ne remplacent pas les niveaux de titre sémantiques. Conservez le titre de la page en h1 et choisissez pour chaque titre d’accordéon le niveau adapté à la hiérarchie. Un style visuellement plus grand ne doit pas conduire à sauter un niveau dans le plan du document. Consultez la spécification associée ## Grille et espacement du système de design DSFR ### Seuils de mise en page adaptative explicites La référence de grille définit SM à 576px, MD à 768px, LG à 992px et XL à 1248px. La largeur maximale de contenu est de 1200px. Les gouttières sont facultatives : 16px aux petites tailles et 24px à partir de LG. La grille de code n’a pas de gouttières par défaut, un point important lors de la transposition d’une grille Figma en balisage. L’espacement repose sur des multiples de 4px, avec des exceptions documentées de −6px, −2px, 2px et 6px. Une classe d’espacement correspond donc à un système maîtrisé, et non à une autorisation d’inventer des décalages arbitraires. L’aperçu neutre utilise une colonne de lecture indépendante et ne prétend pas reproduire la grille officielle. Consultez la spécification associée ## Anatomie de l’accordéon du système de design DSFR ### Titre, commande et panneau associé Le composant documenté comprend section.fr-accordion, un titre heading.fr-accordion__title, une commande button.fr-accordion__btn et un div.fr-collapse placé après. La valeur de aria-controls de la commande doit correspondre à l’id du panneau ; aria-expanded indique son état d’ouverture. Le niveau du titre dépend de la structure de la page environnante. Le panneau contient des éléments textuels appropriés, tels que des paragraphes et des listes. JavaScript natif DSFR gère la classe d’état développé ; une application éligible ne doit pas ajouter un deuxième gestionnaire de clic indépendant qui entrerait en conflit avec le composant. L’aperçu neutre met en œuvre son propre état ouvert/fermé tout aussi explicite, à des fins de comparaison pédagogique. Consultez la spécification associée ## Éléments liés ou indépendants dans le système de design DSFR ### Le paramètre du groupe modifie le comportement Par défaut, les éléments d’un fr-accordions-group sont liés : l’ouverture de l’un d’eux ferme tout autre élément ouvert. Le paramètre data-fr-group="false" permet de laisser plusieurs panneaux ouverts en même temps. L’exemple présente les deux modes pour comparer leurs effets sur les renvois entre informations. Cette distinction est importante pour les consignes de préparation. Une personne qui consulte la liste des documents peut avoir besoin de garder le panneau des adresses ouvert en même temps. Un groupe qui n’autorise l’ouverture que d’une section à la fois économise de l’espace, mais masque régulièrement le contexte. Choisissez le mode en fonction de la tâche, plutôt que de considérer le réglage par défaut comme une règle éditoriale. La page sur l’accessibilité va plus loin que le comportement par défaut à l’exécution : elle recommande par défaut des groupes indépendants, car les groupes liés peuvent poser des difficultés d’utilisation. La démonstration commence donc en mode indépendant. - Le mode indépendant permet de comparer deux sections ouvertes en même temps. - Le mode lié n’autorise qu’une seule section ouverte à la fois. - Lors du changement de mode, l’état aria-expanded doit rester cohérent. Consultez la spécification associée ## Système de design DSFR : que faut-il laisser visible ? ### Ne masquez pas l’étape essentielle Les recommandations du composant préconisent les accordéons pour les contenus longs, facultatifs ou utiles seulement à certains lecteurs. Elles déconseillent de masquer les informations que tous les utilisateurs doivent lire, d’utiliser des accordéons pour des contenus très courts, d’y imbriquer des contrôles complexes ou de les placer dans une fenêtre modale. La démonstration laisse donc son objectif et ses commandes visibles. Seules les notes facultatives sur l’accès aux salles, la liste du matériel et les explications sur l’arrivée sont repliées. Chaque titre correspond à une question distincte, et le contenu révélé se présente sous forme de courts paragraphes et de listes, sans second parcours interactif. 1. Laissez la consigne principale en dehors de l’accordéon. 2. Répartissez les informations complémentaires en fonction des questions des lecteurs, et non selon une longueur arbitraire. 3. Utilisez un simple paragraphe lorsqu’une section ne contient qu’une réponse courte. Consultez la spécification associée ## Système de design DSFR : inspection du clavier et des états ### Vérifiez la structure avant la décoration Chaque déclencheur neutre de l’aperçu est un véritable bouton : les touches Entrée et Espace activent donc le comportement natif d’un bouton dans le navigateur. Le script modifie à la fois aria-expanded et l’état hidden du panneau contrôlé. Il ne supprime jamais le déclencheur lorsque le panneau se ferme, et le focus reste sur le bouton activé. Le sélecteur de mode permet de comparer immédiatement les comportements indépendant et lié. Un petit indicateur d’état visible répertorie les panneaux ouverts ; il s’agit d’une aide à l’apprentissage dans cette démonstration, et non d’un composant officiel de DSFR. Sur les écrans étroits, les titres passent à la ligne et la cible du bouton conserve toute sa largeur. La page officielle sur l’accessibilité décrit également des contrastes insuffisants au survol en thème sombre, ainsi que certaines limites des annonces faites par les lecteurs d’écran et les navigateurs. L’utilisation du composant sans modification ne garantit pas à elle seule une accessibilité complète ; vérifiez ces limites connues pour la version et l’environnement de déploiement. Consultez la spécification associée ## Système de design DSFR : intégration dans un projet éligible ### Chargez les dépendances principales et celles du composant La page officielle du code répertorie les dépendances principales et celles de l’accordéon CSS, ainsi que les scripts de modules correspondants. Une fois chargés, ils enrichissent automatiquement le balisage documenté. L’API publique permet de dévoiler un panneau à l’aide de dsfr(element).collapse.disclose() après l’initialisation. L’exemple d’installation fourni est destiné à un projet institutionnel éligible. Il a été vérifié à partir des sources, mais n’est pas exécuté dans cet aperçu neutre, qui ne dépend volontairement pas de l’environnement d’exécution de DSFR. Lors d’une mise à niveau, les équipes de production doivent conserver ensemble la structure officielle des ressources, le balisage du composant et les conditions d’utilisation en vigueur. Consultez la spécification associée ## Système de design DSFR : exemples de composants ### Structure officielle de l’accordéon Balisage destiné aux projets éligibles, avec des panneaux pouvant être développés indépendamment. ```

Put the actual supporting-document instructions here.

``` Référence du code ### Dévoilement programmatique Appelez cette méthode une fois que l’environnement d’exécution officiel a initialisé le panneau cible. ``` const panel = document.getElementById('documents'); window.dsfr(panel).collapse.disclose(); ``` Référence du code ### Exemple autonome complet Le document complet comprend sa mise en page, ses contrôles et son initialisation. Extrayez l’archive d’exemple liée pour obtenir les ressources de fournisseur avec leurs chemins relatifs exacts, puis servez le contenu via HTTP. ``` Accordion structure laboratory
Neutral interaction study · No DSFR visual identity or assets

Prepare for a community workshop

The purpose and main instruction stay visible: arrive with your booking note. Optional supporting details can be opened below.

Open sections: none

Original OpenDesign educational specimen. DSFR documentation informs the structural comparison; this is not a government service or native DSFR rendering.
``` Référence du code - Téléchargez l’exemple complet depuis les sources. Son fichier README indique la commande exacte pour le lancer localement. - Conservez des chemins relatifs pour les ressources de fournisseur par rapport à ce document ; l’archive contient toutes les ressources utilisées par cet aperçu. ## Système de design DSFR : configuration de l’agent IA ### Point de départ de l’implémentation Installation destinée aux projets éligibles et vérifiée à partir des sources ; non exécutée par l’aperçu neutre. Respectez le périmètre institutionnel et les conditions officielles en vigueur. Copiez le répertoire dist afin de préserver les chemins relatifs des ressources dépendantes. L’archive ZIP complète de l’exemple fonctionnel, disponible dans les sources, fournit également les dépendances exactes de l’aperçu et le document complet. Extrayez-la, exécutez python3 -m http.server 8080 dans ce répertoire, puis ouvrez http://localhost:8080/dsfr.html. N’ouvrez pas les exemples utilisant des modules avec file://. ``` # For a project within the documented DSFR institutional scope: npm install @gouvfr/dsfr@1.15.3 # Copy node_modules/@gouvfr/dsfr/dist to your public asset directory. # In : # # # Before : # # ``` ### Un prompt pour votre projet ``` Expliquez la structure et le périmètre de l’accordéon DSFR. Pour un projet d’État éligible, utilisez fr-accordion, fr-accordion__title, fr-accordion__btn et fr-collapse avec des ids/aria-controls correspondants, les ressources principales et celles de l’accordéon, ainsi que data-fr-group=false lorsque la comparaison exige de laisser plusieurs sections ouvertes. Pour un aperçu pédagogique indépendant, utilisez un style original et neutre, et indiquez clairement qu’il s’agit d’une interprétation structurelle ; ne chargez pas les polices de l’identité visuelle de l’État et ne prétendez pas qu’il s’agit d’un service officiel. ``` ## Système de design DSFR : sources et périmètre DSFR est assorti d’un périmètre d’utilisation institutionnelle documenté. Cette page est une référence technique ; son aperçu original et neutre n’est ni un service du gouvernement français ni une réalisation portant la marque DSFR. - Vue d’ensemble de DSFR Catégories officielles des points d’entrée et des ressources du système. - Champ d’application Règles officielles définissant les organisations autorisées à utiliser DSFR. - Fondements Principes fondamentaux du design et recommandations relatives à l’identité visuelle. - Télécharger l’exemple complet fonctionnel Archive ZIP comprenant le HTML complet, les dépendances locales CSS/JavaScript, les licences fournies et les instructions de lancement exactes. Aucune étape de build n’est nécessaire. ## Système de design DSFR : ressources associées ### Europa Component Library Examinez les rôles de couleur, de typographie et d’espacement de l’EC Europa à travers un brief complet avec accordéon natif, incluant la navigation au clavier, l’ouverture de tous les éléments et une solution de repli lisible en l’absence de JavaScript. ### gov.cz système de design Découvrez les véritables rôles de couleur de Gov Design System CE, les emplacements des cartes et la pagination native à travers une boîte à outils de lecture complète pour six ressources, avec gestion explicite du focus et de l’état de la page. ### GOV.UK système de design Créez un parcours de questions et de vérification des réponses dans le style de GOV.UK, avec l’échelle typographique actuelle de la v6, un espacement adaptatif, des couleurs fonctionnelles, une validation liée et une intégration concrète au front-end. - [Référence de mise en œuvre](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/code-de-l-accordeon) - [Source](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/typographie) - [Source](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/grille-et-points-de-rupture) - [Source](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/espacement) - [Source](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/code-de-l-accordeon) - [Consultez la spécification associée](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon) - [Consultez la spécification associée](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/typographie) - [Consultez la spécification associée](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/grille-et-points-de-rupture) - [Consultez la spécification associée](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/code-de-l-accordeon) - [Consultez la spécification associée](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/accessibilite-de-l-accordeon) - [Référence du code](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/code-de-l-accordeon) - [Vue d’ensemble de DSFR Catégories officielles des points d’entrée et des ressources du système.](https://www.systeme-de-design.gouv.fr/version-courante/fr) - [Champ d’application Règles officielles définissant les organisations autorisées à utiliser DSFR.](https://www.systeme-de-design.gouv.fr/version-courante/fr/premiers-pas/perimetre-d-application) - [Fondements Principes fondamentaux du design et recommandations relatives à l’identité visuelle.](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux)