Pourquoi l’accessibilité de votre e-commerce compte

L’accessibilité web signifie que votre site peut être utilisé par tout le monde, y compris les personnes en situation de handicap : malvoyants, daltoniens, personnes utilisant le clavier uniquement, lecteurs d’écran, connexions lentes. Au Sénégal, environ 6% de la population vit avec un handicap. Mais l’accessibilité profite à tous : un site accessible est aussi un site plus rapide, mieux référencé et plus facile à utiliser sur mobile.

Les bénéfices concrets

SEO : Google valorise les sites accessibles (texte alternatif, structure sémantique, performance)
Taux de conversion : un site plus lisible et navigable convertit mieux pour TOUS les visiteurs
Mobile : les bonnes pratiques d’accessibilité améliorent l’expérience mobile (75-85% du trafic au Sénégal)
Conformité : les normes WCAG 2.1 deviennent progressivement obligatoires dans de nombreux pays
Image de marque : montrer que vous incluez tout le monde renforce la confiance

Les bases de l’accessibilité e-commerce

1. Structure sémantique du HTML

Utilisez les bonnes balises HTML pour donner du sens à votre contenu. Les lecteurs d’écran (NVDA, VoiceOver, JAWS) s’appuient sur la structure HTML pour naviguer.

<!-- MAUVAIS : tout en div sans sémantique -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="product">...</div>
</div>

<!-- BON : balises sémantiques -->
<header rôle="banner">
  <nav rôle="navigation" aria-label="Menu principal">...</nav>
</header>
<main rôle="main">
  <article class="product">
    <h1>Nom du produit</h1>
    <p>Description...</p>
    <button type="button">Ajouter au panier</button>
  </article>
</main>
<footer rôle="contentinfo">...</footer>

2. Images et texte alternatif

Chaque image de produit doit avoir un attribut alt descriptif. C’est essentiel pour les lecteurs d’écran ET pour le SEO.

<!-- MAUVAIS -->
<img src="robe.jpg">
<img src="robe.jpg" alt="">
<img src="robe.jpg" alt="image">

<!-- BON -->
<img src="robe.jpg" alt="Robe wax africaine motif Ankara, bleu et jaune, taille M">

<!-- Pour les images décoratives (qui n'ajoutent pas d'information) -->
<img src="decoration.jpg" alt="" rôle="présentation">

<!-- WooCommerce : le champ "Texte alternatif"
   dans la Bibliothèque de médias est votre alt.
   Remplissez-le pour CHAQUE image de produit. -->

3. Contraste des couleurs

Le texte doit être suffisamment contrasté par rapport à son fond pour être lisible, y compris par les daltoniens et les personnes malvoyantes.

/* Ratios de contraste WCAG 2.1 :
   AA (minimum) : 4.5:1 pour le texte normal, 3:1 pour le grand texte
   AAA (idéal) : 7:1 pour le texte normal

   Exemples de bonnes combinaisons : */
.texte-principal {
    color: #1a1a1a;           /* Quasi-noir sur blanc : ratio 16:1 */
    background: #ffffff;
}

.texte-secondaire {
    color: #4a4a4a;           /* Gris foncé sur blanc : ratio 7.4:1 */
    background: #ffffff;
}

.bouton-cta {
    color: #ffffff;           /* Blanc sur bleu : ratio 7.3:1 */
    background: #1d4ed8;
}

/* MAUVAIS : gris clair sur blanc (ratio 2.5:1) */
.texte-illisible {
    color: #aaaaaa;
    background: #ffffff;      /* Insuffisant ! */
}

/* Outil de test : webaim.org/resources/contrastchecker */

4. Navigation au clavier

Tous les éléments interactifs doivent être accessibles et utilisables au clavier (touche Tab pour naviguer, Enter pour activer).

/* Focus visible sur tous les éléments interactifs */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}

/* NE JAMAIS supprimer le outline sans alternative ! */
/* MAUVAIS : */
*:focus { outline: none; }  /* Les utilisateurs clavier ne voient plus où ils sont */

/* BON : style personnalisé qui reste visible */
a:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Skip link : lien pour sauter au contenu principal */

<!-- Ajouter en tout premier dans le body -->
<a href="#main-content" class="skip-link">
  Aller au contenu principal
</a>

<style>
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 10px 20px;
    background: #1d4ed8;
    color: #fff;
    font-weight: bold;
}
.skip-link:focus {
    left: 10px;
    top: 10px;
}
</style>

<main id="main-content">
  <!-- Votre contenu -->
</main>

5. Formulaires accessibles

<!-- MAUVAIS : champ sans label -->
<input type="email" placeholder="Votre email">

<!-- BON : label explicite lié au champ -->
<label for="email">Adresse email</label>
<input type="email" id="email" name="email"
       placeholder="exemple@email.com"
       required
       aria-describedby="email-help">
<span id="email-help">Nous ne partagerons jamais votre email.</span>

<!-- Erreurs de validation accessibles -->
<input type="email" id="email" 
       aria-invalid="true"
       aria-describedby="email-error">
<span id="email-error" rôle="alert" style="color:#dc2626;">
  Veuillez entrer une adresse email valide.
</span>

Accessibilité spécifique e-commerce

Fiches produits accessibles

