Audit d'accessibilité complet · WCAG 2.2 AA · 19 octobre 2026

theme-dawn-demo.myshopify.com

Exemple de rapport complet. Il porte sur la boutique de démonstration publique du thème Dawn de Shopify. Votre rapport contient la même chose pour votre boutique. Analysez votre boutique gratuitement.

50/100

Risque élevé

65 erreurs WCAG sur 5 pages · Plateforme : Shopify

0 Critique
65 Grave
0 Modéré
0 Mineur

✗ Aucune déclaration d'accessibilité trouvée (information obligatoire selon l'EAA)

Synthèse et priorités

Corrigez dans cet ordre : les problèmes critiques et graves empêchent des clients handicapés de finaliser un achat et sont les plus susceptibles d'être cités dans une plainte. Beaucoup de problèmes ont une même cause dans votre thème : corriger un modèle en supprime souvent des dizaines d'un coup.

Publier une déclaration d'accessibilité
Le texte n'est pas assez contrasté avec son fond × 61
Le focus clavier n'est pas visible sur certains éléments × 4

Problèmes en détail

EAA Aucune déclaration d'accessibilité trouvée

Pourquoi c'est important : L'Acte européen sur l'accessibilité oblige les entreprises à publier des informations sur la manière dont leur service respecte les exigences d'accessibilité (annexe V). Une page « Déclaration d'accessibilité » est la façon habituelle de le faire, et c'est souvent la première chose que regardent les autorités et les plaignants.

Comment corriger : Publiez la déclaration générée ici sur une page comme /pages/accessibilite et ajoutez un lien dans le pied de page.

Grave Le texte n'est pas assez contrasté avec son fond × 61

WCAG 1.4.3 · EN 301 549 9.1.4.3 · Règle : color-contrast

Pourquoi c'est important : Un texte peu contrasté est difficile, voire impossible, à lire pour les personnes malvoyantes ou daltoniennes, et pour tout le monde sur un téléphone en plein soleil. C'est l'erreur la plus fréquente sur les boutiques en ligne.

Comment corriger : Le texte courant doit avoir un contraste d'au moins 4,5:1 avec son fond, et le gros texte (24 px, ou 18,5 px en gras) d'au moins 3:1. En pratique : foncer les gris clairs, ou foncer la couleur des boutons sous un texte blanc. Vérifiez chaque paire avec un outil de contraste avant de modifier votre charte.

Sur Shopify : Boutique en ligne → Thèmes → Personnaliser → Paramètres du thème → Couleurs. Ajustez les combinaisons de texte, de boutons et de badges ; les badges « Promo » et les prix barrés sont souvent en cause.

Éléments concernés (30 sur 61)

.rich-text__heading
sur https://theme-dawn-demo.myshopify.com/

<h2 class="rich-text__heading rte inline-richtext h1 scroll-trigger animate--slide-in scroll-trigger--offscreen" data-cascade="" style="--animation-order: 1;">
                Obsessive Attention. Intelligent Effort.
              </h2>

.collage-wrapper-title
sur https://theme-dawn-demo.myshopify.com/

<h2 class="collage-wrapper-title inline-richtext h2 scroll-trigger animate--slide-in scroll-trigger--offscreen">
        Back in stock!
      </h2>

.card--extend-height.card.card--standard > .card__content > .card__information > h3 > .full-unstyled-link[href$="bags"]
sur https://theme-dawn-demo.myshopify.com/
```
<a href="/collections/bags" class="full-unstyled-link">
```

#CardLink--6920733851737
sur https://theme-dawn-demo.myshopify.com/

<a href="/products/mini-eddy-cappuccino" id="CardLink--6920733851737" class="full-unstyled-link" aria-labelledby="CardLink--6920733851737 Badge--6920733851737">
              Mini Eddy
            </a>

.card--extend-height.card.card--standard > .card__content > .card__information > .card-information > .price > .price__container > .price__regular > .price-item--regular.price-item
sur https://theme-dawn-demo.myshopify.com/
```
<span class="price-item price-item--regular">
          $375.00 CAD
        </span>
```
.card--extend-height.card.card--standard > .card__content > .card__information > h3 > .full-unstyled-link[href$="shoes"]
sur https://theme-dawn-demo.myshopify.com/
```
<a href="/collections/shoes" class="full-unstyled-link">
```
.footer-block__newsletter > .footer-block__heading.inline-richtext
sur https://theme-dawn-demo.myshopify.com/
```
<h2 class="footer-block__heading inline-richtext">Subscribe to our emails</h2>
```

.newsletter-form__field-wrapper > .field > label
sur https://theme-dawn-demo.myshopify.com/

<label class="field__label" for="NewsletterForm--sections--15968258162777__footer">
                      Email
                    </label>

#FooterCountryLabel
sur https://theme-dawn-demo.myshopify.com/

<h2 class="caption-large text-body" id="FooterCountryLabel">Country/region</h2>

button[aria-controls="FooterCountry-country-results"] > span
sur https://theme-dawn-demo.myshopify.com/
```
<span>Canada |
      CAD
      $</span>
```

.copyright__content:nth-child(1)
sur https://theme-dawn-demo.myshopify.com/

<small class="copyright__content">© 2026, <a href="/" title="">theme-dawn-demo</a></small>

a[title=""]
sur https://theme-dawn-demo.myshopify.com/
```
<a href="/" title="">theme-dawn-demo</a>
```

a[target="_blank"]
sur https://theme-dawn-demo.myshopify.com/

<a target="_blank" rel="nofollow" href="https://www.shopify.com?utm_campaign=poweredby&amp;utm_medium=shopify&amp;utm_source=onlinestore">Powered by Shopify</a>

.image-with-text__heading
sur https://theme-dawn-demo.myshopify.com/products/small-convertible-flex-bag-cappuccino

<h2 class="image-with-text__heading inline-richtext h1">
                    A new kind of bag.
                  </h2>

.image-with-text__text > p
sur https://theme-dawn-demo.myshopify.com/products/small-convertible-flex-bag-cappuccino
```
<p>Unexpected shapes with smart details, functionality, a new luxury feel with a contemporary price point.</p>
```
.footer-block__newsletter > .footer-block__heading.inline-richtext
sur https://theme-dawn-demo.myshopify.com/products/small-convertible-flex-bag-cappuccino
```
<h2 class="footer-block__heading inline-richtext">Subscribe to our emails</h2>
```
.newsletter-form__field-wrapper > .field > .field__label
sur https://theme-dawn-demo.myshopify.com/products/small-convertible-flex-bag-cappuccino
```
<label class="field__label" for="NewsletterForm--sections--15968258162777__footer">
                      Email
                    </label>
```
#FooterCountryLabel
sur https://theme-dawn-demo.myshopify.com/products/small-convertible-flex-bag-cappuccino
```
<h2 class="caption-large text-body" id="FooterCountryLabel">Country/region</h2>
```
button[aria-controls="FooterCountry-country-results"] > span
sur https://theme-dawn-demo.myshopify.com/products/small-convertible-flex-bag-cappuccino
```
<span>Canada |
      CAD
      $</span>
```
.copyright__content:nth-child(1)
sur https://theme-dawn-demo.myshopify.com/products/small-convertible-flex-bag-cappuccino
```
<small class="copyright__content">© 2026, <a href="/" title="">theme-dawn-demo</a></small>
```
a[title=""]
sur https://theme-dawn-demo.myshopify.com/products/small-convertible-flex-bag-cappuccino
```
<a href="/" title="">theme-dawn-demo</a>
```

a[rel="nofollow"]
sur https://theme-dawn-demo.myshopify.com/products/small-convertible-flex-bag-cappuccino

<a target="_blank" rel="nofollow" href="https://www.shopify.com?utm_campaign=poweredby&amp;utm_medium=shopify&amp;utm_source=onlinestore">Powered by Shopify</a>

#CardLink-template--15968257671257__product-grid-6920736931929
sur https://theme-dawn-demo.myshopify.com/collections/bags

<a href="/products/studio-denim" id="CardLink-template--15968257671257__product-grid-6920736931929" class="full-unstyled-link" aria-labelledby="CardLink-template--15968257671257__product-grid-6920736931929 Badge-template--15968257671257__product-grid-6920736931929">

.scroll-trigger--offscreen.grid__item.animate--slide-in:nth-child(9) > .card-wrapper.product-card-wrapper.underline-links-hover > .card.card--standard.card--media > .card__content > .card__information > .card-information > .price--sold-out.price > .price__container > .price__regular > .price-item--regular.price-item
sur https://theme-dawn-demo.myshopify.com/collections/bags
```
<span class="price-item price-item--regular">
          $465.00 CAD
        </span>
```

#CardLink-template--15968257671257__product-grid-6920723628121
sur https://theme-dawn-demo.myshopify.com/collections/bags

<a href="/products/hobo-m-latte" id="CardLink-template--15968257671257__product-grid-6920723628121" class="full-unstyled-link" aria-labelledby="CardLink-template--15968257671257__product-grid-6920723628121 Badge-template--15968257671257__product-grid-6920723628121">

.scroll-trigger--offscreen.grid__item.animate--slide-in:nth-child(10) > .card-wrapper.product-card-wrapper.underline-links-hover > .card.card--standard.card--media > .card__content > .card__information > .card-information > .price > .price__container > .price__regular > .price-item--regular.price-item
sur https://theme-dawn-demo.myshopify.com/collections/bags
```
<span class="price-item price-item--regular">
          $420.00 CAD
        </span>
```

#CardLink-template--15968257671257__product-grid-6920731623513
sur https://theme-dawn-demo.myshopify.com/collections/bags

<a href="/products/mini-woven-bag-latte" id="CardLink-template--15968257671257__product-grid-6920731623513" class="full-unstyled-link" aria-labelledby="CardLink-template--15968257671257__product-grid-6920731623513 Badge-template--15968257671257__product-grid-6920731623513">

