# DSFR-Designsystem ## Interface-Vorschau des DSFR-Designsystems Vergleiche verknüpfte und unabhängige Abschnitte mit über die Tastatur bedienbaren Auslösern und sichtbarer Rückmeldung zum aufgeklappten Zustand. ## Designreferenz des DSFR-Designsystems Offizielle Dokumentation zu DSFR v1.15 und überprüfte Paketmetadaten von @gouvfr/dsfr 1.15.3. Dies sind offizielle Referenzwerte; die neutrale Vorschau zeigt die Interaktionsstruktur, ohne die visuelle Identität des Staates zu verwenden. ### Offizielle Typografie | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Primary / supplementary families | Marianne / Spectral | Institutionelle Schriftarten; die geltenden Nutzungsbedingungen sind einzuhalten. | | Fallback families | Arial / Georgia | Dokumentierte Ersatzschriften. | | Standard text | 16px / 24px | Fließtextstil fr-text. | | Article text | 18px / 28px | Redaktionelle Rolle fr-text--lg. | | H1 mobile → desktop | 32/40px → 40/48px | Schriftgröße / Zeilenhöhe; Änderung bei MD. | ### Offizielles Raster | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | SM / MD / LG / XL | 576 / 768 / 992 / 1248px | Dokumentierte Breakpoint-Schwellenwerte. | | XL content maximum | 1200px | Maximale Containerbreite in der Rasterreferenz. | | Optional gutters | 16px small; 24px LG and above | Das Code-Raster aktiviert standardmäßig keine Innenabstände. | ### Abstände | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Base progression | Multiples of 4px | Üblicher Layout-Rhythmus. | | Documented exceptions | −6, −2, 2, 6px | Spezifische Anpassungen, keine willkürlich neu festgelegte Skala. | ### Akkordeon-Regeln | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | fr-accordions-group | Linked by default | Beim Öffnen eines Elements wird ein anderes geschlossen. | | data-fr-group="false" | Multiple panels may stay open | Expliziter unabhängiger Modus. | | aria-controls | Matches panel id | Zuordnung von Auslöser und Bedienfeld. | | fr-collapse--expanded | Runtime expanded class | Verwaltet von DSFR JavaScript. | ## Vollständiger Leitfaden zum DSFR-Designsystem Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## Institutioneller Geltungsbereich des DSFR-Designsystems ### Ein Identitätssystem des Staates > DSFR ist das Designsystem des französischen Staates. Die aktuellen offiziellen Nutzungsbedingungen sehen .gouv.fr-Dienste und mobile Anwendungen des Staates als vorgesehenen Einsatzbereich vor und unterscheiden staatliche Nutzer und Betreiber von externen Organisationen. Dies ist eine wesentliche Grenze für die Nutzung und keine Fußnote, die sich durch das Ausblenden eines Logos beseitigen lässt. Ein geeignetes Team sollte das offizielle Verfahren zur Projektfreigabe und Implementierung nutzen. Ein nicht zugehöriges Produkt kann die dokumentierte Informationsarchitektur und die Überlegungen zur Barrierefreiheit untersuchen, ohne sich mit der Identität des französischen Staates zu präsentieren. Die Vorschau auf dieser Seite ist eine eigenständige, neutrale Akkordeon-Übung: Sie lädt weder Styles noch Schriftarten oder Skripte von DSFR. Unterstützende Spezifikation lesen ## Offizielle Typografiereferenz des DSFR-Designsystems ### Marianne-Rollen und Ersatzschrift In der Typografiedokumentation sind Marianne und Spectral mit Arial beziehungsweise Georgia als Fallback-Schriften angegeben. Der Standardtext hat eine Größe von 16px/24px, der Artikeltext von 18px/28px. H1 wechselt von 32px/40px auf Mobilgeräten zu 40px/48px auf Desktopgeräten. Diese Werte beschreiben das offizielle System, während die Demonstration eine eigene neutrale Typografie verwendet. Textgrößenklassen ersetzen keine semantischen Überschriftenebenen. Verwenden Sie für den Seitentitel weiterhin h1 und für jeden Akkordeontitel die passende Überschriftenebene. Eine größere visuelle Darstellung sollte nicht dazu verwendet werden, die Dokumentgliederung zu überspringen. Unterstützende Spezifikation lesen ## DSFR Designsystem: Raster und Abstände ### Responsive Breakpoints sind eindeutig festgelegt Die Rasterreferenz definiert SM mit 576px, MD mit 768px, LG mit 992px und XL mit 1248px. Die maximale Breite des Inhalts beträgt 1200px. Optionale Innenabstände betragen bei kleineren Größen 16px und ab LG 24px. Das Code-Raster hat standardmäßig keine Innenabstände. Das ist wichtig, wenn ein Figma-Raster in Markup übertragen wird. Die Abstände basieren auf Vielfachen von 4px; dokumentierte Ausnahmen sind −6px, −2px, 2px und 6px. Eine Abstandsklasse steht daher für ein kontrolliertes System und ist keine Erlaubnis, beliebige Versätze zu erfinden. Die neutrale Vorschau verwendet eine unabhängige, einspaltige Lesedarstellung und erhebt nicht den Anspruch, das offizielle Raster nachzubilden. Unterstützende Spezifikation lesen ## DSFR Designsystem: Aufbau eines Akkordeons ### Überschrift, Schaltfläche und gesteuerter Bereich Die dokumentierte Komponente besteht aus section.fr-accordion, einer Überschrift mit der Klasse heading.fr-accordion__title, einem Button mit der Klasse button.fr-accordion__btn und einem darauf folgenden div.fr-collapse. Der Wert von aria-controls des Buttons muss mit der ID des Bereichs übereinstimmen; aria-expanded gibt an, ob dieser geöffnet ist. Die Überschriftenebene richtet sich nach der umgebenden Seite. Der Bereich enthält geeignete Textelemente wie Absätze und Listen. Native DSFR JavaScript verwaltet die Klasse für den erweiterten Zustand. Eine geeignete Anwendung sollte keinen zweiten, unabhängigen Click-Handler hinzufügen, der mit der Komponente konkurriert. Die neutrale Vorschau implementiert zum Lernvergleich einen eigenen, ebenso klar definierten geöffneten und geschlossenen Zustand. Unterstützende Spezifikation lesen ## DSFR Designsystem: Gruppiert oder unabhängig ### Die Gruppeneinstellung ändert das Verhalten Eine fr-accordions-group ist standardmäßig verknüpft: Wird ein Element geöffnet, schließt sich das andere geöffnete Element. Mit data-fr-group="false" können mehrere Bereiche gleichzeitig geöffnet bleiben. Das Beispiel zeigt beide Modi, damit sich ihre Auswirkungen auf Informationen mit Querverweisen vergleichen lassen. Dieser Unterschied ist bei Vorbereitungsanweisungen wichtig. Wer eine Dokumentenliste prüft, muss möglicherweise gleichzeitig einen Bereich mit Adressangaben geöffnet haben. Ein Modus, der jeweils nur ein Element öffnet, spart Platz, blendet aber wiederholt den Kontext aus. Wählen Sie den Modus passend zur Aufgabe, statt den Standard als redaktionelle Regel zu behandeln. Die Seite zur Barrierefreiheit geht über die Standardeinstellung zur Laufzeit hinaus: Sie empfiehlt standardmäßig unabhängige Gruppen, da verknüpfte Gruppen die Benutzerfreundlichkeit beeinträchtigen können. Das Beispiel startet daher im unabhängigen Modus. - Im unabhängigen Modus lassen sich zwei Bereiche gleichzeitig vergleichen. - Im verknüpften Modus kann nur ein Bereich gleichzeitig geöffnet sein. - Beim Wechsel des Modus muss der Zustand von aria-expanded konsistent bleiben. Unterstützende Spezifikation lesen ## DSFR Designsystem: Was sichtbar bleiben sollte ### Den wesentlichen Schritt nicht verbergen Die Anleitung zur Komponente empfiehlt Akkordeons für umfangreiche, optionale oder nur für bestimmte Personen relevante Inhalte. Sie rät davon ab, Informationen auszublenden, die alle lesen müssen, Akkordeons für sehr kurze Inhalte zu verwenden, komplexe Steuerelemente zu verschachteln oder sie in einem modalen Dialog unterzubringen. Entsprechend lässt das Beispiel seinen Zweck und die Steuerelemente sichtbar. Nur die optionalen Hinweise zum Zugang zu den Räumen, die Geräteliste und die Erläuterung zur Ankunft sind eingeklappt. Jede Überschrift benennt eine eigene Frage; die eingeblendeten Inhalte bestehen aus kurzen Absätzen und Listen statt aus einem weiteren interaktiven Ablauf. 1. Lassen Sie die zentrale Anweisung außerhalb des Akkordeons. 2. Gliedern Sie ergänzende Informationen nach den Fragen der Lesenden statt nach einer willkürlichen Länge. 3. Verwenden Sie einen gewöhnlichen Absatz, wenn ein Abschnitt nur eine kurze Antwort enthält. Unterstützende Spezifikation lesen ## DSFR Designsystem: Tastaturbedienung und Zustandsprüfung ### Prüfen Sie die Struktur vor der Gestaltung Jede Schaltfläche in der neutralen Vorschau ist ein echter Button. Daher lösen Enter und Leertaste die native Aktivierung des Buttons aus. Das Skript ändert sowohl aria-expanded als auch den ausgeblendeten Zustand des gesteuerten Bereichs. Es entfernt die Schaltfläche nicht, wenn der Bereich geschlossen wird, und der Fokus bleibt auf der aktivierten Schaltfläche. Über die Modusauswahl lassen sich unabhängiges und verknüpftes Verhalten direkt vergleichen. Eine kleine, sichtbare Statusanzeige listet die geöffneten Bereiche auf. Sie dient im Beispiel als Lernhilfe und ist keine offizielle DSFR-Komponente. Bei schmalen Ansichten brechen die Titel um; die Schaltfläche behält ihre volle Breite als Klickfläche. Auf der offiziellen Seite zur Barrierefreiheit werden außerdem unzureichende Hover-Kontraste im dunklen Design sowie konkrete Einschränkungen bei Ankündigungen durch Screenreader und Browser dokumentiert. Gehen Sie nicht davon aus, dass die unveränderte Verwendung der Komponente vollständige Barrierefreiheit gewährleistet. Prüfen Sie die bekannten Einschränkungen für die eingesetzte Version und Umgebung. Unterstützende Spezifikation lesen ## DSFR Designsystem Integration in geeignete Projekte ### Abhängigkeiten für Kernsystem und Komponente laden Auf der offiziellen Code-Seite sind die Abhängigkeiten für Kernsystem und Akkordeon CSS sowie die Modulscripts für Kernsystem und Akkordeon aufgeführt. Nach dem Laden erweitert die Laufzeitumgebung das dokumentierte Markup automatisch. Über die öffentliche API lässt sich ein Bereich nach der Initialisierung mit dsfr(element).collapse.disclose() öffnen. Der angegebene Installationseintrag ist für ein geeignetes institutionelles Projekt vorgesehen. Er wurde anhand der Quelle überprüft, aber nicht in dieser neutralen Vorschau ausgeführt, die absichtlich keine Laufzeitabhängigkeit von DSFR hat. Produktionsteams sollten beim Aktualisieren die offizielle Verzeichnisstruktur der Assets, das Markup der Komponente und die geltenden Nutzungsbedingungen gemeinsam berücksichtigen. Unterstützende Spezifikation lesen ## DSFR Beispiele für Komponenten des Designsystems ### Offizielle Akkordeonstruktur Markup für geeignete Projekte mit unabhängig erweiterbaren Bereichen. ```

