Find and fix accessibility issues with Webflow’s Audit panel.
Note: This feature is currently in beta as we collect feedback and work on improvements.
The Audit panel flags common accessibility-related issues so you can address them before going live with your site. Critical errors (Audit panel flags with a red square) represent issues where your users may miss out on critical site content. Moderate errors (Audit panel flags with a yellow triangle) represent important issues, but are not critical to fix
In this lesson:
Quick tip: The Audit panel doesn’t include checks for text color contrast ratios, but Webflow has a built-in color contrast checker in the color picker for text elements to help you check your text’s accessibility as you design.
The Audit panel currently includes 3 high-impact accessibility checks. Let’s take a closer look at each of these audits — how to fix them and best practices for accessibility around each.
Alt text describes images for visitors who rely on screen readers. (It’s also great for SEO.)
Missing alt text means you’ve included images without descriptive alt text or failed to mark that image as decorative. If an image conveys essential information not available anywhere else on the page, a person who can’t see the image will miss out on that information.
You can assign alt text to images from the Asset panel.
Or, if an image isn’t meant to communicate semantic information and is only used decoratively, you can explicitly set the image as decorative so that screen readers skip it.
Note: To decide if an image is decorative or informative, remove it from the page. If information is missing without the image, it’s informative and needs alt text. Images that are links, buttons, logos, or that contain important information always need alt text.
If the image is under the Asset grouping, it means the canvas image is referencing the asset and the asset does not have alt text.
To fix this:
If the image is under the Collection image grouping, it means the CMS image is not referencing specific alt text.
To fix this:
If the image is under a grouping with the name of a Collection, it means the image’s alt text is bound to a field in that Collection.
To fix this:
To learn more about image alt text and screen readers, check out How to Design Great Alt Text: An Introduction and Images must have alternate text from Deque University.
What alt text is not checked or has limited audit settings
Link text should be unique, make sense without the surrounding text, and tell readers what the purpose of the link is and where it will take them.
Empty links are links with no meaningful text or image alt text and can confuse people using screen readers or keyboard navigation.
To fix this, make sure all the link elements on your page have meaningful text inside or alt text for image links, like alt text for icon buttons.
Click the target action arrow (the arrow in the Audit panel next to your link), and then update the link by adding alt text for the image/icon (if the link contains an image).
You can make any alt text changes in your element settings (the settings for your image element) so that your alt text is more descriptive.
Avoid generic terms like “read more,” “this page,” or “click here.” Though the Audit panel doesn’t provide guidance on generic terms; using clear, specific language makes your link that much easier to use.
To learn more about how to set links and what options are available, check out our links article on Webflow University and the WCAG Link purpose criterion.
Headings give people a sense of a page’s organization and structure, like a table of contents. They break up content to be easily scanned with screen readers or visually. Absent or poor heading structure forces visitors to work extra hard to find what they’re looking for.
Skipped heading levels mean your heading elements (h1, h2, etc.) aren’t in proper descending order. This can be confusing for people with cognitive disabilities and people using screen readers.
Headings should follow a logical, numerical order that reflects the structure of your content and clearly describes the contents of the section.
For example, the title of this lesson (Audit panel) is the only level 1 heading (h1) on this page, the subheadings of this lesson are level 2 headings (h2), and any headings within those subheadings are further levels down (h3, h4, etc). The heading for this paragraph is a level 3 heading and clearly describes the content of this section.
For example, using an <h1> element for your page title and then using <h3> elements for the page's main sections will cause the audit to fail because the <h2> level is skipped.</h2></h3></h1>
To learn more about proper heading order and markup structure, check out the documentation on WebAIM’s site.
While the audit panel is in beta, there are a handful of planned improvements on the way:
If you have feedback, issues to report, or questions about the Audit panel, let us know in the feedback thread on our forum.
Something went wrong while submitting the form. Please contact support@webflow.com
Got a lesson suggestion? Let us know
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback