Webflow empowers web creators with unmatched creative possibilities. However, sound design can only really be considered great design if it can be enjoyed equally, by all website visitors.
If you aren’t cognizant of them during the design process, your Webflow website will more than likely be partially or entirely inaccessible to people with disabilities.
While you should be motivated to remedy this inequality on a moral basis, it is worth noting that accessible websites can prove far more profitable.
The global disability community includes over 1.3 billion individuals wielding
more than $13 trillion in expendable income.
So, what should you do so that your Webflow website meets relevant web accessibility standards en route to becoming fully accessible?
In this blog, we will provide you with a number of tips to help you adjust your Webflow website so that it becomes accessible to all visitors, including those with disabilities.
H2: What makes a website accessible?
For your Webflow website to be considered accessible, it needs to adhere to the Web Content Accessibility Guidelines (WCAG). These guidelines, developed by the World Wide Web Consortium (W3C), are the gold standard for ensuring web accessibility and shape regulations such as the Americans with Disabilities Act (ADA).
WCAG is quite a lengthy set of guidelines. Yet, at its core, WCAG is based on four guiding principles:
- Perceivable: Your website visitors should be able to perceive content appearing on your Webflow website through their senses of sight, touch, and sound
- Operable: Website visitors need to be able to operate your Webflow site even if they have a disability. In more practical terms, website visitors need to be able to operate your site entirely by keyboard, sight-assisted navigation, and additional alternatives to a classic mouse
- Understandable: Your Webflow site needs to be easy to understand. To that end, it should be devoid of overly technical terms and complex terminology and lingo
- Robust: A robust website:
- Uses HTML and CSS according to specification,
- Is compatible with tools like screen readers used by people who are blind to navigate websites
H3: WCAG versions and conformance levels
Throughout the last few decades, there have been several WCAG versions:
WCAG 2.0 was released in 2008, and was considered the standard for accessibility until WCAG 2.1’s publication, in 2018. Finally, WCAG 2.2, the latest version and most up-to-date version of these guidelines, was released late in 2023.
Each version of WCAG includes three levels you can strive to conform to:
- Level A: The most basic level of WCAG conformance
- Level AA: The standard level for most global accessibility laws
- Level AAA: The most stringent and challenging level to meet
You should aim to adjust your Webflow website so that it conforms to WCAG 2.1 or 2.2 at Level AA.
Reaching this level of conformance entails that your Webflow meets a number of design and technical criteria. We will highlight some of the most important action items in a moment.
H2: A quick recap of Webflow’s built-in accessibility tools
Webflow has some pretty impressive built-in accessibility features and tools.
The first area you should pay attention to is the Audit panel in the Designer.
Positioned on the lower left side, this panel is instrumental in highlighting areas of your site that may fall short in accessibility, such as:
- Headings that are structured inaccurately. This can have a disruptive impact on the way assistive technology users engage and understand web pages
- Meaningful images lacking alternative text (or alt text) which screen reader users rely on to understand images
- Link text that does not have contextual relevance to the link
The second feature you should look out for is the color contrast checker. Built into Webflow’s Style panel, the color contrast checker helps you ensure that you are selecting WCAG-conformant color contrasts. Any color combinations that fail to meet these standards will be clearly indicated, helping you make the necessary adjustments.
(We will explain color contrasts under WCAG in further detail later in the blog.)
Two more cool tools you can check out are:
- Vision Preview: This feature lets you engage with your website from the perspective of visitors with various vision impairments, simulating their experience. When you understand how someone with, say, color blindness or blurred vision, sees your site, you can make the necessary tweaks to help your design account for their abilities
- Text Zoom Preview: This feature simulates how users might experience your site while leveraging various browser zoom capabilities, enlarging text up to 200%. This way, you can zero in on potential glitches, and then fix issues related to layout breakages or text wrapping
H2: The most important WCAG criteria you should pay attention to
Fully conforming to WCAG at Level AA entails making a number of technical and design-based changes to your site. Here are the most important ones:
H3: Use the right color contrasts
As mentioned above, your website will need to have sufficient color contrasts. Under WCAG, there should be a minimum contrast ratio of 4.5:1 between text and its background, and a 3:1 ratio between large text (above 18pt) and its background. This will allow users with certain vision impairments (namely color blindness) to properly access and read information on your websites
Important note: Sufficient color contrast requirements extend beyond text, and include meaningful non-text elements on your website. This means that graphical objects (which include interface components like form input fields, and important icons such as those used for social media or navigation) need to adhere to the aforementioned color contrasts.
It is with nothing that WCAG contrast requirements do not apply to logos.
H3: Use descriptive link texts
Link texts are the cornerstone of seamless website navigation, pivotal in steering visitors through various sections and pages.
For screen reader users and individuals with vision impairments, the clarity and descriptiveness of these link texts is critical.
Each link text should be crafted to be informative and self-explanatory. This practice ensures that when users, especially those relying on assistive technologies, navigate through links sequentially, each piece of link text independently provides clear guidance on what to expect upon clicking.
It is important to note that adequate link texts will largely depend on contextual relevance. You can use ‘read more’ right after describing a certain topic. However, without that body of text appearing before it, ‘read more’ won’t provide screen reader users with enough context to understand the link they are engaging with.
H3: Add alt text to meaningful images
Alt text, short for alternative text, serves as a written substitute for images on web pages. Alt text is essential for users with vision impairments as it provides descriptions of images they cannot see, enabling screen readers to relay the image’s content and purpose. It is critical to remember that alt text should be added only to meaningful images (i.e., the kind that convey important, vital information), and not to images that appear purely for decorative purposes.
In Webflow, you can assign alt text to meaningful images via the Asset panel, or update it in the Style panel for specific images. Make sure that every image in the CMS collections has an associated alt text field. For the Multi-Image field, provide alt text for each included image.
Note: Images that are purely decorative should be marked as such. This will hide them from screen readers. This can be done by selecting the ‘Decorative’ option in the Assets panel or choosing “None: image is decorative” for the Alt Text option in Rich Text settings.
H3: Implement a clear heading structure
A clear heading structure is key for website navigation, aiding users with cognitive disabilities and those using screen readers. Headings act like a table of contents, organizing content into clear sections.
You should follow a logical heading hierarchy:
- Use H1 headers to establish the main title once per page, defining the primary theme
- Use H2 headers to categorize the content into significant sections, delineating diverse topics or themes
- Apply H3 headers for detailing subsections under H2 headings, exploring different aspects of each section
- Use H4, H5, and H6 headers for further breakdown of these subsections, facilitating detailed organization and clarity
Important note: headings require proper tags; merely enlarging text size does not equate to proper heading formatting. This is essential for screen readers to accurately interpret and navigate the content.
H3: Add captions and transcriptions to meaningful video content
Captions, which are text versions of the dialogue and important sounds in videos, are vital for users with hearing impairments, as they help them properly understand the content conveyed in them.
Although platforms such as YouTube provide automated captioning, it’s important to review and refine these captions to ensure they align with WCAG accessibility standards.
Vimeo also allows the upload of custom caption files and offers automatic captioning. Yet, similar to YouTube, these captions require manual inspection to ensure they are accurate and complete.
Another important element you will need to pay attention to are transcripts.
Transcripts should include all spoken words and describe significant visual information, aiding not only people with hearing impairments but also those who prefer reading over watching, or those who are in environments where sound is impractical.
Transcripts can be positioned below the video, adjacent to it, or on a separate page, with a clear link for easy access. You can use transcription services or software to produce accurate and detailed transcripts of your video content.
H3: Use readable fonts
Readable fonts are critical for all users, especially those with vision impairments. They improve the website’s overall accessibility as outlined by WCAG guidelines. Clear and legible fonts also enhance the user experience, since most visitors skim content for key information.
To maintain text legibility across various devices, use CSS relative units for font sizing.
Webflow facilitates this, enabling the choice of relative units like REM, which adjust according to the default browser size, often 16px. In Webflow’s Style panel, you can easily convert pixels to REMs; for example, “120/16rem” translates to 7.5rem. This ensures that your text scales well and stays legible on any screen.
H3: Use a proper heading structure
Effective heading structure is essential for navigating a website, especially for individuals with cognitive disabilities or those using screen readers. Think of headings as a table of contents: they divide content into manageable sections, making information easier to understand and navigate.
Ensure your headings are not only clear and descriptive but also adhere to a logical hierarchy:
- H1 headers denote the main title and should be used once per page to highlight its overarching theme
- H2 headers break down the content into major sections, each representing a distinct topic or theme within the page
- H3 headers are for subsections within these H2 sections, elaborating on various facets of each main topic
- H4, H5, and H6 headers further dissect these subsections, adding layers and aiding in a well-structured dissemination of information
Note that increasing text size alone does not make a title a heading; actual heading tags are required for screen readers to recognize the text properly as such.
In Webflow, you can implement proper headings by selecting the desired heading level in the Typography section of the designer elements panel. This ensures that your content is accessible and easy to navigate for all users.
H3: Make sure your online documents are accessible
Online documents like PDFs are widely used on Webflow websites for various purposes, including restaurant menus and SaaS platform ebooks. It’s essential to make these documents accessible to everyone, including users of assistive technologies.
For it to be accessible, an online document must have:
- Proper tags to structure the document logically for screen readers, akin to web page headings
- Legible and adequately sized text to aid readability for all users, especially those with vision impairments
- Adequate color contrast between text and backgrounds to ensure easy reading
- Alt text for all meaningful images, providing descriptions for users who cannot view them
- Clear and descriptive link text that accurately indicates the link’s destination
H3: Ensure compatibility with screen readers and keyboard-only navigation
Individuals with certain motor disabilities require the ability to navigate your website using only a keyboard. Moreover, as mentioned above, website visitors who are blind or have specific cognitive disabilities must be able to use assistive technologies, such as screen readers, for website navigation.
These requirements involve more technical adjustments. For screen reader compatibility in particular, it’s crucial to correctly apply ARIA (Accessible Rich Internet Applications) labels to HTML elements. These labels aid screen readers in describing what users are interacting with.
You can read more about this process by clicking here.
Leveraging a Webflow accessibility app, like accessWidget, can be super beneficial in this regard. These apps perform automated website audits and apply necessary fixes to support screen reader use and keyboard navigation.
These applications also offer an interface for visitors to modify design elements for their needs. Adjustments can include changing color contrasts, text sizes and fonts, and pausing animations to enhance accessibility.
H2: Closing thoughts
In closing, developing an accessible website not only broadens your audience but also aligns with legal requirements, such as the Americans with Disabilities Act (ADA). This effort can significantly enhance your bottom line. Adherence to Web Content Accessibility Guidelines (WCAG) Level AA is crucial for ensuring your site is accessible to all users, including those with disabilities.
While this can seem daunting, leveraging a Webflow accessibility app can streamline the process, particularly for complex tasks like ensuring screen reader compatibility and keyboard-only navigation. Ultimately, investing in website accessibility is not just about compliance; it’s about providing an inclusive and equitable user experience for everyone.
About the author: Yoni Yampolsky is a Marketing Manager for accessiBe, one of the world’s leaders in web accessibility solutions.