Webflow Accessibility Checklist to Make Your Business Website Inclusive

Web accessibility is not a trend but a moral and social responsibility for businesses today. With over a billion people living with disabilities globally, it’s important to ensure your website is open to those with visual, hearing, movement-related and cognitive disabilities.

Vlad Magdalin, Founder and CEO of Webflow, stresses the importance of web accessibility: 

‍“To realize our mission of democratizing access to software creation, we have to make sure that the experiences created with Webflow, and Webflow itself, are accessible for as many people as possible.”

In the following guide, we look at why businesses shouldn’t ignore accessibility, review what Webflow has to offer in terms of developing accessible sites and provide key Webflow accessibility tips. 

Why businesses should care about web accessibility

There are multiple reasons to make web accessibility your priority, and not all of them are related to the bottom line. Let’s look at them:

Expanding your user base

It’s estimated that 16% of the world’s population, or 1.3 billion people, have a disability. Out of them, over 70 million live in the US. Catering to this population can greatly expand your user base, a large portion of which has disposable income and likely overlaps with your target audience. 

Improving your brand image

Making your website accessible means you’re serious about making your products or services open to a broader public regardless of their disability status. This signals that your business is socially responsible and can benefit your brand perception. 

Make inclusivity part of your brand promise and prove it by meeting accessibility requirements such as WCAG. You can pass compliance audits, or you can simply release a statement of your accessibility commitment to be transparent about how you implement accessibility best practices.

Boosting user experience and SEO

An accessible website makes it easier to perceive, operate and understand information for everyone, not only for those with disabilities. Improving your web accessibility means lowering barriers to adopting and using your online brand platform, and it benefits every user. 

Also, search engines will appreciate you providing a better user experience for all. Sites that show higher user engagement tend to rank better in general, so you can help your SERP performance by removing blockers to seamless and frictionless user experience.

Legal compliance

Your business may be subject to compliance with accessibility legislation, especially if you operate in the US, Canada or the European Union. 

Key regulations related to web accessibility include:

• The Americans with Disabilities Act (ADA)
• Section 508 of the Rehabilitation Act
• Accessible Canada Act (ACA)
• Accessibility for Ontarians with Disabilities Act (AODA)
• European Accessibility Act (EAA)

You can check this resource for a comprehensive list of web accessibility policies by country.

Not all of these regulations contain formal requirements regarding web accessibility. For example, ADA, a US civil rights law, tackles accessibility broadly and mandates that all Title II (state and local governments) and Title III (businesses open to the public such as colleges, libraries, banks, parks, etc.) organizations must make their websites accessible at the WCAG 2.1 Level AA.

Typically, businesses that are mandated to comply with such regulations belong to the government and public sector. Certain private sector companies, such as those providing services to federal or state bodies, might be obliged to follow these legislative guidelines as well.  

What does Webflow offer in terms of accessibility?

Making web products accessible is at the core of Webflow’s mission. Since the start, they’ve been focusing on making website building accessible to creators. Yet they acknowledge that this didn’t always mean accessibility for people with disabilities. Currently, the company works on improving their in-built accessibility features and controls and is transparent about their efforts in this area. 

Recognizing their responsibility as makers of web products, Webflow provides a range of accessibility tools for developers, web designers and authors of websites. Their accessibility statement contains such commitments as:

• Building an accessibility improvement roadmap for Webflow that includes expanding the assistive technology support throughout the platform components.
• Running internal training to ensure their product and software development practices adhere to web accessibility requirements and raise their team awareness.

Webflow’s resources dedicated to web accessibility help everyone working on a website improve their understanding and skills in the area: 

• Web accessibility course in Webflow University
• Webflow’s accessibility checklist covering all action points across the design, development process and review stages

There are also key guidelines that Webflow refers to in their resources: 

• Web Content Accessibility Guidelines (WCAG) 2.1
• Web accessibility checklist by the A11Y Project

The Webflow team continuously works on improving the baseline accessibility. At the moment, they state that the following elements are fully keyword-operable and support screen readers in compliance with WCAG 2.1 Level AA: 

• Tabs
• Dropdowns
• Images
• Text links
• Link blocks
• Buttons
• Sections
• Lists and list items
• Collection lists
• Navigation bars
• Sliders

On top of that, Webflow helps developers create more accessible websites through working with semantic code and make accessibility-friendly decisions based on available educational resources. 

How to make your Webflow website accessible

