Accessibilité web (WCAG) : ce qu’il faut vraiment corriger sur un site B2B
1. Qui va vraiment vous contrôler : cadre légal et champ d’application
Délimitons le sujet :Conformité des données traite de la gestion des cookies et des données personnelles,audit de vitesse traite des performances de chargement. Cet article ne traite que d’une chose : la capacité de tous, y compris des personnes utilisant des technologies d’assistance, à lire et à utiliser normalement le contenu et les interactions du site.
Si les entreprises B2B s’intéressent à l’accessibilité, ce n’est généralement pas parce qu’elles ont « des clients malvoyants », mais pour trois raisons plus concrètes : la réglementation, les appels d’offres et l’ergonomie. Qui va vraiment vous contrôler ? Un tableau pour y voir clair.
| Source du déclenchement | Qui est concerné | Exigences concrètes | Calendrier |
|---|---|---|---|
| Loi européenne sur l’accessibilité (EAA, 2019/882) | Les services de commerce électronique et services associés vendus dans l’UE | Renvoie à l’EN 301 549, dont le cœur technique est le WCAG 2.1 AA | Les nouveaux services doivent être conformes depuis le 28 juin 2025 |
| Directive européenne sur les marchés publics (2014/24/UE) | Les fournisseurs participant à des projets publics européens | Les spécifications techniques citent l’EN 301 549 : l’accessibilité entre dans l’évaluation des offres | En vigueur depuis plusieurs années |
| Achats fédéraux américains (Section 508) | Les fournisseurs livrant des agences fédérales américaines | Exige un rapport de conformité VPAT/ACR | Exigence permanente |
| Questionnaire d’admission fournisseur des grands groupes | Les panels de fournisseurs qualifiés des grands acheteurs, tous secteurs confondus | Le questionnaire comporte souvent une case « conforme au WCAG 2.1 AA » | Apparaît au rythme des cycles d’achat |
La version de référence est elle aussi figée : le WCAG 2.2, publié en octobre 2023, ajoute neuf critères de succès au 2.1, dont l’apparence du focus et la taille des cibles, tandis que l’EN 301 549 renvoie toujours au 2.1 AA. Dans un appel d’offres ou un contrat, écrire « WCAG 2.1 AA » ou « 2.2 AA » est valable : plus de 90 % des corrections se recoupent. Pour savoir si vous devez vous y mettre, c’est simple : regardez le profil de vos clients. Si vous visez le marché européen, répondez à des marchés publics ou êtes fournisseur de rang 1 d’un grand groupe, l’accessibilité est une copie à rendre. Si aucun de ces cas ne s’applique, la priorité peut être abaissée, mais le socle minimal reste à faire — voir la section 7.
2. Les quatre principes : à quoi ressemblent les problèmes
Le WCAG range toutes ses exigences sous quatre principes. Appliqués à un site B2B, les problèmes se concentrent fortement.
| Principe | Signification | Ce qu’on voit le plus souvent sur un site B2B |
|---|---|---|
| Perceptible | L’information peut être vue ou entendue | Images produit sans alt, texte gris clair au contraste insuffisant, vidéos sans sous-titres |
| Utilisable | Toutes les fonctions sont accessibles au clavier | Menus déroulants ouvrables uniquement au survol, fenêtres modales impossibles à fermer, focus invisible |
| Compréhensible | Contenu et actions prévisibles | Formulaires sans label, message d’erreur réduit à « échec de l’envoi », langue de la page non déclarée |
| Robuste | Correctement interprété par les technologies d’assistance | div qui imite un bouton, hiérarchie de titres passant de h2 à h5 |
Un exemple concret : un acheteur à l’étranger demande à un collègue de vérifier les caractéristiques au téléphone ; ce collègue lit votre page produit avec un lecteur d’écran et tombe sur une image de caractéristiques sans alt, qu’il saute aussitôt — pour lui, cette page n’existe pas. Dans ce genre de problème, les outils détectent les images manquantes et les contrastes insuffisants, mais ils ne peuvent pas juger si « l’alt est bien rédigé » ou si « l’ordre de tabulation est cohérent » : c’est précisément pourquoi la recette se fera ensuite en trois niveaux.
3. Les cinq corrections P0 : tout se règle au niveau du template
Pour la mise en accessibilité d’un site B2B, la première priorité se limite à cinq points, tous en P0.
| Poste | Critère d’évaluation | Erreur fréquente |
|---|---|---|
| Label de formulaire et message d’erreur | Chaque champ a un label visible ; le message d’erreur est textuel et associé au champ ; l’erreur ne repose pas seulement sur la couleur | Un placeholder qui tient lieu de label ; une erreur signalée une seule fois dans une fenêtre modale |
| Contraste des couleurs | Contraste du texte courant ≥ 4,5:1 ; grands textes et composants d’interface ≥ 3:1 | Gris clair #999 sur fond blanc, soit environ 2,8:1 en pratique |
| Utilisation au clavier | Toutes les fonctions accessibles par Tab, ordre cohérent, focus visible, aucun piège au clavier | Menu au survol impossible à ouvrir au clavier ; focus qui reste derrière la fenêtre modale une fois ouverte |
| Balise alt des images | Une image porteuse d’information reçoit une alternative textuelle ; une image purement décorative a un alt vide | Aucune image du site n’a d’alt ; ou l’alt reprend un nom de fichier du type img_0342.jpg |
| Déclaration de langue | L’attribut lang de html est correctement défini pour chaque langue | Un site bilingue chinois-anglais déclaré en en sur toutes les pages |
Les seuils de contraste sont listés à part, pour être consultés directement lors des retouches de design.
| Type de contenu | Seuil minimal AA | Cas courants de non-conformité |
|---|---|---|
| Texte courant (moins de 24 px) | 4,5:1 | Texte blanc sur fond gris, texte en filigrane semi-transparent |
| Grands titres (≥ 24 px, ou ≥ 18,5 px en gras) | 3:1 | Texte de marque clair sur fond clair |
| Bordures de boutons et icônes | 3:1 | Boutons à contour clair |
| Composants désactivés | Aucune exigence imposée | Le clair reste possible, mais à éviter sur les actions clés |
Sur les cinq points P0, quatre relèvent du template — on modifie le thème une fois, tout le site en profite : c’est la raison de fond pour laquelle l’accessibilité d’un site B2B coûte peu. Le formulaire, lui, conditionne directement la réception des demandes : en corrigeant les labels et les messages d’erreur, profitez-en pour passer en revue la fiabilité du formulaire et notamment les contrôles de délivrance, pour régler les deux problèmes en une seule intervention.
4. P1 et P2 : recommandé et bon à prendre
Au-delà du P0, deux niveaux supplémentaires, pour éviter le tout ou rien.
| Niveau | Poste | Critère d’évaluation | Moment conseillé |
|---|---|---|---|
| P1 | Style de focus | Contour de focus visible et contraste ≥ 3:1, outline:none interdit globalement | À faire au passage lors de la modification du thème |
| P1 | Lien d’évitement | Premier arrêt de tabulation de la page : « Aller au contenu principal » | Sites à pages longues et navigation à plusieurs niveaux |
| P1 | Hiérarchie des titres | Un seul h1, pas de niveau sauté | C’est la même chose que la sémantique SEO |
| P1 | Texte des liens | Compréhensible hors contexte | Éviter les « cliquez ici » à tout va |
| P2 | Taille des cibles | Zone cliquable ≥ 24 × 24 pixels (nouveauté WCAG 2.2) | Lors d’une refonte mobile |
| P2 | Réduction des animations | Respecter le réglage prefers-reduced-motion du système | Sites avec carrousel et animations |
| P2 | Détails ARIA | Compléter les états des composants comme les accordéons et les onglets | À traiter en même temps qu’un changement de bibliothèque de composants |
Une fois le P1 fait sur tout le site, comptez environ 10 à 15 heures ; la plupart des projets l’intègrent à une refonte de thème plutôt que d’en faire un chantier à part. Le critère pour le P2 est plus direct : sauf si une refonte de composant concernée tombe au bon moment, on ne lance rien pour lui. Le piège de l’accessibilité, c’est justement de traiter les détails du P2 comme le gros du chantier : le rapport effort/résultat n’a alors plus rien de proportionné.
V. Trois idées fausses courantes
| Erreur | Pourquoi c’est faux | Bonne pratique |
|---|---|---|
| Ajouter de l’ARIA suffit à rendre accessible | L’ARIA compense un manque de sémantique native, il ne la remplace pas ; une ARIA mal posée est pire que pas d’ARIA du tout | Privilégier les éléments natifs button, label, nav, etc. |
| Faire un bouton avec un div et un événement de clic | Impossible à déclencher au clavier, et les lecteurs d’écran ne l’identifient pas comme un bouton | Remplacer par un élément button, en gardant le même style |
| Livrer dès que les outils automatiques donnent le score maximal | Les outils ne couvrent qu’environ 30 à 40 % des problèmes | Compléter par un parcours clavier et un contrôle au lecteur d’écran avant de conclure |
Ces trois idées fausses ont un point commun : la envie de couper au plus court. Les spécifications ARIA le disent elles-mêmes : « première règle : ne pas utiliser ARIA » — si un élément natif peut résoudre le problème, on n’empile pas les attributs. Le bouton en div est très courant dans les templates B2B, surtout quand toute une carte est cliquable ; la bonne méthode est de placer un vrai bouton à l’intérieur. Quant au score maximal des outils, il indique seulement l’absence d’erreurs grossières : la pertinence d’un alt, un ordre de tabulation qui suit la logique de lecture, un message d’erreur compréhensible par un humain — ces jugements, aucune machine ne peut les faire, il faut les parcourir soi-même.
VI. Comment valider : scan automatique, parcours clavier, contrôle au lecteur d’écran
La validation se fait en trois niveaux ; si l’un manque, la conclusion n’est pas fiable.
| Niveau | Outils et méthodes | Part des problèmes détectés | Temps indicatif |
|---|---|---|---|
| Scan automatique | Passer axe, WAVE et Lighthouse sur chaque page | Environ 30 à 40 % | Moins d’une heure pour tout le site |
| Parcours clavier | Ranger la souris et dérouler tout le processus de demande de devis avec Tab, Entrée et Échap | Le moyen principal pour les problèmes d’interaction | Environ 1 à 2 heures pour 5 à 8 pages |
| Contrôle au lecteur d’écran | Parcourir un formulaire avec NVDA (Windows) ou VoiceOver (macOS) | Problèmes de sémantique et de messages | Environ 1 heure |
Toutes les pages ne se valent pas : page d’accueil, une fiche produit, une page formulaire de contact ou de demande de devis, une page de contenu. Ces quatre types couvrent plus de 80 % des parcours sur un site B2B. Au-delà, un simple balayage page par page suffit, pas besoin d’un audit exhaustif. Conservez les enregistrements de recette : quand un questionnaire d’admission fournisseur demande un VPAT, il suffit de les reformuler en déclaration de conformité pour les transmettre. Si votre équipe n’a personne à mobiliser pour les modifications au niveau du thème et des gabarits, vous pouvez Contactez-nous évaluer selon l’état actuel du site.
7. Coût et charge de travail, recoupements avec le SEO, quand s’abstenir
Donnez d’abord un ordre de grandeur, ensuite un avis.
| Tâche | Ordre de grandeur de la charge | Explication |
|---|---|---|
| Corrections P0 au niveau du gabarit | 8 à 20 heures | Selon le nombre de gabarits et le degré de personnalisation |
| Corrections P0 page par page | Environ 2 fois le niveau gabarit | Apparaît quand les landing pages sur mesure sont nombreuses |
| P1 sur tout le site | 10–15 heures | Généralement fusionné avec la refonte du thème |
| Validation en trois niveaux | 3–5 heures | Inclut la mise en forme des enregistrements et la rédaction de la déclaration de conformité |
Les recoupements entre accessibilité et SEO sont plus importants qu’on ne le croit : la plupart des projets font d’une pierre deux coups.
| Chantier d’accessibilité | Effet direct sur le SEO |
|---|---|
| Hiérarchie de titres sémantique | C’est la même chose que l’optimisation de la structure du site |
| Balise alt des images | Recherche d’images et accessibilité partagent les mêmes attributs |
| Libellés de liens lisibles | La qualité du texte d’ancre est en soi un signal de classement |
| Déclaration de langue de la page | Aide à déterminer les zones multilingues |
| Tailles de cible sur mobile | Cohérent avec l’ergonomie mobile |
Il faut aussi dire quand s’abstenir : un site d’outil interne (utilisateurs maîtrisés, formables), un site purement national sans client dans l’UE ni dans les marchés publics et jamais interrogé sur le sujet dans un questionnaire d’achat peuvent se limiter à un socle minimal de trois points : des formulaires avec label et messages d’erreur textuels, un contraste de texte conforme, des infographies avec alt. Le tout en une demi-journée maximum. Quand les modifications avancent en même temps qu’une refonte du site, veillez à ne pas empiéter sur le déploiement des données structurées ni sur l’optimisation des performances,Données structurées qui ont chacun leur propre chapitre : mieux vaut les planifier en lots successifs plutôt que de tout modifier en même temps.
FAQ — Questions fréquentes
Pour conclure
L’accessibilité n’est pas une décoration caritative, c’est un document de conformité dans le parcours d’achat et un filet de sécurité pour l’utilisabilité. Sur un site B2B, la bonne approche est de procéder par paliers : corriger les cinq points P0 au niveau du template, archiver les trois niveaux de vérification, intégrer le P1 à la refonte, ne pas traiter le P2 comme un projet à part. La plupart des sites obtiennent en moins de deux semaines une déclaration de conformité qu’on peut joindre à un questionnaire fournisseur : cet investissement vaut bien la minute où elle apparaît dans le processus d’achat.
Une seule règle à retenir : corriger le template avant de parler des pages, tester au clavier avant de croire au scan.