Services publics et administration · Nouvelle ressource
Système de design ONS.
Créez une réponse à un sondage sans contradictions : cases à cocher natives de l’ONS, réponses mutuellement exclusives, références exactes aux types et aux couleurs, et processus complet de vérification locale.
Guide OpenDesign8 chapitres26 entrées de référenceGuide de l’application d’origine
01
Aperçu de l’interface système de design ONS
Essayez plusieurs modes de déplacement, la réponse contradictoire, la validation d’une réponse vide, l’évaluation locale et la conservation des modifications.
Checkbox et Mutually Exclusive CSS/JavaScript natifs d’ONS 73.13.1. Question originale, validation et évaluation dans l’application, avec recours explicite à Arial. · Référence de mise en œuvre
02
Référence de conception système de design ONS
ONS Design System 73.13.1 compilé CSS, JavaScript et variables Sass, vérifiés par rapport au manuel de service public. L’exemple utilise les comportements natifs Checkbox et Mutually Exclusive. Dans l’exemple autonome, Arial remplace OpenSans ; la procédure de copie pour la production inclut les polices fournies dans le package. La question sur les déplacements et l’évaluation locale sont des contenus de démonstration originaux.
Valeurs des utilitaires de marge inférieure avec une racine de 16px. Elles comprennent des incréments qui ne figurent pas dans la grille de base documentée de 8px.
ons-u-mb-l / xl
24px /32px
Utilisez les utilitaires de la version publiée ; ne déduisez pas toutes les valeurs d’une simple indication sur la grille de base.
Conception spécifique aux questionnaires système de design ONS
Préserver le sens d’une réponse
ONS assure à la fois la collecte statistique et la publication d’informations. Dans un questionnaire, les réponses mutuellement exclusives relèvent de la qualité des données : l’utilisateur ne doit pas pouvoir envoyer à la fois un mode de déplacement et une réponse indiquant qu’aucun trajet n’a eu lieu. Le composant natif Mutually Exclusive associe ces options et explique la désélection aux technologies d’assistance.
L’exemple pose une question originale sur les déplacements liés à une bibliothèque et propose un aperçu local des réponses. Il évite délibérément les éléments graphiques de l’identité d’ONS et ne prétend pas que les réponses sont collectées. Un questionnaire de production nécessiterait ses propres règles de consentement, de conservation, de routage et de validation côté serveur.
Hiérarchie lisible des questions système de design ONS
Une légende peut faire office de titre de page
La famille principale est Open Sans, avec la variante stylistique 1 choisie pour ses formes de lettres distinctives. La matrice typographique native Sass utilise des valeurs fixes, petites et grandes, plutôt qu’une échelle continue inventée. Le texte courant reste à 18px avec un interlignage de 28px. La classe principale de grande taille passe de 32/44 à 48/56 au point de rupture moyen.
Sur une page consacrée à une seule question, le h 1 peut être placé dans la légende du fieldset afin que le nom accessible du groupe et son titre visible concordent. N’ajoutez pas au-dessus un second h 1 sans rapport. L’exemple présente le contexte du service dans un paragraphe plus petit et l’instruction de sélection sous la légende.
La démo autonome utilise explicitement Arial afin de ne générer aucune requête de police manquante. La procédure d’installation copie les polices à côté de CSS ; c’est nécessaire si l’on souhaite utiliser la police OpenSans publiée plutôt qu’une police de substitution.
Rôles dans une interface de questionnaire système de design ONS
Le focus est distinct de l’état
ONS associe des variables sémantiques à des couleurs primitives. Le texte est noir, les liens ordinaires sont bleu océan et le bouton principal est vert feuille. Le jaune soleil est la couleur du focus. Le rouge rubis signale les erreurs, mais le message d’erreur doit tout de même préciser l’action à effectuer. Un bouton Continuer vert ne garantit pas que la réponse a déjà passé la validation.
Le questionnaire local utilise la bordure native des cases à cocher et leur style de sélection. Il ne présente pas chaque réponse comme une carte marketing distincte. Un court filet neutre en haut sépare l’exemple indépendant de la question, sans reprendre le bandeau ONS.
Conservez l’indication de focus visible native sur le champ de case à cocher et le bouton d’action.
Placez l’instruction écrite « Sélectionnez toutes les réponses applicables » avant les options standard.
Séparez la réponse opposée par « Ou » afin que la différence soit visible avant toute interaction.
Colonnes et largeur des réponses système de design ONS
Utiliser la largeur de texte du questionnaire
La grille à douze colonnes exprime les largeurs à l’aide de classes telles que ons-col-8@m. À partir de 740 px, cet élément occupe huit colonnes ; en dessous, il utilise toute la largeur de contenu disponible. L’exemple local reprend cette colonne native pour que la longue question se répartisse sur une largeur lisible, plutôt que de s’étirer sur tout l’écran de bureau.
Dans la version examinée, le conteneur standard a une largeur maximale de 64.6256rem et un remplissage horizontal de 1rem. Le guide public de la grille décrit aussi une base de 8 px et des gouttières de 16/24 px autour du seuil d’espacement de 600 px. Distinguez ces notions du point de rupture moyen de 740 px pour les colonnes : elles ne constituent pas un seuil mobile universel.
L’écran de récapitulatif des réponses remplace la question dans la même colonne, et le bouton « Modifier les réponses » ramène aux commandes existantes. Les valeurs restent en mémoire, sans changement de route ni requête réseau.
Les utilitaires d’espacement exécutables sont plus précis que la valeur de base de 8 px indiquée dans le texte : à une racine de 16 px, les marges inférieures xs, s, m, l et xl sont de 12, 16, 20, 24 et 32 px. La référence distingue donc les valeurs réelles des utilitaires des indications sur la grille.
Une case à cocher utilise ons-checkbox__input et un ons-checkbox__label associé, à l’intérieur de ons-checkbox. L’élément input conserve ses attributs name et value habituels pour que les sémantiques natives des formulaires restent opérationnelles. La structure englobante ons-checkboxes__item fournit l’espacement et la zone d’activation attendus par la feuille de style.
Les choix ordinaires partagent ons-js-exclusive-group-item. Le dernier choix utilise plutôt ons-js-exclusive-option, avec data-deselect-message pour en expliquer l’effet. L’élément span de région dynamique doit être présent avec ses deux attributs adjectifs : il ne s’agit pas d’un balisage décoratif superflu. Le supprimer compromettrait le fonctionnement attendu par le contrôleur natif.
Cet exemple de code source est complet pour trois options ordinaires et une réponse opposée. Adaptez les noms et les valeurs à une question réelle ; ne vous contentez pas de renommer une commande de validation sans rapport en « exclusive ».
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>
Système de design ONS Validation et comportement de modification
État de la bibliothèque et état de l’application
La bibliothèque gère la désélection des options opposées. Le petit gestionnaire de l’application vérifie uniquement qu’au moins une réponse a été sélectionnée avant d’afficher un récapitulatif local. En l’absence de sélection, il affiche un message d’erreur écrit et place le focus sur le message associé. Le lien d’erreur mène directement au premier choix, où l’utilisateur peut agir.
En plus de la valeur de la case à cocher dans le DOM, le contrôleur suit un état mis en cache nommé hasValue. Une réinitialisation avec checked=false seul pourrait laisser ce cache obsolète. L’action de réinitialisation clique donc sur chaque case cochée, afin que les écouteurs natifs mettent leur modèle à jour, puis replace le focus sur la question. Il s’agit d’un enjeu concret d’intégration qu’on ne peut pas vérifier en examinant uniquement la feuille de style.
Le récapitulatif présente les libellés sélectionnés sous forme de liste. Le bouton « Modifier les réponses » conserve les commandes et leur sélection. Aucun panneau de confirmation ne prétend qu’une réponse à l’enquête a été reçue, car cet exemple ne comporte pas de serveur.
Système de design ONS Ressources et adoption du modèle
Deux méthodes prises en charge
Le paquet npm comprend les ressources compilées, les sources Sass, les macros Nunjucks et un modèle de page de base. Cet aperçu suit la méthode HTML avec ressources compilées : copiez CSS officiel et main.js, reproduisez le balisage documenté, puis chargez le script après le contenu du body. Le script initialise les composants correspondants lorsque le DOM est prêt.
Un projet rendu côté serveur peut plutôt utiliser les fichiers de macros Nunjucks du répertoire components. La macro Checkbox accepte un tableau de cases à cocher, des libellés, des descriptions, une configuration d’erreur et une configuration mutuallyExclusive. Le paramètre dontWrap transfère la responsabilité du fieldset au composant de question englobant ; il ne permet pas d’omettre le nom accessible du groupe.
Si vous sélectionnez les fichiers Sass individuellement, importez d’abord les variables du système, les helpers, les utilitaires, les styles de base et les objets, puis les règles des composants et leurs éventuelles dépendances. Pour cet exemple autonome de petite taille, les ressources complètes compilées CSS évitent de devoir sélectionner ces dépendances.
Verrouillez la version du paquet et servez les CSS, les scripts et les polices depuis un même répertoire de ressources locales stable.
Choisissez HTML compilé pour une page statique ou configurez les chemins des macros Nunjucks pour une application rendue côté serveur.
Utilisez CSS, JavaScript et le balisage de la même version, puis vérifiez à nouveau l’exclusion mutuelle après une mise à niveau.
Système de design ONS Tester des réponses contradictoires
Vérifier la signification des données
Sélectionnez « À pied » et « En bus », puis « Je ne me suis pas déplacé ». Les deux choix précédents doivent être désélectionnés. Sélectionnez ensuite « À vélo » : la réponse opposée doit être désélectionnée, tandis que « À vélo » reste cochée. Recommencez en appuyant sur Espace lorsque les champs ont le focus, puis vérifiez la région d’annonce au lieu de supposer qu’une coche visible suffit à prouver le bon fonctionnement.
Poursuivez sans rien sélectionner pour tester l’erreur, puis examinez une réponse valide et revenez en arrière avec « Modifier les réponses ». Enfin, après une séquence de réponses contradictoires, réinitialisez le formulaire et effectuez une nouvelle sélection : cela permet de détecter un état obsolète du contrôleur natif. À 390 px, la question et tous les libellés doivent rester lisibles sans défilement horizontal de la page.
Ces tests vérifient l’interaction locale, et non la transmission des données d’une enquête en production, la conformité en matière d’accessibilité ou la qualité statistique des questions. Un service réel doit aussi valider côté serveur les valeurs contradictoires et vérifier, par des recherches, que les catégories de réponse sont complètes.
Le document complet comprend sa mise en page, ses contrôles et son initialisation. Extrayez l’archive d’exemple liée pour obtenir les ressources de fournisseur avec leurs chemins relatifs exacts, puis servez le contenu via 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>
Téléchargez l’exemple complet depuis les sources. Son fichier README indique la commande exacte pour le lancer localement.
Conservez des chemins relatifs pour les ressources de fournisseur par rapport à ce document ; l’archive contient toutes les ressources utilisées par cet aperçu.
04
Système de design ONS Configuration de l’agent d’IA
Point de départ de l’implémentation
La version native 73.13.1 de CSS et JavaScript compilés est utilisée dans l’exemple local. Arial est une solution de repli locale explicite ; les instructions de copie pour la production incluent les polices OpenSans fournies avec le paquet. L’archive ZIP complète de l’exemple fonctionnel, dans Sources, contient aussi les dépendances exactes de l’aperçu et le document complet. Extrayez-la, exécutez python3 -m http.server 8080 dans ce répertoire, puis ouvrez http://localhost:8080/ons.html. N’ouvrez pas les exemples basés sur des modules avec 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 pour votre projet
Prompt pour l’agent IA
Créez un spécimen d’enquête ONS73.13.1 indépendant, utilisant les hooks natifs Checkbox et Mutually Exclusive, un fieldset/legend associé, un groupe de réponses ordinaire et une réponse mutuellement exclusive. Incluez la région dynamique requise et les attributs de désélection. Servez le CSS natif correspondant et main.js ; n’écrivez pas de contrôleur de remplacement pour gérer l’exclusivité. Ajoutez une validation locale en cas de réponse manquante et une relecture des réponses permettant de conserver les modifications, sans prétendre qu’elles ont été reçues par un serveur. Effectuez la réinitialisation au moyen des événements natifs afin de maintenir la cohérence de l’état mis en cache. Utilisez ons-col-8@m et les règles de typographie et de couleurs sémantiques vérifiées, sans les marques d’identité officielles.
05
Sources et périmètre système de design ONS
Spécimen de mise en œuvre indépendant, avec un libellé d’enquête original. Le code natif est sous licence MIT ; les licences de l’identité et du contenu de l’ONS sont distinctes. Aucune réponse n’est transmise, enregistrée ni présentée comme une statistique officielle.
