Fiche 4 - Accessibilité web : principes RGAA et WCAG

Comprendre les enjeux de l'accessibilité numérique, les référentiels RGAA et WCAG, et identifier les premières actions concrètes pour rendre un site plus accessible.

Niveau débutant ⏱️ 20 min 📁 Présence en ligne

🎯 Objectifs de la fiche

Pourquoi l'accessibilité numérique est essentielle — Handicaps visuels, moteurs, cognitifs, et bénéfice pour tous
RGAA et WCAG : deux référentiels liés — Référentiel français vs standard international
Les 4 grands principes (POUR) — Perceptible, Utilisable, Compréhensible, Robuste
Premiers réflexes techniques concrets — Texte alternatif, contraste, navigation au clavier
Vérifier l'accessibilité d'une page existante — Outils automatisés et limites de ces outils

Prérequis

Notions de base en HTML (voir fiches markdown/web si besoin). Aucun prérequis en accessibilité numérique.

1. Pourquoi l'accessibilité numérique est essentielle

L'accessibilité numérique vise à permettre à toute personne, quel que soit son handicap (visuel, moteur, auditif, cognitif), d'utiliser un site ou une application. Un site inaccessible exclut de fait une partie de la population — et les bonnes pratiques d'accessibilité profitent en réalité à tout le monde : un bon contraste aide aussi en plein soleil, une navigation claire au clavier aide aussi un utilisateur sans souris.

ℹ️ En France, les sites publics et certains organismes privés ont une obligation légale d'accessibilité numérique, avec publication d'une déclaration de conformité.

2. RGAA et WCAG : deux référentiels liés

Référentiel	Origine	Statut
WCAG (Web Content Accessibility Guidelines)	W3C, standard international	Référence mondiale
RGAA (Référentiel Général d'Amélioration de l'Accessibilité)	France (DINUM)	Déclinaison française des WCAG, avec critères opérationnels

💡 Le RGAA traduit chaque exigence WCAG en critères de test concrets et vérifiables, ce qui le rend plus facile à appliquer directement qu'une lecture brute des WCAG.

3. Les 4 grands principes (POUR)

Les WCAG, et donc le RGAA, s'organisent autour de quatre grands principes, résumés par l'acronyme POUR.

Principe	Signification	Exemple concret
Perceptible	L'information doit être perceptible par tous les sens disponibles	Texte alternatif sur une image pour un lecteur d'écran
Utilisable	L'interface doit être utilisable avec différents moyens d'interaction	Navigation complète possible au clavier seul
Compréhensible	Le contenu et le fonctionnement doivent être compréhensibles	Messages d'erreur de formulaire clairs et explicites
Robuste	Le contenu doit fonctionner avec différentes technologies d'assistance	Code HTML valide, compatible avec les lecteurs d'écran

4. Premiers réflexes techniques concrets

Bonne pratique	Pourquoi
Attribut alt sur chaque image	Permet à un lecteur d'écran de décrire l'image à un utilisateur malvoyant
Contraste suffisant texte/fond	Indispensable pour les personnes malvoyantes ou en environnement lumineux
Navigation complète au clavier (Tab, Entrée)	Indispensable pour les personnes ne pouvant pas utiliser une souris
Structure de titres hiérarchique (h1, h2, h3...)	Permet une navigation rapide par les lecteurs d'écran
Libellés explicites sur les champs de formulaire	Évite qu'un champ reste incompréhensible sans contexte visuel

<!-- Mauvaise pratique : pas de texte alternatif -->
<img src="logo.png">

<!-- Bonne pratique : texte alternatif descriptif -->
<img src="logo.png" alt="Logo du lycée Notre-Dame de La Providence">

⚠️ Un attribut alt vide (alt="") n'est pas une erreur si l'image est purement décorative — mais l'omettre totalement, ou y mettre un texte non descriptif comme « image1.png », est un défaut fréquent.

5. Vérifier l'accessibilité d'une page existante

Des outils automatisés (extensions navigateur, scanners en ligne) détectent une partie des problèmes d'accessibilité (contrastes, attributs manquants), mais ne remplacent jamais un test réel avec un lecteur d'écran ou une navigation au clavier.

💡 Un bon premier test, gratuit et rapide : débrancher la souris et essayer de naviguer entièrement un site au clavier (Tab, Maj+Tab, Entrée) — de nombreux problèmes apparaissent immédiatement.

Que signifie l'acronyme RGAA ?

Référentiel Général d'Amélioration de l'Accessibilité
Réseau Global d'Audit Automatisé
Règles Générales d'Architecture Applicative
Référentiel de Gestion des Accès Administratifs

✅ Réponse : Référentiel Général d'Amélioration de l'Accessibilité

Quel est le standard international dont le RGAA est la déclinaison française ?

ISO 27001
WCAG
RFC 1918
RGPD

✅ Réponse : WCAG

Que signifie le « P » de l'acronyme POUR ?

Performant
Perceptible
Public
Précis

✅ Réponse : Perceptible

Pourquoi l'attribut alt d'une image est-il important pour l'accessibilité ?

Il accélère le chargement de la page
Il permet à un lecteur d'écran de décrire l'image à un utilisateur malvoyant
Il améliore uniquement le référencement SEO
Il n'a aucun rapport avec l'accessibilité

✅ Réponse : Il permet à un lecteur d'écran de décrire l'image à un utilisateur malvoyant

Quel test simple permet de détecter rapidement des problèmes de navigation au clavier ?

Vérifier la vitesse de chargement de la page
Naviguer entièrement le site sans utiliser la souris
Compter le nombre d'images
Vérifier la taille du fichier HTML

✅ Réponse : Naviguer entièrement le site sans utiliser la souris

RGAA — Référentiel officiel (DINUM) — https://accessibilite.numerique.gouv.fr/
WCAG — W3C — https://www.w3.org/WAI/standards-guidelines/wcag/
WAVE — outil d'évaluation d'accessibilité — https://wave.webaim.org/

🎯 Passer l'évaluation de cette fiche