All courses Accessibility on the web

Resources & activities

Go to the next lesson

Resources & activities

Review key takeaways, check out additional accessibility resources, and explore practice activities.

Resources & activities

Review key takeaways, check out additional accessibility resources, and explore practice activities.

Key takeaways: Accessibility in Webflow

Making your website accessible ensures everyone can navigate and interact with your content. In this course, you learned essential accessibility principles and how to apply them using Webflow’s built-in tools.

Accessibility best practices

  • Add alt text – Make images accessible to screen readers.
  • Use proper heading structure – Avoid skipped heading levels.
  • Ensure color contrast – Improve text readability.
  • Test keyboard navigation – Ensure all interactive elements are focusable.
  • Provide video controls – Enable play/pause for background videos.

Key accessibility tools in Webflow

  • Audit panel – Detect and resolve accessibility issues, like missing alt text or skipped heading levels.
  • Vision Preview tool – Simulate how users with visual impairments experience your site.‍
  • Color Contrast checker – Ensure text is legible for users with low vision or color blindness.

Webflow Audit Panel highlighting accessibility issues like missing alt text, skipped heading levels, and duplicate IDs.

Additional resources

Expand your accessibility knowledge with these resources:

Practice activity: Evaluate site accessibility

The best way to reinforce what you've learned is through hands-on practice. In this practice activity, you’ll use the Webflow Accessibility Checklist to review a site and identify areas for improvement.

Instructions:

  1. Open a Webflow project in your dashboard (or clone a template)
  2. Open the Webflow Accessibility Checklist
  3. Evaluate your site based on the checklist’s key areas. Use the Audit panel as a quick way to help you identify some of these issues:
    ‍
    - Alt text
    – Do all meaningful images have descriptions?
    - Headings – Are they structured logically with no skipped levels?
    - Color contrast – Does text meet contrast ratio standards?
    - Keyboard navigation – Can all interactive elements be accessed without a mouse?
  4. Fix at least one identified issue to improve accessibility

Bonus challenge: Review at least three additional checklist items and identify potential improvements.

Ready to test your knowledge?

Take the assessment to test your knowledge of web accessibility best practices learned in Webflow. Challenge yourself with questions about creating inclusive, user-friendly websites using Webflow’s accessibility tools.

1

Getting started

Coming soon

1

Intro & overview 1:53

Intro & overview

Coming soon

1

Accessibility in Webflow 5:17

Accessibility in Webflow

Coming soon

1

Intro to the Audit panel 1:26

Intro to the Audit panel

Coming soon

1

Alt text for images 8:38

Alt text for images

Coming soon

1

Accessible & inclusive typography 6:06

Accessible & inclusive typography

Coming soon

1

Legible paragraphs using the CH unit 0:57

Legible paragraphs using the CH unit

Coming soon

1

Outlines 11:01

Outlines

Coming soon

1

Built-in toggle on background videos 2:02

Built-in toggle on background videos

Coming soon

1

Resources & activities 1:19

Resources & activities

Coming soon

Course progress

0%

Assessment

Test your knowledge

Up next

Continue to next lesson → Complete course ✓