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:
- What the link is
- Where it's taking them
- 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
- 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.
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:
- W3C Web Accessibility Initiative
- WebAIM (Web Accessibility in Mind)