In most cases, making an accessible Webflow website means adhering to the Web Content Accessibility Guidelines (WCAG) 2.0 or 2.1 Level AA developed by The World Wide Web Consortium (W3C). This level of accessibility is the standard required by many legislative acts, such as the Americans with Disabilities Act (ADA) or Section 508 of the Rehabilitation Act. Also, Webflow itself is working to make their website WCAG 2.1 Level AA accessible.

WCAG 2.0 and 2.1 (released in 2018 and 2023 respectively) incorporate four core principles:

• Perceivable: information and web page components can be perceived in various ways, such as by seeing, hearing or through electronic Braille. 
• Operable: web elements can be operated in multiple ways, including through keyboard only.  
• Understandable: content presented online can be easily grasped by people with varying cognitive and physical abilities. 
• Robust: information and web components are compatible with various user agents, including assistive technology tools. 

All WCAG versions contain descriptions of the levels of accessibility. Each has prescribed success criteria to be satisfied: 

• Level A: the basic level of conformance 
• Level AA: the ideal level of conformance referenced in many international regulations
• Level AAA: the most advanced and complex level of compliance required to serve specialized audiences

When making websites compatible with assistive technologies, it’s important to ensure correct functioning with the following: 

• Screen readers that convert site content and elements into speech or Braille
• Keyboards for navigation without a computer mouse
• Magnifiers to increase the size of on-screen elements
• Voice-based navigation supporting voice commands instead of manual navigation

Aiming at an accessible website, you can take two routes. The first one is to simply integrate an external plugin or widget to make your site accessible to users with disabilities. The second route is to make your website accessible by design, without relying on any third parties.

Web accessibility plugins: yay or nay?

Accessibility plugins or widgets are quick fixes to help you make your website accessible at the interface level. With such a widget on, people will be able to interact with your website via screen readers and other assistive devices, disable certain design elements, adjust color contrast, stop animation and so on. 

Integrating them often boils down to inserting a piece of custom code. As easy as it gets, this approach has a few disadvantages:

• Widgets don’t make your website inherently accessible at the code level but remediate your code at the interface level.
• With monthly subscriptions, costs will build up in the long term.
• You’re delegating accessibility compliance to a third party, which can result in vendor lock-in.

The alternative is to design your Webflow site with accessibility in mind from the very start. Let’s look at this approach in detail. 

Making your Webflow website accessible by design: a Webflow accessibility checklist

Below, we’ve summed up Webflow accessibility tips and official Webflow guidance regarding web accessibility and broken it down into digestible chunks by category. This is the approach followed by Webflow in their own accessibility checklist that is based on WCAG 2.1 Level AA requirements. While following these recommendations might be not enough to make your website legally compliant with WCAG 2.1 Level AA, it’s still a good starting point. 

Please note that the following information is not intended as legal guidance but rather presents a list of recommendations. Please consult a qualified legal advisor in case your website must be legally compliant with your regional or international legislation in terms of web accessibility. 

Code-level accessibility adjustments

The following recommendations help make your website inherently accessible at the code level. They should be considered at the development stage. Even though it can be easy to correct it down the line, just bake it into your first website iterations to avoid reworks. 

• Clean semantic code: make accessibility-friendly choices when working with Webflow Designer that result in clean semantic code.
• Proper HTML5 tags: mark your web page sections with appropriate tags such <NAV>, <MAIN>, <SECTION>, <FOOTER> so that assistive technology can correctly interact with the content and read it back. 
• Custom ARIA attributes: these are Accessible Rich Internet Applications (ARIA labels) added to HTML to make content elements accessible to assistive technology where native HTML fails. 
• No empty links: links should be checked to contain referenced material. 
• A lang attribute: the website language should be programmatically identifiable. When your website changes to its localized version in a different language, the lang attribute should change accordingly.

Visual styling and content display

This set of Webflow accessibility recommendations deals with how your web content is presented. It falls into the perceivable, understandable and robust principles of WCAG above all. The following measures help you ensure a clear-cut content display that can be perceived by users with low sight, hearing or cognitive disabilities. 

