Crea una risposta al sondaggio che non possa contraddirsi: caselle di controllo native ONS, risposte mutuamente esclusive, riferimenti precisi a tipi e colori e un flusso completo di revisione locale.
Checkbox e Mutually Exclusive CSS/JavaScript nativi di ONS 73.13.1. Domanda originale, convalida/revisione dell’app e fallback Arial esplicito. · Riferimento per l’implementazione
02
Sistema di design ONS Riferimento di design
ONS Design System 73.13.1 compilato CSS, JavaScript e variabili Sass, verificati rispetto al manuale pubblico dei servizi. Nell’esempio vengono usati i comportamenti nativi Checkbox e Mutually Exclusive. Nell’esempio autonomo Arial sostituisce OpenSans; la procedura di copia per la produzione include i font distribuiti nel pacchetto. La domanda sui viaggi e la revisione locale sono contenuti dimostrativi originali.
Sistema di design ONS Design specifico per questionari
Preserva il significato di una risposta
ONS si occupa sia della raccolta statistica sia della pubblicazione di informazioni. In un questionario, le risposte a scelta esclusiva riguardano la qualità dei dati: un utente non deve poter inviare sia un mezzo di trasporto sia una risposta che dichiari che non ha avuto luogo alcun viaggio. Il componente nativo Mutually Exclusive collega queste opzioni e spiega la deselezione alle tecnologie assistive.
L’esempio presenta una domanda originale sui viaggi in biblioteca e offre un’anteprima locale della risposta. Evita deliberatamente gli elementi grafici identificativi di ONS e non afferma che le risposte vengano raccolte. Un sondaggio di produzione richiederebbe consenso, conservazione, instradamento e convalida lato server propri.
Sistema di design ONS Gerarchia leggibile delle domande
Una legenda può fungere da titolo della pagina
La famiglia principale è Open Sans, con stylistic set 1 scelto per le sue forme distintive. La matrice tipografica Sass nativa usa dimensioni fisse piccole e grandi, anziché una scala continua inventata. Il testo del corpo resta a 18px con interlinea di 28px. La classe grande principale passa da 32/44 a 48/56 al breakpoint medio.
In una pagina con una sola domanda, l’h1 può essere inserito nella legenda del fieldset, così che il nome accessibile del gruppo corrisponda al titolo visibile. Non creare un secondo h1 non correlato sopra di esso. Nell’esempio, il contesto del servizio è un paragrafo più piccolo, mentre l’istruzione per la scelta è collocata sotto la legenda.
La demo autonoma usa esplicitamente Arial per evitare richieste di font mancanti. La procedura di installazione copia i font insieme a CSS; questo è necessario se si vuole usare il carattere OpenSans pubblicato anziché un fallback.
Sistema di design ONS Ruoli in un’interfaccia di sondaggio
Il focus è distinto dallo stato
ONS assegna variabili semantiche ai colori primitivi. Il testo è nero, i link standard sono Blu oceano e il pulsante principale è Verde foglia. Il Giallo sole è il colore del focus. Il Rosso rubino comunica gli errori, ma il messaggio di errore deve comunque indicare quale azione è necessaria. Un pulsante Continua verde non promette che la risposta abbia già superato la convalida.
Il questionario locale usa il bordo nativo della checkbox e il trattamento di selezione nativo. Non presenta ogni risposta come una scheda promozionale separata. Una breve linea neutra in alto separa l’esempio indipendente dalla domanda senza riprodurre l’intestazione ONS.
Mantieni il trattamento visibile nativo del focus sia sull’input checkbox sia sul pulsante di azione.
Prima delle opzioni standard, usa l’istruzione scritta «Seleziona tutte le opzioni applicabili».
Separa la risposta opposta con «Oppure», così la differenza è visibile prima dell’interazione.
Sistema di design ONS Colonne e larghezza delle risposte
Usa la misura prevista per i questionari
La griglia a dodici colonne esprime le larghezze con classi come ons-col-8@m. Da 740px in su, quella classe occupa otto colonne; al di sotto, lo stesso elemento riempie tutta la larghezza disponibile per i contenuti. L’esempio locale usa questa colonna nativa, così la domanda lunga va a capo a una larghezza leggibile invece di estendersi su tutta la pagina desktop.
Il contenitore standard ha una larghezza massima di 64.6256rem nella release esaminata e una spaziatura orizzontale di 1rem. La guida pubblica della griglia descrive inoltre una base di 8px e gutter di 16/24px attorno alla soglia di spaziatura di 600px. Tieni questi concetti distinti dal breakpoint medio di 740px della colonna: non si tratta di un unico punto di passaggio universale per i dispositivi mobili.
La revisione della risposta sostituisce la domanda nella stessa colonna e il comando Modifica le risposte riporta ai controlli esistenti. I valori restano in memoria senza cambi di percorso né richieste di rete.
Le utility di spaziatura eseguibili sono più granulari dell’indicazione di base di 8px: i margini inferiori xs, s, m, l e xl sono rispettivamente di 12,16,20,24 e 32px con una radice di 16px. Il riferimento elenca quindi separatamente i valori effettivi delle utility e le indicazioni della griglia.
Una casella di controllo usa ons-checkbox__input e l’etichetta associata ons-checkbox__label all’interno di ons-checkbox. L’input mantiene i normali attributi name e value, così le funzionalità native dei moduli continuano a funzionare. La struttura più ampia ons-checkboxes__item fornisce la spaziatura e l’area interattiva previste dal foglio di stile.
Le opzioni normali condividono ons-js-exclusive-group-item. L’ultima opzione usa invece ons-js-exclusive-option, con data-deselect-message che ne spiega l’effetto. L’elemento span dell’area live deve essere presente con entrambi gli attributi adjective: non è markup decorativo superfluo. Rimuoverlo violerebbe le aspettative del controller nativo.
Questo esempio di codice è completo e include tre opzioni normali e una risposta alternativa. Adatta le domande e i valori a una domanda reale; non limitarti a rinominare come “esclusivo” un controllo di convalida non pertinente.
html
<fieldset class="ons-fieldset"><legend class="ons-fieldset__legend"><h1 class="ons-fieldset__legend-title">How did you travel to your local library last week?</h1></legend>
<div class="ons-js-mutually-exclusive ons-mutually-exclusive">
<p class="ons-checkboxes__label">Select all that apply</p><div class="ons-checkboxes__items"><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="walk" name="travel" value="walk" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="walk" id="walk-label">Walk or wheel</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="cycle" name="travel" value="cycle" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="cycle" id="cycle-label">Cycle</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="bus" name="travel" value="bus" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="bus" id="bus-label">Bus or tram</label></span></span><br></div>
<p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s"><span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">Or</span><span class="ons-checkbox"><input type="checkbox" id="none" name="travel" value="none" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-option" data-deselect-message="Selecting this will uncheck all other options"><label class="ons-checkbox__label" for="none" id="none-label"><span class="ons-u-vh">Or, </span>I did not visit the library</label></span></p>
<span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="deselected" data-option-adjective="deselected"></span></div></fieldset>
Sistema di design ONS Convalida e comportamento delle modifiche
Stato della libreria e stato dell’applicazione
La libreria gestisce la deselezione delle opzioni alternative. Il piccolo gestore dell’applicazione nell’esempio verifica soltanto che sia stata fornita almeno una risposta prima di mostrare una schermata di riepilogo locale. Se non è selezionato nulla, mostra un messaggio di errore e sposta il focus sul messaggio associato. Il collegamento all’errore porta direttamente alla prima scelta, dove l’utente può intervenire.
Il controller tiene traccia dello stato hasValue memorizzato nella cache, oltre che del valore della casella di controllo nel DOM. Reimpostare solo checked=false potrebbe lasciare la cache non aggiornata. L’azione di ripristino fa quindi clic su ogni input selezionato, consentendo ai listener nativi di aggiornare il modello, e poi riporta il focus alla domanda. È un aspetto concreto dell’integrazione che non si può verificare osservando il foglio di stile.
Il riepilogo mostra un elenco delle etichette selezionate. Con “Modifica le risposte” i controlli e le selezioni vengono mantenuti. Non viene mostrato alcun pannello di conferma che affermi di aver ricevuto una risposta al sondaggio, perché questo esempio non è collegato a un server.
Sistema di design ONS Risorse e adozione dei template
Due modalità supportate
Il pacchetto npm include risorse compilate, sorgenti Sass, macro Nunjucks e un template di pagina di base. Questa anteprima usa la modalità con HTML compilato: copia il file ufficiale CSS e main.js, riproduci il markup documentato e poi carica lo script dopo il contenuto del body. Quando il DOM è pronto, lo script inizializza gli hook dei componenti corrispondenti.
In alternativa, un progetto con rendering lato server può usare i file di macro Nunjucks della cartella components. La macro Checkbox accetta l’array di caselle di controllo, le etichette, le descrizioni, la configurazione degli errori e quella di mutuallyExclusive. Impostando dontWrap, la responsabilità del fieldset passa al componente della domanda contenitore; non è un modo per omettere il nome accessibile del gruppo.
Se selezioni singoli file Sass, importa prima le variabili di sistema, gli helper, le utility, gli stili di base e gli oggetti; importa poi le regole dei componenti e tutte le relative dipendenze. Per questo piccolo esempio indipendente, il pacchetto CSS compilato completo evita di dover selezionare le dipendenze.
Fissa la versione del pacchetto e servi CSS, script e font da un’unica directory locale stabile per le risorse.
Scegli HTML compilato per una pagina statica oppure configura i percorsi delle macro Nunjucks per un’applicazione con rendering lato server.
Mantieni CSS, JavaScript e markup della stessa release e, dopo ogni aggiornamento, verifica di nuovo l’esclusione reciproca.
Sistema di design ONS Verifica le risposte contraddittorie
Verifica il significato dei dati
Seleziona “A piedi” e “Autobus”, poi seleziona “Non ho visitato la biblioteca”. Le due scelte precedenti dovrebbero essere deselezionate. Seleziona quindi “In bicicletta”: la risposta alternativa deve essere deselezionata, mentre “In bicicletta” deve rimanere selezionata. Ripeti usando la barra spaziatrice sugli input con il focus e controlla l’area degli annunci, senza presumere che la spunta visibile dimostri il corretto funzionamento di tutto.
Continua senza selezionare nulla per verificare l’errore, poi esamina una risposta valida e torna indietro con “Modifica le risposte”. Infine, dopo una sequenza di risposte contraddittorie, reimposta il modulo e seleziona un’altra risposta: così puoi rilevare eventuali stati obsoleti del controller nativo. A 390 px, la domanda e tutte le etichette devono rimanere leggibili senza scorrimento orizzontale della pagina.
Questi test verificano l’interazione locale, non l’invio dei dati di un sondaggio in produzione, la certificazione di accessibilità o la qualità statistica delle domande. Un servizio reale deve comunque convalidare lato server i valori contraddittori e verificare tramite ricerca che le categorie di risposta siano complete.
Il documento completo include layout, controlli e inizializzazione. Estrai l’archivio di esempio collegato per ottenere gli esatti asset vendor relativi, quindi avvialo tramite HTTP.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ONS survey question specimen</title><link rel="stylesheet" href="vendor/ons-73.13.1/css/main.css"><style>body,input,button,select,textarea{font-family:Arial,sans-serif!important}body{margin:0}main{padding-top:32px;padding-bottom:32px}.specimen{border-top:4px solid var(--ons-color-ocean-blue);padding-top:16px}.actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:32px}[hidden]{display:none!important}.error{border-left:4px solid var(--ons-color-errors);padding:16px;margin:24px 0;color:var(--ons-color-errors)}.quiet{color:var(--ons-color-text-light)}fieldset{min-width:0}.ons-checkbox__label{max-width:100%}</style><main class="ons-container"><p class="ons-u-fs-s specimen">Independent specimen · Original library survey</p><div class="ons-grid"><div class="ons-grid__col ons-col-8@m"><section id="question"><p class="quiet">Travel · Question 1 of 1</p><div id="error" class="error" tabindex="-1" hidden><strong>Select a travel method or tell us you did not visit.</strong><p><a href="#walk">Go to the answer choices</a></p></div><form id="survey" novalidate><fieldset class="ons-fieldset"><legend class="ons-fieldset__legend"><h1 class="ons-fieldset__legend-title">How did you travel to your local library last week?</h1></legend>
<div class="ons-js-mutually-exclusive ons-mutually-exclusive">
<p class="ons-checkboxes__label">Select all that apply</p><div class="ons-checkboxes__items"><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="walk" name="travel" value="walk" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="walk" id="walk-label">Walk or wheel</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="cycle" name="travel" value="cycle" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="cycle" id="cycle-label">Cycle</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="bus" name="travel" value="bus" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="bus" id="bus-label">Bus or tram</label></span></span><br></div>
<p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s"><span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">Or</span><span class="ons-checkbox"><input type="checkbox" id="none" name="travel" value="none" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-option" data-deselect-message="Selecting this will uncheck all other options"><label class="ons-checkbox__label" for="none" id="none-label"><span class="ons-u-vh">Or, </span>I did not visit the library</label></span></p>
<span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="deselected" data-option-adjective="deselected"></span></div></fieldset><div class="actions"><button class="ons-btn" type="submit"><span class="ons-btn__inner">Review answer</span></button><button id="reset" type="button" class="ons-btn ons-btn--secondary"><span class="ons-btn__inner">Reset</span></button></div></form><p class="ons-u-mt-l ons-u-fs-s quiet">Practice only. Your selection stays in this page and is not submitted.</p></section><section id="review" hidden><h1 tabindex="-1">Review your answer</h1><h2 class="ons-u-fs-m">Travel to the library last week</h2><ul id="answer"></ul><p>No response has been sent. Return to the question to change your selection.</p><button id="change" class="ons-btn ons-btn--secondary"><span class="ons-btn__inner">Change answers</span></button></section></div></div></main><script src="vendor/ons-73.13.1/scripts/main.js"></script><script>const form=document.querySelector('#survey'),q=document.querySelector('#question'),r=document.querySelector('#review'),err=document.querySelector('#error'),checks=[...form.querySelectorAll('input[type=checkbox]')];form.onsubmit=e=>{e.preventDefault();const chosen=checks.filter(x=>x.checked);if(!chosen.length){err.hidden=false;err.focus();return}err.hidden=true;document.querySelector('#answer').replaceChildren(...chosen.map(x=>{let li=document.createElement('li');li.textContent=document.querySelector('label[for="'+x.id+'"]').textContent.replace(/^Or, /,'');return li}));q.hidden=true;r.hidden=false;r.querySelector('h1').focus()};document.querySelector('#change').onclick=()=>{r.hidden=true;q.hidden=false;checks[0].focus()};document.querySelector('#reset').onclick=()=>{checks.filter(x=>x.checked).forEach(x=>x.click());err.hidden=true;checks[0].focus()};window.demoReady=true;</script></html>
Scarica l’esempio completo dalla sezione Fonti. Il README indica il comando esatto per avviarlo in locale.
Mantieni i percorsi vendor relativi a questo documento; l’archivio include tutti gli asset usati da questa anteprima.
04
Sistema di design ONS Configurazione dell’agente AI
Punto di partenza per l’implementazione
La versione compilata Native 73.13.1 di CSS e JavaScript viene eseguita nell’esempio locale. Arial è un fallback locale esplicito; le istruzioni per la copia in produzione includono i font OpenSans inclusi nel pacchetto. Il file ZIP dell’esempio funzionante completo, disponibile in Sources, contiene anche le dipendenze esatte dell’anteprima e il documento completo. Estrai i file, esegui python3 -m http.server 8080 in quella directory, poi apri http://localhost:8080/ons.html. Non aprire gli esempi basati su moduli tramite file://.
bash / html
npm install --save-exact @ons/[email protected]
mkdir -p public/vendor/ons
cp -R node_modules/@ons/design-system/css public/vendor/ons/
cp -R node_modules/@ons/design-system/scripts public/vendor/ons/
cp -R node_modules/@ons/design-system/fonts public/vendor/ons/
<!-- In your page head -->
<link rel="stylesheet" href="/vendor/ons/css/main.css">
<!-- Place the compiled component markup in the body. -->
<!-- Immediately before </body>; initializes matching component hooks -->
<script src="/vendor/ons/scripts/main.js"></script>
Un prompt per il tuo progetto
Prompt per l’agente
Crea un esempio indipendente di sondaggio ONS73.13.1 usando gli hook nativi Checkbox e Mutually Exclusive, il fieldset/legend associato, un gruppo di risposte normali e una risposta alternativa. Includi l’area live obbligatoria e gli attributi di deselezione. Servi CSS nativo e main.js della stessa release; non creare un controller sostitutivo per l’esclusione reciproca. Aggiungi una convalida locale per le risposte mancanti e un riepilogo delle risposte che mantenga le modifiche, senza affermare che siano state ricevute da un server. Ripristina lo stato tramite gli eventi nativi, così la cache rimane sincronizzata. Usa ons-col-8@m e le regole tipografiche e cromatiche semantiche verificate, senza marchi ufficiali.
05
Sistema di design ONS Fonti e ambito
Esempio di implementazione indipendente con testo originale per il sondaggio. Il codice nativo è distribuito con licenza MIT; le licenze per l’identità e i contenuti ONS sono separate. Nessuna risposta viene trasmessa, salvata o presentata come statistica ufficiale.
