Make your site more accessible

Build accessibility considerations into your design process and dramatically improve your website's overall usability.

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Make your site more accessible

The web should be accessible for everyone. Too often this isn’t the case for people who are blind, visually impaired, hard of hearing, Deaf, mobility impaired, or have reading difficulties, to name a few. About 15% of the world’s population require accessibility considerations, which means more than 1 billion people could potentially be having a negative user experience when our designs don’t consider them.

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: 

  • Screen readers: read text aloud for blind people
  • Magnification: increase the size of objects on the screen
  • Keyboards: use keyboard commands (instead of a mouse) for people with limited mobility
  • Voice dictation: use speech for people with more severe mobility impairments 

AT relies on (and sometimes communicates) your site’s code — making clean, readable, accessible design imperative. Good design combined with AT pave the way for equity on the web.

WebAIM analyzed a million homepages and found 98% had preventable accessibility barriers. Webflow has committed to building a better, more accessible web, but this effort relies on us working together as a community to be mindful of best practices. The great news is that you can get started right now on making the web more accessible.

Let's look at these 4 common, highly fixable errors you can tackle to improve the accessibility and usability of your site today. 

Write clear, descriptive headings

Headings organize your content and guide readers through your site. Your headings should make it easy to skim a page and get a clear overview of the content without reading body copy. 

To keep things simple, stick to one H1 per page and nest your headings in order (e.g., H3 under H2). Don’t use heading levels to show visual differences, instead change the visual appearance to match the proper structure.

Learn more about headings on WebAIM.

Use a color contrast ratio of 4.5:1

Color contrast settings help with legibility of your site, particularly for people with vision impairments. Check the color contrast of your designs and learn more about the parameters with these excellent tools:

Use meaningful button and link names

Site visitors can use screen readers to get an overview of the links on a page. When links are read out of context in a list, it's important they tell readers 2 things:

  1. What the link is
  2. Where it's taking them

Do

  • Embed links in clear, specific language that tells people where the link will take them and why they might want to go there
  • Indicate if a link will open high-bandwidth media like a PDF or video within the linked text

Don’t

  • Use generic link or button text like “learn more,” “read this,” or “see more”
  • Embed links in generic terms like “this,” “this page,” or “here”
  • Link to raw URLs

For more, check out WebAIM's article on links.

Include alt text for every important image you use

Images can't be seen by blind visitors. Alt (alternative) tex is an attribute that lets you provide text-based descriptions for images. Alt text is also displayed when an image doesn't load properly. 

General guidelines for alt text are:

  • Include alt text for every important image you upload (including logos)
  • Explain the purpose of the image
  • Write a concise description
  • Avoid the words "image" or "picture"  
  • Add a space in the alt field for purely decorative images (Webflow does this automatically when you leave the alt field blank) — making it so the screen reader doesn't announce it

Check out WebAIM's article on writing alternative text.

Resources

Check back as we continue to update this lesson with more ways to make your sites accessible.

In the meantime, dig into these resources and learn more about disability and accessibility:

  1. W3C Web Accessibility Initiative
  2. WebAIM (Web Accessibility in Mind)

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form