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, or where search performance may be degraded. Moderate errors (Audit panel flags with a yellow triangle) represent important issues, but are not critical to fix.
In this lesson, you’ll learn all about the Audit panel with the following:
Enroll in the entire accessibility course.
The Audit panel currently includes 3 high-impact accessibility checks so you can identify and fix common issues during the design process. It addresses:
As an added bonus, by using the Audit panel and learning from the issues it flags, you can become more practiced and aware of these considerations so they’re part of your design and development workflow instead of an afterthought.
You can access the Audit panel by clicking the Audit panel icon in the bottom left of the Designer.
Pro tip: Press Alt/Option + U on your keyboard to quickly expand or collapse all items in the Audit panel.
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.
Alt text describes the appearance or function of an image on the page for visitors who rely on screen readers. (It’s also great for SEO.)
Good to know: A screen reader is assistive technology that renders text and image content as speech, and is used by visually impaired people. It’s also useful for people who are illiterate or have a learning disability.
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, and search engines are left guessing as to what your image content contains.
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 will confuse people using screen readers.
Keep in mind that rasterized text on an image (meaning the text is literally part of the image and not a standalone text element) is not interpretable by screen readers or search engines. Best practice is to ensure that any descriptive text used with an image is an actual text element.
Learn more about accessible typography.
Headings give people a sense of a page’s organization and structure, like a table of contents. They let people quickly navigate the structure of your page and 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.) don’t use proper heading hierarchy. H1 is considered the most important heading, H2 headings would group content underneath H1, H3 headings would land underneath H2 headings, and so on.
The heading hierarchy breaks if you skip a heading level (e.g., you have H1 and H3 headings, but no H2 headings). This can be confusing for people with cognitive disabilities and people using screen readers.
In many cases, fixing accessibility issues involves adding the missing identification. We’ll cover:
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 list 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:
Good to know: The following elements’ alt text is not checked, or has limited audit settings:
To fix this, make sure all the link elements on your page have meaningful, descriptive text inside.
Avoid generic terms like “read more,” “link,” or “click here.” Though the Audit panel doesn’t provide guidance on generic terms, use clear, specific language about the action the link performs to make your link that much easier to use (e.g., “Download assets here”).
You can also use assets that don’t have text rasterized with the image. Instead, place text elements over your image assets.
Remember, if you have image links (like icon buttons), be sure to include alt text for those as well.
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.
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 (Intro to the 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 <H2> element for a section title and then using <H4> elements for the section's subheadings will cause the audit to fail because the <H3> level is skipped.
If the skipped heading was an accidental omission, you can set it to the correct heading type:
To learn more about proper heading order and markup structure, check out the documentation on WebAIM’s site.
In some instances, you might want to ignore a flagged issue in the Audit panel. For example, maybe your content requires a skip in the heading hierarchy. Or maybe you’re building on the fly and you choose to build your content out of order.
To ignore the issue and temporarily (or permanently) dismiss the notification in the Audit panel:
Most of the time ignoring an issue is a temporary solution while you build out your design. You can unignore the issue you temporarily dismissed, and re-flag it to be solved as you continue designing and developing.
To unignore an issue:
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.
Related reading: Make your site more accessible
Something went wrong while submitting the form. Please contact email@example.com