# Sistema di design W3C ## Anteprima dell'interfaccia sistema di design W3C Apri le sessioni singolarmente o tutte insieme; i contenuti restano leggibili anche quando JavaScript è disabilitato. ## Riferimento di progettazione sistema di design W3C Documentazione ufficiale W3C e snapshot della CDN pubblica scaricati il 3 ottobre 2026; CSS effettivo e script nativo esaminati. ### Tipografia fluida | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Web font / fallback | Noto Sans / Trebuchet MS, Geneva, sans-serif | CSS nativo applica Noto Sans dopo fonts-loaded; la demo mantiene il fallback di sistema. | | Fluid range | 320–1120px viewport | I valori di clamp raggiungono un plateau al di fuori di questo intervallo; non si verificano bruschi salti tipografici. | | --w3c-text-0 | clamp(.9375rem, .9125rem + .125vw, 1rem) | Corpo del testo: da 15px a 16px con dimensione radice normale. | | --w3c-text-5 | clamp(1.6894rem, 1.6444rem + .2253vw, 1.802rem) | Scala H1; circa 27–28.8px. | | --w3c-text-7 | clamp(2.1382rem, 2.0811rem + .2851vw, 2.2807rem) | Scala più grande text-xl, non l'H1 predefinito. | | Body line height | 1.5 | Relativo alla dimensione del font fluida. | | Collapsible H3 | --w3c-text-1 / line-height 1.5 | Override del componente: circa 16.9–18px. | ### Colori semantici | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Text | #111111 | Nero antracite; testo per la lettura corrente. | | Link | #005a9c | Blu W3C; diverso dagli stati hover e visited. | | Hover / visited | #002a56 / #75336c | Mantieni la distinzione tra gli stati. | | Focus | #f9dc4a | Evidenziazione gialla del focus con un bordo visibile. | | Input border | #545454 | Ruolo di contrasto diverso da quello dei divisori decorativi. | | Success / error | #046704 / #a82615 | Indica uno stato, non è un accento casuale. | | Warning | #c28605 | Ruolo del bordo per le note di avviso. | ### Layout e spaziatura | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | l-center | max-inline-size:70rem; padding-inline:5vw | Contenitore ampio nativo; l'anteprima applica una larghezza massima di 55rem specifica dell'applicazione. | | Reading measure | 41.25rem | Larghezza massima del contenuto all'interno delle sezioni comprimibili. | | Stack default | 1em between direct siblings | Il mixin Sass ufficiale accetta una misura esplicita; non è una scala fissa di 8px. | | Collapsible inset | 1.5625rem | 25px con dimensione radice normale. | | Collapsible separation / radius | 1rem / .375rem | Spaziatura di 16px e angoli di 6px. | | Collapsible shadow | -.0625rem .0625rem .25rem rgba(55,70,95,.12) | Separazione discreta tra le superfici; CSS nativo. | ### Requisiti del miglioramento progressivo | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Outer hook | data-component="collapsibles" | Lo script individua la radice di ogni componente. | | Heading hook | data-heading="collapsibles" | Lo script inserisce un vero pulsante in ogni intestazione. | | Collapsed state | aria-expanded=false; next sibling aria-hidden=true | La versione avanzata di CSS richiede il marcatore html.js per nascondere il corpo. | | data-anchor="no" | Suppress automatic heading anchors for this subtree | Evita di inserire un altro link nell'intestazione comprimibile. | | No JavaScript | All content remains visible | Non distribuire contenuti nascosti nel markup iniziale non migliorato. | ## Guida completa a sistema di design W3C Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## 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. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## Ruoli semantici dei colori sistema di design W3C ### Mantieni visibili lo storico dei link e il focus 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. Leggi la specifica di supporto ## 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. ```

Inclusive forms Practical workshop

Connect each field to its label, hint and recovery message.

  • Preserve entered values
  • Test keyboard recovery
``` Riferimento del codice Leggi la specifica di supporto ## 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. 1. Apri Moduli inclusivi e consulta l’elenco pratico. 2. Espandi tutto per confrontare le descrizioni delle tre sessioni. 3. Comprimi tutto, quindi premi Invio su un’intestazione per riaprire solo quella sezione. Leggi la specifica di supporto ## Sistema di design W3C Risorse e integrazione ### Nessuna installazione di pacchetti inventata 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. Leggi la specifica di supporto ## Sistema di design W3C Ambito e verifica ### 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. Leggi la specifica di supporto ## 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. ```

