5 Things you should know for Website Accessibility in Webflow

Website accessibility is not just an option anymore, it’s a requirement. Not only does it allow all to use your website, but it’s even required by law for certain industries. In this article we’ll explain how you can use semantic HTML, correct color contrasts, and even improve keyboard accessibility all from inside of Webflow.

Why is website accessibility important?

In the year of 2023, we do everything online. Whether it's booking a doctor's appointment, applying for a job, or even shopping for groceries, they’re all done online. As a result, it's important to ensure that these websites are accessible to everyone, regardless of their abilities. By creating accessible websites, you are helping to break down barriers and ensure that everyone has equal access to all that the internet has to offer.

Moreover, creating accessible websites is not just a legal requirement for some markets, but also a moral obligation.

Using semantic HTML, ensuring keyboard accessibility, or correct color contrasts are all ways to improve your site’s accessibility.

The best source to ensure web accessibility

Everything you read in this article is based on the Web Content Accessibility Guidelines, or WCAG for short, which is a set of guidelines that help ensure that web content is accessible to all users, regardless of their abilities or situation.

These guidelines were created by the World Wide Web Consortium (W3C), and provides a set of recommendations for making web content more accessible, including recommendations for navigation, layout, and design, as well as ensuring that websites are compatible with assistive technologies such as screen readers and speech recognition software.

I would even argue that following these guidelines aren’t just legally required at times, but also a moral obligation. Just imagine a hospital without a ramp for wheelchairs – that’s how a site not following WCAG appears.

1. Use Semantic HTML

First up – using semantic HTML is key to making your website accessible. This means using HTML elements that accurately describe the content they contain, such as using <h1> tags for headings and <p> tags for paragraphs.

Using correct text tags are the most basic form of semantic markup, however in Webflow you can take this one step further and go to Element Settings -> Tag to specify what type of element is being used. For example this can be a section, article, footer, header, etc. This can be useful to specify as it helps screen readers better understand the structure of a specific page.

By using semantic HTML, you make it easier for screen readers and other assistive technologies to understand the structure of your website.

‍
2. Add Alt Text to Images

Alt text is a brief description of the image, which is read aloud by screen readers to describe the content. This allows users with visual impairments to understand the content of the image, even if they cannot see it.

The good news is that adding alt text in Webflow is very simple! All you have to do is click the little cogwheel on a specific asset inside the Asset Manager, and you'll be able to add a description in the "Alternative Text" field. The description should be concise, descriptive of what the image displays, and as objective as possible. However if the image is purely aestethic you can choose to label it as decorative instead, informing screen readers that the image doesn’t convey any informative content.

It's such an easy way to help create a more inclusive web where all users can engage with your content.

3. Provide Text Alternatives for Non-Text Content

Non-text content primarily refers to video and audio content. By providing captions or transcripts for these, you allow people with hearing problems to still consume your content. And not only that – it’s actually a best practice in general as well since sometimes people are in a quiet environment and can't turn up the volume on their device.

This is also why you might have noticed that platforms like TikTok, YouTube, and Facebook all provide automatic transcriptions for all their content; it boosts engagement.

So, when you're creating content for your Webflow site, make sure to keep text alternatives in mind.

4. Use Color Effectively

Although it might be tempting to use all of the rainbow’s colors you probably shouldn’t. Color contrast is an essential part of making sure that content is easily readable, consumed, and understood by all users.

Color contrast refers to the difference between the foreground (text or graphics) and background colors on a website. This contrast is important because it makes it easier for users to read and distinguish between different elements on the page. When there isn't enough contrast between the foreground and background colors, it can make it difficult or even impossible for some users to read the content.

In terms of accessibility, color is important as it's used to convey information, such as indicating links or highlighting important content. If a user has a color vision deficiency or is completely colorblind, they may have trouble interpreting the information being conveyed.

This can be simple things such as section dividers or images, but also more crucial things such as text or buttons. Imagine looking at a blank canvas and being told to “click the red button”, that’s how a user with visual impairments might experience your website if it is not using proper color contrasts.

5. Ensure Keyboard Accessibility

Finally, ensuring your website is navigable by keyboard is a small but very important detail. This means that users should be able to navigate and interact with your site using only their keyboard, without the need for a mouse or other pointing device. This is particularly important for users with mobility limitations, who may find it difficult or impossible to use a mouse.

The simplest example of this is when you’re filling out a contact form and press tab to go to the next input field. This same principle applies to your entire website. Users should be able to navigate trough all of the visible buttons, links, etc solely by keyboard.