• Simple clean page layouts: avoid making your layout too fancy or overly complicated as this will prevent easy scanning and comprehension. 
• Page titles and meta descriptions: this is useful not only for SEO but also screen reader users for page content identification. 
• Clear sequential headings with appropriate HTML tags: your headings should mark meaningful sections and be tagged sequentially with H1, H2, H3 and so on. There should be only one H1 tag per page. 
• Descriptive link labels: link text should be meaningful and reflect the information being linked.
• Clear form field indicators: this includes providing understandable and clearly visible field labels and tip tools. When information is entered incorrectly, there should be error indications that contain further guidance on required corrections. 
• Advanced typography controls: Make your typography easy to comprehend through advanced controls like rems, viewport height, character count and percentages. Apply font size in rem units rather than in pixels to make text elements responsive. 
• Text zoom: text can be resized by up to 200% without breaking the content or functionality.
• Legibility on landscape and portrait: content can be correctly displayed and perceived regardless of the orientation. 
• Sufficient contrast for web elements: ensure your contrast for borders, text, icons and background colors is at least 4.5:1.
• Text-based instructions: ensure your instructions are not visual or audio only. Avoid conveying information with color or motion only. 
• Web elements not affected by user inputs: make sure neither user input nor interactions via assistive technology tools break your layout or content on display. 
• Accessible documents: when publishing documents such as PDFs, the same requirements apply as to your general web content (unless these documents are archived). 

Motion and animations

The general principle behind this category is to avoid unnecessary hard-to-navigate animation and flashing or blinking content that may cause seizures. 

For this purpose, try to avoid: 

• Excessive motion behind text
• Flashing content where blinking or flashing happens more than 3 times per second 
• Parallax animations
• Motion that communicates meaningful information

As remediation, you can provide:

• Static text-based alternatives to animated components
• Ability to pause, stop or hide animation that’s longer than five seconds
• Motion warnings before flashing images are activated

Media

As a rule of thumb, all non-text-based media should have their text-based alternatives. This helps user agents such as screen readers communicate this content back to users so no meaningful information is lost. 

This category includes the following recommendations:

• Text alternatives for all non-text information: this helps screen readers to convert images, video and audio into speech. 
• Image alt text: all images containing meaningful information should have proper alt text describing the image contents; you should skip alt tags for purely decorative images.
• No auto-playing media elements: all media should be activated by the user.
• Ability to pause, stop or hide media, including background videos: users should have the option to disable media playback.
• Audio descriptions: all audio-based media should come with captions. 
• Video captions: likewise, video content should contain text-based transcripts. 
• No meaningful text on images: unless you absolutely have to, in which case you should still provide descriptive alt tags.

Navigation

The purpose of the following accessibility features is to render your website suitable for navigation via keyboard, voice commands and single pointers, among other assistive tools. 

• Focus state activated: this should enable tabbed navigation so users can navigate all essential elements (including dropdowns and accordions) using their keyboard. 
• ‍Clearly visible keyboard focus indicator: when the focus state is applied, it should be visible to users. Avoid using color only to convey focus activation. 
• Focusable elements in a sequence: when focusable elements form a logical order, they should receive focus without breaking the sequence.
• Single pointer support: navigation should support single pointers even when content is operated through path-based or multipoint gestures, such as two-finger tapping.
• Ability to deactivate single-key shortcuts: to avoid users hitting these shortcuts without meaning it, make it possible to deactivate them altogether. 
• ‍No horizontal scrolling: this applies to both desktop and mobile displays so users can perceive information on the visible part of the screen.
• Enough time: users should have enough time to consume content without forcing them to move on. In case they're out of time, they can request prolongation of their session. This requirement caters to people with cognitive disabilities. 
• Reusable blocks: users should be able to bypass blocks of content reused throughout the website. Such reusable components should be present in the same order each time.  
• Skip to main link: your custom code should contain the ‘skip to main’ link for navigation straight to the first meaningful content on page. 
• Large enough touch controls: your touch controls, or target inputs, should be at least 24px by 24px in size.

Mobile responsiveness

In all cases, the recommendations above apply to both desktop and mobile website versions. Accessing your website on a mobile device shouldn’t restrict your user. Content should be accessible and operable on any screen size in either portrait or landscape orientation. This helps ensure your website can be comfortably used by all audiences, as poor usability on various devices can visibly affect your user experience and engagement.

Webflow websites are mobile-responsive by design. You can create mobile-friendly pages for each of your set breakpoints, so your website looks just the way it should on all screen sizes, both in portrait and landscape orientation. Images are also responsive by default as Webflow creates responsive versions of your images and helps to load mobile websites up to 10 times faster.

Auditing your site for accessibility

Once your site is up, it’s time to go through it and check for all accessibility mishaps. 

You can use Webflow’s in-built auditing tools such as the Audit panel, a color contrast checker, the Vision Preview and the Text Zoom Preview to check such accessibility issues as:

