Accessibilité numérique Webflow : 3 points de vigilance pour des contenus vraiment accessibles

Quand on conçoit un site sous Webflow, on pense souvent responsive design, SEO, vitesse de chargement… et l’accessibilité passe parfois en arrière-plan.
Pourtant, chaque détail compte. Et certains critères, en apparence simple, peuvent vite faire basculer un site dans la non-conformité. En travaillant sur notre propre refonte avec Webflow, nous avons identifié plusieurs points particulièrement sensibles.

Voici 3 critères souvent sous-estimés, mais indispensables pour viser une véritable accessibilité numérique :

Les images : le faux ami des alt texts automatiques

Les images sont partout sur nos sites. Bonne nouvelle : c’est aussi l’un des critères les plus faciles à valider… si on y prête attention.

Deux cas de figure à bien différencier :

• ‍Image décorative (ou pictogramme sans information essentielle) : dans ce cas, le texte alternatif doit être… vide. On place un attribut alt="" sur l'élément image. Le lecteur d’écran ignorera ainsi l’image, comme prévu. ‍
• Image porteuse de sens : si l’image transmet une information indispensable à la compréhension, toute cette information doit être restituée soit dans l'alternative de l'image, soit sous une autre forme textuelle à la suite de celle-ci (dans un texte visible uniquement par les technologies d'assistance) : description complète, texte présent dans l’image, explication détaillée des données représentées (par exemple, les valeurs d’un graphique).

Attention aux pièges courants !
Certaines bibliothèques d’images (comme Unsplash, Pexels…) ajoutent automatiquement des alt text descriptifs aux images décoratives. Ces descriptions génériques parasitent la lecture et compliquent inutilement la navigation des personnes déficientes visuelles. Idem pour les librairies d’icônes : la plupart du temps, il vaut mieux retirer les textes alternatifs par défaut.

Autres bonnes pratiques associées :
Si une image est légendée, associer la légende à l’image via un attribut aria-describedby ou aria-labelledby.

Exemple :
<img src="image.jpg" aria-labelledby="descImg1">

<span id="descImg1">Infographie présentant l'équipe d'Urbilog : [liste des membres]</span>
‍

Toujours prévoir un mécanisme alternatif accessible pour les captchas visuels ou qui nécessitent un mouvement fin. Petite subtilité à connaître :

• aria-labelledby : l'alternative est lue automatiquement.

• aria-describedby : information supplémentaire.  

Les cadres (iframes) : souvent oubliés, vite corrigés

Sur Webflow, les iframes sont principalement utilisés pour intégrer des vidéos (YouTube, Vimeo...). Le critère RGAA ici est simple, mais impératif : chaque iframe doit avoir un titre explicite via l’attribut title.

Exemple :
<iframe src="..." title="Vidéo YouTube : Présentation de l’accessibilité numérique"></iframe>

Ce titre doit refléter le contenu réel de la vidéo, pas une description générique.
Prévoir également un titre visible sur la page, au-dessus ou à proximité immédiate de l’iframe.

En résumé : tout cadre doit être présenté et décrit. Simple, mais souvent négligé.

Les couleurs : le critère redouté des taux de contraste

Le contraste est probablement l’une des causes les plus fréquentes de non-conformité RGAA. Non pas par mauvaise volonté, mais parce que notre perception des couleurs nous joue des tours.

Trois règles fondamentales à retenir :

1. L’information ne doit jamais reposer uniquement sur la couleur. Si une couleur sert à indiquer un statut ou une information (ex : vert = valide, rouge = erreur), prévoir un pictogramme ou un texte complémentaire.

2. La couleur du texte et la couleur de fond juxtaposée à ce texte doit présenter un taux de contraste minimal selon certaines situations :
   - Ratio de 4.5:1 au moins pour les petits textes.
   - Ratio de 3:1 possible pour les gros titres.
   - Utiliser un outil de mesure (ex. TPGi Color Contrast Checker) : ne jamais se fier à sa perception visuelle.
   Attention aux textes sur image : le contraste doit être mesuré sur les zones les moins contrastées de l’image, et non sur une moyenne visuelle. Il est préférable dans ce cas, de ne pas utiliser une image, mais de la remplacer par du texte stylisé.  

3. Les éléments interactifs (liens, boutons) doivent rester contrastés en toute circonstance :
   - Au repos, au survol (hover), au focus clavier.
   Le contraste entre le bouton et son arrière-plan doit être suffisant, même si l’arrière-plan est une image.

Astuce Urbilog : Lorsqu’un simple changement de couleur ne suffit pas, ajouter une bordure contrastée autour de l’élément interactif. Le RGAA mesurera le contraste entre la bordure et l’arrière-plan, ce qui facilite largement le respect des ratios.

Exemple typique d’erreur fréquente : même si le texte semble parfois lisible à l’œil nu, il peut s’avérer non conforme selon les outils de mesure. Raison de plus pour tester systématiquement.

En résumé

L’accessibilité numérique ne repose pas sur quelques réglages dans un back-office. C’est un travail d’attention aux détails, dès la conception, à chaque niveau du projet.

Sur Webflow, ces trois critères (images, cadres, couleurs) reviennent très souvent lors des audits. Les maîtriser permet déjà de franchir un cap important vers des contenus réellement accessibles — et pas juste « presque conformes ».

Chez Urbilog, c’est justement ce qu’on aime faire : transformer des normes techniques en pratique concrètes et applicables.