# Sistema de diseño W3C ## Vista previa de la interfaz sistema de diseño W3C Abre las sesiones individualmente o todas a la vez; el contenido sigue siendo legible cuando JavaScript está desactivado. ## Referencia de diseño sistema de diseño W3C Documentación oficial de W3C e instantánea pública del CDN descargada el 3 de octubre de 2026; se inspeccionaron CSS real y el script nativo. ### Tipografía fluida | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Web font / fallback | Noto Sans / Trebuchet MS, Geneva, sans-serif | El CSS nativo aplica Noto Sans cuando se cargan las fuentes; la demostración conserva la fuente alternativa del sistema. | | Fluid range | 320–1120px viewport | Los valores de clamp se mantienen constantes fuera de este intervalo; no hay saltos tipográficos bruscos. | | --w3c-text-0 | clamp(.9375rem, .9125rem + .125vw, 1rem) | Cuerpo: de 15px a 16px con el tamaño normal de la raíz. | | --w3c-text-5 | clamp(1.6894rem, 1.6444rem + .2253vw, 1.802rem) | Escala H1; aproximadamente de 27 a 28.8px. | | --w3c-text-7 | clamp(2.1382rem, 2.0811rem + .2851vw, 2.2807rem) | La escala más grande de text-xl, no el H1 predeterminado. | | Body line height | 1.5 | En relación con el tamaño de fuente fluido. | | Collapsible H3 | --w3c-text-1 / line-height 1.5 | Sobreescritura del componente: aproximadamente de 16.9 a 18px. | ### Colores semánticos | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Text | #111111 | casi negro; texto normal de lectura. | | Link | #005a9c | Azul W3C; distinto de los estados al pasar el cursor y visitado. | | Hover / visited | #002a56 / #75336c | Conserva la distinción entre estados. | | Focus | #f9dc4a | Tratamiento amarillo para el foco con un límite visible. | | Input border | #545454 | Función de contraste distinta a la de los separadores decorativos. | | Success / error | #046704 / #a82615 | Significado de estado, no acentos aleatorios. | | Warning | #c28605 | Función del borde para notas de advertencia. | ### Diseño y espaciado | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | l-center | max-inline-size:70rem; padding-inline:5vw | Contenedor ancho nativo; la vista previa aplica un límite más estrecho de 55rem para la aplicación. | | Reading measure | 41.25rem | Ancho máximo del contenido dentro de los cuerpos desplegables. | | Stack default | 1em between direct siblings | El mixin oficial de Sass acepta una medida explícita; no es una escala fija de 8px. | | Collapsible inset | 1.5625rem | 25px con el tamaño raíz normal. | | Collapsible separation / radius | 1rem / .375rem | Separación de 16px y esquinas de 6px. | | Collapsible shadow | -.0625rem .0625rem .25rem rgba(55,70,95,.12) | Separación sutil entre superficies; CSS nativo. | ### Contrato de mejora progresiva | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Outer hook | data-component="collapsibles" | El script localiza la raíz de cada componente. | | Heading hook | data-heading="collapsibles" | El script inserta un botón real en cada encabezado. | | Collapsed state | aria-expanded=false; next sibling aria-hidden=true | CSS Avanzado requiere la marca html.js para ocultar el cuerpo. | | data-anchor="no" | Suppress automatic heading anchors for this subtree | Evita inyectar otro enlace en el encabezado desplegable. | | No JavaScript | All content remains visible | No incluyas contenido oculto en el marcado inicial sin mejora progresiva. | ## Sistema de diseño W3C Guía completa Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## Sistema de diseño W3C Mejora progresiva ### El contenido precede a los controles > W3C separa los estilos básicos de los componentes avanzados. El componente desplegable comienza con encabezados normales seguidos del contenido. Sin script, se puede leer el esquema completo de cada sesión. main.js inserta botones y cambia el estado solo después de detectar los atributos de datos documentados. Este modelo de implementación es distinto al de publicar un acordeón ya oculto cuyos controles quizá nunca lleguen a inicializarse. La vista previa usa los archivos oficiales del CDN core.css, advanced.css y main.js, guardados como una copia local fechada. La marca html.js activa los selectores avanzados. Si se omite esa marca, cambian los atributos ARIA, pero los cuerpos siguen visibles; la vista previa comprueba explícitamente tanto la visibilidad real como aria-expanded. Consulta la especificación complementaria ## Sistema de diseño W3C Tipografía fluida y carga de fuentes ### Una escala de lectura moderada El tamaño del texto del cuerpo pasa de 15px en el límite inferior de la ventana gráfica a 16px a 1120px. La escala se basa en nueve propiedades personalizadas con nombre. H1 usa --w3c-text-5, no --w3c-text-7, el valor más grande; aplicar indiscriminadamente un título de presentación de 36px a todos los documentos no respetaría la jerarquía de encabezados estándar. Noto Sans es la fuente web prevista. La pila de fuentes alternativas nativas usa Trebuchet MS y Geneva hasta que la ruta de carga de fuentes añade fonts-loaded a la raíz. Este ejemplo independiente mantiene activa la fuente alternativa y señala esa elección. El tamaño fluido y la altura de línea son nativos; la vista previa no afirma reproducir con exactitud las métricas de los glifos de Noto Sans. Consulta la especificación complementaria ## Sistema de diseño W3C Ancho de lectura y espaciado ### Combina primitivas de diseño La primitiva l-center proporciona un tamaño en línea máximo de 70rem y un relleno lateral de 5vw. La vista previa añade un límite de 55rem específico de la aplicación para mantener compactos los tres esquemas breves de aprendizaje. Ese límite no es un token nuevo de W3C. Dentro del cuerpo de cada componente desplegable, la medida de texto nativa de 41.25rem limita la longitud de las líneas. El mixin Stack documentado crea una columna y aplica margin-top a los elementos hermanos directos posteriores al primero. Su medida predeterminada es 1em y se puede pasar otra unidad al invocarlo. Considéralo una relación entre bloques, en lugar de inventar una escala global de espaciado numerada. El componente desplegable tiene valores independientes, verificados por separado: un relleno interior de 25px, una separación de 16px y un radio de 6px. Consulta la especificación complementaria ## Sistema de diseño W3C Funciones semánticas del color ### Mantén visibles el historial de enlaces y el foco El sistema distingue entre el enlace azul predeterminado, el azul oscuro al pasar el cursor y el estado visitado en morado. Estas funciones son importantes en un sitio donde las personas vuelven a documentos extensos y navegan entre referencias. Reutilizar el alias de enlace para elementos decorativos no relacionados hace que futuros cambios de tema afecten superficies que no guardan relación. El foco usa amarillo con un límite visible. La página de configuración distingue los bordes normales de la función de borde más oscuro de los campos de entrada. También asigna significados distintos a los colores de información, éxito, advertencia y error. Conserva la función y comprueba su combinación con el fondo real; una muestra de color por sí sola no demuestra que el contraste de un estado de componente sea suficiente. Consulta la especificación complementaria ## Sistema de diseño W3C Marcado y script del componente desplegable ### Encabezado, botón y cuerpo adyacente Cada elemento hijo directo contiene un encabezado seguido inmediatamente por el cuerpo de su contenido. El script usa nextElementSibling para encontrar ese cuerpo, por lo que insertar metadatos no relacionados entre ambos rompería la relación. Coloca la etiqueta de categoría dentro del intervalo del encabezado, como en el patrón documentado para listas de grupos. El script envuelve el contenido del encabezado en un botón. El código nativo alterna aria-expanded en ese botón y aria-hidden en el cuerpo. La hoja de estilos avanzada oculta el cuerpo cuando está contraído. data-anchor="no" impide que la función independiente de anclaje de encabezados introduzca enlaces no deseados en este componente. Inicializa main.js una sola vez; aplicar la mejora varias veces anidaría botones adicionales en los encabezados. ```