• Missing alt tags
• Empty links or non-descriptive link content
• Non-sequential heading styles
• Color contrast ratio
• Readability for low-vision viewing 
• Content display for people with blue-yellow color blindness and other types of visual impairment

You can also use external automated scanners, some of which are free, to assess your Webflow accessibility. There’s also an option to hire quality assurance specialists to run accessibility tests across devices and browsers. 

Keeping up accessibility awareness in your team

Making your website and digital services accessible is a collective responsibility of your team. Everyone working on it — designers, developers, content creators and managers — should share the understanding of how important web accessibility is for your reputation, customer relationships and legal compliance, if this is the case.

You can opt for knowledge sharing sessions and dedicated training to keep your team aware of web accessibility requirements and techniques, so your team knows and works on it continuously. This awareness helps prioritize awareness-related improvements in your updates without your team asking why.

You can also release an accessibility statement to let your stakeholders know about your commitment to making your web content inclusive for people with disabilities.

Next-level accessibility: meeting WCAG Level AAA requirements

If you want your website to conform to the maximum level of web accessibility as part of your social inclusivity commitment, that’s WCAG Level AAA. Currently, no regulation requires you to adhere to this highest conformance level as the accepted benchmark is Level AA. However, you might want to consider doing this for maximum inclusivity. 

To achieve Level AAA conformance, consider implementing the following accessibility measures: 

• Sign-language for videos
• Captions or transcripts for live audios
• Increased contrast ratio of up to 7:1, or 4.5:1 for fonts of 18px and higher. This requirement doesn’t apply to brand names and logos
• Spelling out abbreviations and acronyms and giving definitions for complex words
• Ensuring no element changes unless the user expresses their intent to change them

Is our Foursets website WCAG-compliant? 

Just like Webflow’s platform itself, we still have more to work on in terms of making our website fully accessible. When passing a web accessibility test, we’ve identified things like:

• Buttons not having proper ‘button’ tags
• Links that open in new tabs not marked accordingly for assistive technology
• Headings not tagged appropriately
• No proper visual outline for keyboard focus states
• No ‘skip to main’ code
• Texts on images not described alternatively 
• Font sizes not large enough

Foursets’ team works on our website in iterations, and we continuously strive to improve what we offer online. As part of our ongoing work, we’re fixing and adding accessible features to make our website part of the inclusive web.

Wrap-up

Failing to make your website accessible for people with disabilities means you cut off a large portion of your potential users and customers. It also contradicts the very principle of the open worldwide web and can potentially lead to legal action if your business is mandated to conform to Web Content Accessibility Guidelines (WCAG) by law.

Webflow provides a variety of tools and built-in features to ensure your website is accessible, even though meeting some WCAG requirements is only possible with custom code. The platform allows you to make accessible choices when working with semantic code and also advocates for accessible design with its learning resources. Thanks to its in-built auditing tools, you can check how well your website conforms to accessibility best practices, but at a more advanced level it’s advised to check the official WCAG success criteria and web accessibility checklist. 

Make your Webflow website accessible with Foursets

We’re an official Webflow partner and a team of web design practitioners who know how to provide the ultimate accessible experience for your users. Get in touch. 

FAQ

What is web accessibility and why should I care? 

Web accessibility is the practice and approach of making your web resources accessible to as many people as possible by removing barriers to perceiving and interacting with web content. This is an important measure ensuring people with disabilities can access content you provide and keeping your products and services inclusive. 

What is WCAG?

Web Content Accessibility Guidelines (WCAG) is a set of international web accessibility standards developed by The World Wide Web Consortium (W3C). It puts forth the list of technical requirements divided in four principles — perceivable, operable, understandable and robust — and each having success criteria for meeting them. It exists in three versions, the latest (WCAG 2.2) released in 2023. The standard most commonly referenced in legislative documents is WCAG 2.1 Level AA.

Are Webflow websites accessible? 

Webflow websites are not accessible by default, but the platform provides all the tools to make accessible choices during the design, development and review stages.  

What are some top Webflow accessibility tips? 

When developing an accessible Webflow website, it’s important to enable keyboard navigation with focus states, maintain proper color contrast ratios, provide text alternatives to all non-text media such as through audio and video captions, include alt tags for meaningful images, avoid excessive motion and animation, and make sure all media and animated elements can be paused, stopped or disabled. 

Useful resources:

1. Webflow Accessibility Statement
2. Accessible elements in Webflow
3. Making your website more accessible in Webflow
4. How to meet WCAG (quick reference)
5. Web Content Accessibility Guidelines (WCAG) 2.1

‍