Accessibility Checklist For Webflow Sites
Tags: webaccessibility, webflowdesign, webflow, a11y
Published: 2021-10-02 10:28:57

---
title: Accessibility Checklist For Webflow Sites
published: true
date: 2021-10-01 12:51:48 UTC
tags: webaccessibility,webflowdesign,webflow,accessibility
canonical_url: https://www.matechs.com/blog/accessibility-checklist-for-webflow-sites

---

_Designing and developing websites for everyone._

![Building accessible sites in Webflow](https://cdn-images-1.medium.com/max/1024/1*R5guXDCNfe7IC7ewV1CCUQ.png)


### ‍What is web accessibility?

Web accessibility means that every web interface is functional for everyone, including people with permanent or temporary disabilities such as auditory, cognitive, neurological, physical, speech, visual. Accessibility features are not only _essential_ to disabled people, they’re _useful_ to everyone in different situations.

Check out the video below by [W3C WAI](https://www.w3.org/WAI/about/) to better understand the importance of web accessibility. W3C WAI stands for World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI).

You’ll find other useful links at the bottom of this article.

[https://www.youtube.com/watch?v=3f31oufqFSM](https://www.youtube.com/watch?v=3f31oufqFSM)


### How to build accessible sites in Webflow?

To make your job easier, Webflow provides a few auditing tools to help you with basic accessibility features as you build your project.

A red rectangle will appear on the left side of your canvas when there are issues on the selected page. By clicking on it, you’ll see the Audits panel and the list of issues detected.

![webflow audits panel](https://cdn-images-1.medium.com/max/1000/0*cs8YACqs8OGF4xyT.png)

In addition, Webflow provides a thorough accessibility checklist that includes everything you need to know: [https://webflow.com/accessibility/checklist](https://webflow.com/accessibility/checklist).

However, due to a lack of time or resources, you may not always be able to go through all the points in the above checklist for every project build.

Another barrier to accessibility as a topic is that most resources are not easily comprehensible by everyone. Increasing accessibility awareness is important should be supported by learning resources that address designers and developers of different levels.

Hence, I’ve put together a simplified list that facilitates me in making Webflow sites more accessible and becoming a better builder.

‍

### 👉 Basic accessibility features:

_(I typically take care of these as I plan and build the site.)_

‍

#### **Headings Hierarchy**

One of the first things to consider when organizing the site content is the logical sequence of headings. The Audits panel will flag any issues in the headings hierarchy.

![how to set headings tyoe in webflow](https://cdn-images-1.medium.com/max/1024/0*QjleDigPP_lIomyt.png)

#### **Image alt text**

Add alt text to images that are relevant to the context. Set as decorative any other image.

![how to set alt text to an image in webflow](https://cdn-images-1.medium.com/max/1000/0*4QpTGuPMzY_qZSnC.png)

‍For images in the rich text element in the CMS, just the click the image and then go to settings as shown below.

![how to set alt text to an image in the webflow CMS](https://cdn-images-1.medium.com/max/1024/0*5cHVRivsex0N2FZE.gif)

Learn more about how to choose _image alt text_ at the following link: [https://webaim.org/techniques/alttext/](https://webaim.org/techniques/alttext/).

#### **Non-descriptive link content**

The link content should be short and contextual. Users should be able to know what to expect by clicking on the link.

![examples of links](https://cdn-images-1.medium.com/max/900/0*4OySKVN9oTfWkEhV.png)

Learn more about _non-descriptive link content_ at the following link: [https://university.webflow.com/lesson/audit-panel#non-descriptive-link-content](https://university.webflow.com/lesson/audit-panel#non-descriptive-link-content).

#### **Colour contrast between text & background**

The ratio of the colour contrast should be at least 4.5:1.

![contrat ratio in the styling panel in webflow](https://cdn-images-1.medium.com/max/1000/0*penplTZI26z3Uh1_.png)

‍If you have an image as a background and text elements on top of it like in the image below, you might see a contrast failure when you select the _paragraph_ element. One way to circumvent this is by adding a background colour to the _content-wrapper_.

![an image element with text on it in the webflow canvas and the navigator on the left.](https://cdn-images-1.medium.com/max/1024/0*B25-9H0LYPdGBIGr.png)

Learn more about _contrast ratios_ at the following link: [https://university.webflow.com/lesson/make-your-site-more-accessible](https://university.webflow.com/lesson/make-your-site-more-accessible).

#### **Forms**

As a user, I need field labels and placeholders to help me understand what action is expected from me. Make sure you’re using the specific _field label_ element, not a text element.

![a contact form built in webflow](https://cdn-images-1.medium.com/max/1024/0*JA4jTa17Emk6gA9A.png)

#### **Footer lists**

Footers should be built as lists, especially when there are multiple sections and links.

![showing a footer built using lists](https://cdn-images-1.medium.com/max/1024/0*NMGVwKjZ29WnmKFq.png)

#### **Grids layout & flexbox**

You might encounter accessibility issues when reorganizing elements visually, instead of logically. This could create confusion as assistive technologies follow the logical order.

For example, when using grid-auto-flow: dense or row-reverse/column-reverse in flexbox, we change the way elements are visually displayed, not their placement in the page source.

Learn more at the following links:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items


### 👉 Additional checks

(I usually focus more on these in the QA stage of the project.)

#### **Keyboard navigation**

Check if you can navigate the site with the keyboard, making sure that all the _focused_ states are set.

![showcasing keyboard navigation in a footer](https://cdn-images-1.medium.com/max/1024/0*9uWaH6_iMMLoUXOI.gif)

#### **Visual impairment**

Although this is something we take care of when deciding the UI of the site, it’s worth using the _Visual preview_ feature that allows you to check how people with specific visual impairments see your site.
![visual preview settings in webflow](https://cdn-images-1.medium.com/max/1024/0*AvS3KnvOz-jUTs-M.png)

#### **Blinking and flashing content**

Ensure that animations and interactions do not distract users from the content. They shouldn’t get in the way of how users interact with the site.‍

#### **Anchor links**

You can change the speed of the _anchor links_ transition as you prefer with custom attributes. For accessibility, it should scroll immediately to the element with no delay.

![how to set scroll-speed to anchor links in webflow](https://cdn-images-1.medium.com/max/1024/0*0pDoy3IyjlrJ_cUG.png)

### Web accessibility resources

If you want to go deeper in researching web accessibility, here are a few resources to get you started:

#### **Main resources:**

[https://webaim.org/intro/](https://webaim.org/intro/);

[https://www.w3.org/WAI/standards-guidelines/wcag/](https://www.w3.org/WAI/standards-guidelines/wcag/);

[https://www.a11yproject.com/](https://www.a11yproject.com/).‍

#### **Accessibility resources by Webflow:**

[https://webflow.com/accessibility](https://webflow.com/accessibility).‍

#### **Documentation on accessibility in Webflow by F’insweet:**

[https://www.finsweet.com/client-first/docs/accessibility](https://www.finsweet.com/client-first/docs/accessibility).

_If you want to get in touch with me, choose your preferred method here:_ [**https://www.matechs.com/mirelaprifti**](https://www.matechs.com/mirelaprifti)

* * *