Accessibility checklist

Your website should be inclusive of, and accessible to, as many people as possible. This essential tool for Webflow users contains guidelines derived from WCAG, including how to implement them with no and low-code solutions.

Start checklist

About the checklist

This is a living checklist maintained by Webflow’s brand studio web team. Some of the tasks below are inspired by The Web Content Accessibility Guidelines (WCAG 2.1 AA), while others are best practices our team follows. We’ll be adding to this resource over time and welcome your feedback on how to improve it.

Does the checklist guarantee my site is accessible?

Addressing the tasks in this checklist will make your site more accessible, but they don’t guarantee that your site will be fully accessible for all. This checklist is derived from WCAG 2.1 AA, but isn’t all-encompassing of those guidelines.

Animation

Content that moves, either on its own, or when triggered by a person activating a control.

0 / 0 Checked

Appearance

How your content looks in any given situation.

0 / 0 Checked

Code

Uses code to effect the appearance or interactivity at an element, page or project level.

0 / 0 Checked

Color

How legible colors are when placed next to, and on top of each other.

0 / 0 Checked

Content

Content is the most important part of your site.

0 / 0 Checked

Controls

Controls are interactive elements such as links and buttons that let a person navigate to a destination or perform an action.

0 / 0 Checked

Forms

Forms allow people to enter information into a site for processing and manipulation.

0 / 0 Checked

Headings

Used to help break up "chunks” of content on a page.

0 / 0 Checked

Images

As one of the core ways to communicate within your project, make sure images can be enjoyed by all.

0 / 0 Checked

Interactions

Ensures interactions are used responsibly for creating animation and unique functionality.

0 / 0 Checked

Keyboard

Ensures the project can be used by keyboard only people or those that use assistive technologies.

0 / 0 Checked

Lists

Identifies a collection of related items, if they are sequential, and how many items are present in the list grouping.

0 / 0 Checked

Media

Media includes content such as pre-recorded and live audio and video.

0 / 0 Checked

Tables

Tables are a structured set of data that help people understand the relationships between different types of information.

0 / 0 Checked
Images

Add aria-label to homepage logo

Appearance

Add descriptions to sensory-based instructions

Where:
Style panel
When:
Design
Appearance

Allow zoom without forcing horizontal scrolling

Media

Avoid autoplaying media

Animation

Avoid excessive motion behind text

Where:
Canvas
When:
Design
Interactions

Avoid harmful animation patterns

Interactions

Avoid parallax effects

Interactions

Avoid scrolljacking

Forms

Avoid using autofocus attribute

Images

Avoid using meaningful text images

Where:
Canvas
When:
Design
Appearance

Check legibility on landscape and portrait

Where:
Style panel
When:
Review
Color

Check the contrast for all borders

Where:
Style panel
When:
Review
Color

Check the contrast for all icons

Where:
Style panel
When:
Review
Color

Check the contrast for all text

Where:
Style panel
When:
Review
Color

Check the contrast for text that overlaps images or videos

Where:
Style panel
When:
Review
Keyboard

Clearly style focus states

Code

Don't disable zoom

Keyboard

Ensure accordions are keyboard navigable

Appearance

Ensure content has appropriate structure and relationships

Controls

Ensure controls have all styled states

Keyboard

Ensure focus order is logical

Forms

Ensure forms are GDPR compliant

Where:
Canvas
When:
Design
Keyboard

Ensure modals are keyboard navigable

Tables

Ensure table columns, rows, and cells have proper ARIA labels

Appearance

Ensure target sizes are at least 44px

Where:
Style panel
When:
Design
Appearance

Ensure that text can be resized without loss of content or functionality

Where:
Style panel
When:
Review
Controls

Find and fix empty links

Where:
Audit panel
When:
Review
Code

Hide decorative elements with an aria label

Code

Include a "skip to main" link

Images

Include alt text for every important image

Media

Include audio descriptions

Where:
Canvas
Media

Include captions in videos

Animation

Include motion warnings

Where:
Canvas
When:
Design
Appearance

Layout is simple, straightforward, and consistent

When:
Design
Appearance

Make sure color isn't the only way information is conveyed

Where:
Style panel
When:
Design
Appearance

Optimize text styling for legibility

Where:
Style panel
When:
Design
Code

Provide a unique <title> for each page

Media

Provide controls to pause all media

Keyboard

Remove focus from hidden elements

Interactions

Set anchor scroll animation to instant

Code

Set your site's language code

Headings

Use clear, descriptive, sequential headings

Where:
Canvas
When:
Design
Content

Use inclusive language

Where:
Canvas
When:
Design
Code

Use landmark elements to indicate important content regions

Headings

Use logical heading order

Content

Use plain language

Where:
Canvas
When:
Design
Lists

Use semantic lists

Animation

