Kit de passation de maquette à l’intégration : checklist de 80 points, fiche de passation et grille de recette visuelle (PDF et tableur)

Ce kit s’adresse aux designers qui remettent une maquette à l’intégration et aux intégrateurs qui la reçoivent, que le site soit développé en code ou monté dans un outil sans code. Il couvre les deux moments où une maquette se perd en route. Avant l’intégration, il vous aide à préparer le fichier et à écrire ce que la maquette ne montre pas : les états, les textes réels, les médias, ce que l’accessibilité demande de transmettre. Après, il vous aide à comparer le site intégré à la maquette, écran par écran et largeur par largeur, et à noter chaque écart avec sa gravité, jusqu’à sa correction.

Chacun des 80 points dit pourquoi il compte et sur quoi il repose. Le fondement est un critère des WCAG 2.2, cité avec son intitulé de la traduction française agréée et, quand il existe, le critère correspondant du RGAA ; une documentation technique ou une spécification ; un renvoi au guide d’organisation des fichiers offert sur le site. Quand aucune source ne fonde un point, il porte la mention « pratique de l’auteur » et se lit comme un conseil, à adapter à votre projet.

Le kit prépare et vérifie une intégration ; ce n’est pas un audit d’accessibilité. Ses points d’accessibilité disent ce que la maquette doit transmettre et ce que la recette doit contrôler, sans parcourir tout un référentiel : pour un audit ou une déclaration de conformité, le référentiel officiel en France est le RGAA. Le kit ne refait pas non plus le rangement du fichier : son premier point renvoie à la checklist de nettoyage du guide d’organisation des fichiers de design, offert sur le site.

• Un guide PDF de 16 pages : le mode d’emploi ; une fiche par famille, avec chacun de ses points, sa raison et son fondement ; la fiche de passation commentée rubrique par rubrique ; la méthode de recette visuelle et l’échelle de gravité ; les sources. Le sommaire et les signets mènent à chaque partie.
• Une checklist de 80 points en 8 familles : fichier et pages ; composants et variantes ; styles et variables ; mise en page et responsive ; textes et contenus réels ; médias et exports ; états et interactions ; accessibilité à transmettre (ordre de focus, textes alternatifs, contrastes). Chaque point se coche Oui, Non ou Sans objet, avec un commentaire.
• Une fiche de passation de 12 rubriques, vierge, en Markdown et en DOCX : projet et version de référence ; interlocuteurs et validation ; périmètre ; cible d’intégration ; fichiers, accès et exports ; inventaire des écrans ; styles et variables ; composants, états et interactions ; textes et contenus ; médias ; accessibilité ; recette, décisions et questions ouvertes. Les champs à compléter sont marqués « [À remplir : …] ».
• Une grille de recette visuelle de 14 colonnes : identifiant, écran, largeur, navigateur, point de la checklist, élément, attendu, écart, gravité, capture, statut, responsable, date et commentaire. Elle se remplit avec 4 largeurs de contrôle, dont la plus étroite vient du critère « Redistribution » des WCAG, 4 niveaux de gravité (Bloquant, Majeur, Mineur, Cosmétique) et 4 statuts (À corriger, Corrigé à vérifier, Validé, Non retenu).
• Un tableur (.xlsx) de 6 feuilles : Mode d’emploi, Checklist, Gravité, Recette (vierge), Exemple checklist et Exemple recette. Le statut, la gravité et la largeur se choisissent dans une liste, et la ligne d’en-tête reste visible au défilement.
• La checklist et la grille en CSV, pour les reprendre dans un autre outil.
• Un exemple rempli de 16 pages (PDF) : le kit appliqué à Pignon Fauve, le site vitrine inventé d’un atelier de réparation de vélos. La fiche de passation remplie, un extrait de checklist et la recette de 9 écrans, avec 13 écarts (4 bloquants, 7 majeurs, 1 mineur, 1 cosmétique) montrés sur 11 figures annotées. Chaque légende porte la mention « Site inventé pour l’exemple » : aucune capture d’un service réel, aucune coordonnée réelle.