Inclusive forms Practical workshop

Connect each field to its label, hint and recovery message.

  • Preserve entered values
  • Test keyboard recovery
``` Referencia de código Consulta la especificación complementaria ## Sistema de diseño W3C Controles masivos y uso del teclado ### Extiende la funcionalidad mediante los botones existentes Expandir todo y Contraer todo son controles originales de ejemplo. Revisan cada botón nativo y hacen clic solo cuando es necesario cambiar su estado. Así, la transición de estado nativa y la regla visual permanecen sincronizadas. No modifican directamente un atributo ARIA mientras dejan desactualizado el otro. Los botones nativos permiten activarse con Intro y la barra espaciadora. La vista previa comprueba un botón individual, expande todo, contrae todo y vuelve a abrir una sección desde el teclado. Un mensaje de estado cortés describe la acción masiva. El componente de origen permite mantener abiertos varios esquemas a la vez; no es un acordeón que solo permite abrir una sección. 1. Abre Formularios inclusivos y consulta su lista práctica. 2. Expande todo para comparar las descripciones de las tres sesiones. 3. Contrae todo y luego pulsa Intro en un encabezado para volver a abrir solo esa sección. Consulta la especificación complementaria ## Sistema de diseño W3C Recursos e integración ### Sin instalaciones de paquetes inventadas La página oficial de inicio rápido publica direcciones CDN estables para los estilos core, advanced e print, además de main.js y scripts opcionales para funciones adicionales. El bloque de configuración usa esas rutas reales. No se necesita un proveedor de React ni un paquete npm para esta implementación de HTML. La demostración local incluye copias de los archivos descargados para que el ejemplo no dependa de una conexión activa. La integración en producción debe conservar la condición documentada CSS para las funciones avanzadas cuando sea necesario admitir el mismo conjunto de navegadores antiguos. La configuración compacta carga directamente los estilos avanzados en los navegadores modernos. Incluye la hoja de estilos para impresión en un sitio con el documento completo; la vista previa independiente se centra en el ejemplo interactivo en pantalla. - core.css: tipografía base, diseños y componentes sin mejoras. - advanced.css: reglas para los estados mejorados con JavaScript. - main.js: detecta los hooks de datos y mejora una sola vez los componentes compatibles. Consulta la especificación complementaria ## Sistema de diseño W3C Alcance y verificación ### Sistema de diseño, no certificación de conformidad Una página con estilos de W3C no cumple automáticamente con WCAG. Comprueba su contenido real, el orden del foco, el comportamiento al ampliar y los estados de recuperación. Este ejemplo verifica tres anchos de ventana y el funcionamiento básico sin scripts; no afirma tener una certificación ni haber pasado una auditoría exhaustiva con tecnologías de asistencia. Los nombres y las descripciones de los círculos de aprendizaje son contenido ficticio original. No corresponden a grupos de trabajo oficiales, calendarios ni oportunidades de inscripción. El ejemplo evita deliberadamente los logotipos de W3C y cualquier afirmación de pertenencia. La reutilización de un recurso de estilo público debe mantenerse separada de cualquier insinuación de respaldo institucional. Consulta la especificación complementaria ## Sistema de diseño W3C Ejemplos de componentes del sistema de diseño ### Esquema de sesiones con mejoras progresivas El encabezado y el texto contiguo conforman la estructura necesaria; main.js añade el control de expansión. ```

