Créez des interfaces de lecture résilientes grâce à une typographie fluide, des rôles de couleurs sémantiques et du contenu repliable natif, qui reste lisible sans JavaScript.
Le W3C distingue les styles de base des composants avancés. Au départ, le contenu rétractable se présente sous la forme de titres ordinaires suivis de leur contenu. En l’absence de script, toutes les présentations des sessions restent lisibles. main.js insère des boutons et ne modifie l’état qu’après avoir détecté les attributs de données documentés. Ce modèle d’implémentation diffère de celui qui consiste à livrer un accordéon déjà masqué, dont les commandes risquent de ne jamais être initialisées.
L’aperçu utilise les fichiers officiels du CDN core.css, advanced.css et main.js, enregistrés dans un instantané local daté. Le marqueur html.js active les sélecteurs avancés. Si ce marqueur est omis, les attributs ARIA changent, mais les corps restent visuellement ouverts ; l’aperçu vérifie explicitement la visibilité réelle ainsi que la valeur de aria-expanded.
Typographie fluide et chargement des polices système de design W3C
Une échelle de lecture modérée
La taille du corps de texte passe de 15px à la limite inférieure de la fenêtre d’affichage à 16px à 1120px. Neuf propriétés personnalisées nommées définissent l’échelle. Le H1 utilise --w3c-text-5, et non la plus grande taille --w3c-text-7 ; reprendre partout un titre d’affichage de 36px ne respecterait pas la hiérarchie de titres de la norme.
Noto Sans est la police web prévue. La pile de polices de remplacement native utilise Trebuchet MS et Geneva jusqu’à ce que le mécanisme de chargement ajoute fonts-loaded à la racine. Cet exemple indépendant conserve la police de remplacement active et indique ce choix. La taille fluide et la hauteur de ligne restent natives ; l’aperçu ne prétend pas reproduire exactement les métriques des glyphes de Noto Sans.
Largeur de lecture et espacement système de design W3C
Composer avec des primitives de mise en page
La primitive l-center définit une largeur maximale de 70rem et un remplissage latéral de 5vw. L’aperçu ajoute une largeur maximale de 55rem, propre à l’application, pour garder compactes les trois courtes présentations d’apprentissage. Cette limite ne constitue pas un nouveau jeton du W3C. Dans chaque corps rétractable, la largeur de texte native de 41.25rem limite la longueur des lignes.
La mixin Stack documentée crée une colonne et applique une marge supérieure aux éléments frères directs, à partir du deuxième. Sa valeur par défaut est 1em, mais il est possible de lui transmettre une autre unité. Utilisez-la pour gérer les relations entre les blocs plutôt que d’inventer une échelle globale d’espacement numérotée. Les valeurs de retrait de 25px, d’espacement de 16px et de rayon de 6px du composant rétractable ont été vérifiées séparément.
Rôles des couleurs sémantiques de système de design W3C
Rendre visibles l’historique des liens et le focus
Le système distingue le bleu du lien par défaut, le bleu foncé au survol et le violet pour les liens visités. Ces rôles sont importants sur un site où les personnes reviennent à de longs documents et naviguent entre les références. Réutiliser l’alias des liens pour une décoration sans rapport signifie que les futurs changements de thème modifieront des surfaces qui n’ont aucun lien avec eux.
Le focus est mis en évidence en jaune avec une bordure visible. La page des paramètres distingue les bordures ordinaires du rôle de bordure plus foncé des champs de saisie. Elle attribue également des significations différentes aux couleurs d’information, de réussite, d’avertissement et d’erreur. Préservez le rôle et vérifiez l’association avec l’arrière-plan réel ; une nuance de couleur seule ne prouve pas qu’un état de composant offre un contraste suffisant.
Balisage rétractable et script système de design W3C
Titre, bouton et corps adjacent
Chaque enfant direct contient un titre immédiatement suivi de son corps de contenu. Le script utilise nextElementSibling pour trouver ce corps ; l’insertion de métadonnées sans rapport entre les deux romprait donc leur association. Placez l’étiquette de catégorie dans la balise span du titre, comme dans l’exemple documenté de liste de groupes. Le script enveloppe le contenu du titre dans un bouton.
Le code natif bascule aria-expanded sur ce bouton et aria-hidden sur le contenu. La feuille de style avancée masque le contenu lorsque celui-ci est replié. data-anchor="no" empêche la fonctionnalité distincte d’ancrage des titres d’ajouter des liens indésirables à ce composant. Initialisez main.js une seule fois : une amélioration répétée ajouterait des boutons imbriqués supplémentaires dans les titres.
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>
Système de design W3C Commandes groupées et utilisation au clavier
Étendez le composant à l’aide des boutons existants
« Tout développer » et « Tout réduire » sont des commandes originales de l’exemple. Elles vérifient chaque bouton natif et ne le déclenchent que si son état doit changer. L’état natif et la règle visuelle restent ainsi synchronisés. Ces commandes ne modifient pas directement un attribut ARIA en laissant l’autre obsolète.
Les boutons natifs s’activent avec Entrée et Espace. L’aperçu permet d’activer un bouton individuel, de tout développer, de tout réduire, puis de rouvrir une section au clavier. Un message d’état discret décrit l’action groupée. Le composant source permet d’ouvrir plusieurs plans de session à la fois : il ne s’agit pas d’un accordéon qui impose l’ouverture d’une seule section.
Ouvrez « Formulaires inclusifs » et consultez sa liste pratique.
Développez tout pour comparer les descriptions des trois sessions.
Réduisez tout, puis appuyez sur Entrée sur un titre pour rouvrir uniquement cette section.
La page officielle de démarrage publie des points d’entrée CDN stables pour les feuilles de style core, advanced et print, ainsi que pour main.js et des scripts de fonctionnalités facultatifs. Le bloc de configuration utilise ces chemins exacts. Ce React n’a pas besoin de fournisseur ni de paquet npm pour cette implémentation HTML. La démo locale inclut les fichiers téléchargés afin que l’exemple ne dépende pas d’une connexion active.
En production, conservez la vérification de capacité CSS documentée pour les styles avancés si vous devez prendre en charge la même population d’anciens navigateurs. La configuration compacte charge directement les styles avancés pour les navigateurs modernes. Dans un site constitué de documents complets, incluez la feuille de style d’impression ; l’aperçu autonome se concentre sur l’exemple interactif à l’écran.
core.css : typographie de base, mises en page et composants sans amélioration progressive.
advanced.css : règles appliquées aux états améliorés par JavaScript.
main.js : détecte les attributs data et améliore une seule fois les composants pris en charge.
Un système de design, pas une certification de conformité
Une page reprenant le style du W3C n’est pas automatiquement conforme à WCAG. Testez son contenu réel, l’ordre de mise au point, le comportement du zoom et les états de récupération. Cet exemple vérifie trois largeurs de fenêtre et le comportement de base sans script ; il ne prétend ni à une certification ni à un audit exhaustif des technologies d’assistance.
Les noms et descriptions des cercles d’apprentissage sont des contenus fictifs originaux. Ils ne correspondent ni à des groupes de travail officiels, ni à des horaires, ni à des possibilités d’inscription. L’exemple évite délibérément les logos du W3C et toute revendication d’affiliation. La réutilisation d’une ressource de style publique ne doit pas laisser entendre qu’elle bénéficie d’une approbation institutionnelle.
Système de design W3C Exemples de composants du système de design
Plan de session avec amélioration progressive
Le titre et le contenu adjacent constituent la structure requise ; main.js ajoute le bouton de bascule.
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>
Inclut l’attribut d’amélioration à la racine, les ressources officielles, les sections repliables natives et les commandes groupées.
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>
Chemins CDN officiels réels. L’aperçu local inclut ces ressources et conserve la police système comme solution de repli native. Le ZIP complet de l’exemple fonctionnel, disponible dans 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/w3c.html. N’ouvrez pas les exemples utilisant des modules via 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>
Un prompt pour votre projet
Prompt pour l’agent IA
Utilisez les styles core et advanced du W3C avec main.js et l’attribut d’amélioration html.js. Créez des titres sémantiques suivis de leur contenu repliable en utilisant les attributs data réellement prévus à cet effet. Préservez un contenu lisible sans JavaScript, une typographie fluide native ainsi que les couleurs sémantiques des liens et de la mise au point. N’initialisez pas deux fois et ne déduisez pas la conformité à WCAG du seul style.
05
Système de design W3C Sources et portée
Exemple OpenDesign indépendant utilisant des ressources publiques officielles. Aucune affiliation au W3C ni certification d’accessibilité n’est sous-entendue.
