Annotations sémantiques

Les annotations sémantiques sont des étiquettes, des notes, ou des calques de documentation ajoutés directement sur les maquettes Figma par les designers afin de communiquer l’intention sémantique et comportementale des éléments d’interface aux développeurs et aux équipes de contenu.

Contrairement aux annotations de mesure (espacement, taille), elles se concentrent sur le rôle que l’élément doit jouer dans le code HTML/natif et pour les technologies d’assistance (comme les lecteurs d’écran).

Objectifs clés

1. Assurer la Sémantique HTML Correcte : Indiquer si un élément visuel (ex: un bloc de texte stylisé) doit être un titre (<h1> ou <h2>), un simple paragraphe (<p>), un lien (<a>), ou un bouton (<button>).
2. Spécifier les Rôles ARIA : Fournir des informations nécessaires pour l’accessibilité qui ne sont pas évidentes visuellement. Par exemple, spécifier un aria-label pour un bouton icône sans texte, ou un role="alert" pour un message d’erreur temporaire.
3. Documenter le Comportement d’Accessibilité : Définir des informations comme l’ordre de tabulation (en lien avec le plugin Focus Order), les états des formulaires (si un champ est aria-required), ou le texte alternatif (alt-text) pour les images.

Comment sont-elles implémentées dans Figma ?

Puisqu’il n’y a pas de fonctionnalité native pour cela, les équipes utilisent souvent :

• Composants d’Annotation (Stickers) : L’équipe Design System crée un kit de composants Figma dédiés (souvent appelés « Accessibility Stickers » ou « Sémantique Kit »). Ces composants sont des pastilles ou des légendes qui peuvent être glissées sur la maquette avec un texte simple comme :
  • Role: h1
  • Role: aria-live="polite"
  • Alt-Text: Logo de l'entreprise
• Notes dans le Mode Développeur : Les designers peuvent utiliser la fonction de commentaires ou les sections de documentation du Figma Dev Mode pour lier des notes sémantiques directement au composant.

Rôle pour l’Architecte de Documentation :

L’Architecte de Documentation est responsable de la création, de la standardisation et de l’imposition de ce Kit d’Annotations Sémantiques. Il doit s’assurer que ces annotations sont :

1. Claires : Que le développeur comprenne immédiatement l’intention.
2. Normalisées : Que les mêmes termes soient toujours utilisés (ex: toujours utiliser Role: h2 et non pas balise h2).
3. Intégrées : Que les informations sémantiques se retrouvent dans la documentation finale (Zeroheight ou Storybook) associée au composant.