Comment améliorer l’accessibilité de votre site WordPress ?

1. Contraste des couleurs

Qu’est-ce que c’est ?

La différence entre la couleur du texte et la couleur de fond.

Norme WCAG AA :

• Texte normal : ratio 4.5:1 minimum
• Texte grand : ratio 3:1 minimum

Exemple :

Outil pour vérifier :

WebAIM Contrast Checker (gratuit)

Comment corriger :

1. Allez dans Apparence → Personnaliser
2. Allez dans Couleurs
3. Augmentez le contraste entre texte et fond
4. Testez avec WebAIM

2. Textes alternatifs pour les images (Alt text)

Qu’est-ce que c’est ?

Un texte qui décrit l’image pour les utilisateurs malvoyants et les moteurs de recherche.

Norme : Chaque image doit avoir un alt text

Exemple :

Comment ajouter un alt text :

1. Allez dans Médias → Bibliothèque
2. Cliquez sur une image
3. Remplissez le champ « Texte alternatif »
4. Cliquez sur « Mettre à jour »

Conseils :

• Soyez descriptif (10-125 caractères)
• Incluez les mots-clés si pertinent
• Ne commencez pas par « image de… »
• Pour les logos, utilisez le nom de la marque

Découvrez comment utiliser correctement la balise alt pour vos images.

3. Structure HTML correcte (Hn)

Qu’est-ce que c’est ?

Une hiérarchie logique des titres (H1, H2, H3, etc.).

Norme :

• 1 seul H1 par page
• H2 sous H1
• H3 sous H2
• Pas de sauts (H1 → H3 est mauvais)

Exemple correct :

H1 : Accessibilité web WordPress
  H2 : Pourquoi c'est important
  H2 : Les 10 critères essentiels
    H3 : Contraste des couleurs
    H3 : Textes alternatifs
  H2 : Checklist d'accessibilité

Comment vérifier :

1. Installez l’extension Headings Map
2. Cliquez sur l’extension
3. Vérifiez la hiérarchie

4. Navigation au clavier

Qu’est-ce que c’est ?

Pouvoir naviguer sur le site avec seulement le clavier (Tab, Entrée, Flèches).

Norme : Tous les éléments interactifs doivent être accessibles au clavier

Comment tester :

1. Ouvrez votre site
2. Appuyez sur Tab
3. Vérifiez que vous pouvez naviguer partout
4. Appuyez sur Entrée pour cliquer

Éléments à vérifier :

• ✅ Menu de navigation
• ✅ Boutons
• ✅ Formulaires
• ✅ Liens

Comment corriger :

1. Allez dans Apparence → Personnaliser
2. Allez dans CSS supplémentaire
3. Ajoutez du CSS pour les focus states :

a:focus, button:focus, input:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

5. Étiquettes de formulaires

Qu’est-ce que c’est ?

Chaque champ de formulaire doit avoir une étiquette associée.

Norme : Utilisez la balise <label> pour chaque champ

Exemple :

<label for="email">Email :</label>
<input type="email" id="email" name="email">

Comment vérifier avec WPForms :

1. Allez dans WPForms → Votre formulaire
2. Chaque champ doit avoir un label
3. Vérifiez que le label est visible

6. Texte des liens descriptif

Qu’est-ce que c’est ?

Le texte du lien doit décrire sa destination.

Exemple :

Pourquoi ?

Les utilisateurs malvoyants utilisent des lecteurs d’écran qui lisent les liens. « Cliquez ici » n’est pas descriptif.

Comment corriger :

1. Allez dans votre article/page
2. Sélectionnez un lien
3. Changez le texte pour qu’il soit descriptif

7. Vidéos avec sous-titres

Qu’est-ce que c’est ?

Les vidéos doivent avoir des sous-titres pour les utilisateurs sourds.

Norme : Sous-titres obligatoires pour les vidéos

Comment ajouter des sous-titres :

Sur YouTube :

1. Allez dans YouTube Studio
2. Cliquez sur votre vidéo
3. Allez dans Sous-titres
4. Cliquez sur « Ajouter une langue »
5. Téléchargez ou créez les sous-titres

Sur Vimeo :

1. Allez dans les paramètres de la vidéo
2. Cliquez sur « Sous-titres »
3. Téléchargez un fichier .vtt

8. Pas de contenu qui clignote

Qu’est-ce que c’est ?

Éviter les animations qui clignotent (peuvent causer des crises d’épilepsie).

Norme : Pas de clignotement plus de 3 fois par seconde

À éviter :

• ❌ GIFs qui clignotent
• ❌ Animations rapides
• ❌ Effets stroboscopiques

À utiliser :

• ✅ Animations fluides
• ✅ Transitions douces
• ✅ Effets hover subtils

9. Texte redimensionnable

Qu’est-ce que c’est ?

Les utilisateurs doivent pouvoir augmenter la taille du texte (zoom).

Norme : Texte doit rester lisible jusqu’à 200% de zoom

Comment tester :

1. Appuyez sur Ctrl + + (Windows) ou Cmd + + (Mac)
2. Augmentez jusqu’à 200%
3. Vérifiez que le texte reste lisible
4. Vérifiez qu’il n’y a pas de débordement

Comment corriger :

1. Utilisez des unités relatives (em, rem, %) au lieu de px
2. Testez à 200% de zoom
3. Ajustez les largeurs si nécessaire

10. Pas de dépendance à la couleur seule

Qu’est-ce que c’est ?

Ne pas utiliser la couleur comme seul moyen de transmettre l’information.

Exemple :

À éviter :

• ❌ Utiliser seulement la couleur pour indiquer une erreur
• ❌ Utiliser seulement la couleur pour un lien
• ❌ Utiliser seulement la couleur pour une catégorie

À utiliser :

• ✅ Couleur + texte
• ✅ Couleur + icône
• ✅ Couleur + soulignement

Installation

1. Extensions → Ajouter une extension
2. Recherchez « Accessibility Checker »
3. Installez et activez

Fonctionnalités :

• ✅ Scan automatique de votre site
• ✅ Détection des problèmes d’accessibilité
• ✅ Suggestions de correction
• ✅ Rapport détaillé