🌍 Accessibilité de base pour le web

Introduction

L’accessibilité numérique vise à rendre les sites web utilisables par tous, y compris les personnes en situation de handicap (visuel, auditif, moteur, cognitif).
Au-delà de l’obligation légale (loi française et RGAA – Référentiel Général d’Amélioration de l’Accessibilité), c’est un enjeu d’inclusion et d’expérience utilisateur.
Cette fiche présente les bases pour rendre un site web plus accessible dès sa conception.

(📥 Télécharge la fiche en PDF en bas de page)

Étape 1 – Utiliser des contrastes suffisants

• Vérifie que le texte est lisible sur son arrière-plan.

• Ratio recommandé : 4.5:1 pour du texte normal, 3:1 pour du texte large.
  ✅ Astuce : utilise l’outil gratuit WebAIM Contrast Checker.

Étape 2 – Structurer le contenu avec des titres

• Utilise les balises H1, H2, H3 pour hiérarchiser les contenus.

• Un seul H1 par page (le titre principal).

• Cela aide les lecteurs d’écran à naviguer efficacement.

⚠️ Erreur fréquente : utiliser les titres uniquement pour leur style visuel.

Étape 3 – Ajouter du texte alternatif aux images

• Chaque image importante doit avoir une balise alt descriptive.

• Exemple : <img src="photo.jpg" alt="Étudiant utilisant un ordinateur avec un casque audio">.

• Les images décoratives doivent avoir alt="".

Étape 4 – Rendre les liens explicites

• Évite les “Cliquez ici” ou “En savoir plus”.

• Préfère : “Télécharger la fiche accessibilité (PDF)”.
  ✅ Astuce : cela améliore aussi ton SEO.

Étape 5 – Prévoir une navigation au clavier

• Tout le site doit être navigable sans souris (tabulation).

• Les boutons, menus et formulaires doivent avoir des focus clairs.

• Teste avec la touche Tab → si tu te perds, c’est un problème d’accessibilité.

Résumé rapide (Check-list)

• Contrastes conformes aux recommandations.

• Structure en titres hiérarchisés.

• Texte alternatif pour toutes les images.

• Liens explicites et clairs.

• Navigation clavier fluide.

(📥 Télécharge la version PDF de la check-list)

Aller plus loin

• 🔗 RGAA – Référentiel officiel en France

• 🔗 W3C – WCAG (Web Content Accessibility Guidelines)

• 🔗 Formations Designer Web – IFPA.pro

• 🔗 Formations Poitiers – IFPA86.fr

• 🔗 Blog Benjamin Duplaa – Inclusion et numérique