Badge Webflow Award Winner 2023

3 pratiques qui améliorent l'accessibilité de votre site Webflow

Publié le 
3/12/2021
Modifié le 
27/3/2023
Temps de lecture : 5 min
Ecran d'ordinateur avec le logo de Webflow et une note d'accesibilty google à 100/100
Écrit par
Florian Bodelot avec un T-shirt Digidop

Florian Bodelot

Co-fondateur

Dans cet article nous donnons quelques tips et astuces pour facilement améliorer l'accessibilité de votre site weblow directement dans le designer CSS !

Points clés à retenir

L'accessibilité des sites web est un sujet qui est d'une grande importance pour moi et qui, à mes yeux, devrait également être d'une grande importance pour vous ! L'accessibilité des sites web se définit comme le fait de rendre votre site web utilisable par tous. Il existe différents types de handicaps tels que la déficience visuelle (aveugle, malvoyant), le handicap temporaire (bras ou main cassé, par exemple) ou les handicaps permanent (handicap moteur).

Petit à petit l'accessibilité est comptabilisé comme un critères SEO. Google intègre donc désormais l'accessibilité dans son algorithme de recherche lorsqu'il évalue le classement des sites Web. L'interface de votre site Web doit donc être accessible et voici 3 points facile à implanter.

1 · Choisir d'utiliser les REM plutôt que les Pixel

Pourquoi ? Pour automatiquement adapter la taille de votre typographie aux écrans qui ont activés une fonctionnalité "Modification de la taille de la police". Vous savez cette fonctionnalité qui grossit la taille de la police sur les messages, mails, applications d'un Iphone par exemple. (Type écran zoomé)

En effet, les REM sont un format d'affichage dynamique à contrario des pixels qui sont statiques. Choisir d'utilisez les REM est donc une véritable valeur ajoutée pour votre site web. (et votre seo 😉)

Pour facilement convertir votre police Pixels en REM il vous suffit de diviser la valeur de vos pixels par 16 car 1 rem = 16 pixels.

Si vous utilisez Webflow, vous pouvez le faire directement dans le CSS Designer.

Conversion rem vers pixels

2 · Avoir un interligne minimum entre 1.3 et 1.7

Afin de rendre votre contenu texte plus lisible il est préférable d'ajouter des interlignes (espace vertical entre les textes) dans votre contenu. Peut importe l'outil, wordpress ou webflow vous avez la possibilité de choisir l'interligne de votre texte directement dans votre CSS.

Utilisez un interligne minimum de 1.3 points pour éviter de voir votre contenu se transformer en paté illisible. (Surtout si vous avez un blog !)

Webflow tutoriel comment modifier l'interligne de votre contenu

3 · La règle des 3 clics sur votre site

Veillez à ce que chacune des pages de votre site soit accessible en trois clics maximum. Pour ce faire, construisez une structure de liens internes qui soit simple et facile à comprendre. Nous vous suggérons d'utiliser un outil comme Miro pour schématiser graphiquement et visuellement la structure de votre site et travailler sur le parcours utilisateur.

Illustration du maillage interne du site digidop.fr sur miro
Exemple de schéma de maillage interne

Sinon on à un Pro Tips qui permet de rendre toutes vos pages accessible en 2 clics maximum. Keep scroooooolling

Tips : créer une page "Plan de site"

Un sitemap.xml est bien pour les robots crawler mais un plan de site pour les humains est aussi un vrai plus ! (Oui il ne faut pas penser qu'aux algorithmes, mais aussi à vos utilisateurs !) Un site map aide considérablement à améliorer l’UX en permettant à trouver plus facilement ce que l’on cherche sur le site web en question.

Nous vous conseillons de :

1 - Créez une page statique / static

2 - Intégrez un lien "Plan du site dans votre footer"

3 - Connectez ce lien à votre nouvelle page statique / static : plan du site

4 - Ajoutez un plan de site clair et lisible pour les visiteurs de votre site (exemple ci-dessous)

Plan de site en page static depuis le footer

projet Flomodia by Digidop
projet Coudac by Digidop
projet Heka by Digidopprojet Flaw by Digidopprojet Morfo by Digidop