Inclusive forms Practical workshop

Connect each field to its label, hint and recovery message.

  • Preserve entered values
  • Test keyboard recovery
``` Referencia de código ### Lista de aprendizaje nativa completa Incluye el marcador de mejora en la raíz, recursos oficiales, secciones desplegables nativas y controles para todas las secciones. ``` Web learning circles

INDEPENDENT LEARNING PROGRAMME

Web learning circles

Explore three small-group sessions for people building a more usable web.

Choose a session to read its outline.

Inclusive forms Practical workshop

Trace a form from its label to its hint, error message and recovery action. Compare the experience with a keyboard and with enlarged text.

  • Associate labels and help text
  • Keep entered values after an error
  • Move focus only when it helps recovery

Resilient reading Discussion circle

Examine document structure before adding interaction. The content in this example remains visible when JavaScript is unavailable.

Bring a short article and identify its heading hierarchy, reading measure and meaningful links.

International text Peer review

Review language declarations, long translated labels and mixed-direction text. A font choice alone cannot guarantee a usable multilingual interface.

All sessions are fictional examples, with no membership or registration service.

``` Referencia de código ## Sistema de diseño W3C Configuración del agente ### Punto de partida para la implementación Rutas CDN oficiales reales. La vista previa local incluye estos recursos y conserva la fuente de sistema nativa como alternativa. El ZIP del ejemplo completo de Sources 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/w3c.html. No abras ejemplos basados en módulos mediante file://. ``` ``` ### Una instrucción para tu proyecto ``` Usa los estilos core y advanced de W3C junto con main.js y el marcador de mejora html.js. Crea encabezados semánticos con contenido desplegable contiguo mediante los hooks de datos reales. Conserva una versión legible sin JavaScript, la tipografía fluida nativa y los colores semánticos para enlaces y foco. No inicialices dos veces ni deduzcas el cumplimiento de WCAG únicamente a partir de los estilos. ``` ## Sistema de diseño W3C Fuentes y alcance Ejemplo independiente de OpenDesign que usa recursos públicos oficiales. No implica afiliación con W3C ni certificación de accesibilidad. - Primeros pasos Recursos oficiales de CDN e instrucciones de carga. - Contenedores desplegables Estructura nativa, hooks y comportamiento progresivo. - Tipografía Noto Sans y escala fluida. - Configuración Funciones de color y comportamiento de carga de fuentes. - Espaciado vertical Mixin de apilamiento y medidas explícitas. - Descargar el ejemplo funcional completo Archivo ZIP con HTML completo, dependencias locales CSS/JavaScript, licencias incluidas e instrucciones exactas para ejecutarlo. No se requiere un paso de compilación. ## Sistema de diseño W3C Recursos relacionados ### Codex Usa la estructura real de SearchInput de Codex, su jerarquía de acciones y sus tokens orientados a la lectura. Busca en un índice local de artículos, consulta un resultado y vuelve a la misma posición de lectura. ### Agriculture sistema de diseño Crea transacciones de servicio más largas con el espaciado concreto de AgDS, sus propiedades adaptables y su modelo de estado de TaskList. Prueba un flujo de preparación en el que el paso de revisión se habilita solo cuando se completan los requisitos previos. ### Alberta sistema de diseño Usa los componentes web nativos y los tokens de diseño publicados de Alberta para crear una lista de preparación completa, con opciones accesibles, progreso calculado y comentarios de revisión transparentes. - [Referencia de implementación](https://design-system.w3.org/components/collapsible-containers.html) - [Fuente](https://design-system.w3.org/styles/typography.html) - [Fuente](https://design-system.w3.org/settings/) - [Fuente](https://www.w3.org/assets/website-2021/styles/core.css) - [Fuente](https://design-system.w3.org/components/collapsible-containers.html) - [Consulta la especificación complementaria](https://design-system.w3.org/) - [Consulta la especificación complementaria](https://design-system.w3.org/styles/typography.html) - [Consulta la especificación complementaria](https://design-system.w3.org/styles/vertical-spacing.html) - [Consulta la especificación complementaria](https://design-system.w3.org/settings/) - [Referencia de código](https://design-system.w3.org/components/collapsible-containers.html) - [Consulta la especificación complementaria](https://design-system.w3.org/components/collapsible-containers.html) - [Consulta la especificación complementaria](https://design-system.w3.org/getting-started.html) - [Primeros pasos Recursos oficiales de CDN e instrucciones de carga.](https://design-system.w3.org/getting-started.html) - [Contenedores desplegables Estructura nativa, hooks y comportamiento progresivo.](https://design-system.w3.org/components/collapsible-containers.html) - [Tipografía Noto Sans y escala fluida.](https://design-system.w3.org/styles/typography.html) - [Configuración Funciones de color y comportamiento de carga de fuentes.](https://design-system.w3.org/settings/) - [Espaciado vertical Mixin de apilamiento y medidas explícitas.](https://design-system.w3.org/styles/vertical-spacing.html)