Nous utilisons juste ce dont on a besoin pour le fonctionnement du site. Pour plus d'infos lire notre politique de confidentialité.
icon-cookie

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

Florian Bodelot
Florian Bodelot
December 3, 2021
Ecran d'ordinateur avec le logo de Webflow et une note d'accesibilty google à 100/100

Tables des matières

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.

Webflow tutoriel comment transformer les pixels en REM

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

Vous méritez un site Webflow qui fait l'effet " Wahouu " !

Prenez contact avec nous aujourd'hui. L'équipe fantastique de Digidop est prête pour vous aider à construire un site web qui répond à vos besoins 🚀

100% de nos clients nous ont attribué la note maximale de 5/5.
Site digidop.fr sur un écran d'ordinateur avec un badge de recommandations et des réactions