The information in this blog is for website owners who want to learn the basics of web accessibility. The technical elements are described in simple terms, and, in general, all topics relating to the legal aspects of web accessibility are presented in the most simplified manner possible. This guide has no legal value and cannot be invoked in the event of a dispute.
Maybe more than any other content management system (CMS) on the market, Webflow allows you to fully express your creativity, even with limited, or even non-existent, skills in coding. The platform's nearly unlimited design options allow you to create exceptional websites that, for the most part, can't be done with most other site builders.
However, this great creative freedom often leads to websites that impress some visitors, while presenting significant digital barriers for others.
Most Webflow sites are not accessible to people with certain disabilities.
Many Webflow sites lack fundamental accessibility elements, such as compatibility with screen reader technology and the ability to navigate the site using only the keyboard. And, even when created with the needs of the disabled community in mind, Webflow sites may still be partially inaccessible.
Luckily, you can turn your Webflow site into a welcoming site for all visitors, including those with disabilities. And, with the right tools, you can even allow visitors to set up your site themselves to match their unique capabilities.
In this blog, we'll show you everything you need to know to make your Webflow site accessible to people with disabilities. We'll explain why ensuring equal access to your site is important for the disability community, and we'll explore how expanding your potential customer base can lead to positive business results.
Key points:
- ‍‍To be accessible, your Webflow site must comply with the Web Content Accessibility Guidelines (WCAG) 2.0 or 2.1 at level AA.
- This means that your Webflow site must meet a list of accessibility criteria. These include, but are not limited to, assistive technology compatibility, keyboard navigation only, sufficient contrast between text and its background colors, alternative texts for meaningful images, and subtitles for videos.
- Webflow offers several built-in accessibility features, such as its color contrast checker. However, relying solely on these features does not guarantee that your site is accessible and WCAG compliant.
What does it mean to have an accessible Webflow site?
For your site to be considered accessible, it will need to welcome all visitors, regardless of their abilities. And to achieve this, you must ensure that your Webflow site adheres to recognized web accessibility standards. These standards include specific instructions and guidelines that, when followed, ensure that your Webflow site is set up and designed to provide an equal user experience for all site visitors.
The most important set of web accessibility guidelines is the Web Content Accessibility Guidelines (WCAG). Created by the World Wide Web Consortium (W3C), WCAG are generally accepted as the most important web accessibility standards in the world today. WCAG also heavily influences global web accessibility policies, a topic we'll discuss later in the blog.
Although a long and complex document, the numerous sections (or criteria for success) of WCAG are ultimately based on four fundamental principles:
- Noticeable : Visitors to your site must be able to perceive the content appearing on your Webflow site via their senses of hearing, sight, and touch.
- Operable : Visitors to your site should be able to use your Webflow site, regardless of their capacity. An operable Webflow site should be able to be fully navigated via the keyboard, view-assisted navigation, and other alternatives to the classic mouse.
- Understandable : Your Webflow site should be easy to understand. It should not include overly technical terms or complex jargon, and should be free of complicated instructions that are difficult to follow.
- sturdy : For your Webflow site to be robust, it should use HTML and CSS according to specifications, and be compatible with the assistive tools that people with disabilities use to navigate online.
WCAG versions and levels
Over the years, there have been several versions of WCAG:
- WCAG 2.0, released in 2008
- WCAG 2.1, an updated version of these guidelines, published in 2018
- WCAG 2.2, which was officially released in October 2023
All WCAG versions have three levels of conformance:
- Level A - the lowest level of compliance
- Level AA - the compliance level mentioned in most accessibility regulations around the world
- AAA level - the optimal and most difficult level of compliance to achieve
It is highly recommended that your Webflow site complies with WCAG 2.1 Level AA.
Complying with WCAG 2.1 Level AA requires your Webflow site to meet a number of technical and design requirements. These include but are not limited to:
- Compatibility with screen reader technology
- Keyboard navigation only
- Responsive design for mobile
- Appropriate color contrasts
- Subtitles for meaningful video content
We'll explain these requirements in more detail later in the blog. To go directly to this section, you can click here.
What does Webflow offer in terms of accessibility?
Webflow has a few tools built into the Designer that can help you create your site with accessibility in mind.
The audit panel, located at the bottom left of the Designer, checks for performance and usability issues. This includes specific accessibility concerns, such as non-descriptive link content, missing alternative text, and the correct application of headers.
Additionally, Webflow has a color contrast checker built into the style panel. You can examine the color contrasts between text and its background, and see how consistent they are with WCAG Level AA and Level AAA. Color contrasts that do not meet WCAG Level AA requirements are marked as a failure.
Two other accessibility tools are accessible from the canvas settings:
- Vision Preview: This tool simulates how people with different vision problems would see your website. These disorders include green color blindness, blue-yellow color blindness, total color blindness, and blurred vision. To access the Vision Preview, click the canvas settings icon at the top of the Designer. In the canvas settings window, scroll down to the vision preview section.
- Text Zoom Preview: This tool simulates how site visitors use the browser's zoom capabilities. This can show developers working in the Designer if the layout is breaking or if there are text packaging issues that make it difficult to consume the content when the text is increased by up to 200%. To access the Text Zoom Preview, click the canvas settings icon at the top of the Designer. In the canvas settings window, scroll down to the Text Zoom Preview section.
Why making your Webflow site accessible is of crucial importance
16% of the world's population has some form of disability. This group is often discriminated against, and it is up to each of us to ensure that its members have a fair and fair online experience.
It's interesting to note that the disability community has billions of dollars in disposable income. When your Webflow site is accessible, you welcome people with various disabilities to explore your products and services, and allow them to spend their hard-earned money on your offerings.
Legal obligations in terms of web accessibility
If you operate in the United States, Canada, or the European Union, you may be required by law to make your Webflow site accessible to people with disabilities.
Although nothing is yet codified in law, it is generally accepted that the Americans with Disabilities Act (ADA) applies to the online domain, as well as to the physical structures of businesses. American courts now apply this law to websites and often refer to WCAG as a standard to be met under the ADA.
Another important American law that includes web accessibility provisions is section 508 of the Rehabilitation Act. Applying to government agencies, federally funded organizations, and the service providers of these organizations, section 508 refers to WCAG 2.0 Level AA as a compliance standard. Relevant organizations need to ensure that their websites and other information and communication technologies (ICTs), such as videos, PDFs, and emails, to name a few, are WCAG compliant at this level.
Businesses registered in Ontario must comply with the Accessibility for Ontarians with Disabilities Act (AODA). Under this law, your Webflow site must comply with WCAG 2.0 Level AA.
To learn more about complying with these laws, we recommend that you consult these resources:
- ADA website compliance checklist
- Section 508 website compliance checklist
- AODA website compliance checklist
How to test the accessibility level of your Webflow site
To test whether your Webflow site is accessible, you can use automated testing tools, such as the Chrome Wave extension, or rely on expert service providers like at Agence No Code.
To use Wave, you will need to go to the page of your online site that you want to test, after which the tool will perform a quick and automated audit of your web page and check several points and give you information related to WCAG 2.1 compliance.
It is important to note that the two approaches complement each other. Many Webflow site owners turn to automated tools for an initial audit of their site and then turn to expert service providers to help them review and fix accessibility issues.
How to make your Webflow site accessible: an in-depth analysis
Ensuring the accessibility of your Webflow site will require you to consider the unique needs of the disability community throughout the planning, design, and development stages of the site. While you can run an accessibility audit after you've finished designing your site, it's best to plan your site with accessibility in mind from the start. It can save you time and money.
Since designing a Webflow site is generally a multi-level process, we decided to approach each level, or phase, separately.
Accessibility best practices will therefore be presented in two distinct phases, depending on when they are most relevant and applicable. These phases are:
- The design and planning phase
- The development phase
The design and planning phase
Accessibility should be taken into account during the planning and design phase of your Webflow site. During this phase, some primary accessibility considerations include:
1. Use animation and movement sparingly
Webflow's interactions are incredibly powerful and flexible. But with great power comes great responsibility. Some movements may be harmful for some site visitors, such as movement behind static text, flashes, and parallax animations.
Ideally, movement should be avoided as much as possible. However, if in some cases you feel it is necessary, it is important to follow the relevant WCAG guidelines.
Some animations may require a stop, pause, or hide button, depending on the length. Also, you should avoid using blinking content altogether.
2. Use accessible fonts
WCAG has sections that apply specifically to the text. These include ensuring that fonts are easy to read when they are resized and presented with a different style or spacing. Using accessible fonts is essential for many people with disabilities, especially for people with certain vision disorders. Accessible fonts make it easy to consume content, while thin, illegible fonts will present significant digital barriers for some people.
It's good to note that fonts that are accessible and highly readable benefit all site visitors, including those outside of the disability community. Overall, site visitors generally do not read entire blocks of text, but rather skim over and scroll through them looking for important information.
Accessible fonts can also help with search engine rankings, as sites with a high readability level generally rank higher.
When integrating accessible fonts into the Webflow build, it is important to ensure that font sizes are accessible on all devices. For that purpose, you'll want to use relative units in CSS. Webflow makes this easy by allowing you to select a relative unit, such as REM or Root Element's font-size in the style panel. In general, the default root font size is 16px. Therefore, for simple calculations, 16px = 1 REM.
In Webflow, you can exchange pixels for REMs by typing simple mathematical equations into the size input fields. For example: 120px, 120/16rem gives 7.5rem.
3. Select the right target size
It is recommended to ensure that items such as buttons, icons, or other interactive elements take up at least 24x24 pixels of space. This may include white space around the target. This is important because it makes a site more accessible to those who find fine motor control movements difficult, to people with larger fingers, or to people using a stylus or other assistive devices.
4. Consider the components you will be using
The planning and design phase is a good time to take inventory of the components you're considering using, such as accordion, pop-up modals, carousels, or background videos, to name a few. These components can present a substantial number of accessibility issues, so you should assess how you plan to use them throughout your site. It's important to note that if you're considering using these types of components, you'll need to put more effort into the development process to ensure they're accessible.
The development phase
After ensuring your success during the design and planning phase, it's time to take action.
The most impactful and simple things to do to make your Webflow site accessible come from following HTML and CSS best practices for accessibility.
Paying particular attention to semantic HTML structure and CSS focus states is especially important. Let's break down these issues in more detail:
1. Set your language code
Your first step should be navigating to the settings section of your Webflow site. On the General tab, you'll find the important language code setting. This sets the HTML lang attribute for the site and signals screen readers to switch to the correct language profile and pronunciations. It is also important to use the HTML lang tag if you change the language within a web page.
2. Configure page titles and descriptions
In the Webflow Designer, each web page has its own metadata settings, which are necessary for SEO. These include the title, meta description, and open graph image. The most important parameter for accessibility is the meta title. It is usually the first piece of information announced by assistive technologies, such as screen readers, when a web page loads. This allows users of these tools to understand the essence and message of the web page they will be browsing.
3. Add HTML tags
HTML is the building block of any website. Although being a visual development platform, Webflow provides you with all the tools you need to build a solid and accessible structure for your site.
In Webflow, you do this by setting up your essential reference elements. These include:
- <NAV>
- <MAIN>
- <SECTION>
- <FOOTER>
You can apply HTML tags to any div using the dropdown menu in the settings panel on the right side of the screen. Alternatively, you can use Webflow's pre-styled elements, such as Navbar or Section, which already have the tag element pre-applied. Creating these benchmarks helps assistive technology understand the basic structure of your site.
4. Keep the layout simple
Keep the layout simple and straightforward. Consistent layout makes it easy for visitors to navigate your site and find what they're looking for. Webflow is a blank canvas that allows for an infinite number of layout options, so it's important not to complicate or overwhelm the user.
A note on advanced layout:
When an HTML element is added to a web page, a specific order is created. If you choose to change the visual order of these items, assistive technologies will not recognize these changes. So you need to programmatically ensure that assistive technology users can access content in the same order that it is presented visually.
To that end, there are two areas that you should pay attention to:
- You need to make sure that items that share the same purpose are named and work the same across the site. For example, the “settings” button should have the same name and functionality throughout the site. There should be no place on the site where this button is called “configurations.”
- You must ensure that the elements that appear to facilitate correct navigation appear in the same place throughout the site. For example, if the link to the 'Terms of Use' page appears at the right end of the footer section, it should appear at that position throughout the site.
5. Apply HTML titles
People using screen readers or other site visitors with cognitive disabilities rely on titles to guide them through your site. Headings are like a table of contents. They break up content into pieces that are understandable to a user.
Headlines should be clear and descriptive, but also follow a logical order:
- The H1 title is the main title, used once to title the page. H2 titles are for sections that appear on the page, each representing a significant topic or theme. H3 headings are used for subsections in these H2 sections, detailing specific aspects of each main topic. The H4, H5, and H6 titles further break down these sub-sections, offering layers of detail and helping with a clear and structured presentation of information.
It's important to note that simply increasing the font size to match that of a specific title class is not enough to classify text as a title. For screen readers to identify them as titles, title tags must be added to titles.
To activate titles in Webflow, you will need to select Heading in the typo bubble:
Typography selector in the Webflow designer elements panel. The options for heading, paragraph, text link, text, text, block quotation, rich text are shown.
And then select the appropriate title class:
Title display in the Webflow designer. Option to choose the type of title h1 to h6 with a reminder to keep a predictable title order.
6. Use semantic lists
Div blocks are the main building blocks of Webflow sites. These can be easily used for almost any design task. However, Webflow also offers a specific list item that should be used whenever there is a grouping or a list. The use of semantic lists informs screen readers that the content they are interacting with is a list of items. It also allows screen reader users to know if there is a sequential order in the list and how many items it contains.
Important note : Collection list items in Webflow are automatically styled as unordered lists.
7. Add focus states and visual cues
Some site visitors only navigate using their keyboard. They do this by moving from one interactive element to the other using the Tab key. Web browsers generally add a default outline around links and other interactive elements when selected with the keyboard. This helps keyboard users understand what element they are manipulating. However, some Webflow elements, such as dropdown menus, are not recognized as interactive elements, and without a focus state applied, they will not be detected by browsers.
In Webflow, you can ensure that all items that can be accessed via the Tab key have a focus state. You can add this state in the style panel, in the style selector pull-down menu. Adding visual cues to all interactive elements is important for all site visitors, not just those who use a keyboard to navigate. It is important that these visual cues are not based solely on color. Clues based solely on color leave out visitors with different forms of color blindness and can easily be missed by other users. In general, color alone is a poor indicator or descriptor to encourage a visitor to take action. Consider other ways to show that an item is interactive.
You can style multiple states in addition to the focus state in Webflow. These include:
- None : The default state.
- Hover : When the item is hovered over. Note that this does not generally work on most touch devices.
- Pressed : The state when the item is clicked.
- Visited : Indicates that a link has been visited before.
Note on logical tab order: The tab order must be logical on a web page for keyboard users to navigate sequentially between items. An easy way to check if your site can be navigated correctly with just a keyboard is to open a web browser and press the Tab key. Each interactive element should have a recognizable focus state and be in sequential tab order as you navigate through the page.
8. Add alternative text to meaningful images
Images are often used to convey information and content on a website. However, some visitors, especially those using screen readers, cannot access them if they don't have descriptive alternative text.
Alternative text (or “alt text”) is an HTML attribute that contains the textual description of an online image, visible when a user cannot access it. Alternative text is read aloud by screen readers for people with visual disabilities, and is generally invisible to others visiting a web page. However, if an image does not load due to a slow internet connection or if browser settings disable images, alternative text may appear on the page.
There are several ways to add alternative text in Webflow. It can be applied to each image uploaded to the asset panel. Alternatively, alternative text can be added or updated in the style panel for a specific image. When it comes to images in Webflow's CMS collections - a grouping of content types with a customizable structure like blog posts - you need to make sure that each image has a corresponding alternative text field that it can be mapped to. The multi-image field also has a place to add alternative text for each image.
As important as using alternative text is, it is just as important to identify images that don't provide additional meaning and to define them as decorative.
You can do this in two easy ways:
- Navigate to the assets in the Designer, hover over the image, click on the settings, then check “Decorative.”
- If you added the image as rich text: Click on the image, then click the wrench icon. Finally, select “None: the image is decorative” in the alternative text.
9. Add descriptive text links
Links on a website should make it very clear where site visitors will be directed if they click on them. This is especially important for screen reader users who can't always understand the relevance of a link based on context alone. So “Read more,” “Click here,” and “Learn more” are poor link descriptors, or anchor text.
This is an area where you can use ARIA labels in an element's custom attribute settings. ARIA is a set of HTML roles and attributes that improve the accessibility of web content and web applications for people with disabilities. By incorporating ARIA attributes and roles into their code, Webflow site builders can improve the accessibility of complex user interface components, dynamic content, and interactivity. In the case of text links, an ARIA tag will provide the user with an accessible and recognizable name for this interactive element, and will replace the original button information that a screen reader would read.
Here is an example to illustrate this problem:
Let's say you have a web page with a link that takes visitors to learn more about fishing on the Fraser River. Even if the button with the link says “Click for more information,” a site visitor seeing the site could recognize the content above the button and understand that the link takes them to a page with more information about fishing on the Fraser River. However, a screen reader user does not have access to this context and will likely not fully understand the purpose and destination of this link.
Add an aria label name: “aria-label” with the value: “Learn more about fishing on the Fraser River” to the link, specify the information for the screen reader. Once read aloud, the screen reader user will understand exactly where the link will take them.
Here's how to add aria labels to the custom attributes field:
Custom attributes section in the Webflow designer settings panel. Name = aria-label Value = dynamic value of the CMS collection.
Adding ARIA labels is even more important with dynamic collection lists. In this case, each button or link is the same and the screen reader reading them in sequence would not give the user any context. Until recently, the only way to add ARIA labels to collection lists in Webflow was through custom code. However, Webflow recently added dynamic mapping to custom attributes. Now, you can easily add a unique descriptive aria tag for each link in a list. Simply add an aria label field to your collection and map it to the ARIA label value in custom attributes.
10. Add subtitles and transcripts to videos
Significant video content appearing on your Webflow site should have accurate and complete subtitles. Subtitles are text descriptions on the screen representing the dialogue and/or meaningful sounds that appear in a video. Essential for people with hearing disabilities, subtitles allow them to properly understand the content shown in the video.
Webflow allows you to embed videos using various players and integrations, such as YouTube and Vimeo.
It's important to note that while YouTube automatically generates closed captions, they're not always entirely accurate. According to WCAG, automatically generated subtitles must be verified to be considered accessible.
Video platforms like Vimeo allow you to download a file containing your subtitles. You can find out more about this by clicking here. You can also use Vimeo's automatically generated subtitles feature. However, as with YouTube, you'll need to review the subtitles and check for accuracy.
Transcripts are another great way to add accessibility to videos. Transcripts are the textual representation of everything in a video. Depending on the video, this may include information about actions, costumes, sets, and scene changes, if relevant. Transcripts also offer an alternative for consuming video content,
which is useful for people outside of the disability community.
For transcriptions, consider using a transcription service or software. Regardless of how you create them, transcripts should generally be placed next to or below the video player. You can also have the transcripts appear on a separate web page and direct people to them using a clearly labelled link.
Making videos accessible is a topic in itself, which you can read about in our video accessibility guide.
11. Make sure your online documents are accessible
Online documents, such as PDFs, are frequently used on Webflow sites to provide information to visitors. It is common for a restaurant to offer downloadable PDFs of its menus, and for SaaS sites offer eBooks to download, for example.
It is important that these documents are accessible to everyone, including those who use assistive technologies like screen readers.
For an online document to be considered accessible, it must include a number of elements, including:
- Appropriate tags
- Large and legible text
- Appropriate color contrast between text and background
- Alternative text for meaningful images, if they are present
- A descriptive link text
If your online documents are not fully accessible, you will need to correct them. The process of correcting documents online can be difficult, time consuming, and expensive, which is why many Webflow site owners turn to expert service providers, such as AccessServices, to do these tasks for them. Using expert service providers can be especially beneficial when dealing with long and complex documents. With an intimate knowledge of the relevant web accessibility guidelines and PDFs, these experts are better equipped to manage these projects in a timely and profitable manner.
What can I do about custom code?
To meet basic accessibility requirements, a “Skip to content” link is required. This link allows keyboard users to bypass the navigation menu and directly access the main content of the page, identified by the HTML MAIN tag that we covered in the site structure. You can return to this section by clicking here.
A small snippet of custom javascript code is required to implement a “Skip to content” link in Webflow.
For more complex designs that use different website components, such as accordion, carousels, tables, and background videos, additional custom ARIA attributes or javascript will be required to make a site accessible.
Finsweet Attributes, a popular Javascript library for Webflow, offers a whole selection dedicated to accessible attribute solutions. In addition, the Webflow accessibility checklist offers purely Javascript solutions such as the “Skip to content” link.
Final Thoughts
With unparalleled design options, Webflow can be used to create websites that are truly unique, both in terms of design and usability. However, this creative freedom sees Webflow users designing sites that are not fully accessible to people with certain disabilities. To ensure that all visitors are treated equally, Webflow site owners should implement web accessibility best practices.
If you want to make your Webflow site accessible, professionals at Agence No Code specialize in accessibility, contact us for more information!
