Système de design Scottish Government.

Système de design Scottish Government Référence pratique pour la saisie de texte

Permettre à chacun de récupérer son travail

L’interaction centrale repose ici sur des indications de longueur non destructives. Une personne peut coller une longue note sur ses besoins d’accès, voir quelle partie doit être raccourcie et conserver tout le texte pendant qu’elle le modifie. Le compteur de caractères natif affiche le nombre de caractères restants, applique le style de dépassement de limite et affiche avec un délai un message destiné aux technologies d’assistance. L’application détermine séparément si la note est suffisamment valide pour être prévisualisée.

Il s’agit d’un exemple original de note d’atelier, et non d’un service du Scottish Government ni d’une demande de renseignements médicaux. Il ne comporte ni visuels d’identité, ni stockage, ni envoi. L’indication du champ demande de préciser un besoin pratique lié à l’accès et déconseille de fournir des renseignements privés, afin que la tâche soit claire sans reprendre les éléments d’une démarche officielle.

Consultez la spécification associée

Système de design Scottish Government Roboto et hiérarchie adaptative

Respecter les métriques publiées

Le système impose Roboto aux directions et aux domaines d’action du Scottish Government. Les autres organisations qui l’adoptent peuvent utiliser une autre police lisible, tout en respectant les règles de taille et de hauteur de ligne et en testant le résultat. L’exemple autonome indique explicitement qu’il utilise Arial comme police de secours ; il ne prétend pas qu’une police web manquante est Roboto.

Le corps du texte passe de 16/24px à 19/32px, et le titre principal de 30/40px à 44/56px. Ces deux changements sont définis dans la feuille de style native pour les écrans plus grands. La classe ds_h 3 modifie la taille visuelle sans imposer un titre sémantique de troisième niveau. Cette distinction est importante lorsqu’un formulaire court nécessite un titre de section plus petit, mais ne doit pas créer artificiellement un niveau dans la structure du document.

Consultez la spécification associée

Système de design Scottish Government Un traitement distinct pour la mise au point

Distinguer la mise au point, l’erreur et la réussite

Le bleu assure le rôle de couleur principale de marque et des liens, le noir celui du texte et le jaune celui de la mise au point. Il s’agit de paramètres Sass nommés, et non d’un ensemble inventé de propriétés personnalisées CSS. L’adaptation de la marque se fait avant le chargement du système, au moyen de son module de paramètres. Les recommandations officielles préconisent de conserver la palette de mise au point même lorsque les autres couleurs de la marque changent.

Le compteur de caractères utilise le rouge réservé aux états négatifs uniquement lorsque la longueur autorisée est dépassée. Une erreur distincte de l’application signalant un champ vide peut utiliser le même rôle négatif, mais son message doit indiquer qu’une réponse manque, et non signaler un problème de décompte des caractères. L’aperçu n’utilise jamais le vert positif pour laisser entendre qu’un envoi à distance a réussi.

• Conservez un contour de mise au point visible au clavier sur la zone de texte et les boutons d’action.
• Signalez le dépassement en toutes lettres, pas uniquement par une bordure rouge.
• Associez les résumés d’erreurs et les indications des champs à un ID de champ stable.

Consultez la spécification associée

Système de design Scottish Government Largeur du conteneur et espacement

Ne confondez pas les largeurs extérieure et intérieure

Le tableau de grille officiel indique des largeurs de contenu intérieures de 736, 928 et 1120px aux points de rupture moyen, grand et très grand. Les largeurs correspondantes des boîtes de conteneur natives sont de 768, 960 et 1152px, car elles comprennent un espacement intérieur de 16px de chaque côté. Cette distinction évite d’imbriquer les deux largeurs et de réduire accidentellement la mise en page deux fois.

L’aperçu place une colonne de lecture de 42rem à l’intérieur du conteneur natif. Cette largeur maximale est un choix propre à l’application, adapté à un formulaire court ; ce n’est pas un nouveau paramètre du système. En dessous de 768px, le conteneur s’adapte à la largeur disponible et le même espacement latéral de 16px évite que la zone de texte soit trop près du bord de l’écran.

Les utilitaires d’espacement sont adaptatifs. Par exemple, ds_!_margin-bottom--4 passe de 24 à 32px à 48rem ; les niveaux supérieurs augmentent également. La référence indique les deux valeurs pour éviter de prendre une capture d’écran sur ordinateur pour un espacement universel fixe.

