Gestalten Sie robuste Leseoberflächen mit flexibler Typografie, semantischen Farbrollen und nativen aufklappbaren Inhalten, die auch ohne JavaScript lesbar bleiben.
Natives W3C-CSS und main.js, datierter CDN-Snapshot; Systemschrift-Fallback und Originalinhalte. · Implementierungsreferenz
02
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.
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.
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.
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.
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.
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.
html
<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>
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.
Öffnen Sie „Inklusive Formulare“ und sehen Sie sich die praktische Liste an.
Klappen Sie alle drei Sitzungsbeschreibungen auf, um sie zu vergleichen.
Klappen Sie alle Bereiche zu und drücken Sie dann bei einer Überschrift die Eingabetaste, um nur diesen Bereich wieder zu öffnen.
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.
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.
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.
html
<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>
Enthält das Markierungselement für die Erweiterung, offizielle Assets, native einklappbare Bereiche und Steuerelemente zum Ein- und Ausklappen aller Bereiche.
html
<!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>
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://.
html
<!-- 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
Agenten-Prompt
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.
05
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.
