# W3C Designsystem

## W3C Designsystem Oberflächenvorschau

Sitzungen einzeln oder gemeinsam öffnen; die Inhalte bleiben lesbar, wenn JavaScript deaktiviert ist.

## W3C Designsystem-Designsystem-Referenz

Offizielle W3C-Dokumentation und öffentlicher CDN-Snapshot, heruntergeladen am 3. Oktober 2026; das tatsächliche CSS und das native Skript wurden untersucht.

### Fließende Typografie

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Web font / fallback | Noto Sans / Trebuchet MS, Geneva, sans-serif | Das native CSS verwendet Noto Sans, sobald fonts-loaded gesetzt ist; die Demo behält den System-Fallback bei. |
| Fluid range | 320–1120px viewport | Außerhalb dieses Bereichs erreichen die Clamp-Werte ihren Grenzwert; es gibt keinen abrupten typografischen Sprung. |
| --w3c-text-0 | clamp(.9375rem, .9125rem + .125vw, 1rem) | Fließtext: 15px bis 16px bei normaler Root-Größe. |
| --w3c-text-5 | clamp(1.6894rem, 1.6444rem + .2253vw, 1.802rem) | H1-Skalierung; ungefähr 27–28.8px. |
| --w3c-text-7 | clamp(2.1382rem, 2.0811rem + .2851vw, 2.2807rem) | Größte text-xl-Skalierung, nicht die Standardgröße für H1. |
| Body line height | 1.5 | Relativ zur fließenden Schriftgröße. |
| Collapsible H3 | --w3c-text-1 / line-height 1.5 | Komponentenüberschreibung: ungefähr 16.9–18px. |
### Semantische Farben

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Text | #111111 | Fast Schwarz; für gewöhnlichen Lesetext. |
| Link | #005a9c | W3C-Blau; unterscheidet sich von Hover- und Besuchszustand. |
| Hover / visited | #002a56 / #75336c | Zustandsunterschiede beibehalten. |
| Focus | #f9dc4a | Gelbe Fokusgestaltung mit sichtbarer Begrenzung. |
| Input border | #545454 | Andere Kontrastfunktion als dekorative Trennlinien. |
| Success / error | #046704 / #a82615 | Bedeutung für Statusangaben, keine beliebigen Akzentfarben. |
| Warning | #c28605 | Rahmenfarbe für Warnhinweise. |
### Layout und Abstände

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| l-center | max-inline-size:70rem; padding-inline:5vw | Nativer Container für große Ansichten; die Vorschau setzt eine schmalere, anwendungsspezifische Begrenzung von 55rem. |
| Reading measure | 41.25rem | Maximale Inhaltsbreite innerhalb aufklappbarer Bereiche. |
| Stack default | 1em between direct siblings | Das offizielle Sass-Mixin akzeptiert ein explizites Maß; es gibt keine feste 8px-Abstandsskala. |
| Collapsible inset | 1.5625rem | 25px bei normaler Root-Größe. |
| Collapsible separation / radius | 1rem / .375rem | 16px Abstand und 6px Eckenradius. |
| Collapsible shadow | -.0625rem .0625rem .25rem rgba(55,70,95,.12) | Dezente Abgrenzung der Oberflächen; natives CSS. |
### Vereinbarung zur progressiven Verbesserung

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Outer hook | data-component="collapsibles" | Das Skript findet die Wurzel jedes Bausteins. |
| Heading hook | data-heading="collapsibles" | Das Skript fügt in jede Überschrift eine tatsächliche Schaltfläche ein. |
| Collapsed state | aria-expanded=false; next sibling aria-hidden=true | Das erweiterte CSS benötigt die Markierung html.js, um den Inhalt auszublenden. |
| data-anchor="no" | Suppress automatic heading anchors for this subtree | Keinen weiteren Link in die aufklappbare Überschrift einfügen. |
| No JavaScript | All content remains visible | Verborgene Inhalte nicht als anfängliches Markup ohne JavaScript ausliefern. |
## Vollständiger Leitfaden zu W3C 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.

