Combien d’étapes un configurateur de produit sur mesure doit-il vérifier avant sa mise en ligne ? Un ébéniste qui vend des tables personnalisables en vente directe depuis son site a posé la question avant le lancement de son nouveau configurateur : choix de l’essence de bois, des dimensions, d’une gravure optionnelle, le tout avec un prix recalculé en temps réel. Voici la liste de vérification utilisée pour ce projet, applicable à tout configurateur similaire construit sur mesure plutôt qu’avec une extension e-commerce standard.
1. Chaque option de matière doit s’annoncer comme sélectionnée ou non
Les vignettes visuelles de matière (chêne, noyer, frêne) sont souvent construites comme de simples images cliquables avec une bordure de couleur au survol. Sans rôle explicite, un lecteur d’écran ne peut ni les identifier comme des options, ni indiquer laquelle est actuellement retenue.
<fieldset>
<legend>Essence de bois</legend>
<label>
<input type="radio" name="essence" value="chene" checked>
Chêne
</label>
<label>
<input type="radio" name="essence" value="noyer">
Noyer
</label>
</fieldset>Un groupe de boutons radio natifs, même stylé visuellement comme des vignettes, reste la solution la plus fiable : l’état sélectionné est annoncé automatiquement par tous les lecteurs d’écran, sans code supplémentaire.
2. Le prix recalculé doit être annoncé sans déplacer le focus
Dès qu’une option change, le prix affiché en bas de page se met à jour. Pour qu’une personne utilisant un lecteur d’écran en soit informée sans devoir chercher le champ de prix après chaque modification, une région aria-live="polite" doit encadrer la zone de prix :
<p class="prix-total" aria-live="polite" aria-atomic="true">
Prix estimé : 1 240 €
</p>L’attribut aria-atomic="true" garantit que l’intégralité du texte est relue à chaque changement, plutôt que la seule portion modifiée, ce qui évite une annonce du type « 40 » sans le contexte du prix complet.
3. Les dimensions se saisissent aussi au clavier, pas seulement au glisser
Un curseur de dimension en glisser-déposer doit obligatoirement avoir une alternative au clavier. Un élément <input type="range"> natif règle ce point automatiquement, les flèches directionnelles ajustant la valeur sans configuration supplémentaire :
<label for="longueur">Longueur de la table (cm)</label>
<input type="range" id="longueur" min="120" max="240" step="10" value="180">4. La gravure optionnelle ne doit pas piéger le focus
L’ajout d’une gravure ouvre un champ de texte conditionnel avec un compteur de caractères restants. Deux points à vérifier ici : le champ doit apparaître dans l’ordre logique du document, juste après la case à cocher qui l’active, et le focus ne doit jamais être forcé automatiquement dans ce champ sans action explicite de l’utilisateur.
5. Le récapitulatif final reprend la structure de titres de la page
Le récapitulatif de commande doit rester un contenu normal de la page, avec un <h2> ou <h3> cohérent avec le reste, et non une fenêtre modale surgissante sans rapport avec le fil de navigation, sauf si une confirmation explicite de validation le justifie.
6. Le bouton de validation reste désactivé de façon compréhensible
Tant qu’une option obligatoire (l’essence de bois, par exemple) n’est pas choisie, le bouton de validation peut rester désactivé. Il faut alors indiquer pourquoi, via un texte associé, plutôt qu’un simple attribut disabled silencieux :
<button type="submit" disabled aria-describedby="aide-validation">
Valider la commande
</button>
<p id="aide-validation">Choisissez une essence de bois pour continuer.</p>- Vignettes de matière construites sur des boutons radio natifs ;
- Prix recalculé annoncé par une région
aria-live; - Dimensions ajustables au clavier via
input type="range"; - Champ de gravure sans capture automatique du focus ;
- Récapitulatif intégré au fil normal des titres ;
- Bouton désactivé expliqué par un texte associé.
Un configurateur accessible n’est jamais qu’un formulaire un peu plus long : les mêmes règles s’appliquent, elles se cumulent simplement sur davantage d’étapes.
Pour aller plus loin
Cette liste de six points ne prétend pas remplacer un audit complet, mais elle couvre l’essentiel des anomalies réellement rencontrées sur ce type de configurateur artisanal : options de choix, feedback dynamique, saisie de dimensions et validation finale. Appliquée dès la phase de développement, elle évite l’essentiel des corrections coûteuses après mise en ligne.
