Creating Accessible Webflow Sites: Why It Matters

5 min. read

Webflow

February 25, 2024

Thank you for joining our mailing list!

Oops! Something went wrong while submitting the form.

The issue of website accessibility has been growing rapidly.

We recently came across a powerful tool that is quick to implement, thorough, effective, and affordable. While we've developed our sites with best practices towards accessibility, websites are not static, and the laws around accessibility are always evolving, this method ensures ongoing accessibility remediation without constant evaluation and re-development time.

‍

So what's going on legally?

Around the world, governments are creating legislations regarding website accessibility. Most notably the The Accessible Canada Act (ACA), The Accessibility for Ontarians with Disabilities Act (AODA), The Americans with disabilities act, section 508 in America and EN301549 in Europe. These leave businesses without an accessible website to face repercussions from the Government.

‍

What is Accessible?

Web accessibility is given people with motor impairments, limited or no vision, epilepsy, color blindness, cognitive impairments and more to customize their experience and access the full suite of your site and services. For example, having proper alt text on images on your site allow blind users to properly understand the image by reading out a description of the contents.

‍

How can you benefit from accessibility?

There are many benefits to having an accessible website. First, of course, mitigating the risk of receiving formal complaints of the accessibility of your site. Second, opening your business to about 25% of the population that is currently living with a disability that makes internet usage either difficult or impossible without the use of assistive technology. Third, accessibility and SEO go hand in hand so having an accessible website can increase the organic traffic to your website and give you more opportunities for new business. People with disabilities are very brand loyal and are likely to continue to visit sites that are accessible to them. Lastly, from a branding standpoint having an accessible website shows you value inclusivity and diversity and have taken action to prove it.

‍

How can we help?

We recently partnered with accessiBe to provide you with the worlds #1 accessibility solution on the market. They use an AI-automated system that can achieve full accessibility compliance within 48 hours and provides 24/7 automatic maintenance. This is by far the most simple, automated and affordable solution that we have found. After reviewing their system and testing it on our own website, we have decided to offer the same solution to all of our clients.

Here is a link to their website, you can create an account and set yourself up for success moving forward or you can respond to this email and we will take care of it for you on your behalf. Please let me know if you are interested in implementing this plugin. Ensuring your site is in compliance, and not a target, is important both for your legal security and from the perspective of dignity and human rights - it's important that we all, regardless of disability, have equitable access to the web.

Quick accessibility things you implement in the meantime

To start, here are some quick things you can do to ensure your Webflow site is accessible. These are just some of the many things we need to do, hence why accessiBe can do this and so much more just by simply adding in a script to your site. But, let's take a look at some of quick fixes:

‍

Use clear, descriptive and sequential headings

Don't make it hard for people with cognitive disabilities and those who use screen readers to understand the content flow of your website pages. Your headings, if structured correctly, should make it easy to skim a page and get a clear purpose and overview of content without having to ready body copy.

Use one H1 per page that describes it's purpose.
Nest headings in order as much as possible (H3 under H2)

‍

Apply recommended color contract ratios

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

‍

Include alt text for every important image

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. With accessiBe, whats nice it is automatically reads the image and contents within it and describes it as if you have added a custom alt. attribute. With this tool, you don't have to worry about adding these in for every single image uploaded.

But it's important, here are some guidelines for alt text:

Include alt text for every important image you upload (including logos)
Write a concise description that calls out important visual features
Avoid repeating surrounding text
Leave out the words "image" or "picture"
Add a space in the alt field for purely decorative images so the screen reader doesn't announce it

‍

Use meaningful button and link names

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:

What the link is
Where it’s taking them

‍

When we design and build websites, it's important to include everyone, not just your ideal customer. Making your Webflow website accessible is the most important piece of the puzzle and we, as Webflow developers, need to make this apart of our go-live checklist.

‍

*As one of KHULA's partners, accessiBe links is a sponsored affiliate link.

Ready to Hit Refresh?

Transform the way you show up in the marketplace with a brand you love to share.

Book a Call