Texte alt descriptif sur chaque photo produit
Prix clairement lisible (taille minimum 16px, bon contraste)
Sélecteurs de taille/couleur utilisables au clavier
Bouton « Ajouter au panier » bien visible et avec un texte explicite (pas juste une icône)
Avis clients lisibles par les lecteurs d’écran

Panier et checkout accessible

Panier mis à jour avec un message aria-live pour annoncer les changements
Formulaire de commande avec labels clairs sur tous les champs
Étapes de commande numérotées et avec indication de progression
Messages d’erreur clairs et associés au champ concerné
Bouton de confirmation bien identifié

<!-- Notification panier accessible -->
<div aria-live="polite" aria-atomic="true" class="sr-only">
  Produit ajouté au panier. Total : 3 articles.
</div>

<!-- Progression checkout -->
<nav aria-label="Étapes de commande">
  <ol>
    <li aria-current="step">1. Coordonnées</li>
    <li>2. Livraison</li>
    <li>3. Paiement</li>
    <li>4. Confirmation</li>
  </ol>
</nav>

<style>
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}
</style>

Accessibilité mobile (priorité Sénégal)

Avec 75-85% du trafic sur mobile au Sénégal, l’accessibilité mobile est prioritaire :

Taille des boutons : minimum 44×44 pixels (taille recommandée pour les doigts)
Espacement : au moins 8px entre les éléments cliquables
Texte : minimum 16px pour le corps de texte (pas de zoom nécessaire)
Zoom : ne jamais bloquer le zoom utilisateur (user-scalable=yes)
Orientation : le site doit fonctionner en portrait ET paysage

<!-- BON : viewport qui permet le zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- MAUVAIS : bloque le zoom (inaccessible !) -->
<meta name="viewport" content="width=device-width, initial-scale=1, 
      maximum-scale=1, user-scalable=no">

Connexions lentes (3G)

L’inclusivité au Sénégal passe aussi par l’adaptation aux connexions lentes. Un site qui charge en 15 secondes sur 3G exclut une grande partie de votre audience.

Images compressées en WebP (ShortPixel)
Lazy loading natif pour les images
CSS et JS minifiés et différés
CDN Cloudflare (gratuit)
Objectif : moins de 3 secondes de chargement sur 3G
Tester avec Chrome DevTools > Network > Slow 3G

Tester l’accessibilité de votre site

Outils gratuits

WAVE (wave.webaim.org) : extension Chrome qui analyse les erreurs d’accessibilité de chaque page
Lighthouse (Chrome DevTools) : F12 > Lighthouse > Accessibilité. Score sur 100
axe DevTools : extension Chrome par Deque, scan détaillé avec recommandations
Contrast Checker (webaim.org) : vérifier les ratios de contraste

Tests manuels essentiels

Naviguer sur tout le site avec uniquement le clavier (Tab, Enter, Espace)
Utiliser un lecteur d’écran (NVDA gratuit sur Windows, VoiceOver sur Mac/iPhone)
Tester avec le zoom navigateur à 200%
Tester en niveaux de gris (simuler le daltonisme)
Tester sur mobile avec une connexion 3G

Checklist accessibilité e-commerce

Texte alt sur toutes les images de produits
Contraste suffisant (ratio minimum 4.5:1)
Navigation au clavier fonctionnelle sur tout le site
Focus visible sur tous les éléments interactifs
Labels sur tous les champs de formulaire
Messages d’erreur clairs et accessibles
Skip link vers le contenu principal
Structure de titres logique (h1, h2, h3 sans sauter de niveaux)
Boutons et liens avec texte descriptif (pas de « cliquez ici »)
Viewport qui permet le zoom
Score Lighthouse Accessibilité supérieur à 90
Site fonctionnel sur connexion 3G

Comment créer un site e-commerce accessible et inclusif

Pourquoi l’accessibilité de votre e-commerce compte

Les bénéfices concrets

Les bases de l’accessibilité e-commerce

1. Structure sémantique du HTML

2. Images et texte alternatif

3. Contraste des couleurs

4. Navigation au clavier

5. Formulaires accessibles

Accessibilité spécifique e-commerce

Fiches produits accessibles

Panier et checkout accessible

Accessibilité mobile (priorité Sénégal)

Connexions lentes (3G)

Tester l’accessibilité de votre site

Outils gratuits

Tests manuels essentiels

Checklist accessibilité e-commerce

Confiez-nous la Création de Votre Site Web

Pourquoi l’accessibilité de votre e-commerce compte

Les bénéfices concrets

Les bases de l’accessibilité e-commerce

1. Structure sémantique du HTML

2. Images et texte alternatif

3. Contraste des couleurs

4. Navigation au clavier

5. Formulaires accessibles

Accessibilité spécifique e-commerce

Fiches produits accessibles

Panier et checkout accessible

Accessibilité mobile (priorité Sénégal)

Connexions lentes (3G)

Tester l’accessibilité de votre site

Outils gratuits

Tests manuels essentiels

Checklist accessibilité e-commerce

Confiez-nous la Création de Votre Site Web

Articles Similaires

Comment lancer un abonnement box au Sénégal

Guide complet : La logistique du dernier kilomètre à Dakar

Guide : Le m-commerce — optimiser pour l’achat sur mobile