Les 4 types d'accessibilité web : visuelle, auditive, motrice et cognitive

L'accessibilité web vise à rendre les contenus et services numériques utilisables par tous, indépendamment des capacités de chacun. Pour y parvenir, il est essentiel de comprendre les différents types de handicaps et leurs besoins spécifiques. Le RGAA et les WCAG structurent leurs critères autour de ces quatre grandes catégories d'accessibilité.

Accessibilité visuelle

Les handicaps visuels regroupent un large spectre de situations, de la cécité complète aux troubles de la perception des couleurs.

Types de handicaps visuels

• Cécité : Absence totale de vision
• Malvoyance : Vision partielle ou réduite
• Daltonisme : Difficulté à distinguer certaines couleurs
• Sensibilité à la lumière : Photophobie, besoin de contraste inversé
• Vision tunnel : Champ de vision réduit

Technologies d'assistance utilisées

Les personnes avec un handicap visuel utilisent principalement :

• Lecteurs d'écran : NVDA, JAWS, VoiceOver, TalkBack
• Loupes d'écran : ZoomText, loupe Windows/macOS
• Plages braille : Affichage tactile du contenu
• Mode haut contraste : Inversion des couleurs

Bonnes pratiques pour l'accessibilité visuelle

Alternatives textuelles (RGAA 1.x)

Chaque image porteuse d'information doit avoir un texte alternatif pertinent :

<!-- Image informative -->
<img src="graphique-ventes.png"
     alt="Graphique montrant une hausse de 25% des ventes en 2025">

<!-- Image decorative -->
<img src="decoration.png" alt="" role="presentation">

Contraste suffisant (RGAA 3.x)

Le ratio de contraste minimum est de :

• 4.5:1 pour le texte standard
• 3:1 pour le texte agrandi (18pt+ ou 14pt gras)
• 3:1 pour les éléments graphiques essentiels

Utilisez notre vérificateur de contraste pour valider vos couleurs.

Structure sémantique (RGAA 9.x)

Une hiérarchie de titres correcte permet la navigation via lecteur d'écran :

<h1>Titre principal unique</h1>
  <h2>Section principale</h2>
    <h3>Sous-section</h3>
  <h2>Autre section principale</h2>

Ne pas se fier uniquement à la couleur (RGAA 3.1)

L'information doit être transmise par d'autres moyens que la couleur seule :

<!-- Mauvais : seule la couleur rouge indique l'erreur -->
<span class="text-red">Email invalide</span>

<!-- Bon : icône + couleur + texte explicite -->
<span class="text-red">
  <svg aria-hidden="true"><!-- icône erreur --></svg>
  Erreur : L'adresse email est invalide
</span>

[!TIP] Testez votre site en niveaux de gris pour vérifier que l'information reste compréhensible sans les couleurs.

Accessibilité auditive

Les handicaps auditifs vont de la surdité complète à la perte auditive partielle.

Types de handicaps auditifs

• Surdité profonde : Absence de perception sonore
• Malentendance : Audition réduite nécessitant des aides
• Surdité unilatérale : Un seul côté affecté

Technologies d'assistance utilisées

• Appareils auditifs compatibles avec les dispositifs
• Sous-titres et transcriptions
• Interprétation en langue des signes (vidéo)
• Alertes visuelles remplaçant les signaux sonores

Bonnes pratiques pour l'accessibilité auditive

Sous-titres pour les vidéos (RGAA 4.1)

Toute vidéo avec audio doit proposer des sous-titres synchronisés :

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track
    kind="subtitles"
    src="sous-titres-fr.vtt"
    srclang="fr"
    label="français"
    default
  >
</video>

Transcriptions pour l'audio (RGAA 4.1)

Les podcasts et contenus audio nécessitent une transcription textuelle complète.

Alternatives aux signaux sonores

Si votre interface utilise des sons pour des alertes :

// Notification sonore + visuelle
function notifier(message) {
  // Son
  playSound('notification.mp3');

  // Visuel
  afficherToast(message);

  // Lecteur d'écran
  announcer.textContent = message;
}

[!NOTE] Le RGAA critère 4.1 exige des alternatives textuelles pour tout contenu audio préenregistré porteur d'information.

Accessibilité motrice

Les handicaps moteurs affectent la capacité à utiliser une souris ou un clavier de manière standard.

Types de handicaps moteurs

• Paralysie : Partielle ou complète de membres
• Tremblements : Maladie de Parkinson, tremblements essentiels
• Amplitude limitée : Arthrite, troubles musculaires
• Fatigue : Fatigue chronique, faiblesse musculaire
• Membres manquants : Amputation, malformation congénitale

Technologies d'assistance utilisées

• Commandes vocales : Dragon NaturallySpeaking, commandes système
• Contacteurs : Boutons adaptés (tête, souffle, pied)
• Eye tracking : Contrôle par le regard
• Claviers adaptés : Grandes touches, une main, ergonomiques
• Souris alternatives : Trackball, joystick, souris tête

