# Système de design Scottish Government ## Système de design Scottish Government Aperçu de l’interface Essayez une longue note, repassez sous la limite de caractères, prévisualisez-la localement, modifiez-la, puis réinitialisez-la. ## Référence de conception système de design Scottish Government Scottish Government Design System 4.3.0 publié CSS et JavaScript, avec les recommandations officielles à jour sur la typographie, les couleurs et la grille. CharacterCount natif et styles appliqués dans l’aperçu. Arial est explicitement utilisé comme police de secours dans cet exemple indépendant ; les directions du Scottish Government doivent utiliser Roboto. Les ressources du package actuel diffèrent des exemples d’installation plus anciens. ### Typographie adaptative | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Body | 16/24px small →19/32px large | Normal 400 ; les styles grands formats natifs commencent à 48rem. | | H1 | 30/40px →44/56px | Gras 700. | | H2 / H3 | 22/32 →30/40px;19/24 →22/32px | Utilisez les niveaux de titre sémantiques ; ds_h3 peut modifier l’apparence sans changer le niveau. | | H4 / H5 | 16/24 →19/32px;14/24 →16/24px | Gras 700. | | Lead | 19/32px →24/40px | Léger 300 ; un seul texte d’introduction concis par page. | | Font | Roboto | Obligatoire pour les directions et les domaines d’action du Scottish Government ; la démo indépendante utilise explicitement Arial. | ### Rôles de couleur Sass | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | $ds_colour__brand / __link | #0065bd | Bleu principal ; survol des liens #00437e. | | $ds_colour__text | #1a1a1a | Texte secondaire #5e5e5e. | | $ds_colour__focus / --background | #1a1a1a / #fdd522 | Conservez ces rôles de mise en évidence, même dans un thème de marque adapté. | | $ds_colour__state--negative | #d32205 | Messages d’erreur et de dépassement de limite. | | $ds_colour__state--positive | #1a7032 | Message positif ; ne signifie pas que le texte a été envoyé. | | $ds_colour__border | #b3b3b3 | Alternatives : noir soutenu #1a1a1a et gris très clair #ebebeb. | ### Utilitaires d’espacement adaptatif | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | ds_!_margin-bottom--1 / --2 / --3 | 8 /16 /24px | Inchangé à partir de 48rem. | | ds_!_margin-bottom--4 | 24px →32px | Petit → grand à 48rem. | | ds_!_margin-bottom--5 / --6 | 32→40px /40→48px | Valeur adaptative plutôt qu’espacement fixe unique. | | ds_!_margin-bottom--7 / --8 / --9 | 40→56px /48→64px /56→72px | À utiliser pour créer une séparation plus importante ; évitez d’appliquer le plus grand espacement partout. | ### Grille et largeurs intérieures utiles | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Viewport thresholds | 480,768,992,1200px | Le nombre de colonnes passe de 2 à 6, puis à 12 et reste à 12. | | Content width at medium/large/xl | 736 /928 /1120px | Largeur intérieure de grille publiée ; différente de la largeur de la boîte du conteneur. | | Native ds_wrapper box | 768 /960 /1152px | Comprend un espacement intérieur de 16px de chaque côté dans la version CSS. | | Gutter / side padding | 32px /16px | En dessous de 768px, le conteneur s’adapte à la largeur disponible. | | Reading width in specimen | 42rem maximum | Choix de l’application dans le conteneur natif, et non jeton universel officiel. | ### Contrat de CharacterCount | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Root | data-module="ds-character-count" | Contient un champ input ou une zone de texte native. | | Limit | maxlength="200" | Utilisé puis supprimé lors de l’initialisation ; le texte dépassant la limite reste modifiable. | | Alternative | data-maxlength on root | Aucune limite maxlength native de secours si JavaScript n’est pas disponible. | | Threshold | data-threshold="80" | Arrondit la limite × .8 ; pour une limite de 200, le message apparaît à 160 caractères. | | Error state | ds_input--error;aria-invalid="true" | Appliqué lorsque le décompte est négatif ; associé à un décompte visible des caractères en trop. | | Announcements | Separate hidden message;1000ms delay | aria-describedby conserve l’indication existante et ajoute les ID des messages générés. | | Counting unit | JavaScript value.length | Unités de code UTF-16 ; ne promettez pas un décompte des émojis tenant compte des graphèmes. | ## Guide complet système de design Scottish Government Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## 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. ```

Describe an access need for this practice workshop. Do not include medical or contact details.

``` 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 ### Une limite de caractères non destructive Un libellé, une indication, un textarea et un seuil de 80 %. ```

Describe an access need for this practice workshop. Do not include medical or contact details.

``` Référence du code ### Ressources compilées actuelles de la version 4.3.0 Chemin CSS vérifié pour la version et initialisation du module ES. ``` npm install --save-exact @scottish-government/design-system@4.3.0 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/ ``` Référence du code ### Exemple autonome complet 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. ``` Scottish design system character count specimen

Independent specimen · Workshop access note

Tell us what would help

Practice a short access note for a community workshop. This page does not save or send your text.

Describe an access need for this practice workshop. Do not include medical or contact details.

Use up to 200 characters. The count appears after 160.

