Applica la tipografia responsive, le spaziature e i ruoli cromatici del governo scozzese a un campo nativo con conteggio dei caratteri, che conserva il testo oltre il limite e consente di correggerlo.
Native Scottish Government Design System 4.3.0 CharacterCount/CSS; contenuto originale per il workshop e convalida locale; Arial come fallback. · Riferimento per l’implementazione
02
Riferimento di design sistema di design Scottish Government
Scottish Government Design System 4.3.0: CSS e JavaScript pubblicati, con le indicazioni ufficiali più recenti su tipografia, colori e griglia. Nell'anteprima vengono eseguiti CharacterCount nativo e stili. Arial è un fallback esplicito per l'esempio indipendente; le direzioni del governo scozzese devono usare Roboto. Le risorse del pacchetto corrente differiscono dagli esempi di installazione meno recenti.
Sistema di design Scottish Government Un pratico riferimento per l'inserimento del testo
Permetti di recuperare il lavoro svolto
L'interazione fondamentale è una guida non distruttiva alla lunghezza. L'utente può incollare una nota lunga sulle esigenze di accessibilità, vedere quanto deve modificare e conservare tutto il testo mentre lo riduce. Il contatore nativo mostra i caratteri rimanenti, lo stile per il superamento del limite e il messaggio ritardato per le tecnologie assistive. L'applicazione decide separatamente se la nota è abbastanza valida da visualizzare in anteprima.
Questo esempio di nota per un workshop è originale e non rappresenta un servizio del governo scozzese né una richiesta di informazioni mediche. Non contiene elementi grafici identificativi, archiviazione o invio. Il suggerimento del campo chiede di indicare un'esigenza pratica di accessibilità e sconsiglia di fornire dettagli privati, così che il compito sia comprensibile senza riprendere una transazione ufficiale.
Sistema di design Scottish Government Roboto e gerarchia adattiva
Rispetta le metriche pubblicate
Il sistema richiede Roboto per le direzioni e le aree di policy del governo scozzese. Le altre organizzazioni che adottano il sistema possono scegliere un font leggibile diverso, mantenendo le regole per dimensioni e interlinea e verificando il risultato. L'esempio autonomo indica esplicitamente Arial come fallback; non afferma che un font web mancante sia Roboto.
Il testo del corpo passa da 16/24px a 19/32px e il titolo principale da 30/40px a 44/56px. Entrambe le modifiche avvengono nel foglio di stile nativo per schermi più grandi. La classe ds_h 3 modifica la dimensione visiva senza richiedere un titolo semantico di terzo livello. La distinzione è importante quando un modulo breve richiede un titolo di sezione più piccolo, ma non un'interruzione artificiale della struttura del documento.
Sistema di design Scottish Government Uno stato attivo distintivo
Distingui stato attivo, errore e completamento
Il blu svolge il ruolo principale del brand e dei collegamenti, il nero quello del testo e il giallo quello dello stato attivo. Sono impostazioni Sass denominate, non una raccolta inventata di proprietà personalizzate CSS. L'adattamento del brand avviene prima di caricare il sistema, tramite il relativo modulo di impostazioni. Le indicazioni ufficiali mantengono la palette dello stato attivo anche quando cambiano gli altri colori del brand.
Il contatore dei caratteri introduce il rosso negativo solo quando si supera la lunghezza consentita. Un secondo errore applicativo per un campo vuoto può usare lo stesso ruolo negativo, ma il messaggio deve indicare che manca una risposta, non che è stato superato il limite di caratteri. L'anteprima non usa mai il verde positivo per suggerire che un invio remoto sia riuscito.
Mantieni un contorno visibile dello stato attivo da tastiera su textarea e pulsanti di azione.
Descrivi il superamento del limite con il testo, non solo con un bordo rosso.
Collega i riepiloghi degli errori e i suggerimenti dei campi a un ID stabile del campo.
Sistema di design Scottish Government Larghezza del contenitore e spaziatura
Evita di confondere le larghezze esterna e interna
La tabella ufficiale della griglia descrive le larghezze interne dei contenuti: 736, 928 e 1120px rispettivamente per i breakpoint medio, grande ed extra-large. I corrispondenti contenitori nativi misurano 768, 960 e 1152px, perché includono 16px di padding laterale. Questa distinzione evita che chi adotta il sistema annidi le due larghezze e restringa accidentalmente il layout due volte.
L’anteprima colloca una colonna di lettura da 42rem all’interno del contenitore nativo. Questo limite massimo è una scelta applicativa adatta a un modulo breve, non una nuova impostazione del sistema. Sotto i 768px, il contenitore diventa fluido e lo stesso spazio laterale di 16px protegge l’area di testo dal bordo dello schermo.
Le utility di spaziatura sono responsive. Ad esempio, ds_!_margin-bottom--4 passa da 24 a 32px a 48rem; anche i livelli superiori aumentano. Il riferimento riporta entrambi i valori, così da non scambiare una schermata desktop per un’intercapedine fissa e universale.
Sistema di design Scottish Government Un campo con conteggio caratteri nativo
Inizia con una vera area di testo
L’elemento radice ds_question include data-module e la soglia percentuale opzionale. L’etichetta associata e il suggerimento sono normali elementi accessibili HTML. Un’area di testo con maxlength offre un utile fallback senza JavaScript. Dopo il potenziamento, il componente legge quel valore e rimuove il limite rigido, così il testo incollato non viene troncato senza avviso.
Per un campo da 200 caratteri con una soglia dell’80%, il conteggio viene mostrato a 160 caratteri. Il testo di esempio nella pagina pubblica del componente e l’esempio di codice da 250 caratteri non usano gli stessi valori: questo esempio mantiene un unico limite coerente. Senza JavaScript, il suggerimento visibile indica comunque il limite e si applica maxlength nativo.
html
<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>
Sistema di design Scottish Government Di cosa si occupa il componente nativo
Messaggi, tempistiche e conteggio
L’implementazione con versione specifica crea un messaggio visibile con aria-hidden e un messaggio separato, nascosto, per le tecnologie assistive. Aggiunge gli ID pertinenti all’aria-describedby esistente invece di eliminare il suggerimento scritto. Attende 1000ms prima di aggiornare l’annuncio nascosto, così il feedback durante la digitazione può concludersi per primo.
La lunghezza effettiva deriva da JavaScript string.value.length: conta le unità di codice UTF-16. Un simbolo al di fuori del piano multilingue di base può occupare due unità e un’emoji composta può occuparne di più. Se un servizio ha bisogno di una diversa regola di conteggio, deve allineare il contatore e la convalida lato server, anziché attribuire a questo componente un conteggio basato sui caratteri percepiti dalle persone.
Il componente ascolta gli eventi input. Se un’applicazione compila un esempio o svuota il campo tramite codice, deve inviare anche un evento input. Le azioni di esempio e di ripristino della demo lo fanno. Un commento nel codice sorgente menziona il polling del riconoscimento vocale, ma l’implementazione esaminata non imposta un intervallo di polling; per questo la guida non dichiara che tale comportamento sia supportato.
Sistema di design Scottish Government Usa i percorsi della versione corrente
Caricamento del modulo e inizializzazione circoscritta
Il pacchetto corrente è @scottish-government/design-system. La versione 4.3.0 colloca il foglio di stile compilato in dist/css/design-system.min.css, mentre un paragrafo di installazione più datato fa ancora riferimento a dist/styles/main.css. Questa procedura usa l’asset effettivamente pubblicato. Lo script esporta un modulo ES, quindi va importato con type="module" anziché con un normale tag script classico.
Crea un’istanza di CharacterCount per questo campo e chiama init. DS.initAll è disponibile anche per le pagine con più componenti, ma questo esempio inizializza solo il contatore necessario. Non è configurato alcun servizio di analisi aggiuntivo. La convalida lato server resta separata dalla libreria: un contatore aiuta a modificare il testo, ma non è un meccanismo di controllo.
Installa il pacchetto fissato alla versione 4.3.0 e copia il CSS compilato e il modulo in una directory locale per gli asset.
Inserisci nella pagina la struttura completa di etichetta, suggerimento e area di testo prima di importare il modulo.
Inizializza il contatore una sola volta, quindi collega le azioni di anteprima e ripristino dell’applicazione usando normali eventi input.
Sistema di design Scottish Government Verifica il recupero dopo il superamento del limite
Non verificare solo un campo vuoto
Parti da un valore inferiore alla soglia, supera i 160 caratteri e poi incollane più di 200. Il testo completo deve restare nell’area di testo, mentre appare un messaggio di superamento del limite e aria-invalid diventa true. Riduci il testo sotto il limite e verifica che sia la classe di errore sia lo stato di non validità vengano rimossi.
L’azione Anteprima dell’applicazione blocca le note vuote o oltre il limite mostrando un errore collegato. Una nota valida appare in un’anteprima locale tramite textContent, perciò il markup digitato viene visualizzato come testo e non interpretato. Modifica nota riporta alla stessa area di testo, mantenendo il valore. Ripristina la svuota tramite un evento input, così anche il conteggio nativo viene azzerato.
A 390px, controlla l’andata a capo del titolo, l’area di testo a larghezza piena, il comportamento dei pulsanti quando vanno a capo e il riepilogo degli errori. Alle larghezze maggiori, la colonna di lettura non dovrebbe trasformarsi in un paragrafo troppo ampio. Questi controlli verificano questo esempio; un servizio reale richiede comunque ricerca con gli utenti, prove dei font e una revisione con tecnologie assistive nel contesto definitivo.
Sistema di design Scottish Government Esempi di componenti del sistema di design
Un limite di caratteri non distruttivo
Un’etichetta, un suggerimento, un’area di testo e una soglia dell’80% con potenziamento progressivo.
html
<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>
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>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>
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 Scottish Government Configurazione dell’agente
Punto di partenza per l’implementazione
La demo locale esegue il modulo CSS 4.3.0 e CharacterCount effettivi. Il fallback dei font è esplicito; non viene utilizzato il percorso dist/styles meno recente della pagina di installazione. Lo ZIP completo con l’esempio funzionante, disponibile in Sources, include anche le dipendenze esatte per l’anteprima e il documento completo. Estrailo, esegui python3 -m http.server 8080 in quella directory, quindi apri http://localhost:8080/scottish-government.html. Non aprire gli esempi basati su moduli tramite file://.
bash / html
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>
Un prompt per il tuo progetto
Prompt per l’agente
Usa il componente CharacterCount del Scottish Government Design System 4.3.0 in un modulo autonomo per una nota sulle esigenze di accessibilità. Fissa i percorsi verificati dist/css/design-system.min.css e dist/scripts/design-system.js per il modulo ES. Fornisci un’area di testo da 200 caratteri con soglia dell’80%, suggerimento associato e inizializzazione circoscritta del componente. Conserva il testo incollato che supera il limite, lascia alla libreria gli aggiornamenti del conteggio nativo e di ARIA e aggiungi una convalida locale separata, oltre a un’anteprima, una modifica e un ripristino sicuri che mostrino solo testo. Le operazioni di esempio e ripristino eseguite tramite codice devono generare eventi input. Usa tipografia e spaziatura responsive pubblicate, specifica esplicitamente la scelta del font e non simulare identità ufficiali o invii.
05
Sistema di design Scottish Government Fonti e ambito
Riferimento per un’implementazione autonoma. Le direzioni del governo scozzese devono usare Roboto; questo esempio senza marchio specifica Arial come fallback. Testi originali; nessuna memorizzazione, trasmissione o affiliazione ufficiale. La licenza del codice e i permessi per gli asset grafici governativi sono aspetti distinti.
