Aller au contenu
TDS

Principes WCAG

Accessibilité — Principes WCAG 2.1 AA

Les services numériques de l’État du Tchad doivent être accessibles à tous les citoyens, indépendamment de leurs capacités visuelles, motrices, auditives ou cognitives.

TDS implémente WCAG 2.1 niveau AA par défaut.

Les 4 principes POUR

P — Perceptible

L’information doit être présentable de manière perceptible par tous.

Règles clés :

  • Tout contenu non-textuel (images, icônes) a un texte alternatif alt
  • Les vidéos ont des sous-titres
  • Le contenu ne dépend pas d’une couleur seule pour transmettre une information
  • Le texte peut être agrandi jusqu’à 200% sans perte de contenu
  • Le contraste texte/fond est ≥ 4.5:1 (normal) ou ≥ 3:1 (grand texte ≥ 18px bold)

Dans TDS :

<!-- Icône avec texte alternatif -->
<img src="/icons/info.svg" alt="Information" width="16" height="16">


<!-- Icône décorative — masquée pour les AT -->
<svg aria-hidden="true" focusable="false">...</svg>


<!-- Erreur — couleur + icône + texte (pas seulement la couleur rouge) -->
<p class="tds-error-text" role="alert">
  <svg aria-hidden="true">...</svg> <!-- Icône d'erreur -->
  Ce champ est requis.
</p>

O — Opérable

Les composants d’interface doivent être utilisables.

Règles clés :

  • Toute fonctionnalité est accessible au clavier (pas de souris obligatoire)
  • Le focus est visible en permanence
  • Pas de délai de session trop court sans avertissement
  • Les contenus en mouvement peuvent être mis en pause
  • Les utilisateurs ont assez de temps pour compléter les actions

Dans TDS :

/* Focus obligatoire — jamais supprimer outline sans alternative */
:focus-visible {
  outline: 2px solid var(--tds-color-blue-500);
  outline-offset: 3px;
}


/* INTERDIT en production TDS */
*:focus { outline: none; } /* ← supprime le focus pour tous les utilisateurs */

C — Compréhensible

L’information et le fonctionnement de l’interface doivent être compréhensibles.

Règles clés :

  • La langue de la page est définie (lang="fr")
  • Les messages d’erreur expliquent comment corriger le problème
  • Les formulaires ont des labels clairs
  • La navigation est cohérente entre les pages

Dans TDS :

<!-- Langue déclarée -->
<html lang="fr">


<!-- Message d'erreur actionnable -->
<p role="alert">
  <!-- ✅ Explique le problème ET la correction -->
  L'adresse e-mail doit contenir un symbole @ suivi d'un nom de domaine.
  Exemple valide : contact@ministere.td
</p>


<!-- ❌ Message vague à éviter -->
<p role="alert">Erreur de saisie.</p>

R — Robuste

Le contenu doit être suffisamment robuste pour être interprété par les technologies d’assistance.

Règles clés :

  • Le HTML est valide et bien formé
  • Les éléments interactifs ont des rôles, états et propriétés ARIA corrects
  • Les mises à jour dynamiques sont annoncées via des live regions

Dans TDS :

<!-- Rôles ARIA corrects -->
<button type="button" aria-pressed="false">Filtrer</button>
<input type="checkbox" role="switch" aria-checked="false">


<!-- Live region pour les messages dynamiques -->
<div role="status" aria-live="polite" aria-atomic="true">
  <!-- Les messages injectés ici sont annoncés aux lecteurs d'écran -->
</div>


<div role="alert" aria-live="assertive">
  <!-- Pour les erreurs critiques nécessitant attention immédiate -->
</div>

Critères AA essentiels pour TDS

CritèreNiveauDescription
1.1.1 Contenu non textuelAAlt text pour images et icônes
1.3.1 Information et relationsAStructure HTML sémantique
1.3.3 Caractéristiques sensoriellesANe pas utiliser uniquement la couleur
1.4.1 Utilisation de la couleurACouleur + autre indicateur pour les états
1.4.3 Contraste (minimum)AA≥ 4.5:1 texte normal, ≥ 3:1 grand texte
1.4.4 Redimensionnement du texteAAZoom 200% sans perte de fonctionnalité
1.4.10 ReflowAAPas de défilement horizontal à 320px
1.4.11 Contraste des composantsAA≥ 3:1 pour les éléments UI
2.1.1 ClavierATout accessible au clavier
2.4.3 Ordre du focusAFocus cohérent et logique
2.4.7 Focus visibleAAFocus toujours visible
3.1.1 Langue de la pageAlang déclaré
3.2.2 À la saisieAPas de changement inattendu au focus
3.3.1 Identification des erreursAErreurs identifiées et décrites
3.3.2 Étiquettes ou instructionsALabels explicites
4.1.2 Nom, rôle, valeurAARIA correct sur tous les composants
4.1.3 Messages de statutAAAnnonces via live regions

Tester l’accessibilité

Outils automatiques (première étape)

Fenêtre de terminal
# axe-core en ligne de commande
npx axe https://mon-service.td


# Lighthouse accessibility audit
npx lighthouse https://mon-service.td --only-categories=accessibility

Test clavier manuel (obligatoire)

  1. Tab — naviguer entre les éléments focusables
  2. Shift + Tab — naviguer en sens inverse
  3. Enter / Espace — activer boutons et checkboxes
  4. Flèches — naviguer dans les groupes radio et menus
  5. Escape — fermer modales et popups

Vérifier que :

  • Le focus ne “disparaît” jamais
  • L’ordre du focus est logique (haut → bas, gauche → droite)
  • Les modales piègent le focus à l’intérieur pendant qu’elles sont ouvertes

Lecteur d’écran (test recommandé)

  • Windows : NVDA (gratuit) + Firefox
  • macOS : VoiceOver intégré + Safari
  • iOS : VoiceOver intégré
  • Android : TalkBack intégré

Ratios de contraste TDS

UtilisationCouleur texteCouleur fondRatioStandard
Corps de texteneutral.800neutral.014.2:1✅ AAA
Texte secondaireneutral.600neutral.07.5:1✅ AAA
Bouton primaryblancblue.5008.59:1✅ AAA
Bouton dangerblancred.5005.1:1✅ AA
Bouton successblancgreen.5007.2:1✅ AA
Erreurred.700red.507.2:1✅ AA
Avertissementneutral.900yellow.5016.4:1✅ AAA
Placeholderneutral.500neutral.04.6:1✅ AA