# Système de design W3C ## Aperçu de l’interface système de design W3C Ouvrez les sessions individuellement ou ensemble ; le contenu reste lisible lorsque JavaScript est désactivé. ## Référence de conception système de design W3C Documentation officielle du W3C et instantané public du CDN téléchargés le 3 octobre 2026 ; CSS réel et script natif examinés. ### Typographie fluide | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Web font / fallback | Noto Sans / Trebuchet MS, Geneva, sans-serif | Le CSS natif applique Noto Sans après le chargement des polices ; la démo conserve la police système de remplacement. | | Fluid range | 320–1120px viewport | Les valeurs de clamp plafonnent en dehors de cette plage ; aucun saut typographique abrupt. | | --w3c-text-0 | clamp(.9375rem, .9125rem + .125vw, 1rem) | Corps de texte : de 15px à 16px avec une taille de police racine normale. | | --w3c-text-5 | clamp(1.6894rem, 1.6444rem + .2253vw, 1.802rem) | Échelle du H1 ; environ 27–28.8px. | | --w3c-text-7 | clamp(2.1382rem, 2.0811rem + .2851vw, 2.2807rem) | Plus grande taille de l’échelle text-xl, mais pas celle du H1 par défaut. | | Body line height | 1.5 | Par rapport à la taille de police fluide. | | Collapsible H3 | --w3c-text-1 / line-height 1.5 | Redéfinition du composant : environ 16.9–18px. | ### Couleurs sémantiques | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Text | #111111 | Presque noir ; texte courant. | | Link | #005a9c | Bleu du W3C ; distinct des états survolé et visité. | | Hover / visited | #002a56 / #75336c | Préserver la distinction entre les états. | | Focus | #f9dc4a | Mise en évidence jaune du focus avec une bordure visible. | | Input border | #545454 | Rôle de contraste différent de celui des séparateurs décoratifs. | | Success / error | #046704 / #a82615 | Signification liée à l’état, et non accents aléatoires. | | Warning | #c28605 | Couleur de bordure des notes d’avertissement. | ### Mise en page et espacement | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | l-center | max-inline-size:70rem; padding-inline:5vw | Conteneur large natif ; l’aperçu applique une largeur maximale de 55rem propre à l’application. | | Reading measure | 41.25rem | Largeur maximale du contenu à l’intérieur des sections rétractables. | | Stack default | 1em between direct siblings | La mixin Sass officielle accepte une mesure explicite ; il ne s’agit pas d’une échelle fixe de 8px. | | Collapsible inset | 1.5625rem | 25px avec une taille de police racine normale. | | Collapsible separation / radius | 1rem / .375rem | Espacement de 16px et coins arrondis de 6px. | | Collapsible shadow | -.0625rem .0625rem .25rem rgba(55,70,95,.12) | Séparation subtile des surfaces ; CSS natif. | ### Principes de l’amélioration progressive | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Outer hook | data-component="collapsibles" | Le script repère la racine de chaque composant. | | Heading hook | data-heading="collapsibles" | Le script insère un véritable bouton dans chaque titre. | | Collapsed state | aria-expanded=false; next sibling aria-hidden=true | Les fonctions avancées de CSS nécessitent le marqueur html.js pour masquer le corps du contenu. | | data-anchor="no" | Suppress automatic heading anchors for this subtree | Évitez d’injecter un lien supplémentaire dans le titre rétractable. | | No JavaScript | All content remains visible | Ne livrez pas de contenu masqué dans le balisage initial sans amélioration progressive. | ## Guide complet système de design W3C Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Amélioration progressive de système de design W3C ### Le contenu précède les commandes > 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. ```

Inclusive forms Practical workshop

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

  • Preserve entered values
  • Test keyboard recovery
``` Référence du code Consultez la spécification associée ## 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. 1. Ouvrez « Formulaires inclusifs » et consultez sa liste pratique. 2. Développez tout pour comparer les descriptions des trois sessions. 3. Réduisez tout, puis appuyez sur Entrée sur un titre pour rouvrir uniquement cette section. Consultez la spécification associée ## Système de design W3C Ressources et intégration ### Pas d’installation de paquet inventée 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. Consultez la spécification associée ## Système de design W3C Portée et vérification ### 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. Consultez la spécification associée ## 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. ```

Inclusive forms Practical workshop

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

  • Preserve entered values
  • Test keyboard recovery
``` Référence du code ### Liste d’apprentissage native complète Inclut l’attribut d’amélioration à la racine, les ressources officielles, les sections repliables natives et les commandes groupées. ``` 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.

``` Référence du code ## Système de design W3C Configuration de l’agent ### Point de départ de l’implémentation 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://. ``` ``` ### Un prompt pour votre projet ``` 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. ``` ## 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. - Pour commencer Ressources CDN officielles et instructions de chargement. - Conteneurs repliables Structure native, attributs data et comportement progressif. - Typographie Noto Sans et échelle fluide. - Paramètres Rôles des couleurs et comportement du chargement des polices. - Espacement vertical Mélangeur de piles et dimensions explicites. - Télécharger l’exemple complet fonctionnel Archive ZIP comprenant le HTML complet, les dépendances locales CSS/JavaScript, les licences fournies et les instructions de lancement exactes. Aucune étape de build n’est nécessaire. ## Système de design W3C Ressources associées ### Codex Utilisez la structure réelle de SearchInput de Codex, sa hiérarchie d’actions et ses jetons axés sur la lecture. Recherchez dans un index local d’articles, consultez un résultat, puis revenez à la même position de lecture. ### Agriculture système de design Créez des parcours de service plus longs avec l’espacement concret d’AgDS, ses propriétés adaptatives et le modèle d’état de TaskList. Essayez un processus de préparation dont l’étape de révision ne se déverrouille que lorsque les prérequis sont remplis. ### Alberta système de design Utilisez les composants Web natifs d’Alberta et ses jetons de design publiés pour créer une liste de préparation complète, avec des choix accessibles, une progression calculée et des commentaires de révision transparents. - [Référence de mise en œuvre](https://design-system.w3.org/components/collapsible-containers.html) - [Source](https://design-system.w3.org/styles/typography.html) - [Source](https://design-system.w3.org/settings/) - [Source](https://www.w3.org/assets/website-2021/styles/core.css) - [Source](https://design-system.w3.org/components/collapsible-containers.html) - [Consultez la spécification associée](https://design-system.w3.org/) - [Consultez la spécification associée](https://design-system.w3.org/styles/typography.html) - [Consultez la spécification associée](https://design-system.w3.org/styles/vertical-spacing.html) - [Consultez la spécification associée](https://design-system.w3.org/settings/) - [Référence du code](https://design-system.w3.org/components/collapsible-containers.html) - [Consultez la spécification associée](https://design-system.w3.org/components/collapsible-containers.html) - [Consultez la spécification associée](https://design-system.w3.org/getting-started.html) - [Pour commencer Ressources CDN officielles et instructions de chargement.](https://design-system.w3.org/getting-started.html) - [Conteneurs repliables Structure native, attributs data et comportement progressif.](https://design-system.w3.org/components/collapsible-containers.html) - [Typographie Noto Sans et échelle fluide.](https://design-system.w3.org/styles/typography.html) - [Paramètres Rôles des couleurs et comportement du chargement des polices.](https://design-system.w3.org/settings/) - [Espacement vertical Mélangeur de piles et dimensions explicites.](https://design-system.w3.org/styles/vertical-spacing.html)