3 tips to optimize the accessibility of the webflow site

In this article we give some tips and tricks to easily improve the accessibility of your weblow site directly in the CSS designer!

Key points to remember

Websiteaccessibility is a topic that is of great importance to me and that, in my opinion, should also be of great importance to you! Website accessibility is defined as making your website usable for everyone. There are different types of disabilities such as visual impairment (blind, visually impaired), temporary disability (broken arm or hand, for example) or permanent disability (motor disability).

Accessibility is gradually being counted as an SEO criterion. Google is now integrating accessibility into its search algorithm when it evaluates the ranking of websites. The interface of your website must therefore be accessible and here are 3 easy points to implement.

1 - Choosing to use REM rather than Pixel

Why? To automatically adapt the size of your typography to screens that have a"Change font size " feature enabled. You know that feature that enlarges the font size on messages, emails, applications on an iPhone for example. (Zoomed screen type)

Indeed, REMs are a dynamic display format as opposed to pixels which are static. Choosing to use REM is therefore a real added value for your website. (and your seo 😉 )

To easily convert your Pixels font to REM you just have to divide your pixel value by 16 because 1 rem = 16 pixels.

If you use Webflow, you can do this directly in the CSS Designer.

2 - Have a minimum line spacing between 1.3 and 1.7

In order to make your text content more readable it is best to add line spacing (vertical space between texts) in your content. Whatever the tool, wordpress or webflow, you can choose the line spacing of your text directly in your CSS.

Use a minimum line spacing of 1.3 points to avoid your content turning into an unreadable paté. (Especially if you have a blog!)

Webflow tutorial how to change the line spacing of your content

3 - The 3-click rule on your site

Make sure that each page of your site can be accessed within three clicks. To do this, build an internal link structure that is simple and easy to understand. We suggest you use a tool like Miro to graphically and visually map out the structure of your site and work on the user journey.

Illustration of the internal mesh of the site digidop.fr on miro — Example of an internal mesh diagram

Otherwise we have a Pro Tips that allows you to make all your pages accessible in 2 clicks maximum. Keep scroooooolling

Tips : create a "Site map" page

A sitemap.xml is good for crawlers but a site map for humans is also a real plus! (Yes, don't just think about the algorithms, think about your users too!) A site map helps considerably to improve the UX by making it easier to find what you are looking for on the website in question.

We advise you to :