Fichiers du kit :

guide-passation.pdf
tableur/kit-passation.xlsx
tableur/checklist.csv
tableur/grille-recette.csv
fiche/fiche-passation.md
fiche/fiche-passation.docx
exemple/exemple-passation.pdf

Le zip contient aussi le texte de la licence et les crédits.

Sources

Le guide cite 20 références, chacune avec son adresse, consultées le 12 novembre 2026 : les WCAG 2.2 et leur traduction française agréée, le RGAA, le format de tokens du groupe communautaire Design Tokens du W3C, la documentation MDN (images adaptatives, formats d’image, préférence de mouvement réduit), des articles de web.dev sur l’affichage du plus grand élément, le Web Almanac, une note du W3C sur la longueur des textes traduits et les facteurs de gravité de Nielsen. Les intitulés des critères WCAG sont recopiés de la traduction agréée ; les critères du RGAA sont cités par leur numéro. Le RGAA en vigueur au 12 novembre 2026 repose sur la version précédente des WCAG : le guide signale les critères des WCAG 2.2 qui n’y ont pas d’équivalent, et présente la prochaine version du RGAA comme annoncée, pas publiée.

Fabrication et IA

Les textes du guide, de la checklist, de la fiche de passation, de la grille et de l’exemple, les écrans du site inventé et les scripts de mise en page ont été rédigés avec un assistant d’IA, puis relus et contrôlés : chaque référence vérifiée sur sa source, PDF balisé et testé, chiffres recomptés par script. Aucune image n’a été produite par un générateur d’images : les captures de l’exemple sont prises sur des écrans écrits pour l’occasion.

• PDF A4 balisé (guide et exemple) : texte réel, sélectionnable et copiable, titres structurés, signets, liens actifs, langue déclarée en français. Les pages s’impriment en A4 et le texte garde un contraste d’au moins 7:1. Les PDF s’ouvrent dans tout lecteur de PDF.
• XLSX : le tableur s’ouvre dans les tableurs courants ; les listes déroulantes y fonctionnent.
• CSV UTF-8 : avec BOM et séparé par des points-virgules, il s’ouvre directement dans un tableur réglé en français. Colonnes id, famille, point, pourquoi, fondement, statut et commentaire pour la checklist ; la grille de recette ne contient que ses en-têtes.
• Markdown : la fiche de passation se remplit dans tout éditeur de texte, ou à côté du code dans un dépôt.
• DOCX : la même fiche pour un traitement de texte, avec les styles de titres et la langue française, sans police imposée.
• Police : les PDF sont composés en Work Sans, sous licence SIL Open Font License 1.1, embarquée en sous-ensemble.

À savoir avant l’achat :

• Tout le kit est en français : guide, checklist, fiche de passation, tableur et exemple.
• Le kit ne suppose aucun outil : les points parlent de la maquette, de ses styles, de ses états et de ses médias, avec un vocabulaire générique (outil de design, mode d’inspection), que l’intégration se fasse en code ou sans code.
• Les largeurs de maquette proposées sont un choix de l’auteur, présenté comme tel ; seule la largeur de contrôle la plus étroite vient d’un critère des WCAG.
• Les PDF sont balisés (titres, signets, texte réel, liens), mais leur conformité à la norme PDF/UA n’est pas attestée.

Le kit est vendu avec la licence commerciale : vous pouvez l’utiliser pour vos projets et ceux de vos clients, et remettre à vos clients les fiches et les grilles que vous en tirez, mais pas revendre ni redistribuer le kit, en tout ou en partie.

• Passer d’une maquette à un site sans code avec un plugin
• Convertir un site existant en maquettes modifiables
• Kit d’audit UX en français : une fois la recette visuelle passée, il sert à juger l’ergonomie du site intégré, avec la même échelle de gravité.

1.0.0 (12 novembre 2026) : première version.