Inclusive forms Practical workshop

Connect each field to its label, hint and recovery message.

  • Preserve entered values
  • Test keyboard recovery
``` Riferimento del codice ### Elenco nativo completo per l’apprendimento Include il marcatore di miglioramento della radice, le risorse ufficiali, i pannelli a scomparsa nativi e i controlli collettivi. ``` Web learning circles

INDEPENDENT LEARNING PROGRAMME

Web learning circles

Explore three small-group sessions for people building a more usable web.

Choose a session to read its outline.

Inclusive forms Practical workshop

Trace a form from its label to its hint, error message and recovery action. Compare the experience with a keyboard and with enlarged text.

  • Associate labels and help text
  • Keep entered values after an error
  • Move focus only when it helps recovery

Resilient reading Discussion circle

Examine document structure before adding interaction. The content in this example remains visible when JavaScript is unavailable.

Bring a short article and identify its heading hierarchy, reading measure and meaningful links.

International text Peer review

Review language declarations, long translated labels and mixed-direction text. A font choice alone cannot guarantee a usable multilingual interface.

All sessions are fictional examples, with no membership or registration service.

``` Riferimento del codice ## Sistema di design W3C Configurazione dell’agente ### Punto di partenza per l’implementazione 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://. ``` ``` ### Un prompt per il tuo progetto ``` 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. ``` ## Sistema di design W3C Fonti e ambito Esempio indipendente OpenDesign che usa risorse pubbliche ufficiali. Non implica affiliazione a W3C né certificazione di accessibilità. - Per iniziare Risorse CDN ufficiali e istruzioni di caricamento. - Contenitori a scomparsa Struttura nativa, hook e comportamento progressivo. - Tipografia Noto Sans e scala fluida. - Impostazioni Ruoli dei colori e comportamento del caricamento dei font. - Spaziatura verticale Mixin per gli elementi in colonna e misure esplicite. - Scarica l’esempio completo e funzionante ZIP con HTML completo, dipendenze locali CSS/JavaScript, licenze fornite e istruzioni esatte per l’avvio. Non è necessario alcun passaggio di compilazione. ## Sistema di design W3C Risorse correlate ### Codex Usa la struttura effettiva di SearchInput di Codex, la gerarchia delle azioni e i token pensati per la lettura. Cerca in un indice locale di articoli, esamina un risultato e torna alla stessa posizione di lettura. ### Agriculture sistema di design Crea flussi di servizio più articolati con gli spaziature concrete, le proprietà responsive e il modello di stato TaskList di AgDS. Prova un flusso di preparazione in cui il passaggio di revisione si sblocca solo una volta completati i prerequisiti. ### Alberta sistema di design Usa i componenti web nativi e i token di design pubblicati di Alberta per creare una lista di preparazione completa, con opzioni accessibili, avanzamento derivato e feedback di revisione trasparente. - [Riferimento per l’implementazione](https://design-system.w3.org/components/collapsible-containers.html) - [Fonte](https://design-system.w3.org/styles/typography.html) - [Fonte](https://design-system.w3.org/settings/) - [Fonte](https://www.w3.org/assets/website-2021/styles/core.css) - [Fonte](https://design-system.w3.org/components/collapsible-containers.html) - [Leggi la specifica di supporto](https://design-system.w3.org/) - [Leggi la specifica di supporto](https://design-system.w3.org/styles/typography.html) - [Leggi la specifica di supporto](https://design-system.w3.org/styles/vertical-spacing.html) - [Leggi la specifica di supporto](https://design-system.w3.org/settings/) - [Riferimento del codice](https://design-system.w3.org/components/collapsible-containers.html) - [Leggi la specifica di supporto](https://design-system.w3.org/components/collapsible-containers.html) - [Leggi la specifica di supporto](https://design-system.w3.org/getting-started.html) - [Per iniziare Risorse CDN ufficiali e istruzioni di caricamento.](https://design-system.w3.org/getting-started.html) - [Contenitori a scomparsa Struttura nativa, hook e comportamento progressivo.](https://design-system.w3.org/components/collapsible-containers.html) - [Tipografia Noto Sans e scala fluida.](https://design-system.w3.org/styles/typography.html) - [Impostazioni Ruoli dei colori e comportamento del caricamento dei font.](https://design-system.w3.org/settings/) - [Spaziatura verticale Mixin per gli elementi in colonna e misure esplicite.](https://design-system.w3.org/styles/vertical-spacing.html)