.scroll-trigger--offscreen.grid__item.animate--slide-in:nth-child(11) > .card-wrapper.product-card-wrapper.underline-links-hover > .card.card--standard.card--media > .card__content > .card__information > .card-information > .price--on-sale.price > .price__container > .price__sale > span:nth-child(2) > s
sur https://theme-dawn-demo.myshopify.com/collections/bags
```
<s class="price-item price-item--regular">
            
              $375.00 CAD
            
          </s>
```
.scroll-trigger--offscreen.grid__item.animate--slide-in:nth-child(11) > .card-wrapper.product-card-wrapper.underline-links-hover > .card.card--standard.card--media > .card__content > .card__information > .card-information > .price--on-sale.price > .price__container > .price__sale > .price-item--sale.price-item--last.price-item
sur https://theme-dawn-demo.myshopify.com/collections/bags
```
<span class="price-item price-item--sale price-item--last">
        $245.00 CAD
      </span>
```

#CardLink-template--15968257671257__product-grid-6920727593049
sur https://theme-dawn-demo.myshopify.com/collections/bags

<a href="/products/small-convertible-flex-bag-cappuccino" id="CardLink-template--15968257671257__product-grid-6920727593049" class="full-unstyled-link" aria-labelledby="CardLink-template--15968257671257__product-grid-6920727593049 Badge-template--15968257671257__product-grid-6920727593049">

Grave Le focus clavier n'est pas visible sur certains éléments × 4

WCAG 2.4.7 · EN 301 549 9.2.4.7 · Règle : sa-focus-visible

Pourquoi c'est important : Les personnes qui naviguent au clavier (beaucoup de personnes avec un handicap moteur ou aveugles) doivent voir où elles se trouvent. Si un lien ou un bouton a le même aspect avec et sans focus, elles se perdent dans la page.

Comment corriger : Donnez à chaque élément interactif un style de focus net, par exemple un contour de 2 px d'une couleur contrastée. Ne supprimez jamais le contour (outline: none) sans le remplacer. En CSS : a:focus-visible, button:focus-visible { outline: 2px solid #1a56db; outline-offset: 2px; }

Sur Shopify : Modifier le code → assets/base.css (ou theme.css) : cherchez « outline: none » ou « outline: 0 » et ajoutez un style :focus-visible.

Éléments concernés (4)

a.privacy
sur https://theme-dawn-demo.myshopify.com/products/small-convertible-flex-bag-cappuccino

<a href="https://hcaptcha.com/privacy" target="_blank" class="privacy" data-sa-tab="37">Privacy</a>

a.terms
sur https://theme-dawn-demo.myshopify.com/products/small-convertible-flex-bag-cappuccino
```
<a href="https://hcaptcha.com/terms" target="_blank" class="terms" data-sa-tab="38">Terms</a>
```

a.privacy
sur https://theme-dawn-demo.myshopify.com/pages/contact-us

<a href="https://hcaptcha.com/privacy" target="_blank" class="privacy" data-sa-tab="30">Privacy</a>

a.terms
sur https://theme-dawn-demo.myshopify.com/pages/contact-us

<a href="https://hcaptcha.com/terms" target="_blank" class="terms" data-sa-tab="31">Terms</a>

Vérifications manuelles à faire ensuite (15 minutes)

Un outil automatique ne peut pas tout juger. Faites ces tests vous-même sur l'accueil, une fiche produit et la commande :

Clavier seul : débranchez la souris. Pouvez-vous atteindre chaque menu, choisir une déclinaison, ajouter au panier et aller jusqu'au paiement avec Tab, Maj+Tab, Entrée et Espace ? L'élément actif est-il toujours visiblement mis en évidence ?
Pop-ups : la pop-up newsletter ou cookies se ferme-t-elle avec Échap ou au clavier, et le focus revient-il sur la page ?
Zoom : zoomez le navigateur à 200 %. Tout reste-t-il lisible et utilisable sans défilement horizontal ?
Lecteur d'écran : activez VoiceOver (Cmd+F5 sur Mac) ou NVDA (gratuit, Windows) et écoutez une fiche produit. Le nom, le prix, les déclinaisons et le bouton « Ajouter au panier » sont-ils annoncés clairement ?
Erreurs : envoyez le formulaire de commande ou de contact vide. Les erreurs sont-elles décrites en texte (pas seulement en rouge) et placées à côté du champ ?
Médias : les vidéos produit ont-elles des sous-titres ? Quelque chose démarre-t-il seul plus de 5 secondes sans bouton pause ?

Pages analysées

Accueil https://theme-dawn-demo.myshopify.com/
Produit https://theme-dawn-demo.myshopify.com/products/small-convertible-flex-bag-cappuccino
Catégorie https://theme-dawn-demo.myshopify.com/collections/bags
Panier https://theme-dawn-demo.myshopify.com/cart
Contact https://theme-dawn-demo.myshopify.com/pages/contact-us

Tests automatisés avec axe-core 4.14 selon les WCAG 2.0/2.1/2.2 niveaux A et AA. Un test automatisé ne détecte pas tous les obstacles ; ce rapport est une aide technique, pas un avis juridique ni un certificat de conformité.