Build accessibility considerations into your design process.
In this lesson:
The web should be accessible for everyone. This often isn’t the case for people who are Blind, low vision, visually disabled, Deaf, hard of hearing, or who have cognitive, learning, or mobility disabilities, to name a few.
About 15% of the world’s population has a disability — that’s more than 1 billion people who have a negative user experience when designs don’t consider accessibility.
Inaccessibility on the web isn’t caused by disabilities or a lack of tools, but by designs that interfere with assistive technology (AT). AT includes settings and devices that help people interact with the digital world.
Examples of AT include:
Webflow has committed to building a better, more accessible web, and this effort relies on us working together as a community to be mindful of best practices, primarily those of the Web Content Accessibility Guidelines (WCAG).
WebAIM analyzed a million homepages and found 98% had preventable accessibility barriers. We recently made updates to make top components more accessible out of the box. We want to invite you to join us in making updates to remove barriers — starting today. Right now!
Let’s look at some changes you can make that will have an incredibly high impact toward making your sites and the web more accessible for everyone.
Unstructured web content is overwhelming and unusable for everyone, but especially for people with cognitive disabilities and those who use screen readers. Headings organize content and guide readers through your site.
Your headings should make it easy to skim a page and get a clear purpose and overview of content without having to read body copy.
To learn more about the importance of organizing your content with headings and how to style headings in Webflow, check out this section on headings in Webflow University’s video lesson on Advanced web typography.
WCAG Reference: Success Criterion 2.4.6: Headings and Labels
Sufficient color contrast between text and background improves the experience and legibility on your site for everyone, especially for people with vision impairments. WCAG offers suggested ratios of the best contrast based on size of text. Contrast is the difference in brightness (or luminance) between 2 colors and ranges from 1:1 (e.g., white text on a white background) to 21:1 (e.g., black text on a white background).
You can check the contrast ratio of text on your site directly from the color picker in Webflow, which displays not only the contrast ratio of text but also the WCAG level rating that corresponds to that contrast ratio.
You can toggle the preview icon (the eye) under the palette on the right to see the curves for AA, AAA, and a Fail rating on WCAG. The ratio curve patterns are calculated by testing every combination of saturation and brightness for hue and opacity — watch the curves move as you adjust hue or opacity. Light text over a dark background will show an AAA rating in the upper left of the palette to Fail in the lower right, and vice versa for dark text on a light background.
Interesting: The color contrast analyzer uses an algorithm to calculate the luminosity difference between 2 colors (contrast) and rates it against WCAG guidelines for text size. The algorithm makes adjustments for font weight since bold text can be smaller and still readable. Small text needs a higher luminosity difference to be readable.
The WCAG level rating is based on the color of the background and the font size, weight, and color, which is explained with helper text that opens when you click the “question mark” icon. (This contrast ratio section only appears when editing the typography color of text elements.)
Note: While WCAG contrast ratio guidelines don’t apply to images (including logos), it’s best practice to apply a 4.5:1 ratio for images with prominent text. But keep in mind that images of text can be hard and often impossible for visitors with visual impairments to understand — use styled text wherever possible.
Vision impairments affect a large percentage of the population. However, if you don’t experience vision impairments, it can be difficult to imagine how your design appears to someone who does.
With Webflow’s Vision preview you can simulate how visually impaired people view your website. Use this tool at the beginning of your design workflow to make sure important information in your design isn’t conveyed only through color.
Remember: Using Vision preview provides an approximate representation of vision impairments. Factors like your own vision, the lighting you use, your screen calibration, and your operating system settings can all affect the accuracy of the previews.
Access Vision preview options by clicking Canvas settings at the top of the Designer.
Choose the type of vision impairment to preview from the bottom of the Canvas settings modal menu.
You can choose from:
The vision impairment you’ve selected is indicated by an icon to the right of the Canvas settings.
To stop previewing your design from a vision impaired perspective, click Canvas settings again and change the Vision preview to None.
Note: Due to a Safari bug, Vision preview isn’t available in Apple’s browser. The bug specifically relates to Safari not applying CSS filters with url() values to iframes. Webflow has brought the bug to Apple’s attention, though no tracking number was provided. Alternatively, you can use Vision preview with Firefox and Chrome browsers.
Form field labels are used to describe the function or purpose of a form field and are crucial for accessible navigation of your form. Form elements with in-field placeholder text that disappears when site visitors start typing in the field make it difficult for people with (and without) cognitive disabilities to remember what information belongs in the field. A simple solution is to always use form labels and help text that stays visible.
In Webflow, creating fully accessible forms currently requires a custom solution. You can use the Label element in the Designer with IDs and custom attributes to ensure that labels are properly grouped and associated with their related form fields.
To create accessible form labels:
Important: Make sure your form field IDs are unique (i.e., not used on more than one element).
You can also group your related labels and fields together to reuse your form elements.
To group your label and field together in Webflow:
Now you can copy the Div block (Command + C on Mac or Control + C on Windows) and paste it (Command + V on Mac or Control + V on Windows) in your form. Make sure to give the form field a new ID and update the label’s custom attribute to reuse them.
A clear label outside the input field will not only help site visitors recall the purpose of the field, but it will also better meet color contrast settings for visually disabled site visitors (since placeholder text is usually a light color). It also gives screen readers access to a proper label to announce.
WCAG Reference: Success Criterion 2.4.6: Headings and Labels
Screen readers can give visitors an overview of all the links on a page. When links are read out of context in a list, it's important they tell readers:
For an example of a screen reader announcing unhelpful links on a page, check out the section on links on Webflow University’s video lesson on Advanced web typography.
For more, check out WebAIM's article on links.
Certain webpage animations and flashing content can negatively affect the health and well-being of people with vestibular and photosensitivity disorders. This can include triggering motion sickness and seizures. When working on your designs, it’s best to think about accessibility from the start, and create safe animations that don’t cause harm from unexpected or excessive movement or flashing.
While background videos can be helpful for grabbing attention or engaging site visitors, they can also be distracting or even harmful for people with cognitive disabilities, motion sickness, or vestibular disorders. With this in mind, you can use Webflow’s built-in play/pause button setting on background videos to ensure that site visitors have the controls they need to pause or play your background video content.
You can toggle Include play/pause button in your Background video settings to enable this feature, as well as customize the appearance of the play/pause button. For more information, check out our lesson on toggling play/pause on background videos.
You can test what your designs look like with reduced motion by toggling the reduced-motion setting on your device or browser. Learn more about how to enable and disable reduced motion settings.
Designers and developers use unique identifiers (IDs) to optimize sites for accessibility and to extend site functionality with custom code. IDs can be useful for linking, scripting, or styling (with CSS).
Using the same ID on more than one element, however, may cause screen readers to malfunction, as they’ll only target the first element with the shared ID, preventing screen reader users from accessing the later elements and properly navigating the webpage.
To learn more about how to identify and fix duplicate element IDs, check out the duplicate element IDs section of our Intro to the Audit panel lesson.
WCAG Reference: Success Criterion 4.1.1: Parsing
Browsers provide a built-in way for site visitors to adjust the base text size for websites, zoom in to content, and enlarge sites to a more comfortable viewing size. However, text styled in pixel (px) units ignore the browser’s text size setting, preventing site visitors from enlarging text for more comfortable reading and creating a poor user experience. Adding a “viewport” meta tag with the values “user-scalable=no” or “maximum-scale=1.0” can also prevent users from zooming in to view content.
To create an accessible reading experience, use root ems (rem) units for text size. Rems are relative to the base text size defined by the site visitor and respect the site visitor’s browser preferences.
With Webflow’s Text zoom preview, you can simulate how your designs will look for site visitors using text zoom.
You can access Text zoom preview by clicking Canvas settings at the top of the Designer.
Select a preset text size (e.g., 9px, 24px, or 32px) or toggle between them. To preview other text sizes, you can click into or focus on the input and press the Up and Down arrow keys.
To stop previewing your design with text zoom, open Canvas settings again and click Reset.
WCAG Reference: Success Criterion 1.4.4: Resize Text
Alt text (or alternative text) is a short written description of an image that is read or displayed in place of images, which helps site visitors make sense of that image when it can’t be viewed. Alt text helps your image content to be understood by site visitors who are Blind or have visual disabilities. It will also be displayed in place of an image if the image file hasn’t loaded or when a user has chosen not to view images.
To add alt text to any image:
This alt text will be used any time this asset is used in your site by default.
You can also mark purely decorative images (i.e., images that serve no specific purpose and don’t add any information or context to any part of the webpage) as decorative so that screen readers will ignore them.
To mark an image as decorative:
General guidelines for alt text:
As an example, here’s the alt text photographers from “Disabled and Here” provide for the stock photo below: Six disabled people of color smile and pose in front of a concrete wall. Five people stand in the back, with the Black woman in the center holding up a chalkboard sign reading "disabled and here." A South Asian person in a wheelchair sits in front.
We recommend including alt text in the Asset manager to make sure text is always included on dynamic images, like in a Collection list. But you can also add alt text as you add images to your project in case the context of the image is different for a specific instance.
For more information and tips, check out WebAIM’s article on writing good alternative text.
WCAG Reference: Success Criterion 1.1.1: Non-text Content
Webflow will continue supporting your accessibility effort through courses, product updates, and a future auditing tool — we’ve got a lot of exciting projects we’ll be releasing very soon. While we’re researching, growing, and building, you can keep learning with the resources below. Let’s keep this going!
Resources to learn more:
Something went wrong while submitting the form. Please contact firstname.lastname@example.org