Use subtle animations that don't flash more than recommended

Content

Use unique and descriptive link labels

Where:
Canvas
When:
Design

Audit panel

The Audit panel flags common accessibility-related issues so you can address them before going live with your site.

0 / 0 Checked

Canvas

When you're in the Designer, you can interact with elements in your project visually on the canvas.

0 / 0 Checked

Custom code

You can insert custom code in the project settings, page settings or an HTML embed element depending on how you want to apply the custom code.

0 / 0 Checked

Element Settings panel

The Element settings panel contains specific attributes and functional settings unique to each element.

0 / 0 Checked

Interactions panel

Interactions let us design around two powerful things: triggers and animations.

0 / 0 Checked

Navigator panel

The Navigator panel displays the content of the current page in the Designer in a hierarchical tree structure.

0 / 0 Checked

Page settings

In the Page settings panel, you can manage a page’s general information and a number of page-wide settings including custom code.

0 / 0 Checked

Project settings

Within project settings, you can adjust project-wide attributes and custom code.

0 / 0 Checked

Style panel

The Style panel, located in the Designer, is where you can control and style every element in your project.

0 / 0 Checked
Element Settings panel

Add aria-label to homepage logo

Category:
Images
Style panel

Add descriptions to sensory-based instructions

Category:
Appearance
When:
Design
Style panel

Allow zoom without forcing horizontal scrolling

Category:
Appearance
Custom code

Avoid autoplaying media

Category:
Media
Canvas

Avoid excessive motion behind text

Category:
Animation
When:
Design
Interactions panel

Avoid harmful animation patterns

Category:
Interactions
When:
Design
Interactions panel

Avoid parallax effects

Category:
Interactions
When:
Design
Custom code

Avoid scrolljacking

Category:
Interactions
Element Settings panel

Avoid using autofocus attribute

Category:
Forms
Canvas

Avoid using meaningful text images

Category:
Images
When:
Design
Style panel

Check legibility on landscape and portrait

Category:
Appearance
When:
Review
Style panel

Check the contrast for all borders

Category:
Color
When:
Review
Style panel

Check the contrast for all icons

Category:
Color
When:
Review
Style panel

Check the contrast for all text

Category:
Color
When:
Review
Style panel

Check the contrast for text that overlaps images or videos

Category:
Color
When:
Review
Style panel

Clearly style focus states

Category:
Keyboard
Custom code

Don't disable zoom

Category:
Code
Custom code

Ensure accordions are keyboard navigable

Category:
Keyboard
Navigator panel

Ensure content has appropriate structure and relationships

Category:
Appearance
Style panel

Ensure controls have all styled states

Category:
Controls
Navigator panel

Ensure focus order is logical

Category:
Keyboard
Canvas

Ensure forms are GDPR compliant

Category:
Forms
When:
Design
Custom code

Ensure modals are keyboard navigable

Category:
Keyboard
Element Settings panel

Ensure table columns, rows, and cells have proper ARIA labels

Category:
Tables
When:
Review
Style panel

Ensure target sizes are at least 44px

Category:
Appearance
When:
Design
Style panel

Ensure that text can be resized without loss of content or functionality

Category:
Appearance
When:
Review
Audit panel

Find and fix empty links

Category:
Controls
When:
Review
Element Settings panel

Hide decorative elements with an aria label

Category:
Code
Custom code

Include a "skip to main" link

Category:
Code
Element Settings panel

Include alt text for every important image

Category:
Images
Canvas

Include audio descriptions

Category:
Media
Custom code

Include captions in videos

Category:
Media
Canvas

Include motion warnings

Category:
Animation
When:
Design
Navigator panel

Layout is simple, straightforward, and consistent

Category:
Appearance
When:
Design
Style panel

Make sure color isn't the only way information is conveyed

Category:
Appearance
When:
Design
Style panel

Optimize text styling for legibility

Category:
Appearance
When:
Design
Page settings

Provide a unique <title> for each page

Category:
Code
Custom code

Provide controls to pause all media

Category:
Media
Style panel

Remove focus from hidden elements

Category:
Keyboard
Element Settings panel

Set anchor scroll animation to instant

Category:
Interactions
Project settings

Set your site's language code

Category:
Code
Canvas

Use clear, descriptive, sequential headings

Category:
Headings
When:
Design
Canvas

Use inclusive language

Category:
Content
When:
Design
Element Settings panel

Use landmark elements to indicate important content regions

Category:
Code
Audit panel

Use logical heading order

Category:
Headings
Canvas

Use plain language

Category:
Content
When:
Design
Navigator panel

Use semantic lists

Category:
Lists
Interactions panel

Use subtle animations that don't flash more than recommended

Category:
Animation
When:
Design
Canvas

Use unique and descriptive link labels

Category:
Content
When:
Design

Design

