Administración pública y servicios públicos · Nuevo recurso
Sistema de diseño Scottish Government.
Aplica los roles tipográficos adaptables, de espaciado y de color del Gobierno escocés mediante un campo nativo con contador de caracteres que conserva el texto que supera el límite y permite corregirlo.
CharacterCount/CSS nativo de Scottish Government Design System 4.3.0; contenido original del taller y validación local; alternativa Arial. · Referencia de implementación
02
Referencia de diseño sistema de diseño Scottish Government
Scottish Government Design System 4.3.0 publicado CSS y JavaScript, con las directrices oficiales actuales de tipografía, color y cuadrícula. CharacterCount nativo y sus estilos funcionan en la vista previa. Arial es una alternativa explícita para este ejemplo independiente; las direcciones del Scottish Government deben usar Roboto. Los recursos del paquete actual son distintos de los ejemplos de instalación antiguos.
Sistema de diseño Scottish Government Una referencia práctica para introducir texto
Permite recuperar el trabajo de una persona
La interacción clave aquí es orientar sobre la longitud sin modificar el texto. El usuario puede pegar una nota de acceso larga, ver cuánto necesita editar y conservar todo el texto mientras la acorta. El contador nativo de caracteres gestiona el recuento visible restante, el estilo de exceso del límite y el mensaje diferido para tecnologías de asistencia. La aplicación decide por separado si la nota es lo bastante válida como para mostrar una vista previa.
Este es un ejemplo original de una nota para un taller, no un servicio de Scottish Government ni una solicitud de información médica. No incluye gráficos de identidad, almacenamiento ni envío. La indicación del campo pide describir una necesidad práctica de acceso y desaconseja incluir datos privados, para que la tarea se entienda sin tomar como referencia una transacción oficial.
Sistema de diseño Scottish Government Roboto y jerarquía adaptable
Conserva las métricas publicadas
El sistema exige Roboto para los directorios y las áreas de políticas de Scottish Government. Otras organizaciones que lo adopten pueden usar otra tipografía legible, siempre que conserven las reglas de tamaño e interlineado y prueben el resultado. El ejemplo independiente especifica claramente Arial como alternativa; no afirma que una fuente web que no se haya cargado sea Roboto.
El texto del cuerpo pasa de 16/24px a 19/32px, y el título principal, de 30/40px a 44/56px. Ambos cambios se realizan en la hoja de estilos nativa para pantallas más grandes. Una clase ds_h 3 cambia el tamaño visual sin requerir un encabezado semántico de tercer nivel. Esa distinción importa cuando un formulario breve necesita un título de sección más pequeño, pero no una interrupción artificial en la estructura del documento.
Sistema de diseño Scottish Government Un tratamiento de foco distintivo
Diferencia el foco, los errores y la finalización
El azul cumple la función principal de color de marca y de enlace, el negro se usa para el texto y el amarillo destaca el foco. Son ajustes con nombre en Sass, no una colección inventada de CSS propiedades personalizadas. La adaptación de marca se realiza antes de cargar el sistema, mediante su módulo de configuración. La guía oficial conserva la paleta de foco aunque cambien otros colores de marca.
El contador de caracteres introduce el rojo negativo solo cuando se supera la longitud permitida. Un segundo error de campo, gestionado por la aplicación, puede usar el mismo rol negativo, pero el mensaje debe indicar que falta una respuesta, no que hay un problema con el recuento de caracteres. La vista previa nunca usa el verde positivo para insinuar que se ha enviado algo a un servicio remoto correctamente.
Mantén un contorno visible de foco de teclado en el área de texto y los botones de acción.
Describe el exceso de longitud con texto, no solo con un borde rojo.
Vincula los resúmenes de errores y las indicaciones de los campos a un ID de campo estable.
Sistema de diseño Scottish Government Ancho del contenedor y espaciado
Evita confundir los anchos exteriores e interiores
La tabla de cuadrícula oficial especifica anchos de contenido interior de 736, 928 y 1120px en los puntos de interrupción mediano, grande y extragrande. Las cajas contenedoras nativas correspondientes miden 768, 960 y 1152px porque cada una incluye 16px de relleno lateral. Esta distinción evita que quien adopte el sistema anide ambos anchos y estreche el diseño dos veces por accidente.
La vista previa coloca una columna de lectura de 42rem dentro del contenedor nativo. Ese ancho máximo es una decisión de la aplicación adecuada para un formulario breve, no un nuevo ajuste del sistema. Por debajo de 768px, el contenedor se adapta al ancho disponible y el mismo espaciado lateral de 16px mantiene el área de texto separada del borde de la pantalla.
Las utilidades de espaciado son adaptables. Por ejemplo, ds_!_margin-bottom--4 pasa de 24 a 32px en 48rem; los niveles superiores también aumentan. La referencia proporciona ambos valores para evitar que se confunda una captura de pantalla de escritorio con un espacio fijo y universal.
Sistema de diseño Scottish Government Un campo nativo de recuento de caracteres
Empieza con un área de texto real
El elemento raíz ds_question incluye data-module y un umbral porcentual opcional. La etiqueta asociada y la indicación son elementos accesibles HTML estándar. Un área de texto con maxlength ofrece una alternativa útil sin JavaScript. Tras la mejora progresiva, el componente lee ese valor y elimina el límite estricto para que el texto pegado no se trunque sin avisar.
En un campo de 200 caracteres con un umbral del 80%, el recuento se muestra al llegar a 160 caracteres. El texto de ejemplo de la página pública del componente y el ejemplo de código de 250 caracteres no usan los mismos valores, así que este caso mantiene un único límite coherente. Sin JavaScript, la indicación visible sigue señalando el límite y se aplica maxlength de forma nativa.
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 de diseño Scottish Government Qué gestiona el componente nativo
Mensajes, tiempos y recuento
La implementación versionada crea un mensaje visible con aria-hidden y otro mensaje oculto, separado, para las tecnologías de asistencia. Añade los ID pertinentes al aria-describedby existente en lugar de descartar la indicación redactada. Espera 1000ms antes de actualizar el anuncio oculto, para que la respuesta durante la escritura termine primero.
La longitud real se obtiene de JavaScript string.value.length: cuenta unidades de código UTF-16. Un símbolo fuera del plano multilingüe básico puede ocupar dos unidades y un emoji combinado, más. Si un servicio necesita otra política de recuento de caracteres, debe hacer coincidir su contador con la validación del servidor, en lugar de prometer que este componente cuenta caracteres según la percepción humana.
El componente escucha los eventos input. Si una aplicación rellena un ejemplo o borra el campo mediante programación, también debe enviar un evento input. Las acciones de ejemplo y restablecimiento de la demostración lo hacen. Un comentario del código fuente menciona el sondeo del reconocimiento de voz, pero la implementación inspeccionada no instala un intervalo de sondeo; por eso, esta guía no afirma que esa función exista.
Sistema de diseño Scottish Government Usa las rutas de la versión actual
Carga del módulo e inicialización con alcance definido
El paquete actual es @scottish-government/design-system. La versión 4.3.0 coloca la hoja de estilos compilada en dist/css/design-system.min.css, mientras que un párrafo de instalación anterior todavía hace referencia a dist/styles/main.css. Esta receta utiliza el recurso publicado real. Su script incluye una exportación de módulo ES, así que debe importarse con type="module" en lugar de usar una etiqueta script clásica normal.
Crea una instancia de CharacterCount para este campo y llama a init. También está disponible DS.initAll para páginas con varios componentes, pero este ejemplo solo inicializa el contador que necesita. No se configura ningún servicio de analítica adicional. La validación del servidor es independiente de la biblioteca: un contador es una ayuda para editar, no un mecanismo para hacer cumplir límites.
Instala el paquete fijado en la versión 4.3.0 y copia CSS compilado y el módulo en un directorio de recursos local.
Incluye en la página toda la estructura de etiqueta, texto de ayuda y área de texto antes de importar el módulo.
Inicializa el contador una sola vez y, después, conecta las acciones de vista previa y restablecimiento de la aplicación mediante los eventos input habituales.
Sistema de diseño Scottish Government Prueba la recuperación tras superar el límite
No pruebes únicamente con un campo vacío
Empieza por debajo del umbral, supera los 160 caracteres y pega más de 200. El valor completo debe permanecer en el área de texto mientras aparece un mensaje que indica que se ha superado el límite y aria-invalid pasa a true. Reduce el valor por debajo del límite y confirma que se eliminan tanto la clase de error como el estado de invalidez.
La acción Vista previa de la aplicación bloquea las notas vacías o que superan el límite y muestra un error asociado. Una nota válida aparece en una vista previa local mediante textContent, de modo que el marcado introducido se muestra como texto y no se interpreta. Volver a editar la nota lleva al mismo campo de texto, con el valor intacto. Restablecer la borra mediante un evento input para que también se reinicie el recuento nativo.
A 390px, comprueba el ajuste de línea del título, el área de texto a ancho completo, el salto de línea de los botones y el resumen de errores. En pantallas más grandes, la columna de lectura no debería convertirse en un párrafo demasiado ancho. Estas comprobaciones validan este ejemplo; un servicio real aún requiere investigación con usuarios, pruebas tipográficas y revisión con tecnologías de asistencia en su contexto final.
Sistema de diseño Scottish Government Ejemplos de componentes del sistema de diseño
Un límite de caracteres no destructivo
Una etiqueta, texto de ayuda, área de texto y umbral del 80 % con mejora progresiva.
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>
El documento completo incluye su estructura, controles e inicialización. Extrae el archivo de ejemplo enlazado para obtener los recursos del proveedor con sus rutas relativas exactas y luego sírvelo mediante 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>
Descarga el ejemplo completo desde Fuentes. El README contiene el comando exacto para ejecutarlo en local.
Mantén las rutas de los recursos del proveedor relativas a este documento; el archivo incluye todos los recursos que utiliza esta vista previa.
04
Sistema de diseño Scottish Government Configuración del agente
Punto de partida para la implementación
La demostración local ejecuta la versión 4.3.0 real de CSS y el módulo CharacterCount. Se especifica explícitamente una fuente alternativa; no se usa la ruta dist/styles antigua de la página de instalación. El ZIP del ejemplo funcional completo, disponible en Fuentes, también incluye las dependencias exactas de la vista previa y el documento completo. Descomprímelo, ejecuta python3 -m http.server 8080 en ese directorio y abre http://localhost:8080/scottish-government.html. No abras ejemplos basados en módulos mediante 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>
Una instrucción para tu proyecto
Instrucción para el agente
Usa el componente CharacterCount real del sistema de diseño del Gobierno de Escocia, versión 4.3.0, en un formulario independiente para notas de accesibilidad. Fija las rutas verificadas dist/css/design-system.min.css y dist/scripts/design-system.js del módulo ES. Proporciona un área de texto de 200 caracteres con un umbral del 80 %, texto de ayuda asociado e inicialización del componente limitada a su ámbito. Conserva el texto pegado que supere el límite y deja que la biblioteca gestione el recuento nativo y las actualizaciones de ARIA; añade una validación local aparte y una vista previa, edición y restablecimiento seguros que solo muestren texto. Las acciones programáticas de muestra y restablecimiento deben emitir eventos input. Usa la tipografía adaptable y el espaciado publicados, especifica una decisión explícita sobre las fuentes y no incluyas la identidad oficial ni una falsa función de envío.
05
Sistema de diseño Scottish Government Fuentes y alcance
Referencia para una implementación independiente. Las direcciones del Gobierno de Escocia deben usar Roboto; este ejemplo sin marca especifica Arial como fuente alternativa. Texto original; no guarda ni envía información y no tiene afiliación oficial. La licencia del código y los permisos de los recursos gráficos del Gobierno son cuestiones distintas.