Consultez la spécification associée

Système de design Scottish Government Un champ natif avec compteur de caractères

Commencez par une véritable zone de texte

L’élément racine ds_question porte data-module et le seuil facultatif en pourcentage. Son libellé associé et son indication sont des éléments ordinaires et accessibles HTML. L’attribut maxlength d’une zone de texte offre une solution de secours utile sans JavaScript. Après l’amélioration progressive, le composant lit cette valeur puis supprime la limite stricte afin qu’un texte collé ne soit pas tronqué sans avertissement.

Pour un champ de 200 caractères avec un seuil de 80 %, le compteur s’affiche à 160 caractères. Le texte d’exemple de la page publique du composant et l’exemple de code de 250 caractères n’utilisent pas les mêmes valeurs ; cet exemple utilise donc une limite cohérente partout. Sans JavaScript, l’indication visible précise toujours la limite et l’attribut natif maxlength s’applique.

<div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div>

Référence du code

Consultez la spécification associée

Système de design Scottish Government Ce qui relève du composant natif

Messages, temporisation et comptage

L’implémentation versionnée crée un message visible avec aria-hidden et un message masqué distinct pour les technologies d’assistance. Elle ajoute les identifiants concernés à l’attribut aria-describedby existant au lieu de supprimer l’indication rédigée. Elle attend 1000 ms avant de mettre à jour l’annonce masquée, afin de laisser d’abord le temps au retour de saisie de se terminer.

La longueur réelle est déterminée par JavaScript string.value.length : elle compte les unités de code UTF-16. Un symbole hors du plan multilingue de base peut compter pour deux unités, et un emoji composé peut en compter davantage. Un service qui applique une autre règle de comptage doit harmoniser son compteur et sa validation côté serveur, plutôt que de laisser entendre que ce composant compte les caractères tels qu’ils sont perçus par les personnes.

Le composant écoute les événements input. Si une application préremplit le champ avec un exemple ou l’efface par programmation, elle doit aussi déclencher un événement input. Les actions d’exemple et de réinitialisation de la démo le font. Un commentaire dans le code source mentionne une interrogation périodique pour la reconnaissance vocale, mais l’implémentation examinée ne met en place aucun intervalle d’interrogation ; ce guide ne prétend donc pas que cette fonctionnalité est prise en charge.

Consultez la spécification associée

Système de design Scottish Government Utiliser les chemins de la version actuelle

Chargement du module et initialisation ciblée

Le package actuel est @scottish-government/design-system. La version 4.3.0 place sa feuille de style compilée dans dist/css/design-system.min.css, tandis qu’un ancien paragraphe d’installation indique encore dist/styles/main.css. Cette recette utilise le fichier réellement publié. Le script exporte un module ES ; importez-le avec type="module" plutôt qu’avec une balise de script classique.

Créez une instance CharacterCount pour ce champ et appelez init. DS.initAll est également disponible pour les pages qui comportent plusieurs composants, mais cet exemple n’initialise que le compteur nécessaire. Aucun service d’analyse supplémentaire n’est configuré. La validation côté serveur reste indépendante de la bibliothèque : un compteur facilite la saisie, mais ne constitue pas un mécanisme de contrôle.

1. Installez le package 4.3.0 épinglé, puis copiez la feuille de style compilée CSS et le module dans un répertoire local de ressources.
2. Insérez dans la page la structure complète — libellé, indication et textarea — avant d’importer le module.
3. Initialisez le compteur une seule fois, puis reliez les actions d’aperçu et de réinitialisation de l’application au moyen d’événements input classiques.

Consultez la spécification associée

Système de design Scottish Government Tester la récupération après dépassement

Ne testez pas uniquement un champ vide

Commencez en dessous du seuil, dépassez 160 caractères, puis collez un texte de plus de 200 caractères. Toute la valeur doit rester dans le textarea, tandis qu’un message indiquant le dépassement s’affiche et que aria-invalid prend la valeur true. Réduisez le texte sous la limite et vérifiez que la classe d’erreur disparaît et que l’état invalide est rétabli.

L’action Aperçu de l’application bloque les notes vides ou trop longues et affiche une erreur associée. Une note valide apparaît dans un aperçu local au moyen de textContent : le balisage saisi s’affiche donc comme du texte, sans être interprété. L’action Modifier la note ramène au même textarea sans effacer la valeur. La réinitialisation l’efface en déclenchant un événement input, ce qui réinitialise aussi le compteur natif.

