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, visually impaired, deaf, hard of hearing, mobility impaired, or have reading difficulties, 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.
Don’t:
Do:
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.
Learn more about the importance of color contrast in this section of our Webflow University video lesson on Advanced web typography.
WCAG References: Success Criterion 1.4.3: Contrast (Minimum), Success Criterion 1.4.6: Contrast (Enhanced), Success Criterion 1.4.5: Images of Text
Form elements with in-field placeholder text that disappears when you input information make it hard for people with (and without) cognitive disorders to remember what a form is asking. A simple solution is to always use form labels and help text that stays visible.
In Webflow, this currently requires a custom solution. You can use the label element in the Designer for your form’s input, text area, and select fields. Make sure you insert the label first, and then name your form field the same as your label text.
To name your form field:
A great way to reuse your form elements is to group the related label and field together.
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, Control + V on Windows) in your form, and rename the copied label and field to reuse them.
Along with helping visitors recall the purpose of the field, a clear label outside the input field will better meet color contrast settings for visually impaired 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:
Don’t
Do
For an example of a screen reader announcing unhelpful links on a page, check out in this section about links on Webflow University’s video lesson on Advanced web typography.
For more, check out WebAIM's article on links.
WCAG Reference: Success Criterion 2.4.4: Link Purpose (In Context), Success Criterion 2.4.9: Link Purpose (Link Only)
Images can't be seen by blind visitors. Alt (alternative) text is an attribute that lets you provide text-based descriptions for images. Alt text is also displayed when an image doesn't load properly.
To add alt text to any image:
This alt text will be used any time this asset is used in your project.
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.
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 support@webflow.com
Got a lesson suggestion? Let us know
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback