Crea interfacce di lettura flessibili con tipografia fluida, ruoli semantici dei colori e contenuti comprimibili nativi, sempre leggibili anche senza JavaScript.
Miglioramento progressivo di sistema di design W3C
I contenuti precedono i controlli
W3C distingue gli stili di base dai componenti avanzati. La sezione comprimibile inizia con normali intestazioni seguite dai contenuti. Senza script, tutte le scalette delle sessioni restano leggibili. main.js inserisce i pulsanti e modifica lo stato solo dopo aver individuato gli attributi data documentati. Questo modello di implementazione è diverso da quello che distribuisce un accordion già nascosto, i cui controlli potrebbero non inizializzarsi mai.
L'anteprima usa core.css, advanced.css e main.js della CDN ufficiale, salvati come snapshot locale datato. Il marcatore html.js attiva i selettori avanzati. Se si omette il marcatore, gli attributi ARIA cambiano, ma i corpi restano visivamente aperti; l'anteprima verifica esplicitamente la visibilità effettiva oltre a aria-expanded.
Tipografia fluida e caricamento dei font sistema di design W3C
Una scala di lettura contenuta
La dimensione del corpo del testo passa da 15px al limite inferiore del viewport a 16px a 1120px. La scala si basa su nove proprietà personalizzate con nome. H1 usa --w3c-text-5, non la più grande --w3c-text-7; usare indiscriminatamente un titolo di visualizzazione da 36px in ogni documento non rispetterebbe la gerarchia standard delle intestazioni.
Noto Sans è il font web previsto. Lo stack di fallback nativo usa Trebuchet MS e Geneva finché il percorso di caricamento dei font non aggiunge fonts-loaded all'elemento radice. Questo esempio indipendente mantiene attivo il fallback e indica questa scelta. La dimensione fluida e l'altezza della riga restano quelle native; l'anteprima non dichiara di riprodurre con esattezza le metriche dei glifi di Noto Sans.
Larghezza di lettura e spaziatura sistema di design W3C
Componi le primitive di layout
La primitiva l-center imposta una larghezza massima inline di 70rem e una spaziatura laterale di 5vw. L'anteprima aggiunge un limite di 55rem specifico dell'applicazione, per mantenere compatte le tre brevi scalette di apprendimento. Questo limite non è un nuovo token W3C. All'interno del corpo di ogni sezione comprimibile, la misura del testo nativa di 41.25rem limita la lunghezza delle righe.
Il mixin Stack documentato crea una colonna e applica margin-top agli elementi fratelli diretti dopo il primo. La misura predefinita è 1em e chi lo invoca può passare un'altra unità. Consideralo una relazione tra blocchi, non inventare una scala globale di spaziatura numerata. La sezione comprimibile ha un rientro di 25px, una spaziatura di 16px e un raggio di 6px, verificati separatamente.
Il sistema distingue il blu predefinito dei link, il blu scuro per hover e lo stato visitato viola. Questi ruoli sono importanti in un sito in cui le persone tornano a consultare documenti lunghi e navigano tra i riferimenti. Riutilizzare l'alias dei link per decorazioni non correlate fa sì che le future modifiche al tema cambino anche superfici non correlate.
Il focus è evidenziato in giallo con un bordo visibile. La pagina delle impostazioni distingue i bordi normali dal ruolo più scuro dei bordi degli input. Elenca inoltre significati diversi per i colori di informazione, successo, avviso ed errore. Mantieni il ruolo e verifica l'abbinamento sullo sfondo effettivo: un campione di colore da solo non dimostra che lo stato di un componente abbia un contrasto sufficiente.
Markup comprimibile e script sistema di design W3C
Intestazione, pulsante e corpo adiacente
Ogni elemento figlio diretto contiene un'intestazione immediatamente seguita dal corpo del contenuto. Lo script usa nextElementSibling per trovare quel corpo, quindi inserire metadati non correlati tra i due interromperebbe la relazione. Inserisci l'etichetta della categoria nello span dell'intestazione, come nel modello documentato per l'elenco dei gruppi. Lo script racchiude il contenuto dell'intestazione in un pulsante.
Il codice nativo attiva o disattiva aria-expanded sul pulsante e aria-hidden sul corpo. Il foglio di stile avanzato nasconde il corpo compresso. data-anchor="no" impedisce alla funzionalità separata degli anchor per le intestazioni di aggiungere link indesiderati a questo componente. Inizializza main.js una sola volta; una seconda applicazione del miglioramento anniderebbe altri pulsanti nelle intestazioni.
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>
Controlli collettivi e uso della tastiera sistema di design W3C
Estendi i controlli tramite i pulsanti esistenti
Espandi tutto e Comprimi tutto sono controlli d'esempio originali. Esaminano ciascun pulsante nativo e lo attivano solo quando è necessario cambiarne lo stato. In questo modo, la transizione dello stato nativa e la regola visiva restano sincronizzate. Non modificano direttamente un attributo ARIA lasciando l'altro non aggiornato.
I pulsanti nativi si attivano con Invio e Spazio. L'anteprima verifica un singolo pulsante, espande tutto, comprime tutto e riapre un elemento usando la tastiera. Un messaggio di stato cortese descrive l'azione collettiva. Il componente nativo consente di tenere aperte più scalette contemporaneamente; non è un accordion che permette di aprire un solo elemento alla volta.
Apri Moduli inclusivi e consulta l’elenco pratico.
Espandi tutto per confrontare le descrizioni delle tre sessioni.
Comprimi tutto, quindi premi Invio su un’intestazione per riaprire solo quella sezione.
La pagina ufficiale per iniziare pubblica percorsi CDN stabili per gli stili core, advanced e print, oltre a main.js e agli script opzionali delle funzionalità. Il blocco di configurazione usa i percorsi effettivi. Per questa implementazione non servono un provider React né un pacchetto npm HTML. La demo locale include copie dei file scaricati, così l’esempio funziona anche senza una connessione attiva.
Nell’integrazione per la produzione, se si supportano gli stessi browser meno recenti, mantenere il controllo di compatibilità CSS documentato per gli stili advanced. La configurazione compatta carica direttamente gli stili advanced nei browser moderni. Includere il foglio di stile print nei siti con documenti completi; l’anteprima autonoma si concentra sull’esempio interattivo per schermo.
core.css: tipografia di base, layout e componenti non arricchiti.
advanced.css: regole per gli stati arricchiti da JavaScript.
main.js: individua gli hook data e arricchisce una sola volta i componenti supportati.
Sistema di progettazione, non certificazione di conformità
Una pagina con stile W3C non è automaticamente conforme a WCAG. Verifica i contenuti effettivi, l’ordine del focus, il comportamento dello zoom e gli stati di ripristino. Questo esempio verifica tre larghezze di viewport e la versione di base senza script; non dichiara una certificazione né una verifica esaustiva con tecnologie assistive.
I nomi e le descrizioni dei circoli di apprendimento sono contenuti di fantasia originali. Non rappresentano gruppi di lavoro, calendari o opportunità di iscrizione ufficiali. L’esempio evita intenzionalmente i loghi W3C e qualsiasi dichiarazione di affiliazione. Il riutilizzo di risorse di stile pubbliche deve restare distinto da qualsiasi implicazione di approvazione istituzionale.
Sistema di design W3C Esempi di componenti del sistema di progettazione
Programma delle sessioni con miglioramento progressivo
Intestazione e contenuto adiacente costituiscono la struttura necessaria; main.js aggiunge il controllo di apertura e chiusura.
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>
Include il marcatore di miglioramento della radice, le risorse ufficiali, i pannelli a scomparsa nativi e i controlli collettivi.
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>
Percorsi CDN ufficiali effettivi. L’anteprima locale include copie di queste risorse e mantiene il fallback nativo dei font di sistema. Il file ZIP completo dell’esempio funzionante, disponibile in Fonti, include anche le dipendenze esatte dell’anteprima e il documento completo. Estrailo, esegui python3 -m http.server 8080 in quella directory, quindi apri http://localhost:8080/w3c.html. Non aprire esempi basati su moduli tramite 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>
Un prompt per il tuo progetto
Prompt per l’agente
Usa gli stili core e advanced di W3C con main.js e il marcatore di miglioramento html.js. Crea intestazioni semantiche con contenuti adiacenti a scomparsa usando gli hook data effettivi. Mantieni una versione di base leggibile senza JavaScript, la tipografia fluida nativa e i colori semantici per link e focus. Non inizializzare due volte né dedurre la conformità WCAG dal solo stile.
05
Sistema di design W3C Fonti e ambito
Esempio indipendente OpenDesign che usa risorse pubbliche ufficiali. Non implica affiliazione a W3C né certificazione di accessibilità.