## Progressive Verbesserung für W3C Designsystem

### Inhalte stehen vor Bedienelementen

> W3C trennt grundlegende Gestaltung von erweiterten Komponenten. Die aufklappbare Komponente beginnt mit gewöhnlichen Überschriften, auf die jeweils der Inhalt folgt. Ohne Skript bleibt jede Sitzungsübersicht lesbar. main.js fügt Schaltflächen ein und ändert den Zustand erst, nachdem das Skript die dokumentierten Datenattribute gefunden hat. Dies unterscheidet sich von einer Implementierung, die ein bereits verborgenes Akkordeon ausliefert, dessen Bedienelemente möglicherweise nie initialisiert werden.

Die Vorschau verwendet die offiziellen Dateien core.css, advanced.css und main.js vom CDN, gespeichert als datierter lokaler Snapshot. Die Markierung html.js aktiviert die erweiterten Selektoren. Wird diese Markierung weggelassen, ändern sich die ARIA-Attribute, während die Inhalte visuell geöffnet bleiben. Die Vorschau prüft ausdrücklich sowohl die tatsächliche Sichtbarkeit als auch aria-expanded.

Unterstützende Spezifikation lesen

## Fließende Schrift und Laden von Schriftarten in W3C Designsystem

### Eine zurückhaltende Leseskala

Die Schriftgröße des Fließtexts steigt von 15px an der unteren Viewport-Grenze auf 16px bei 1120px. Neun benannte benutzerdefinierte Eigenschaften bilden die Skala. Für H1 wird --w3c-text-5 verwendet, nicht das größte Maß --w3c-text-7; ein 36px großer Anzeigetitel, der unterschiedslos in jedes Dokument übernommen wird, entspricht nicht der standardmäßigen Überschriftenhierarchie.

Noto Sans ist die vorgesehene Webschrift. Der native Fallback-Stack verwendet Trebuchet MS und Geneva, bis der Pfad zum Laden der Schriftarten dem Root das Merkmal fonts-loaded hinzufügt. Dieses unabhängige Beispiel behält den Fallback bei und kennzeichnet diese Entscheidung. Schriftgröße und Zeilenhöhe bleiben nativ; die Vorschau beansprucht nicht, die Glyphenmetriken von Noto Sans exakt wiederzugeben.

Unterstützende Spezifikation lesen

## Lesebreite und Abstände in W3C Designsystem

### Layoutbausteine kombinieren

Der Baustein l-center legt eine maximale Inline-Größe von 70rem und seitliche Innenabstände von 5vw fest. Die Vorschau ergänzt eine anwendungsspezifische Begrenzung von 55rem, damit drei kurze Lernübersichten kompakt bleiben. Diese Begrenzung ist kein neues W3C-Token. Innerhalb jedes aufklappbaren Inhaltsbereichs begrenzt das native Textmaß von 41.25rem die Länge der Zeilen.

Das dokumentierte Stack-Mixin erzeugt eine Spalte und wendet margin-top auf direkte Geschwisterelemente nach dem ersten an. Das Standardmaß ist 1em; beim Aufruf kann eine andere Einheit übergeben werden. Betrachten Sie es als Beziehung zwischen Blöcken, statt eine globale nummerierte Abstandsskala zu erfinden. Für die aufklappbare Komponente wurden unabhängig davon 25px Innenabstand, 16px Abstand und 6px Eckenradius überprüft.

Unterstützende Spezifikation lesen

## Semantische Farbrollen in W3C Designsystem

### Linkverlauf und Fokus sichtbar halten

Das System unterscheidet zwischen dem standardmäßigen blauen Link, dem dunkelblauen Hover-Zustand und dem violetten Besuchszustand. Diese Rollen sind auf einer Website wichtig, auf der Menschen zu langen Dokumenten zurückkehren und zwischen Referenzen navigieren. Wird das Link-Alias für andere dekorative Zwecke wiederverwendet, können künftige Themenänderungen auch nicht zusammengehörige Oberflächen verändern.

