3 practices that improve the accessibility of your Webflow site

Documentation
December 3, 2021
3 min
Computer screen with the Webflow logo and a Google accessibility score of 100/100.
Key points

The accessibility of websites is a topic of great importance to me and, in my view, should also be of significant importance to you! Website accessibility is defined as making your website usable by everyone. There are various types of disabilities, such as visual impairments (blindness, low vision), temporary disabilities (broken arm or hand, for example), or permanent disabilities (mobility impairments).

Gradually, accessibility is being recognized as an important SEO criterion. Google now incorporates accessibility into its search algorithm when evaluating website rankings. Therefore, the interface of your website must be accessible, and here are 3 easy points to implement.

1 · Choose to use REM instead of Pixels

Why? To automatically adjust the size of your typography to screens that have enabled a feature called "Font Size Adjustment". You know, that feature that enlarges the font size on messages, emails, and apps on an iPhone, for instance? (It's like a zoomed-in screen)

Indeed, REMs are a dynamic display format, in contrast to static pixels. Choosing to use REMs is therefore a genuine added value for your website. (and your SEO 😉)

To easily convert your pixel fonts to REMs, simply divide the pixel value by 16, since 1 rem = 16 pixels.

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

Conversion rem to pixels

2 · Maintain a minimum line height between 1.3 and 1.7

To improve the readability of your text content, it's advisable to add line heights (vertical space between lines of text) in your content. Regardless of the tool—whether it's WordPress or Webflow—you have the option to select the line height of your text directly in your CSS.

Use a minimum line height of 1.3 points to prevent your content from turning into an unreadable block of text. (Especially if you have a blog!)

Webflow tutorial on how to change the line height of your content

3 · The three-click rule for your site

Ensure that each page of your site is accessible within three clicks maximum. To achieve this, create a simple and easy-to-understand internal linking structure. We suggest using a tool like Miro to visually map out the structure of your site and work on the user journey.

Illustration of the internal linking structure of digidop.fr on Miro
Example of an internal linking 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 great for crawlers, but a human-readable site map is also a real advantage! (Yes, we shouldn't only think about algorithms, but also about your users!) A site map greatly enhances UX by making it easier to find what you're looking for on the website in question.

We recommend that you:

1 - Create a static page

2 - Include a "Site Map" link in your footer

3 - Connect this link to your new static page: site map

4 - Add a clear and readable site map for your visitors (example below)

Site map on static page from the footer

Florian Bodelot
Florian Bodelot
Co-founder

Suggested articles

2025 SEO Stats
Documentation
SEO

SEO Trends 2025: 20 Stats to Boost Your Search Rankings

SEO Trends 2025: 20 Stats to Boost Your Search Rankings
A 3D shiny diamond with “Site of the Day” written in the background and four awards displayed in the front.
Storytelling
Digidop

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations
Deepseek vs ChatGPT
News
AI

DeepSeek vs ChatGPT: The Comprehensive 2025 Comparison Shaking Up the AI Industry

DeepSeek vs ChatGPT: The Comprehensive 2025 Comparison Shaking Up the AI Industry

Want to turn your website into your most valuable asset?

Contact us today