``` Référence du code - 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. ## Système de design Scottish Government Configuration de l’agent ### Point de départ de l’implémentation La démo locale utilise le véritable composant 4.3.0 CSS et le module CharacterCount. La police de remplacement est indiquée explicitement ; l’ancien chemin dist/styles de la page d’installation n’est pas utilisé. Le fichier ZIP contenant l’exemple complet fonctionnel, disponible dans les sources, fournit également les dépendances exactes de l’aperçu et le document complet. Extrayez-le, exécutez python3 -m http.server 8080 dans ce répertoire, puis ouvrez http://localhost:8080/scottish-government.html. N’ouvrez pas les exemples qui utilisent des modules via file://. ``` npm install --save-exact @scottish-government/design-system@4.3.0 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/ ``` ### Un prompt pour votre projet ``` Utilisez le véritable composant CharacterCount 4.3.0 du Scottish Government Design System dans un formulaire indépendant de note d’accessibilité. Épinglez les chemins vérifiés dist/css/design-system.min.css et dist/scripts/design-system.js pour le module ES. Fournissez un textarea de 200 caractères avec un seuil de 80 %, une indication associée et une initialisation ciblée du composant. Conservez le texte collé même s’il dépasse la limite, laissez la bibliothèque gérer le compteur natif et les mises à jour ARIA, et ajoutez une validation locale distincte ainsi qu’un aperçu sécurisé en texte brut avec des actions de modification et de réinitialisation. Les actions programmatiques d’exemple et de réinitialisation doivent déclencher des événements input. Utilisez les styles de typographie adaptative et d’espacement publiés, indiquez explicitement le choix de police et n’ajoutez ni identité officielle ni faux envoi. ``` ## Système de design Scottish Government Sources et périmètre Référence pour une implémentation indépendante. Les directions du Scottish Government doivent utiliser Roboto ; cet exemple sans marque indique explicitement Arial comme police de remplacement. Texte original ; aucune sauvegarde ni aucun envoi, et aucune affiliation officielle. La licence du code et les autorisations relatives aux ressources graphiques du gouvernement sont distinctes. - Type Règles de typographie et d’adoption des polices. - Couleurs Rôles de la palette Sass et limites des thèmes. - Grille Largeur de la grille intérieure, colonnes et gouttières. - Comptage Limites non destructives et fonctionnement du seuil. - JavaScript API d’initialisation et amélioration progressive. - Installation Installation du package ; comparer avec les chemins actuellement publiés. - Focus Indications sur le focus visible au clavier. - Question Structure de regroupement des questions. - Erreur Instructions pour la récupération et le résumé des erreurs. - Télécharger l’exemple complet fonctionnel Archive ZIP comprenant le HTML complet, les dépendances locales CSS/JavaScript, les licences fournies et les instructions de lancement exactes. Aucune étape de build n’est nécessaire. ## Système de design Scottish Government Ressources associées ### Singapore Government système de design Utilisez les SGDS Web Components actuels avec de véritables tokens adaptatifs, des thèmes jour et nuit et des quantités natives bornées qui maintiennent la synchronisation d’un plan local. ### Decanter Composez des pages éditoriales universitaires avec le preset Tailwind de Decanter, une échelle typographique adaptative et des marges fluides. Découvrez des cartes d’événements originales avec des filtres de sujet fonctionnels et des résumés dépliables. ### Suomi.fi système de design Créez des formulaires de service public finlandais faciles à lire avec Source Sans 3, des tokens d’espacement explicites et un modèle de sélection de document permettant de corriger les choix. - [Référence de mise en œuvre](https://designsystem.gov.scot/components/character-count) - [Source](https://designsystem.gov.scot/styles/typography) - [Source](https://designsystem.gov.scot/styles/colour) - [Source](https://cdn.jsdelivr.net/npm/@scottish-government/design-system@4.3.0/dist/css/design-system.min.css) - [Source](https://designsystem.gov.scot/styles/column-grid) - [Source](https://cdn.jsdelivr.net/npm/@scottish-government/design-system@4.3.0/src/components/character-count/character-count.ts) - [Consultez la spécification associée](https://designsystem.gov.scot/components/character-count) - [Consultez la spécification associée](https://designsystem.gov.scot/styles/typography) - [Consultez la spécification associée](https://designsystem.gov.scot/styles/colour) - [Consultez la spécification associée](https://designsystem.gov.scot/styles/column-grid) - [Référence du code](https://designsystem.gov.scot/components/character-count) - [Consultez la spécification associée](https://cdn.jsdelivr.net/npm/@scottish-government/design-system@4.3.0/src/components/character-count/character-count.ts) - [Consultez la spécification associée](https://designsystem.gov.scot/get-started/javascript) - [Consultez la spécification associée](https://designsystem.gov.scot/components/error-summary) - [Référence du code](https://designsystem.gov.scot/get-started/javascript) - [Type Règles de typographie et d’adoption des polices.](https://designsystem.gov.scot/styles/typography) - [Couleurs Rôles de la palette Sass et limites des thèmes.](https://designsystem.gov.scot/styles/colour) - [Grille Largeur de la grille intérieure, colonnes et gouttières.](https://designsystem.gov.scot/styles/column-grid) - [Comptage Limites non destructives et fonctionnement du seuil.](https://designsystem.gov.scot/components/character-count) - [JavaScript API d’initialisation et amélioration progressive.](https://designsystem.gov.scot/get-started/javascript) - [Installation Installation du package ; comparer avec les chemins actuellement publiés.](https://designsystem.gov.scot/get-started/installation) - [Focus Indications sur le focus visible au clavier.](https://designsystem.gov.scot/styles/focus-states) - [Question Structure de regroupement des questions.](https://designsystem.gov.scot/components/question) - [Erreur Instructions pour la récupération et le résumé des erreurs.](https://designsystem.gov.scot/components/error-summary)