Webflow - accessibility by default

Webflow is committed to the accessible web.

Early in 2020 they hired 2 accessibility experts to help build best practices into all their development processes. 70 staff from across the company also enrolled in accessibility training. So although they didn’t start off with accessibility in mind, they are fully committed to making Webflow sites accessible by default where they can.

Big changes include the Color Contrast Analyzer and new ways to write Alternative Text for images. Making it more difficult for designers and developers to make inaccessible sites.

Accessible prebuilt layouts

There are 11 Webflow prebuilt layouts. You can simply drag them onto the page, fill them with content and you will have a basic accessible website. If you are careful with your styling you’ll have a website that everyone will be able to use, anywhere.

Alternative text

Images on websites need alternative text. This helps bots and screen reader users know what the image is. Webflow has always made it successfully pass the WCAG for alt text - all images automatically get the alt text =””. This hides the image from bots and screen readers, so it’s not ideal. But at least it’s not a fail.

Learn how to write great alt text

Color contrast analyzer

Color contrast is one of the most basic, most helpful design constraints on the web. Being able to see what’s on the screen is pretty fundamental. So whether it’s failing sight, bright sunlight or a battery saving dimmer, choose your colors carefully and check them with the Webflow color contrast analyzer.

Visible form labels

Forms are always better with visible labels.
Sarwech Shar reached out on Twitter when he was designing the sign up page for Nocodelytics. Here is the before and after:

Nocodelytics sign up form with no labelsNocodelytics sign up form with clear labels

The form is much clearer and easier to use for everyone, and screen reader users are able to navigate and understand the form too.

You do need to take care when building forms in Webflow to make sure that the label and the input are connected programmatically.

Production ready code

With care, and if you follow the ideas in a11y.space, the code that makes your website is honest, clean, and fit for purpose. None of the debris from drag and drop builders. None of the junk from Javascript heavy development.

Level up

Google Lighthouse