Put the actual supporting-document instructions here.

``` Code-Referenz ### Programmgesteuertes Öffnen Rufen Sie dies auf, nachdem die offizielle Laufzeitumgebung das Zielpanel initialisiert hat. ``` const panel = document.getElementById('documents'); window.dsfr(panel).collapse.disclose(); ``` Code-Referenz ### Vollständiges eigenständiges Beispiel Das vollständige Dokument enthält Layout, Steuerelemente und Initialisierung. Entpacken Sie das verknüpfte Beispielarchiv, um die exakten relativen Vendor-Assets zu erhalten, und stellen Sie es anschließend über HTTP bereit. ``` 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.
``` Code-Referenz - Laden Sie das vollständige Beispiel unter Sources herunter. Die README enthält den genauen lokalen Startbefehl. - Behalten Sie die Vendor-Pfade relativ zu diesem Dokument bei. Das Archiv enthält alle Assets, die in dieser Vorschau verwendet werden. ## DSFR Designsystem Einrichtung des KI-Agenten ### Ausgangspunkt für die Implementierung Quellengeprüfte Installation für zulässige Projekte; wird in der neutralen Vorschau nicht ausgeführt. Den institutionellen Anwendungsbereich und die aktuellen offiziellen Bezeichnungen beibehalten. Das Verzeichnis dist kopieren, damit abhängige Assets ihre relativen Pfade behalten. Das vollständige ZIP mit dem Arbeitsbeispiel in den Quellen enthält außerdem genau die für die Vorschau benötigten Abhängigkeiten und das vollständige Dokument. Entpacken, in diesem Verzeichnis python3 -m http.server 8080 ausführen und anschließend http://localhost:8080/dsfr.html öffnen. Modulbasierte Beispiele nicht über file:// öffnen. ``` # 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 : # # ``` ### Ein Prompt für dein Projekt ``` Struktur und Geltungsbereich des Akkordeons in DSFR erläutern. Für ein zulässiges staatliches Projekt fr-accordion, fr-accordion__title, fr-accordion__btn und fr-collapse mit übereinstimmenden ids/aria-controls sowie die Core- und Akkordeon-Assets verwenden. Wenn bei Vergleichen mehrere Bereiche geöffnet bleiben sollen, data-fr-group=false setzen. Für eine unabhängige Lernvorschau neutrales, eigens gestaltetes Styling verwenden und sie klar als strukturelle Interpretation kennzeichnen; keine Schriftarten der staatlichen visuellen Identität laden und nicht den Eindruck erwecken, es handle sich um einen offiziellen Dienst. ``` ## Quellen und Geltungsbereich des DSFR-Designsystems Für DSFR ist ein institutioneller Nutzungsbereich dokumentiert. Diese Seite ist eine technische Referenz. Ihre eigens gestaltete neutrale Vorschau ist weder ein Dienst der französischen Regierung noch eine Implementierung im Branding von DSFR. - DSFR Überblick Offizieller Systemzugang und Ressourcenkategorien. - Anwendungsbereich Offizielle Regeln legen fest, welche Organisationen DSFR nutzen dürfen. - Grundlagen Grundlegende Leitlinien für Design und visuelle Identität. - Vollständiges funktionsfähiges Beispiel herunterladen ZIP-Datei mit dem vollständigen HTML, lokalen Abhängigkeiten für CSS/JavaScript, mitgelieferten Lizenzen und genauen Startanweisungen. Ein Build-Schritt ist nicht erforderlich. ## Zugehörige Ressourcen zum DSFR-Designsystem ### Europa Component Library Untersuchen Sie Europas Farb-, Typografie- und Abstandsrollen in EC anhand eines vollständigen nativen Accordion-Briefings – einschließlich Tastaturbedienung, „Alle öffnen“-Verhalten und lesbarem Fallback ohne JavaScript. ### gov.cz Designsystem Entdecke die tatsächlichen Farbrollen, Kartenbereiche und die native Paginierung von Gov Design System CE anhand eines vollständigen Lesetoolkits mit sechs Ressourcen und explizitem Fokus- und Seitenstatus. ### GOV.UK Designsystem Erstellen Sie einen Frage- und Antwortablauf im GOV.UK-Stil mit der aktuellen Typografieskala v6, responsiven Abständen, funktionalen Farben, verknüpfter Validierung und konkreter Frontend-Integration. - [Implementierungsreferenz](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/code-de-l-accordeon) - [Quelle](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/typographie) - [Quelle](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/grille-et-points-de-rupture) - [Quelle](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/espacement) - [Quelle](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/code-de-l-accordeon) - [Unterstützende Spezifikation lesen](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon) - [Unterstützende Spezifikation lesen](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/typographie) - [Unterstützende Spezifikation lesen](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/grille-et-points-de-rupture) - [Unterstützende Spezifikation lesen](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/code-de-l-accordeon) - [Unterstützende Spezifikation lesen](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/accessibilite-de-l-accordeon) - [Code-Referenz](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/code-de-l-accordeon) - [DSFR Überblick Offizieller Systemzugang und Ressourcenkategorien.](https://www.systeme-de-design.gouv.fr/version-courante/fr) - [Anwendungsbereich Offizielle Regeln legen fest, welche Organisationen DSFR nutzen dürfen.](https://www.systeme-de-design.gouv.fr/version-courante/fr/premiers-pas/perimetre-d-application) - [Grundlagen Grundlegende Leitlinien für Design und visuelle Identität.](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux)