Au Sénégal, plus de 15% de la population vit avec une forme de handicap. Mais l’accessibilité web va bien au-delà : connexions lentes en zone rurale, smartphones d’entrée de gamme (Tecno, Itel), alphabétisation digitale variable, utilisation en plein soleil. Un site accessible est un site qui fonctionne pour tout le monde — pas seulement pour les utilisateurs avec le dernier iPhone et la fibre optique.

Les 4 principes WCAG fondamentaux

1. Perceptible — le contenu doit être perçu par tous

<!-- MAUVAIS : image sans alternative -->
<img src="formation-dakar.jpg">

<!-- BON : description pour les lecteurs d'écran -->
<img src="formation-dakar.jpg"
     alt="Salle de formation ITSkillsCenter avec 15 apprenants sur laptops">

<!-- Image décorative : alt vide -->
<img src="bordure.svg" alt="" rôle="présentation">

2. Utilisable — tout au clavier

Chaque fonctionnalité accessible à la souris doit aussi fonctionner au clavier. Testez en 2 minutes : appuyez sur Tab pour naviguer, Entrée pour activer, Échap pour fermer. Si vous êtes bloqué quelque part, votre site n’est pas accessible.

/* Focus visible — OBLIGATOIRE */
:focus-visible {
  outline: 3px solid #1a56db;
  outline-offset: 2px;
}

/* JAMAIS ça — supprime l'indicateur de focus */
/* :focus { outline: none; } ← INTERDIT */

/* Lien d'évitement pour le clavier */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  padding: 8px 16px;
  background: #1a56db;
  color: white;
  z-index: 1000;
}

.skip-link:focus {
  top: 16px; /* Apparaît quand l'utilisateur appuie sur Tab */
}

3. Compréhensible — langage clair

<!-- Déclarer la langue -->
<html lang="fr">

<!-- Section en wolof -->
<p lang="wo">Dalal ak jaam. Baal ma, man meesuma degg fransee.</p>

<!-- MAUVAIS : jargon technique -->
<p>Veuillez instancier votre authentification via le portail SSO.</p>

<!-- BON : langage clair -->
<p>Connectez-vous avec votre email et mot de passe.</p>

4. Robuste — HTML sémantique

<!-- MAUVAIS : div soup -->
<div class="header">
  <div class="nav">
    <div class="link" onclick="...">Accueil</div>
  </div>
</div>

<!-- BON : HTML sémantique -->
<header>
  <nav aria-label="Navigation principale">
    <a href="/">Accueil</a>
  </nav>
</header>
<main>
  <article>
    <h1>Titre de l'article</h1>
    <section>...</section>
  </article>
</main>
<footer>...</footer>

Contraste des couleurs : visible par tous

Au Sénégal, beaucoup d’utilisateurs consultent leur téléphone en plein soleil au marché Sandaga ou dans les cars rapides. Un contraste insuffisant est invisible dans ces conditions.

Niveau AA (minimum) — Ratio 4.5:1 pour le texte normal, 3:1 pour le texte large (18px bold ou 24px)
Niveau AAA (optimal) — Ratio 7:1 pour le texte normal, 4.5:1 pour le texte large

/* MAUVAIS : ratio 2.4:1 — illisible */
.text-faible { color: #999; background: #fff; }

/* BON : ratio 7.4:1 — excellent */
.text-fort { color: #333; background: #fff; }

/* BON : ratio 8.6:1 */
.text-primary { color: #1a56db; background: #fff; }

/* Vérifier avec les couleurs du drapeau sénégalais */
/* Vert #00853F sur rouge #EF3340 = ratio 2.1:1 ← ILLISIBLE */
/* Vert #00853F sur blanc = ratio 4.6:1 ← OK pour AA */

Outils de vérification : WebAIM Contrast Checker (gratuit en ligne), Chrome DevTools (onglet Éléments → couleur → ratio affiché), Stark (plugin Figma), Colour Contrast Analyser (app desktop).

Navigation clavier et lecteurs d’écran

ARIA : quand le HTML ne suffit pas

<!-- aria-label : nommer un élément sans texte visible -->
<button aria-label="Fermer la fenêtre">
  <svg>...icône X...</svg>
</button>

<!-- aria-describedby : lier une description -->
<input type="tel" aria-describedby="tel-help"
       placeholder="+221 7X XXX XX XX">
<p id="tel-help">Format : +221 suivi de 9 chiffres</p>

<!-- aria-live : annoncer les changements dynamiques -->
<div aria-live="polite" id="notification">
  <!-- Le lecteur d'écran annoncera : -->
  Paiement Wave reçu : 25 000 FCFA
</div>

<!-- aria-expanded : état d'un menu déroulant -->
<button aria-expanded="false" aria-controls="menu">
  Menu ☰
</button>
<nav id="menu" hidden>...</nav>

Règle d’or ARIA : N’utilisez ARIA que si le HTML sémantique ne suffit pas. Un <button> est toujours mieux qu’un <div rôle="button">.

Formulaires accessibles

<form>
  <!-- Labels toujours liés aux inputs -->
  <div class="form-group">
    <label for="nom">Nom complet</label>
    <input type="text" id="nom" name="nom"
           autocomplete="name" required
           aria-describedby="nom-aide">
    <p id="nom-aide" class="aide">Prénom et nom de famille</p>
  </div>

  <!-- Téléphone sénégalais -->
  <div class="form-group">
    <label for="tel">Téléphone</label>
    <input type="tel" id="tel" name="tel"
           inputmode="tel"
           pattern="(+221)?[0-9]{9}"
           placeholder="+221 77 123 45 67"
           autocomplete="tel">
  </div>

  <!-- Mode de paiement avec fieldset -->
  <fieldset>
    <legend>Mode de paiement</legend>
    <label>
      <input type="radio" name="paiement" value="wave">
      Wave
    </label>
    <label>
      <input type="radio" name="paiement" value="om">
      Orange Money
    </label>
    <label>
      <input type="radio" name="paiement" value="carte">
      Carte bancaire
    </label>
  </fieldset>

  <!-- Messages d'erreur accessibles -->
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email"
           aria-invalid="true"
           aria-describedby="email-erreur">
    <p id="email-erreur" rôle="alert" class="erreur">
      Veuillez entrer une adresse email valide (ex: nom@exemple.com)
    </p>
  </div>

  <!-- Bouton avec texte d'action clair -->
  <button type="submit">Créer mon compte</button>
  <!-- PAS "Envoyer" ou "Submit" -->
</form>

Design inclusif au-delà du handicap : les réalités sénégalaises

Connexions lentes et données limitées

<!-- Images responsives pour économiser la data -->
<img srcset="photo-400.webp 400w,
             photo-800.webp 800w,
             photo-1200.webp 1200w"
     sizes="(max-width: 600px) 100vw, 800px"
     src="photo-800.webp"
     alt="Formation développement web"
     loading="lazy">

<!-- Budget performance : max 500 Ko par page -->
<!-- Sur une connexion 3G à Tambacounda :
     500 Ko = 2 secondes
     3 Mo = 12 secondes (l'utilisateur est déjà parti) -->

Appareils d’entrée de gamme

Réduire le JavaScript — Un Tecno Spark avec 2 Go de RAM peine avec les frameworks JS lourds. Préférez le rendu serveur (SSR) et le HTML/CSS natif
Éviter les animations lourdes — Les animations CSS sont accélérées par le GPU, mais les animations JavaScript (canvas, particles) font planter les appareils bas de gamme
Tester sur de vrais appareils — Chrome DevTools permet de simuler un CPU 4x plus lent (Performance → CPU throttling). Testez systématiquement

Alphabétisation digitale

Icônes + texte — Ne jamais utiliser une icône seule sans label textuel. Un hamburger menu (☰) n’est pas universel
Actions explicites — « Cliquez ici » ne dit rien. « Télécharger le PDF de la formation » est clair
Confirmation visuelle — Après chaque action (paiement, inscription), affichez un message de confirmation clair avec un ✓

Mode hors-ligne avec Service Worker

// Service Worker basique pour le cache offline
// Utile pour les zones à connexion intermittente

// sw.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) =>
      cache.addAll([
        '/',
        '/style.css',
        '/app.js',
        '/offline.html'
      ])
    )
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => response || fetch(event.request))
      .catch(() => caches.match('/offline.html'))
  );
});