À 390 px, vérifiez le retour à la ligne du titre, le textarea pleine largeur, le passage des boutons à la ligne et le résumé des erreurs. Sur les écrans plus larges, la colonne de lecture ne doit pas se transformer en un paragraphe trop étendu. Ces vérifications portent sur cet exemple ; un service réel doit également faire l’objet de recherches auprès des utilisateurs, de tests de polices et d’une évaluation avec des technologies d’assistance dans son contexte définitif.

Consultez la spécification associée

Système de design Scottish Government Exemples de composants du système de design

<div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div>

npm install --save-exact @scottish-government/[email protected]
mkdir -p public/vendor/scot
cp node_modules/@scottish-government/design-system/dist/css/design-system.min.css public/vendor/scot/
cp node_modules/@scottish-government/design-system/dist/scripts/design-system.js public/vendor/scot/

<link rel="stylesheet" href="/vendor/scot/design-system.min.css">
<script type="module">
  import DS from '/vendor/scot/design-system.js';
  const root = document.querySelector('[data-module="ds-character-count"]');
  new DS.components.CharacterCount(root).init();
  // Or DS.initAll() when the page uses multiple DS components.
</script>

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Scottish design system character count specimen</title><link rel="stylesheet" href="vendor/scot-4.3.0/dist/css/design-system.min.css"><style>body,button,input,textarea{font-family:Arial,sans-serif!important}body{margin:0}main{padding-top:32px;padding-bottom:32px}.reading{max-width:42rem}.eyebrow{border-top:4px solid #0065bd;padding-top:16px;color:#5e5e5e}.actions{display:flex;flex-wrap:wrap;gap:16px}.actions .ds_button{margin:0}.preview-text{white-space:pre-wrap;overflow-wrap:anywhere;border-left:4px solid #b3b3b3;padding-left:24px}[hidden]{display:none!important}</style><main class="ds_wrapper"><div class="reading"><p class="ds_small eyebrow">Independent specimen · Workshop access note</p><section id="entry"><h1>Tell us what would help</h1><p>Practice a short access note for a community workshop. This page does not save or send your text.</p><div id="error" class="ds_error-summary" tabindex="-1" hidden><h2 class="ds_error-summary__title">There is a problem</h2><p><a href="#access-note" id="error-link"></a></p></div><form id="form" novalidate><div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div><p class="ds_small">Use up to 200 characters. The count appears after 160.</p><div class="actions"><button class="ds_button" type="submit">Preview note</button><button class="ds_button ds_button--secondary" id="sample" type="button">Try a long example</button><button class="ds_button ds_button--secondary" id="reset" type="button">Reset</button></div></form></section><section id="preview" hidden><h1 tabindex="-1">Your note preview</h1><p id="result" class="preview-text"></p><p>No note has been sent. You can return to edit it.</p><button id="edit" class="ds_button ds_button--secondary">Edit note</button></section></div></main><script type="module">import DS from './vendor/scot-4.3.0/dist/scripts/design-system.js';const field=document.querySelector('[data-module="ds-character-count"]');new DS.components.CharacterCount(field).init();const input=document.querySelector('#access-note'),entry=document.querySelector('#entry'),preview=document.querySelector('#preview'),error=document.querySelector('#error');function setValue(value){input.value=value;input.dispatchEvent(new Event('input',{bubbles:true}));input.focus()}document.querySelector('#sample').onclick=()=>setValue('A clear route from the entrance to the workshop room would help me take part. Please describe where the quiet seating area is and whether instructions will be available in writing. I would also appreciate knowing where to find the nearest accessible entrance.');document.querySelector('#reset').onclick=()=>{setValue('');error.hidden=true};document.querySelector('#form').onsubmit=e=>{e.preventDefault();let message=!input.value.trim()?'Enter a short access note.':input.value.length>200?'Shorten your note to 200 characters or fewer.':'';if(message){document.querySelector('#error-link').textContent=message;error.hidden=false;error.focus();return}error.hidden=true;document.querySelector('#result').textContent=input.value;entry.hidden=true;preview.hidden=false;preview.querySelector('h1').focus()};document.querySelector('#edit').onclick=()=>{entry.hidden=false;preview.hidden=true;input.focus()};window.demoReady=true;</script></html>