Bonnes pratiques pour l'accessibilité motrice

Navigation clavier complète (RGAA 12.x)

Tout élément interactif doit être utilisable sans souris :

<!-- Tous les éléments interactifs sont focusables nativement -->
<button>Action</button>
<a href="/page">Lien</a>
<input type="text">

<!-- Pour les éléments custom, ajouter tabindex="0" -->
<div
  role="button"
  tabindex="0"
  onclick="action()"
  onkeydown="if(event.key==='Enter') action()"
>
  Bouton custom
</div>

Cibles de clic suffisantes (WCAG 2.5.8)

Les zones cliquables doivent être assez grandes :

/* Minimum recommandé : 44x44 pixels */
.bouton {
  min-width: 44px;
  min-height: 44px;
  padding: 12px 24px;
}

/* Espacement entre cibles adjacentes */
.menu-item {
  margin: 8px 0;
}

Pas de limites de temps arbitraires (RGAA 13.x)

Évitez les sessions qui expirent trop rapidement ou permettez de les prolonger :

// Avertir avant expiration avec option de prolonger
function avertirExpiration() {
  const réponse = confirm(
    'Votre session expire dans 2 minutes. Voulez-vous la prolonger ?'
  );
  if (réponse) prolongerSession();
}

Focus visible (RGAA 10.7)

L'indicateur de focus doit être clairement visible :

:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

Utilisez notre générateur de focus ring pour créer des styles accessibles.

Accessibilité cognitive

Les handicaps cognitifs représentent un spectre très large de situations souvent négligées.

Types de handicaps cognitifs

• Troubles de l'apprentissage : Dyslexie, dyscalculie, dyspraxie
• Troubles de l'attention : TDAH, difficultés de concentration
• Troubles de la mémoire : Mémoire à court terme limitée
• Troubles du développement : Autisme, déficiences intellectuelles
• Troubles acquis : Traumatisme crânien, AVC, démence

Technologies d'assistance utilisées

• Synthèse vocale : Lecture du texte à haute voix
• Polices adaptées : OpenDyslexic, polices sans serif
• Simplificateurs de contenu : Réduction de la complexité
• Bloqueurs de distractions : Masquage des éléments non essentiels

Bonnes pratiques pour l'accessibilité cognitive

Langage clair et simple

Privilégiez :

• Des phrases courtes (15-20 mots maximum)
• Un vocabulaire courant
• Une structure explicite
• Des listes plutôt que des paragraphes denses

Consultez notre guide sur le FALC (Facile à Lire et à Comprendre).

Navigation cohérente (RGAA 12.2)

La structure et la navigation doivent être prévisibles :

• Menu de navigation identique sur toutes les pages
• Fil d'Ariane pour situer l'utilisateur
• Plan du site disponible
• Moteur de recherche fonctionnel

Aide à la saisie (RGAA 11.x)

Pour les formulaires :

<form>
  <label for="email">Adresse email</label>
  <input
    type="email"
    id="email"
    aria-describedby="email-aide"
    autocomplete="email"
  >
  <span id="email-aide">Exemple : nom@domaine.fr</span>
</form>

Éviter les distractions

• Pas d'animations automatiques (ou avec contrôle)
• Pas de clignotements
• Mise en page aérée et structurée
• Une seule action principale par page

[!NOTE] Respecter prefers-reduced-motion est crucial pour les personnes sensibles aux mouvements, qu'il s'agisse de troubles cognitifs ou vestibulaires.

L'intersection des besoins

Une même personne peut cumuler plusieurs types de handicaps, et les besoins évoluent dans le temps. De plus, les situations temporaires (bras cassé, environnement bruyant, fatigue) créent des besoins similaires.

Le design universel

Les principes d'accessibilité bénéficient à tous :

Tester l'accessibilité pour chaque type

Pour une évaluation complète :

1. Visuel : Testez avec un lecteur d'écran (NVDA/VoiceOver)
2. Auditif : Vérifiez présence et qualité des sous-titres
3. Moteur : Naviguez entièrement au clavier
4. Cognitif : Évaluez la clarté du contenu et des parcours

Lancez un audit RGAA complet pour identifier les problèmes d'accessibilité sur votre site.

Conclusion

Comprendre les quatre types d'accessibilité permet de concevoir des expériences inclusives dès le départ. Plutôt que de voir l'accessibilité comme une liste de contraintes techniques, considérez-la comme une méthodologie de conception centrée sur la diversité humaine.

En répondant aux besoins des personnes handicapées, vous améliorez l'expérience pour tous les utilisateurs, dans toutes les situations d'usage. L'accessibilité n'est pas un coût supplémentaire : c'est un investissement dans la qualité globale de votre produit numérique.