Accessibilité
Loi européenne sur l'accessibilité, normes WCAG et rendre votre site utilisable par tous.
La loi européenne sur l'accessibilité (EAA) est pleinement en vigueur depuis le 28 juin 2025, exigeant des entreprises vendant des produits ou services en ligne de respecter les normes d'accessibilité WCAG 2.1 AA. En Belgique, le SPF Économie est l'autorité de contrôle. Il ne s'agit plus seulement des sites web du secteur public — les entreprises privées avec un site web sont désormais concernées. Ne pas respecter ces exigences peut entraîner des mesures d'exécution, des amendes et l'exclusion des marchés publics.
Faits clés
- •L'EAA s'applique à toutes les entreprises vendant des produits ou services aux consommateurs dans l'UE depuis le 28 juin 2025
- •En Belgique, des amendes peuvent être infligées pour non-conformité aux exigences d'accessibilité
- •96,3 % des sites du top 1 million présentent des erreurs d'accessibilité détectables (WebAIM 2024)
- •Les problèmes les plus courants sont le texte alternatif manquant, le texte à faible contraste, les liens vides et les libellés de formulaire manquants
- •Les surcouches et widgets d'accessibilité ne rendent pas les sites web accessibles — plusieurs procès l'ont confirmé
Ce que nous vérifions
- ✓Tests automatisés WCAG 2.1 AA avec axe-core
- ✓Vérification du ratio de contraste des couleurs
- ✓Présence de texte alternatif sur toutes les images significatives
- ✓Navigation au clavier et gestion du focus
- ✓Associations de libellés de formulaire et attributs ARIA
Accessibilité web : bons et mauvais exemples
Images sans texte alternatif
Photos de produits et images de bannière avec des attributs alt vides ou manquants. Les lecteurs d'écran les annoncent comme « image » ou les ignorent complètement, rendant le contenu inaccessible aux visiteurs malvoyants. Le critère de succès WCAG 2.1 1.1.1 exige des alternatives textuelles pour toutes les images non décoratives.
Texte alternatif descriptif sur les images
Chaque image significative a un texte alternatif qui décrit son contenu : « Chef préparant des pâtes dans la cuisine du restaurant » plutôt que « IMG_4521 » ou « photo ». Les images décoratives utilisent des attributs alt vides (alt="") pour que les lecteurs d'écran les ignorent.
Texte à faible contraste
Texte gris clair (#999) sur fond blanc, ou texte blanc sur une bannière de couleur pastel. WCAG 2.1 AA exige un ratio de contraste d'au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte. Un faible contraste rend le contenu illisible pour les personnes malvoyantes.
Contraste de couleur suffisant
Le texte principal utilise des couleurs sombres (#1a1a1a ou similaire) sur des fonds clairs, respectant le ratio de 4,5:1. Les boutons et les liens ont des états de survol/focus distincts. La couleur n'est jamais le seul moyen de transmettre une information (par ex. les états d'erreur utilisent aussi des icônes ou du texte).
Champs de formulaire sans libellés
Formulaires de contact ou d'inscription qui utilisent le texte indicatif comme seul libellé. Quand un utilisateur commence à taper, le texte indicatif disparaît et il ne peut plus voir à quoi sert le champ. Les lecteurs d'écran ne peuvent pas identifier les champs sans libellé.
Champs de formulaire correctement libellés
Chaque champ de saisie a un élément <label> visible lié via l'attribut for/id. Le texte indicatif est utilisé comme indice, pas comme remplacement. Les champs obligatoires sont marqués avec des indicateurs visuels et programmatiques.
Recours à une surcouche d'accessibilité
Installer un widget comme AccessiBe ou UserWay au lieu de corriger les vrais problèmes d'accessibilité. Les tribunaux aux États-Unis et en Europe ont jugé que les surcouches ne rendent pas les sites web accessibles. Elles peuvent même aggraver les choses en interférant avec les véritables technologies d'assistance.
Accessibilité native intégrée au design
HTML sémantique (titres, repères, listes), menus navigables au clavier, indicateurs de focus visibles et liens de navigation rapide. Ces fonctionnalités intégrées fonctionnent avec toutes les technologies d'assistance sans nécessiter de plugins tiers.
Images sans texte alternatif
Photos de produits et images de bannière avec des attributs alt vides ou manquants. Les lecteurs d'écran les annoncent comme « image » ou les ignorent complètement, rendant le contenu inaccessible aux visiteurs malvoyants. Le critère de succès WCAG 2.1 1.1.1 exige des alternatives textuelles pour toutes les images non décoratives.
Texte à faible contraste
Texte gris clair (#999) sur fond blanc, ou texte blanc sur une bannière de couleur pastel. WCAG 2.1 AA exige un ratio de contraste d'au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte. Un faible contraste rend le contenu illisible pour les personnes malvoyantes.
Champs de formulaire sans libellés
Formulaires de contact ou d'inscription qui utilisent le texte indicatif comme seul libellé. Quand un utilisateur commence à taper, le texte indicatif disparaît et il ne peut plus voir à quoi sert le champ. Les lecteurs d'écran ne peuvent pas identifier les champs sans libellé.
Recours à une surcouche d'accessibilité
Installer un widget comme AccessiBe ou UserWay au lieu de corriger les vrais problèmes d'accessibilité. Les tribunaux aux États-Unis et en Europe ont jugé que les surcouches ne rendent pas les sites web accessibles. Elles peuvent même aggraver les choses en interférant avec les véritables technologies d'assistance.
Texte alternatif descriptif sur les images
Chaque image significative a un texte alternatif qui décrit son contenu : « Chef préparant des pâtes dans la cuisine du restaurant » plutôt que « IMG_4521 » ou « photo ». Les images décoratives utilisent des attributs alt vides (alt="") pour que les lecteurs d'écran les ignorent.
Contraste de couleur suffisant
Le texte principal utilise des couleurs sombres (#1a1a1a ou similaire) sur des fonds clairs, respectant le ratio de 4,5:1. Les boutons et les liens ont des états de survol/focus distincts. La couleur n'est jamais le seul moyen de transmettre une information (par ex. les états d'erreur utilisent aussi des icônes ou du texte).
Champs de formulaire correctement libellés
Chaque champ de saisie a un élément <label> visible lié via l'attribut for/id. Le texte indicatif est utilisé comme indice, pas comme remplacement. Les champs obligatoires sont marqués avec des indicateurs visuels et programmatiques.
Accessibilité native intégrée au design
HTML sémantique (titres, repères, listes), menus navigables au clavier, indicateurs de focus visibles et liens de navigation rapide. Ces fonctionnalités intégrées fonctionnent avec toutes les technologies d'assistance sans nécessiter de plugins tiers.
Ressources officielles
Les guides arrivent bientôt.
Vérifiez votre site web maintenant
Analysez votre site web pour les problèmes de Accessibilité et plus de 30 autres vérifications.
Scanner votre site gratuitement