Outils d’audit accessibilité

Lighthouse (gratuit) — Intégré à Chrome DevTools. Score d’accessibilité sur 100 avec recommandations détaillées. Lancez-le sur chaque page
axe DevTools (gratuit) — Extension Chrome par Deque. Détecte les problèmes WCAG avec des explications claires et du code correctif. S’intègre à Playwright et Cypress pour les tests automatisés
WAVE (gratuit) — Extension Chrome qui superpose les erreurs directement sur la page. Visuel et intuitif
Microsoft Clarity (gratuit) — Heatmaps et enregistrements de sessions. Voyez comment les vrais utilisateurs interagissent avec votre site

6 tests manuels indispensables

Test clavier — Naviguer uniquement au Tab/Entrée/Échap pendant 5 minutes
Test zoom — Zoomer à 200%. Le contenu reste-t-il utilisable ?
Test sans images — Désactiver les images. L’information est-elle toujours accessible via les alt texts ?
Test sans couleur — Passer en niveaux de gris. L’information transmise par la couleur est-elle aussi transmise autrement ?
Test mobile réel — Tester sur un smartphone Android d’entrée de gamme, pas sur un iPhone dernier cri
Test connexion lente — Chrome DevTools → Network → Slow 3G. Votre site est-il utilisable ?

Checklist accessibilité rapide

☐ Chaque image a un attribut alt pertinent (ou alt= » » si décorative)
☐ Contraste texte/fond ≥ 4.5:1 (vérifier avec WebAIM)
☐ Navigation complète au clavier possible
☐ Focus visible sur tous les éléments interactifs
☐ Formulaires avec labels liés, messages d’erreur clairs
☐ HTML sémantique (header, nav, main, footer, h1-h6)
☐ Langue déclarée (<html lang="fr">)
☐ Vidéos sous-titrées
☐ Page utilisable à 200% de zoom
☐ Poids page < 500 Ko pour les connexions sénégalaises
☐ Score Lighthouse Accessibility > 90

Le business case de l’accessibilité

Marché élargi — 15% de la population + utilisateurs en conditions difficiles (soleil, bruit, une seule main libre) = potentiellement 30-40% de votre audience bénéficie de l’accessibilité
SEO amélioré — Google valorise le HTML sémantique, les alt texts, la vitesse de chargement et l’expérience mobile — tous des critères d’accessibilité
Meilleure qualité de code — Un code accessible est un code propre, maintenable et testable
Conformité légale — La loi sénégalaise 2010-15 et la CDPH s’appliquent. Les marchés publics et les organismes internationaux exigent de plus en plus la conformité WCAG
Impact concret — Un site e-commerce accessible qui passe de 60 à 95 en score Lighthouse gagne en moyenne 15-25% de conversions supplémentaires

L’accessibilité n’est pas un bonus ou une option de luxe — c’est une compétence fondamentale du développement web professionnel. Au Sénégal, où les conditions d’utilisation sont souvent difficiles (connexion lente, écran en plein soleil, appareil limité), concevoir accessible n’est pas un choix éthique : c’est une nécessité business. Commencez par les 6 tests manuels ci-dessus sur votre site actuel, corrigez les problèmes les plus critiques, et intégrez l’accessibilité dans votre workflow dès le design.

Guide : Le design inclusif — au-delà de l’accessibilité