Für den Fokus wird Gelb mit einer sichtbaren Begrenzung verwendet. Die Einstellungsseite unterscheidet gewöhnliche Rahmen von der dunkleren Rahmenfarbe für Eingabefelder. Sie führt außerdem verschiedene Bedeutungen für Informations-, Erfolgs-, Warn- und Fehlerfarben auf. Behalten Sie die jeweilige Rolle bei und prüfen Sie die Kombination mit dem tatsächlichen Hintergrund; ein Farbfeld allein belegt nicht, dass der Kontrast eines Komponentenzustands ausreicht.

Unterstützende Spezifikation lesen

## Aufklappbares Markup und Skript in W3C Designsystem

### Überschrift, Schaltfläche und benachbarter Inhaltsbereich

Jedes direkte Kindelement enthält eine Überschrift, auf die unmittelbar der Inhaltsbereich folgt. Das Skript findet diesen Bereich mit nextElementSibling. Dazwischen eingefügte, nicht zugehörige Metadaten würden daher die Beziehung unterbrechen. Platzieren Sie eine Kategorienbezeichnung innerhalb des Überschriftenspans, wie im dokumentierten Muster für Gruppenlisten. Das Skript umschließt den Überschrifteninhalt mit einer Schaltfläche.

Der native Code schaltet aria-expanded für diese Schaltfläche und aria-hidden für den Inhaltsbereich um. Das erweiterte Stylesheet blendet den eingeklappten Inhaltsbereich aus. data-anchor="no" verhindert, dass die separate Funktion für Überschriftenanker unerwünschte Links in diese Komponente einfügt. Initialisieren Sie main.js nur einmal; bei wiederholter Erweiterung würden zusätzliche Schaltflächen in die Überschriften verschachtelt.

```
<div class="component--collapsibles" data-component="collapsibles" data-anchor="no">
  <div>
    <h3 data-heading="collapsibles">Inclusive forms <span>Practical workshop</span></h3>
    <div>
      <p>Connect each field to its label, hint and recovery message.</p>
      <ul><li>Preserve entered values</li><li>Test keyboard recovery</li></ul>
    </div>
  </div>
</div>
```

Code-Referenz

Unterstützende Spezifikation lesen

## Sammelsteuerung und Tastaturbedienung in W3C Designsystem

### Mit den vorhandenen Schaltflächen erweitern

„Alle öffnen“ und „Alle schließen“ sind ursprüngliche Beispielsteuerelemente. Sie prüfen jede native Schaltfläche und lösen einen Klick nur dann aus, wenn sich deren Zustand ändern muss. So bleiben der native Zustandsübergang und die visuelle Regel miteinander verknüpft. Die Steuerelemente ändern nicht direkt ein ARIA-Attribut, während das andere unverändert bleibt.

Native Schaltflächen lassen sich mit Eingabetaste und Leertaste betätigen. Die Vorschau prüft eine einzelne Schaltfläche, öffnet alle Bereiche, schließt alle Bereiche und öffnet anschließend erneut einen Bereich über die Tastatur. Eine höfliche Statusmeldung beschreibt die Sammelaktion. Die Komponente lässt mehrere Übersichten gleichzeitig geöffnet; sie ist kein Akkordeon, bei dem nur ein Bereich geöffnet sein kann.

1. Öffnen Sie „Inklusive Formulare“ und sehen Sie sich die praktische Liste an.

2. Klappen Sie alle drei Sitzungsbeschreibungen auf, um sie zu vergleichen.

3. Klappen Sie alle Bereiche zu und drücken Sie dann bei einer Überschrift die Eingabetaste, um nur diesen Bereich wieder zu öffnen.

Unterstützende Spezifikation lesen

