Rapport client illustratif · 17 octobre 2026

Petite boutique en ligne: évaluation d’accessibilité

Field & Form · fieldandform.example

Démonstration fictive. Clients, domaines, résultats et preuves sont illustratifs. Ces rapports montrent la structure du livrable, pas des analyses réelles ni des preuves de résultats du produit.

Choisir une offre

Synthèse

Clarifiez images produit et commandes de quantité avant la transmission à l’équipe boutique. Elles influent sur le parcours vers le panier. Corrigez ensuite le niveau de titre sauté pour faciliter la navigation.

Pages examinées: 3
Types de résultats: 3
Critique: 2
Modéré: 1

Les chiffres indiquent les types de résultats de cet exemple, pas les éléments touchés. La gravité indique une priorité, pas un verdict de conformité.

Portée et méthode

Parcours client : Browse products → choose quantity → review the cart.

Pages d’exemple : //products/stoneware-mug/cart

Méthode : contrôles axe automatisés sur chaque page publique chargée. L’exemple ne couvre pas les espaces connectés, tous les états, le clavier, les lecteurs d’écran ou une évaluation WCAG complète. Les résultats nécessitent confirmation humaine.

Ce rapport présente des résultats automatisés d’accessibilité. Il n’établit pas la conformité légale ; une évaluation manuelle reste nécessaire.

Accessibilité : règles et champ d’application

Résultats prioritaires

Priorité	Résultat	Page / règle	Étape suivante
Critical	Product image is missing an alternative	`/products/stoneware-mug` `image-alt`	Describe the product information shown in the image.
Critical	Quantity buttons have no accessible names	`/cart` `button-name`	Name each quantity action and identify its product.
Moderate	Catalog heading skips a level	`/` `heading-order`	Use a consistent heading hierarchy for catalog sections.

Preuves et corrections

Deux résultats sont détaillés pour illustrer la transmission à l’équipe de réalisation.

Résultat 1 · Critical

Product image is missing an alternative

Élément concerné : .product-gallery img:first-child sur /products/stoneware-mug

Pourquoi c’est important : Customers who cannot see the photograph still need the product details it communicates. Alternative text should describe useful visual information without repeating every nearby word.

1 · Schéma de preuve illustratif. Fragment d’interface reconstitué, pas une capture ni une analyse réelle. Illustrative product markup has no alt attribute. The photograph is the only place where the mug’s glaze and handle shape are described.

Correction proposée

Add concise alternative text that conveys the meaningful product details. Review each gallery image individually; avoid repeating the same description for every view.

Avant · HTML illustratif

<img src="/mug.jpg" width="480" height="480">

Après · HTML proposé

<img src="/mug.jpg" width="480" height="480"
  alt="Speckled cream stoneware mug with a wide loop handle">

Vérifier la correction : Re-run the image-alt rule. Read the product page with a screen reader and confirm the description is useful alongside the product name, price, and any additional gallery views.

Résultat 2 · Critical

Quantity buttons have no accessible names

Élément concerné : .cart-item .quantity button sur /cart

Pourquoi c’est important : Customers need to distinguish increase from decrease, especially when more than one product is in the cart. The visible icon may not supply a meaningful control name.

1 · Schéma de preuve illustratif. Fragment d’interface reconstitué, pas une capture ni une analyse réelle. Illustrative quantity buttons contain decorative minus and plus SVGs without accessible names. This finding groups two affected buttons under one rule.

Correction proposée

Give each button an action and product name. Announce quantity changes without moving focus, and communicate the minimum quantity through the control state.

Avant · HTML illustratif

<button><svg aria-hidden="true">…</svg></button>
<span>1</span>
<button><svg aria-hidden="true">…</svg></button>

Après · HTML proposé

<button aria-label="Decrease Stoneware mug quantity">−</button>
<output aria-live="polite">1</output>
<button aria-label="Increase Stoneware mug quantity">+</button>

Vérifier la correction : Re-run the button-name rule. Adjust quantity with the keyboard and screen reader; confirm the action names, announced value, cart total update, and behavior at the minimum quantity.

Transmission recommandée

Confirmez les résultats dans l’interface réelle et convenez des responsables et de la portée.
Résolvez d’abord les résultats critiques ; examinez chaque changement dans son contexte.
Testez le parcours avec un clavier et des technologies d’assistance.
Relancez les mêmes pages, notez les vérifications manuelles restantes et partagez les changements.