Tasks to consider during the early strategy, planning, and design process of your project to be sure to create the most accessible experience before you begin development.

0 / 0 Checked

Development

Tasks to consider while developing your site in Webflow and which are critical to ensuring all people are able to have a consistent experience.

0 / 0 Checked

Review

Tasks to consider when your project is nearing completion and you are doing a final check for quality assurance.

0 / 0 Checked
Development

Add aria-label to homepage logo

Design

Add descriptions to sensory-based instructions

Category:
Appearance
Where:
Style panel
Development

Allow zoom without forcing horizontal scrolling

Category:
Appearance
Where:
Style panel
Development

Avoid autoplaying media

Category:
Media
Where:
Custom code
Design

Avoid excessive motion behind text

Category:
Animation
Where:
Canvas
Design

Avoid harmful animation patterns

Design

Avoid parallax effects

Development

Avoid scrolljacking

Category:
Interactions
Where:
Custom code
Development

Avoid using autofocus attribute

Category:
Forms
Design

Avoid using meaningful text images

Category:
Images
Where:
Canvas
Review

Check legibility on landscape and portrait

Category:
Appearance
Where:
Style panel
Review

Check the contrast for all borders

Category:
Color
Where:
Style panel
Review

Check the contrast for all icons

Category:
Color
Where:
Style panel
Review

Check the contrast for all text

Category:
Color
Where:
Style panel
Review

Check the contrast for text that overlaps images or videos

Category:
Color
Where:
Style panel
Development

Clearly style focus states

Category:
Keyboard
Where:
Style panel
Development

Don't disable zoom

Category:
Code
Where:
Custom code
Development

Ensure accordions are keyboard navigable

Category:
Keyboard
Where:
Custom code
Development

Ensure content has appropriate structure and relationships

Category:
Appearance
Development

Ensure controls have all styled states

Category:
Controls
Where:
Style panel
Development

Ensure focus order is logical

Category:
Keyboard
Design

Ensure forms are GDPR compliant

Category:
Forms
Where:
Canvas
Development

Ensure modals are keyboard navigable

Category:
Keyboard
Where:
Custom code
Review

Ensure table columns, rows, and cells have proper ARIA labels

Design

Ensure target sizes are at least 44px

Category:
Appearance
Where:
Style panel
Review

Ensure that text can be resized without loss of content or functionality

Category:
Appearance
Where:
Style panel
Review

Find and fix empty links

Category:
Controls
Where:
Audit panel
Development

Hide decorative elements with an aria label

Category:
Code
Development

Include a "skip to main" link

Category:
Code
Where:
Custom code
Development

Include alt text for every important image

Development

Include audio descriptions

Category:
Media
Where:
Canvas
Development

Include captions in videos

Category:
Media
Where:
Custom code
Design

Include motion warnings

Category:
Animation
Where:
Canvas
Design

Layout is simple, straightforward, and consistent

Category:
Appearance
Design

Make sure color isn't the only way information is conveyed

Category:
Appearance
Where:
Style panel
Design

Optimize text styling for legibility

Category:
Appearance
Where:
Style panel
Development

Provide a unique <title> for each page

Category:
Code
Development

Provide controls to pause all media

Category:
Media
Where:
Custom code
Development

Remove focus from hidden elements

Category:
Keyboard
Where:
Style panel
Development

Set anchor scroll animation to instant

Development

Set your site's language code

Category:
Code
Design

Use clear, descriptive, sequential headings

Category:
Headings
Where:
Canvas
Design

Use inclusive language

Category:
Content
Where:
Canvas
Development

Use landmark elements to indicate important content regions

Category:
Code
Development

Use logical heading order

Category:
Headings
Where:
Audit panel
Design

Use plain language

Category:
Content
Where:
Canvas
Development

Use semantic lists

Category:
Lists
Design

Use subtle animations that don't flash more than recommended

Category:
Animation
Design

Use unique and descriptive link labels

Category:
Content
Where:
Canvas

Total progress

Congratulations on making the web a more accessible place. Celebrate your work on Twitter.
Celebration horn and streamer emoji
0 / 0
Hide progress
Show progress

Collaborate with us

This is just a start! We’re excited to see how this resource helps make your sites more accessible, and to hear your feedback, suggestions, or questions.

This checklist came together with the help of Webflow’s own internal accessibility experts and advocates, with lots of help from many other resources from the accessibility community at-large:

Join the conversation

Have a question about an accessibility guideline, or want to share your experiences with the community? Head over to the Webflow forum and post with the “Accessibility” tag to share.

Webflow forum
Watch the course

Have something to add?

Over time, we’ll add more to the checklist based on WCAG updates and what’s possible in Webflow. Suggest an addition, or tell us your thoughts on the existing guidelines, by completing the feedback form below.

Complete the form
Watch the course