Accessibilité web : une check-list en 15 minutes

Pourquoi l'accessibilité dès le MVP ?

L'accessibilité, ce n'est pas seulement une obligation légale (RGAA en France). C'est aussi une bonne pratique qui améliore l'expérience de tous vos utilisateurs. Et contrairement à ce qu'on pense souvent, intégrer l'accessibilité dès le départ ne complique pas le développement. Au contraire, ça structure votre code et ça le rend plus maintenable. On vous assure, on l'a testé !

Cette check-list vous permet de vérifier les points essentiels en 15 minutes. Pas besoin d'être expert en accessibilité pour commencer - on ne l'est pas non plus ! Ces bases vous permettront déjà d'être conforme aux critères les plus importants. Et c'est déjà un excellent début.

Check-list : les essentiels

1. Contraste des couleurs

Vérification : Le texte doit avoir un contraste suffisant avec son arrière-plan. Minimum 4.5:1 pour le texte normal, 3:1 pour le texte large.

Comment vérifier : Utilisez un outil comme WebAIM Contrast Checker ou l'extension Chrome "WAVE".

Action : Vérifiez tous vos textes, surtout les textes secondaires et les liens. Si le contraste est insuffisant, assombrissez le texte ou éclaircissez l'arrière-plan.

2. Navigation au clavier

Vérification : Tous les éléments interactifs doivent être accessibles au clavier (Tab, Entrée, Espace).

Comment vérifier : Utilisez uniquement votre clavier pour naviguer sur votre site. Tab pour avancer, Shift+Tab pour reculer, Entrée/Espace pour activer.

Action : Vérifiez que :

• Vous pouvez accéder à tous les liens et boutons
• L'ordre de tabulation est logique
• Un indicateur visuel montre l'élément focus (outline)
• Les menus déroulants s'ouvrent au clavier

3. Textes alternatifs pour les images

Vérification : Toutes les images doivent avoir un attribut alt descriptif.

Comment vérifier : Désactivez les images dans votre navigateur ou utilisez un lecteur d'écran. Les images doivent avoir un texte alternatif qui décrit leur contenu.

Action :

• Images décoratives : alt="" (vide)
• Images informatives : alt="Description du contenu"
• Images avec texte : alt="Texte présent dans l'image"

4. Structure sémantique HTML

Vérification : Utilisez les balises HTML appropriées pour structurer votre contenu.

Action :

• <h1> pour le titre principal (un seul par page)
• <h2> à <h6> pour les titres de sections (dans l'ordre, sans sauter de niveau)
• <nav> pour la navigation
• <main> pour le contenu principal
• <button> pour les boutons, pas <div> avec onClick
• <label> pour les labels de formulaire

5. Formulaires accessibles

Vérification : Tous les champs de formulaire doivent avoir un label associé et des messages d'erreur clairs.

Action :

• Utilisez <label> avec for qui correspond à l'id du champ
• Indiquez les champs obligatoires (astérisque + texte "obligatoire")
• Affichez les messages d'erreur près du champ concerné
• Utilisez aria-describedby pour lier les messages d'aide aux champs
• Utilisez aria-invalid="true" pour les champs en erreur

6. Focus visible

Vérification : Quand un élément a le focus (navigation au clavier), il doit être visible.

Action : Ne supprimez jamais l'outline par défaut sans le remplacer. Si vous voulez personnaliser le focus, créez votre propre style :

button:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

7. Liens descriptifs

Vérification : Le texte d'un lien doit décrire sa destination, même hors contexte.

À éviter : "Cliquez ici", "En savoir plus", "Lire la suite"

À privilégier : "Télécharger le guide MVP", "Lire l'article sur l'accessibilité", "Voir nos services"

8. Vidéos et audio

Vérification : Tous les contenus vidéo/audio doivent avoir des sous-titres ou une transcription.

Action :

• Ajoutez des sous-titres pour les vidéos (YouTube, Vimeo le font automatiquement, mais vérifiez)
• Fournissez une transcription pour les podcasts/audio
• Ajoutez des contrôles pour mettre en pause/play

Outils pour vérifier l'accessibilité

• WAVE : Extension Chrome/Firefox pour identifier les problèmes d'accessibilité
• axe DevTools : Extension Chrome pour auditer l'accessibilité
• Lighthouse : Outil intégré à Chrome DevTools (onglet Accessibility)
• NVDA / JAWS : Lecteurs d'écran gratuits pour tester avec un lecteur d'écran
• Contrast Checker : Pour vérifier le contraste des couleurs

En résumé

L'accessibilité, ce n'est pas compliqué, vraiment ! Il suffit de :

1. Penser accessibilité dès la conception : C'est plus facile que de corriger après, on vous le promet.
2. Utiliser les bons outils HTML : Les balises sémantiques, c'est gratuit et ça améliore l'accessibilité. Pourquoi s'en priver ?
3. Tester régulièrement : 15 minutes par semaine pour vérifier les points essentiels. C'est rien, et ça change tout.
4. Itérer : Commencez par les bases, améliorez progressivement. On n'est pas parfaites du premier coup, et c'est normal !

Cette check-list vous permet déjà de couvrir 80% des problèmes d'accessibilité les plus courants. Pour les 20% restants, vous pourrez approfondir au fur et à mesure. L'important, c'est de commencer. Allez-y, on croit en vous !