Tests et outils

Corriger et revérifier les problèmes d'accessibilité sur un site Webflow

Ce guide suit une page Webflow de la première analyse à la nouvelle vérification. La page est une démonstration que nous avons publiée le 08.11.26 sur un sous-domaine webflow.io d'un site à nous qui n'est plus en service, pas un site client. Contrairement à notre exemple WordPress, chaque analyse est passée par le test gratuit public d'AllyProof : les chiffres sont ceux que tout visiteur verrait pour cette URL.

Ce que la première analyse a trouvé

Score 68, six problèmes automatisés - un critique, quatre sérieux, un modéré (l'un d'eux visible seulement après inscription) :

Constat	Cause sur cette page	WCAG
Liste déroulante sans nom accessible (critique)	Liste de dates dans un formulaire Webflow sans étiquette	4.1.2
Contraste du texte insuffisant	Paragraphe d'introduction dans un « gris de marque » clair (#b0b0b0 sur blanc)	1.4.3
Contraste de la bordure du champ insuffisant	Bordure par défaut de la liste déroulante	1.4.11
Page sans langue	<html> publié sans attribut lang ; signalé par les deux moteurs	3.1.1

Ce que l'analyse ne pouvait pas voir

Les images ont été insérées avec alt="". La page publiée affichait un autre texte alternatif : Webflow les a liées à des assets existants de la bibliothèque et a utilisé le texte alternatif enregistré sur chacun - en ukrainien, sur une page en anglais. L'icône de fermeture servant de lien portait donc un nom (« icône, fermé ») qui décrivait l'image et non le lien, lequel menait à l'accueil. Toutes les règles sont passées, car les deux images avaient un texte alternatif. Seule une personne qui le lit dans son contexte remarque la mauvaise langue et la mauvaise description.

Les corrections dans Webflow

1. Contraste. Nous avons passé la couleur du texte d'introduction à #595959 dans sa classe et donné à la liste déroulante une bordure de 1 px en #767676. Les deux modifications s'appliquent partout où la classe est utilisée : vérifiez les autres pages qui la partagent.
2. Textes alternatifs. Sélectionnez chaque image et définissez le texte alternatif sur l'élément au lieu de dépendre de l'asset : « Retour à l'accueil » pour l'icône liée et une courte description pour la photo.
3. Nom de la liste déroulante. Nous avons ajouté une étiquette visible, mais Webflow l'a publiée avec un attribut for vide. Elle n'était donc pas liée au champ, et la nouvelle vérification signalait toujours le problème critique. C'est en donnant au champ le nom accessible « Workshop date » que le constat a disparu. Dans le Designer, renseignez aussi le champ For de l'étiquette avec l'ID de la liste, pour qu'un clic sur l'étiquette place le focus dans le champ.
4. Langue de la page. Elle provient de la locale principale du site, dans Site settings > Localization, suivie d'une nouvelle publication. Elle ne peut pas être définie depuis la page : prévoyez-la avec la personne qui a accès aux réglages du site.

Les nouvelles vérifications

Chaque nouvelle vérification a fonctionné comme Lancer une nouvelle analyse : elle a testé la page republiée au lieu de rejouer le résultat en cache.

Analyse	Score	Problèmes	Critiques
Première analyse	68	6	1
Après les corrections de contraste et de textes alternatifs	78	4	1
Après avoir nommé la liste déroulante	86	4	0

Il reste la langue de la page, signalée par les deux moteurs tant que le réglage du site n'est pas modifié, et deux constats modérés visibles seulement par les utilisateurs connectés. Avant d'annoncer au client que la page est terminée, parcourez aussi le formulaire avec la touche Tab, vérifiez que le focus est visible et écoutez la liste déroulante et les images avec un lecteur d'écran.

Pour les agences qui maintiennent des sites Webflow

Trois comportements de Webflow observés sur cette page méritent d'être vérifiés sur chaque site client : des textes alternatifs de la bibliothèque d'assets dans un mauvais contexte ou une mauvaise langue, des étiquettes de formulaire non liées à leur champ, et une langue de site manquante. Le premier est invisible pour les règles automatisées ; les deux autres apparaissent dans une analyse mais ne se corrigent que dans le Designer ou les réglages du site. Le suivi Business (35 € par site et par mois, ou 336 € par site et par an ; essai de 14 jours pour les comptes éligibles, moyen de paiement requis, renouvellement jusqu'à résiliation) revérifie le site chaque semaine : si une modification du CMS fait revenir un problème, il apparaît dans l'analyse suivante.

Questions fréquentes

Pourquoi mon image Webflow affiche-t-elle un autre texte alternatif que celui que j'ai défini ?

Les images Webflow liées à un asset peuvent utiliser le texte alternatif enregistré sur l'asset dans la bibliothèque. Dans cet exemple, la page publiée affichait le texte alternatif ukrainien de l'asset sur une page en anglais. Définissez le texte alternatif sur l'élément image lorsque l'image a besoin d'une formulation propre à la page.

Pourquoi l'étiquette de mon formulaire Webflow n'est-elle pas liée à son champ ?

Dans cet exemple, l'étiquette publiée avait un attribut for vide, et la liste déroulante n'avait donc pas de nom accessible. Dans le Designer, renseignez le champ For de l'étiquette avec l'ID du champ, ou donnez directement un nom accessible au champ.

Comment définir la langue de la page dans Webflow ?

L'attribut lang de l'élément html provient de la locale principale du site. Définissez-la dans Site settings > Localization puis republiez. Elle ne peut pas être corrigée depuis une page isolée.