En France, le RGAA 4.1 impose 95 % de conformité aux sites publics. Au Sénégal, la loi 2024-13 sur l'accessibilité numérique des services publics est entrée en vigueur en juin 2024. La Côte d'Ivoire prépare son équivalent. Pour une administration qui refait son site en 2026, c'est non négociable.

TL;DR

- WCAG 2.2 niveau AA + RGAA = équivalents pratiques.

- Top 10 critères qui couvrent 80 % des problèmes : alt images, contraste, focus visible, navigation clavier, labels formulaires, structure heading, langue, sous-titres, ARIA approprié, redimensionnement texte.

- Tests : combiner axe-core (CI) + Wave (manuel) + audit utilisateur en situation de handicap.

Pourquoi l'accessibilité

Au-delà de la conformité légale, l'accessibilité touche :

• 15 % de la population mondiale en situation de handicap (OMS)
• 70 % des cas d'usage temporaires (mains occupées, bruit, fatigue)
• 100 % des situations 3G/lents (la performance est une accessibilité)
• SEO Google priorise accessibilité

Un site institutionnel qui exclut 15 % de ses citoyens viole sa mission.

Top 10 critères qui couvrent 80 % des problèmes

1. Alternatives textuelles (critère 1.1.1)

Toute image fonctionnelle doit avoir un alt :

`html

`

2. Contraste (critère 1.4.3)

Texte normal : ratio ≥ 4,5:1 (AA), ≥ 7:1 (AAA).

Texte large (18px bold ou 24px) : ratio ≥ 3:1.

`css

/* BAD: ratio 2.5:1 */

.warning { color: #ff9999; background: #fff; }

/* GOOD: ratio 4.6:1 */

.warning { color: #d32f2f; background: #fff; }

`

Outils : Contrast Checker WebAIM, Stark Figma plugin.

3. Focus visible (critère 2.4.7)

Tout élément focusable doit avoir un focus visible :

`css

/* BAD: focus invisible */

*:focus { outline: none; }

/* GOOD: focus contrasté */

*:focus-visible {

outline: 3px solid #1976d2;

outline-offset: 2px;

}

`

4. Navigation clavier (critère 2.1.1)

Toute interaction souris doit être faisable au clavier. Tab pour naviguer, Enter/Space pour activer, Esc pour fermer modal.

`tsx

// Modal accessible avec gestion focus

'use client';

import { useEffect, useRef } from 'react';

export function Modal({ isOpen, onClose, children }) {

const ref = useRef(null);

useEffect(() => {

if (isOpen) {

ref.current?.focus();

const onKey = (e: KeyboardEvent) => {

if (e.key === 'Escape') onClose();

};

document.addEventListener('keydown', onKey);

return () => document.removeEventListener('keydown', onKey);

}

}, [isOpen, onClose]);

if (!isOpen) return null;

return (

);

}

`

5. Labels formulaires (critère 3.3.2)

Tout champ doit avoir un label associé :

`html

Nom complet

Téléphone

aria-describedby="phone-help">

Format : +221 XX XXX XX XX

`

6. Structure heading (critère 1.3.1)

Hiérarchie h1 → h2 → h3 sans saut. Un seul h1 par page.

`html

Ministère de la Santé

Programmes

Ministère de la Santé

Programmes nationaux

Programme paludisme

Programme tuberculose

Actualités

`

7. Attribut lang (critère 3.1.1)

`html

Comme on dit en wolof : jamm rekk

`

8. Sous-titres vidéo (critère 1.2.2)

Toutes les vidéos avec parole doivent avoir des sous-titres synchronisés. Outils : Whisper (auto), puis correction manuelle.

`html

`

9. ARIA approprié (critère 4.1.2)

Utiliser ARIA seulement si HTML natif insuffisant.

`html

Submit

`

10. Redimensionnement texte (critère 1.4.4)

Le texte doit pouvoir grossir 200 % sans perte de fonctionnalité.

`css

/* BAD: tailles en px figées partout */

body { font-size: 14px; }

/* GOOD: tailles en rem, root configurable */

:root { font-size: 100%; } /* 16px par défaut */

body { font-size: 1rem; line-height: 1.5; }

`

Tests automatisés (CI)

`ts

// e2e/accessibility.spec.ts

import { test, expect } from '@playwright/test';

import AxeBuilder from '@axe-core/playwright';

const PAGES = ['/', '/services', '/actualites', '/contact'];

PAGES.forEach(pathname => {

test(A11y: ${pathname}, async ({ page }) => {

await page.goto(pathname);

const { violations } = await new AxeBuilder({ page })

.withTags(['wcag2aa', 'wcag22aa'])

.analyze();

expect(violations).toEqual([]);

});

});

`

À intégrer dans GitHub Actions / GitLab CI. Échoue le PR si violations détectées.

Tests manuels essentiels

axe-core détecte ~30-40 % des problèmes seulement. À compléter par :

• Test clavier seul : débrancher la souris, faire un parcours d'achat ou demande de service entier.
• Test lecteur d'écran : NVDA (Windows, gratuit), VoiceOver (Mac/iOS), TalkBack (Android).
• Test agrandissement : passer à 200 %, vérifier qu'aucun contenu n'est tronqué.
• Test mode haut contraste Windows.
• Audit utilisateur en situation de handicap : 1 personne aveugle + 1 personne malvoyante + 1 personne sourde + 1 personne avec déficience cognitive. Tester sur des tâches réelles. ~150-300K FCFA pour 1 journée.

Déclaration d'accessibilité

Page /declaration-accessibilite obligatoire RGAA contenant :

`

État de conformité : non-conforme / partiellement conforme / conforme

Résultat des tests (date audit + auditeur)

Schéma pluriannuel d'accessibilité (3 ans)

Plan d'action annuel

Contact pour signaler une difficulté

Recours : autorité de contrôle

`

Cas réel — site mairie Dakar (avant/après)

Avant audit (juin 2025) :

• 47 % de conformité WCAG 2.1 AA
• 312 erreurs détectées (axe-core)
• Plaintes citoyens : "impossible naviguer au clavier"

Après remédiation (3 mois, 8M FCFA) :

• 96 % de conformité WCAG 2.2 AA
• 8 erreurs résiduelles (toutes documentées)
• Trafic +21 % (SEO boost) + plaintes accessibilité réduites à 0

FAQ

Q : Faut-il être conforme à 100 % ?

R : RGAA exige 95 %, WCAG vise 100 % théoriquement. La déclaration d'accessibilité documente les écarts résiduels et le plan d'action.

Q : Sites privés concernés ?

R : Au Sénégal, loi 2024-13 cible le secteur public + entités > certaine taille (à préciser dans décrets d'application). Bonnes pratiques recommandées partout.

Q : Combien coûte la mise en conformité ?

R : Sur un site existant : 5-15M FCFA selon état initial. Sur un nouveau site bien conçu : surcoût marginal (~10 % du budget total).

Conclusion

L'accessibilité n'est ni un bonus ni un coût supplémentaire — c'est une caractéristique fondamentale d'un site institutionnel propre. Elle améliore le SEO, l'image, la performance, l'usabilité pour TOUS les utilisateurs. Sa pénalité légale grandit chaque année. La meilleure stratégie : l'intégrer dès le design, pas à la fin.