#6 Image Décorative

Une petite optimisation dans Webflow qui vous sera utile lorsque vous utilisez des illustrations en background de vos sections ou si vous utilisez des icônes (servant uniquement au design) dans votre projet 🎆

Si vous voulez que votre site soit accessible, vous avez 2 possibilités pour ce type de fichier :

1. ❌ La première consiste à ajouter une balise alt text depuis vos assets :

Cette solution n’est pas la meilleure car ajouter une valeur textuelle à ces images « polluerait » la lecture de la page par les lecteurs d’écran (screen readers). Le problème est que si vous n’ajoutez pas de balise alt text, il se peut que le lecteur d’écran lise le nom du fichier de l’image à la place (ce qui n’est pas mieux, au contraire). Nous devons dire aux technologies d’assistance web d’ignorer ces images et c’est là que la deuxième option est optimale.

2. ✅ La seconde méthode consiste à déclarer l’illustration ou l’icône comme décorative.

Une image décorative est une image qui n’apporte pas d’informations au contenu d’une page ou qui est présente uniquement pour une question d’esthétique. Par exemple, un blur en background de sa section. Il faut savoir que c’est à VOUS de décider si une image est décorative ou informative. Vous devez vous poser la question : est-ce que mon image apporte une information en plus dans ma page ? Si tel est le cas, il faut insérer une alt text descriptive, sinon il faut déclarer l’image comme décorative. 

Pour plus d’informations sur les images décoratives, vous pouvez consulter ce lien de W3C 👉 https://www.w3.org/WAI/tutorials/images/decorative/

Dans Webflow, il est très simple de déclarer un fichier visuel comme décoratif ! Il suffit de vous rendre dans vos assets, de vous rendre dans les paramètres de votre fichier et de cliquer sur « decorative » ⚡️

Les lecteurs d’écrans pourront maintenant ignorer les images décoratives de votre page, vous fluidifierez la navigation de vos pages pour les personnes en situation de handicap visuel notamment !