## W3C Designsystem Assets und Integration

### Keine erfundene Paketinstallation

Auf der offiziellen Einstiegsseite werden stabile CDN-Einstiegspunkte für die Core-, Advanced- und Druck-Stylesheets sowie main.js und optionale Funktionsskripte bereitgestellt. Der Einrichtungsblock verwendet diese tatsächlichen Pfade. Für diese HTML-Implementierung ist weder ein React-Anbieter noch ein npm-Paket erforderlich. In der lokalen Demo werden die heruntergeladenen Dateien mitgeliefert, damit das Beispiel nicht auf eine aktive Verbindung angewiesen ist.

Bei einer Produktivintegration sollte das dokumentierte CSS-Kompatibilitätskriterium für Advanced-Stylesheets beibehalten werden, wenn dieselbe Gruppe älterer Browser unterstützt werden soll. Die kompakte Einrichtung lädt die Advanced-Stylesheets direkt für moderne Browser. Binden Sie das Druck-Stylesheet in eine vollständige Website ein; die eigenständige Vorschau konzentriert sich auf das interaktive Bildschirmbeispiel.

- core.css: grundlegende Typografie, Layouts und Komponenten ohne Erweiterungen.

- advanced.css: Regeln für mit JavaScript erweiterte Zustände.

- main.js: erkennt Daten-Hooks und erweitert unterstützte Komponenten einmalig.

Unterstützende Spezifikation lesen

## W3C Designsystem Geltungsbereich und Überprüfung

### Designsystem, keine Konformitätszertifizierung

Eine Seite im W3C-Stil ist nicht automatisch WCAG-konform. Prüfen Sie die tatsächlichen Inhalte, die Fokusreihenfolge, das Zoomverhalten und die Zustände zur Fehlerbehebung. Dieses Beispiel prüft drei Ansichtsfensterbreiten und das Verhalten ohne Skripte; es erhebt weder Anspruch auf eine Zertifizierung noch auf eine umfassende Prüfung mit assistiven Technologien.

Die Namen und Beschreibungen der Lernkreise sind frei erfundene Inhalte. Es handelt sich weder um offizielle Arbeitsgruppen noch um Termine oder Anmeldemöglichkeiten. In diesem Beispiel werden bewusst keine W3C-Logos verwendet und keine Mitgliedschaft behauptet. Die Wiederverwendung öffentlicher Stil-Assets darf nicht den Eindruck einer institutionellen Unterstützung erwecken.

Unterstützende Spezifikation lesen

## W3C Designsystem Komponentenbeispiele des Designsystems

### Sitzungsübersicht mit schrittweiser Erweiterung

Überschrift und direkt anschließender Inhalt bilden die erforderliche Struktur; main.js ergänzt die Umschaltfunktion.

```
<div class="component--collapsibles" data-component="collapsibles" data-anchor="no">
  <div>
    <h3 data-heading="collapsibles">Inclusive forms <span>Practical workshop</span></h3>
    <div>
      <p>Connect each field to its label, hint and recovery message.</p>
      <ul><li>Preserve entered values</li><li>Test keyboard recovery</li></ul>
    </div>
  </div>
</div>
```

Code-Referenz

### Vollständige native Lernliste

