Crea interfaces de lectura adaptables con tipografía fluida, roles de color semánticos y contenido plegable nativo que sigue siendo legible sin JavaScript.
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.
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.
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.
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.
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.
HTML
<div class="component--collapsibles" data-component="collapsibles" data-anchor="no">
<div>
<h3 data-heading="collapsibles">Inclusive forms <span>Practical workshop</span></h3>
<div>
<p>Connect each field to its label, hint and recovery message.</p>
<ul><li>Preserve entered values</li><li>Test keyboard recovery</li></ul>
</div>
</div>
</div>
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.
Abre Formularios inclusivos y consulta su lista práctica.
Expande todo para comparar las descripciones de las tres sesiones.
Contrae todo y luego pulsa Intro en un encabezado para volver a abrir solo esa sección.
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.
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.
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.
HTML
<div class="component--collapsibles" data-component="collapsibles" data-anchor="no">
<div>
<h3 data-heading="collapsibles">Inclusive forms <span>Practical workshop</span></h3>
<div>
<p>Connect each field to its label, hint and recovery message.</p>
<ul><li>Preserve entered values</li><li>Test keyboard recovery</li></ul>
</div>
</div>
</div>
Incluye el marcador de mejora en la raíz, recursos oficiales, secciones desplegables nativas y controles para todas las secciones.
HTML
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><script>document.documentElement.classList.add("js")</script><title>Web learning circles</title><link rel="stylesheet" href="vendor/w3c-2026-10-03/core.css"><link rel="stylesheet" href="vendor/w3c-2026-10-03/advanced.css"><style>body{min-block-size:0;padding-block:2rem}.demo{max-inline-size:55rem}header{margin-bottom:2rem}.actions{display:flex;gap:1rem;flex-wrap:wrap;margin:1.5rem 0}.component--collapsibles{padding:1rem;background:#f8f8fb}footer{margin-top:2rem;border-top:1px solid #bdbdbd;padding-top:1rem;font-size:.875rem}#notice{min-height:1.5em}button{max-width:100%}</style><main class="l-center demo" data-anchor="no"><header><p>INDEPENDENT LEARNING PROGRAMME</p><h1>Web learning circles</h1><p class="lead">Explore three small-group sessions for people building a more usable web.</p></header><div class="actions"><button class="button button--ghost" id="expand">Expand all sessions</button><button class="button button--ghost" id="collapse">Collapse all sessions</button></div><p id="notice" role="status">Choose a session to read its outline.</p><div class="component--collapsibles" data-component="collapsibles" data-anchor="no"><div><h3 data-heading="collapsibles">Inclusive forms <span>Practical workshop</span></h3><div><p>Trace a form from its label to its hint, error message and recovery action. Compare the experience with a keyboard and with enlarged text.</p><ul><li>Associate labels and help text</li><li>Keep entered values after an error</li><li>Move focus only when it helps recovery</li></ul></div></div><div><h3 data-heading="collapsibles">Resilient reading <span>Discussion circle</span></h3><div><p>Examine document structure before adding interaction. The content in this example remains visible when JavaScript is unavailable.</p><p>Bring a short article and identify its heading hierarchy, reading measure and meaningful links.</p></div></div><div><h3 data-heading="collapsibles">International text <span>Peer review</span></h3><div><p>Review language declarations, long translated labels and mixed-direction text. A font choice alone cannot guarantee a usable multilingual interface.</p><p>All sessions are fictional examples, with no membership or registration service.</p></div></div></div><footer>Native W3C CDN styles and collapsible script, snapshot 3 October 2026. System font fallback; original learning content, no W3C affiliation.</footer></main><script src="vendor/w3c-2026-10-03/main.js"></script><script>document.querySelector('.component--collapsibles').addEventListener('click',()=>{const n=document.querySelectorAll('[data-heading] button[aria-expanded=true]').length;document.querySelector('#notice').textContent=n+' session outline'+(n===1?' is':'s are')+' expanded.'});function all(open){document.querySelectorAll('[data-heading="collapsibles"] button').forEach(b=>{if((b.getAttribute('aria-expanded')==='true')!==open)b.click()});document.querySelector('#notice').textContent=open?'All three session outlines are expanded.':'All session outlines are collapsed.'}document.querySelector('#expand').onclick=()=>all(true);document.querySelector('#collapse').onclick=()=>all(false);</script></html>
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://.
HTML
<!-- Core is useful without JavaScript. -->
<link rel="stylesheet" href="https://www.w3.org/assets/website-2021/styles/core.css">
<link rel="stylesheet" href="https://www.w3.org/assets/website-2021/styles/advanced.css">
<link rel="stylesheet" href="https://www.w3.org/assets/website-2021/styles/print.css" media="print">
<script>document.documentElement.classList.add('js');</script>
<!-- Put component markup in the document, then load the script once. -->
<script defer src="https://www.w3.org/assets/website-2021/js/main.js"></script>
Una instrucción para tu proyecto
Instrucción para el agente
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.
05
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.
