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:

1. Missing alt text
2. Link doesn't have descriptive content
3. Skipped heading levels
   

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.

Missing alt text

Alt text describes images for visitors who rely on screen readers. (It’s also great for SEO.)

Why the Audit panel flags missing alt text

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.

How to fix missing alt text

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:

1. Click on the target action arrow (this will take you to the asset’s settings in the Asset panel)
2. Add a descriptive alt text or mark the image as decorative

If the image is under the Collection image grouping, it means the CMS image is not referencing specific alt text.

To fix this:

1. Click the target action arrow
2. Set the Collection images to all have the same alt text, descriptive or decorative 
3. If you want to specify alt text for each image, bind it to a CMS text field that contains descriptive content for the images. The audit will then trigger for specific CMS collection items if the bound CMS text field is empty. 
   

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:

1. Click the target action (you’ll be taken to the empty field in that CMS Collection item)
2. Add alt text to the empty field

Tips for writing effective alt text

1. Describe the intent, purpose, and meaning of the image
2. Don’t repeat surrounding text (e.g., if a caption fully describes a picture, alt text is redundant, or repeating names of people in alt text for their bios. That is repetitive text and doesn't describe the picture or how they look.) 
3. Use punctuation (to help screen readers describe the image with a more human-sounding approach)
4. Write so that blind visitors get as much (and the same) information from alt text as sighted visitors get from the image
5. Avoid non-specific words like "chart," "image," or "diagram"

Resources

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

• Multi-image field image
• Rich text image (the target action arrow does not open the image's settings inside the rich text element)
• Lightbox media
  

Link doesn't have descriptive content

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.

Why the Audit panel flags links without descriptive content

Empty links are links with no meaningful text or image alt text and can confuse people using screen readers or keyboard navigation.

How to fix links without descriptive content

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.

Resources

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.

Skipped heading levels

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.

Why the Audit panel flags skipped heading levels

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.

How to fix skipped heading levels

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>

Resources

To learn more about proper heading order and markup structure, check out the documentation on WebAIM’s site.

Planned improvements

While the audit panel is in beta, there are a handful of planned improvements on the way:

• Better in-product guidance. We’ll be adding a modal per audit type that provides additional context on each and provides guidance on how to resolve them.
• Dismiss audits you want to ignore. Hide audits that you don’t plan to resolve or that aren’t necessary to fix for your project.
• Support for more audits. We’re planning to add more audits to the future like text contrast, site language settings, and more.

If you have feedback, issues to report, or questions about the Audit panel, let us know in the feedback thread on our forum.