Enthält das Markierungselement für die Erweiterung, offizielle Assets, native einklappbare Bereiche und Steuerelemente zum Ein- und Ausklappen aller Bereiche.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><script>document.documentElement.classList.add("js")</script><title>Web learning circles</title><link rel="stylesheet" href="vendor/w3c-2026-10-03/core.css"><link rel="stylesheet" href="vendor/w3c-2026-10-03/advanced.css"><style>body{min-block-size:0;padding-block:2rem}.demo{max-inline-size:55rem}header{margin-bottom:2rem}.actions{display:flex;gap:1rem;flex-wrap:wrap;margin:1.5rem 0}.component--collapsibles{padding:1rem;background:#f8f8fb}footer{margin-top:2rem;border-top:1px solid #bdbdbd;padding-top:1rem;font-size:.875rem}#notice{min-height:1.5em}button{max-width:100%}</style><main class="l-center demo" data-anchor="no"><header><p>INDEPENDENT LEARNING PROGRAMME</p><h1>Web learning circles</h1><p class="lead">Explore three small-group sessions for people building a more usable web.</p></header><div class="actions"><button class="button button--ghost" id="expand">Expand all sessions</button><button class="button button--ghost" id="collapse">Collapse all sessions</button></div><p id="notice" role="status">Choose a session to read its outline.</p><div class="component--collapsibles" data-component="collapsibles" data-anchor="no"><div><h3 data-heading="collapsibles">Inclusive forms <span>Practical workshop</span></h3><div><p>Trace a form from its label to its hint, error message and recovery action. Compare the experience with a keyboard and with enlarged text.</p><ul><li>Associate labels and help text</li><li>Keep entered values after an error</li><li>Move focus only when it helps recovery</li></ul></div></div><div><h3 data-heading="collapsibles">Resilient reading <span>Discussion circle</span></h3><div><p>Examine document structure before adding interaction. The content in this example remains visible when JavaScript is unavailable.</p><p>Bring a short article and identify its heading hierarchy, reading measure and meaningful links.</p></div></div><div><h3 data-heading="collapsibles">International text <span>Peer review</span></h3><div><p>Review language declarations, long translated labels and mixed-direction text. A font choice alone cannot guarantee a usable multilingual interface.</p><p>All sessions are fictional examples, with no membership or registration service.</p></div></div></div><footer>Native W3C CDN styles and collapsible script, snapshot 3 October 2026. System font fallback; original learning content, no W3C affiliation.</footer></main><script src="vendor/w3c-2026-10-03/main.js"></script><script>document.querySelector('.component--collapsibles').addEventListener('click',()=>{const n=document.querySelectorAll('[data-heading] button[aria-expanded=true]').length;document.querySelector('#notice').textContent=n+' session outline'+(n===1?' is':'s are')+' expanded.'});function all(open){document.querySelectorAll('[data-heading="collapsibles"] button').forEach(b=>{if((b.getAttribute('aria-expanded')==='true')!==open)b.click()});document.querySelector('#notice').textContent=open?'All three session outlines are expanded.':'All session outlines are collapsed.'}document.querySelector('#expand').onclick=()=>all(true);document.querySelector('#collapse').onclick=()=>all(false);</script></html>
```

Code-Referenz

## W3C Designsystem Agent einrichten

### Ausgangspunkt für die Implementierung

Tatsächliche offizielle CDN-Pfade. In der lokalen Vorschau werden diese Assets mitgeliefert; außerdem bleibt die native Systemschrift als Fallback erhalten. Das vollständige ZIP-Archiv mit dem funktionsfähigen Beispiel unter „Sources“ enthält auch die exakten Vorschauabhängigkeiten und das vollständige Dokument. Entpacken Sie es, führen Sie in diesem Verzeichnis python3 -m http.server 8080 aus und öffnen Sie dann http://localhost:8080/w3c.html. Öffnen Sie Beispiele, die Module verwenden, nicht über file://.

```
<!-- Core is useful without JavaScript. -->
<link rel="stylesheet" href="https://www.w3.org/assets/website-2021/styles/core.css">
<link rel="stylesheet" href="https://www.w3.org/assets/website-2021/styles/advanced.css">
<link rel="stylesheet" href="https://www.w3.org/assets/website-2021/styles/print.css" media="print">
<script>document.documentElement.classList.add('js');</script>
<!-- Put component markup in the document, then load the script once. -->
<script defer src="https://www.w3.org/assets/website-2021/js/main.js"></script>
```

### Ein Prompt für dein Projekt

```
Verwenden Sie die W3C-Core- und Advanced-Stylesheets zusammen mit main.js und der Erweiterungsmarkierung html.js. Erstellen Sie semantische Überschriften mit direkt anschließendem einklappbarem Inhalt und verwenden Sie dabei die tatsächlichen Daten-Hooks. Sorgen Sie für eine lesbare Basis ohne JavaScript, native fließende Schriftgrößen sowie semantische Link- und Fokusfarben. Initialisieren Sie nicht zweimal und leiten Sie WCAG-Konformität nicht allein aus der Gestaltung ab.
```

## W3C Designsystem Quellen und Geltungsbereich

Eigenständiges OpenDesign-Beispiel mit offiziellen öffentlichen Assets. Es wird weder eine Zugehörigkeit zum W3C noch eine Zertifizierung der Barrierefreiheit suggeriert.

- Erste Schritte Offizielle CDN-Assets und Ladeanweisungen.

- Einklappbare Container Native Struktur, Hooks und schrittweise Erweiterung.

- Typografie Noto Sans und fließende Schriftgrößenskala.

- Einstellungen Farbfunktionen und Verhalten beim Laden von Schriftarten.

- Vertikale Abstände Stack-Mixin und explizite Maße.

- 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.

## W3C Designsystem Verwandte Ressourcen

### Codex

Nutzen Sie die echte SearchInput-Struktur von Codex, die Aktionshierarchie und die auf das Lesen ausgerichteten Tokens. Durchsuchen Sie einen lokalen Artikelindex, sehen Sie sich ein Ergebnis an und kehren Sie zur gleichen Leseposition zurück.

### Agriculture Designsystem

Erstelle längere Servicevorgänge mit den konkreten Abständen, responsiven Props und dem TaskList-Statusmodell von AgDS. Probiere einen Vorbereitungsvorgang aus, bei dem der Prüfschritt erst freigeschaltet wird, wenn alle Voraussetzungen erfüllt sind.

### Alberta Designsystem

Verwenden Sie Albertas native Webkomponenten und veröffentlichte Design-Tokens, um eine vollständige Vorbereitungs-Checkliste mit barrierefreien Auswahlmöglichkeiten, abgeleitetem Fortschritt und verlässlichem Feedback zur Prüfung zu erstellen.


- [Implementierungsreferenz](https://design-system.w3.org/components/collapsible-containers.html)
- [Quelle](https://design-system.w3.org/styles/typography.html)
- [Quelle](https://design-system.w3.org/settings/)
- [Quelle](https://www.w3.org/assets/website-2021/styles/core.css)
- [Quelle](https://design-system.w3.org/components/collapsible-containers.html)
- [Unterstützende Spezifikation lesen](https://design-system.w3.org/)
- [Unterstützende Spezifikation lesen](https://design-system.w3.org/styles/typography.html)
- [Unterstützende Spezifikation lesen](https://design-system.w3.org/styles/vertical-spacing.html)
- [Unterstützende Spezifikation lesen](https://design-system.w3.org/settings/)
- [Code-Referenz](https://design-system.w3.org/components/collapsible-containers.html)
- [Unterstützende Spezifikation lesen](https://design-system.w3.org/components/collapsible-containers.html)
- [Unterstützende Spezifikation lesen](https://design-system.w3.org/getting-started.html)
- [Erste Schritte Offizielle CDN-Assets und Ladeanweisungen.](https://design-system.w3.org/getting-started.html)
- [Einklappbare Container Native Struktur, Hooks und schrittweise Erweiterung.](https://design-system.w3.org/components/collapsible-containers.html)
- [Typografie Noto Sans und fließende Schriftgrößenskala.](https://design-system.w3.org/styles/typography.html)
- [Einstellungen Farbfunktionen und Verhalten beim Laden von Schriftarten.](https://design-system.w3.org/settings/)
- [Vertikale Abstände Stack-Mixin und explizite Maße.](https://design-system.w3.org/styles/vertical-spacing.html)