Créer un système de design utile et maintenable
Un système de design relie les règles visuelles aux composants et à leurs usages. Commencez par les éléments répétés et les problèmes constatés. La valeur tient à des décisions cohérentes et maintenues, pas au nombre de composants dessinés.
Inventorier les incohérences réelles
Comparez des pages représentatives sur téléphone et grand écran. Relevez variations de titres, marges, boutons, formulaires et cartes. Associez chaque variation à une justification ou à un défaut.
Regroupez les éléments par fonction. Deux cartes différentes peuvent répondre à des besoins différents ; deux boutons qui réalisent la même action demandent une règle commune.
Définir les règles de base
Fixez largeur de lecture, échelle typographique, espacements, couleurs et points de rupture. Testez les titres longs, les traductions et le zoom. Conservez des unités et variables explicites plutôt que des corrections isolées.
Séparez texte courant, légende et contrôle interactif. Une légende discrète ne doit pas imposer une taille minuscule à un filtre. Vérifiez aussi les contrastes et la visibilité du focus.
Documenter les états et comportements
Décrivez état normal, survol, focus, désactivation, erreur et chargement lorsque pertinents. Pour les formulaires, reliez libellés et messages aux champs. Pour les tableaux, préservez la lecture sur petit écran.
Privilégiez les éléments HTML adaptés et vérifiez clavier et technologies d’assistance. Les pratiques ARIA servent à des interactions définies ; copier des attributs ne remplace pas le comportement attendu.
Organiser adoption et évolution
Publiez exemples, règles d’emploi et contre-exemples. Désignez qui accepte une variante et qui maintient son code. Testez les changements sur plusieurs pages avant de généraliser.
Prévoyez comment retirer un ancien composant et suivre les pages restantes. Un système devient fragile lorsque documentation et production divergent. Incluez la vérification visuelle dans les changements partagés.
Une fiche à conserver avec la décision
| Élément | Preuve |
|---|---|
| Fondations | Variables et exemples responsive |
| Composant | États, clavier et erreurs |
| Maintenance | Responsable et évolution |
Télécharger la fiche à compléter (CSV)
Questions fréquentes
Faut-il commencer par une bibliothèque complète ?
Commencez par les éléments répétés sur les parcours importants. Faites adopter une petite base cohérente avant de multiplier les variantes.
Références
W3C · ARIA Authoring Practices
La grille pratique est une synthèse éditoriale à adapter à votre service. Elle ne constitue ni une certification ni un résultat d’audit.
Poursuivre avec une décision connexe
Des ressources pour ce projet
Prestataire communication
Paris France Communication
Pour un système qui doit aussi couvrir imprimés, signalétique ou vidéo, examinez l’articulation entre identité de marque et supports. Précisez les variantes, les droits des fichiers et les règles de mise à jour.
Sites de l’écosystème AR, sélectionnés pour leur pertinence sur ce sujet. Vérifiez périmètres, conditions et offres actuelles auprès de chaque éditeur. Notre méthode de sélection.