Erfasse die konkrete Typografie, das Raster und das Akkordeon des französischen Staatssystems API innerhalb seines institutionellen Kontexts. Vergleiche verknüpftes und unabhängiges Auf- und Zuklappen in einem klar neutralen Lernbeispiel.
Ursprüngliche neutrale Interpretation der dokumentierten Akkordeonstruktur mit HTML/CSS/JavaScript. Keine offiziellen Assets von DSFR und keine visuelle Identität des Staates. · Implementierungsreferenz
02
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.
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.
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.
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.
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.
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.
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.
Lassen Sie die zentrale Anweisung außerhalb des Akkordeons.
Gliedern Sie ergänzende Informationen nach den Fragen der Lesenden statt nach einer willkürlichen Länge.
Verwenden Sie einen gewöhnlichen Absatz, wenn ein Abschnitt nur eine kurze Antwort enthält.
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.
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.
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.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Accordion structure laboratory</title><style>*{box-sizing:border-box}body{margin:0;font:16px/1.6 Arial,sans-serif;color:#28251f;background:#faf9f6}main{max-width:54rem;margin:auto;padding:32px 24px}.notice{background:#eee9df;border-left:4px solid #6b573d;padding:16px}h1{font:700 32px/1.3 Georgia,serif;margin:24px 0}h2{font-size:18px;margin:0}.mode{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:24px 0}select{font:inherit;padding:10px;background:white;border:1px solid #777}section{border-bottom:1px solid #aaa18f}.trigger{font:700 18px/1.5 Arial,sans-serif;border:0;background:transparent;color:inherit;display:flex;justify-content:space-between;gap:16px;text-align:start;padding:20px 8px;width:100%;cursor:pointer}.trigger::after{content:'+'}.trigger[aria-expanded=true]::after{content:'−'}.panel{padding:0 24px 24px}.panel p{margin-top:0}:focus-visible{outline:3px solid #6b573d;outline-offset:3px}#state{font-size:14px;background:#eee9df;padding:12px;margin-top:24px}small{display:block;margin-top:24px;color:#625a4e;font-size:14px}[hidden]{display:none!important}@media(max-width:600px){main{padding:24px 16px}h1{font-size:28px}.panel{padding-inline:8px}}</style><main><div class="notice">Neutral interaction study · No DSFR visual identity or assets</div><h1>Prepare for a community workshop</h1><p>The purpose and main instruction stay visible: arrive with your booking note. Optional supporting details can be opened below.</p><div class="mode"><label for="mode">Panel behaviour</label><select id="mode"><option value="independent">Independent: compare sections</option><option value="linked">Linked: one section at a time</option></select></div><div id="group"><section><h2><button type="button" class="trigger" aria-expanded="false" aria-controls="access">Room access</button></h2><div class="panel" id="access" hidden><p>The fictional workshop room is reached from the courtyard. The step-free entrance is on the same level as the activity room.</p><p>Ask the example welcome desk for assistance if the courtyard route is unavailable. These are demonstration instructions, not a real venue guide.</p></div></section><section><h2><button type="button" class="trigger" aria-expanded="false" aria-controls="equipment">Equipment to bring</button></h2><div class="panel" id="equipment" hidden><p>The example workshop uses simple paper materials. Bring the following if convenient:</p><ul><li>A notebook for your own observations.</li><li>A pencil or pen you can use comfortably.</li><li>Your fictional booking reference.</li></ul></div></section><section><h2><button type="button" class="trigger" aria-expanded="false" aria-controls="arrival">What happens on arrival</button></h2><div class="panel" id="arrival" hidden><p>The example facilitator explains the activity before participants choose a seat. No personal information is collected by this demonstration.</p><p>Keep this panel open with the equipment list to compare the two instructions in independent mode.</p></div></section></div><p id="state" role="status">Open sections: none</p><small>Original OpenDesign educational specimen. DSFR documentation informs the structural comparison; this is not a government service or native DSFR rendering.</small></main><script>const buttons=[...document.querySelectorAll('.trigger')],mode=document.querySelector('#mode');function set(b,open){b.setAttribute('aria-expanded',String(open));document.getElementById(b.getAttribute('aria-controls')).hidden=!open}function announce(){const names=buttons.filter(b=>b.getAttribute('aria-expanded')==='true').map(b=>b.textContent);document.querySelector('#state').textContent='Open sections: '+(names.join(', ')||'none')}buttons.forEach(b=>b.onclick=()=>{const open=b.getAttribute('aria-expanded')!=='true';if(open&&mode.value==='linked')buttons.forEach(x=>set(x,false));set(b,open);announce()});mode.onchange=()=>{if(mode.value==='linked'){let retained=false;buttons.forEach(b=>{if(b.getAttribute('aria-expanded')==='true'){if(retained)set(b,false);retained=true}})}announce()};</script></html>
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.
04
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.
bash
# For a project within the documented DSFR institutional scope:
npm install @gouvfr/[email protected]
# Copy node_modules/@gouvfr/dsfr/dist to your public asset directory.
# In <head>:
# <link rel="stylesheet" href="/dsfr/core/core.min.css">
# <link rel="stylesheet" href="/dsfr/component/accordion/accordion.min.css">
# Before </body>:
# <script type="module" src="/dsfr/core/core.module.min.js"></script>
# <script type="module" src="/dsfr/component/accordion/accordion.module.min.js"></script>
Ein Prompt für dein Projekt
Agenten-Prompt
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.
05
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.
