Jetons de design, patterns et accessibilité de Canvas

Canvas sépare le contenu rédigé de la présentation en utilisant des blocs natifs et des rôles sémantiques stables. Le thème fournit l'interprétation visuelle ; WordPress stocke le contenu des blocs.

Jetons sémantiques​

Le thème définit dans theme.json des rôles réutilisables pour les couleurs, la typographie, l'espacement, les rayons, les ombres et les dégradés. Les variantes de style peuvent modifier les valeurs associées à ces rôles tout en conservant les mêmes slugs. Préférez ces préréglages aux couleurs codées en dur, aux espacements arbitraires ou au CSS en ligne.

Modèles, parties et patterns​

Canvas inclut onze modèles, sept parties de modèle et 38 patterns de blocs cœur. Les patterns couvrent les en-têtes, pieds de page, sections d'accroche, fonctionnalités, avantages, étapes de processus, compositions médias, architecture, comparaisons, tarifs, FAQ, appels à l'action, structures d'articles, contenus associés, navigation de documentation et démarreurs de pages complètes.

Les patterns utilisent les blocs Gutenberg de base. Canvas ajoute des classes de conteneur de présentation et de slot lorsqu'une cible sémantique stable aide les éditeurs ou les outils compatibles, mais ces classes ne constituent pas un modèle de contenu distinct.

Variantes de style​

Cloud, Aurora, Emerald, Coral, Slate, Warm et High Contrast partagent le même vocabulaire de jetons. Évaluez une variante sur la navigation, le texte principal, les boutons, les cartes, les tableaux, les blocs Details, les indicateurs de focus et les mises en page mobiles avant de l'adopter pour un site en production.

Fondations d'accessibilité​

Canvas inclut une gestion visible du focus, un comportement réduit en cas de mouvement, des règles de mise en page responsive, la compatibilité RTL et la parité éditeur/frontend. Ces fondations ne remplacent pas le travail éditorial sur l'accessibilité :

• conservez des niveaux de titres séquentiels ;
• rédigez des libellés de liens et de boutons explicites ;
• utilisez le texte alternatif uniquement pour les images informatives ;
• préservez un contraste suffisant lorsque vous remplacez des jetons ;
• testez la navigation au clavier après avoir modifié la navigation ou des mises en page interactives ;
• relisez le contenu dans des fenêtres étroites et à un niveau de zoom élevé.

Canvas inclut la balise de thème accessibility-ready, mais l'accessibilité finale dépend aussi du contenu rédigé, des blocs installés, des extensions et des modifications propres au site.