Webflow Accessibility Checklist to Make Your Business Website Inclusive
Web Development
Updated
November 29, 2024
•
18 min read
Author:
Darya Yafimava
Chief Editor
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.
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:
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.
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.
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.
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:
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.
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:
Webflow’s resources dedicated to web accessibility help everyone working on a website improve their understanding and skills in the area:
There are also key guidelines that Webflow refers to in their resources:
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:
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.
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:
All WCAG versions contain descriptions of the levels of accessibility. Each has prescribed success criteria to be satisfied:
When making websites compatible with assistive technologies, it’s important to ensure correct functioning with the following:
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.
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:
The alternative is to design your Webflow site with accessibility in mind from the very start. Let’s look at this approach in detail.
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.
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.
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.
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:
As remediation, you can provide:
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:
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.
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.
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:
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.
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.
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:
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:
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.
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.
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.
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.
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.
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.
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.
Explore our blog posts, free design templates, and website improvements for free
Answer 7 simple questions about your marketing goals and get your free website proposal to skyrocket your growth.