Intro to the Audit panel

Find and fix accessibility issues with Webflow’s Audit panel.

This video features an old UI. Updated version coming soon!

As you design and develop in Webflow (or however you’re building for the web), it’s critical to identify and correct missed opportunities that can affect accessibility, search performance, and about a million other aspects of user experience.

We’re going to cover how to use the Audit panel in the Webflow Designer to identify, to fix, to temporarily ignore, or to unignore things that come up. And at the end of this lesson, we’ll be writing a formal petition to Merriam-Webster to add “unignore” to their official list of English words.

Let’s start with identifying. And we’ll do three types of examples here. First, here’s our project — and at any time, we can head over to the Audit panel to get a view of some of the issues affecting our project.

Here’s an example of missing alt text. Alt text is something we should add to describe the appearance or really the function of an image on the page. And if we can open this example up, we find an image element that doesn’t have alt text provided.

Now. This is a perfectly good-looking page. Image, heading, mouse cursor upside down. But this image has no alt text. This leave search engines guessing and for users who rely on screen readers (these are tools like VoiceOver that enable users with visual disabilities to navigate and understand content) — for those users? They can’t access the content in the image either. No alt text, not a good user experience.

What about this one? Non-descriptive link content. What does that mean? Well this one’s critical because, as we can see, we have this link block here, but there’s no indication of what the action is going to do. This is why it’s critical to have a clear, descriptive action — and we go into detail about this in our accessible typography unit on Webflow University — so check that out if you haven’t already.

But here’s another example. This one’s also non-descriptive link content. But this time, there is text here, and it’s pretty clear. What is going on?

Well, the text here on this design is actually baked into the image (it’s rasterized — it’s not real text that’s interpretable by search engines, screen readers...Plus, rasterized text doesn’t always scale cleanly and is often difficult to read). This is rarely a good practice, and we’ll want to make sure any descriptive text is actually text. (We’ll fix these examples in the next section, but for now, let’s move on to one more example.)

Here is “skipped heading level.” What’s a skipped heading level?

Grimur's not here. Usually, headings on the web are defined with an H1 (this is the top-level heading on a page) — the H1 being the most important heading, with H2s grouping content together underneath H1s. Similarly, H3s are even more specific headings. But that pattern — that hierarchy could be broken when we have a structure that skips a heading level. And it’s usually considered good practice to order the headings to help visitors understand page structure (and help improve page navigation by quickly grasping the structure; the hierarchy). So any skipped levels in heading structure are identified here.

That’s part 1: identifying common issues during the design process so we can not only fix them, but become more practiced and aware of these considerations so that they’re part of our design and development workflow; not an afterthought.

But here we are in part 2: fixing these things. In a lot of cases, it’s just following up on the identification. For the missing alt text? Let’s add a clear description that’s helpful for both humans and search engines to understand the content in the image.

We also have the option to set this image as decorative, but it’s not. This is meaningful content that adds value — information on the page, so it’s our responsibility to make sure we’re doing our job and writing a meaningful description.

By the way, since we did that? The issue is no longer detected in the Audit panel.

Now. There are tons of ways to do this — we have an entire lesson on alt text and different ways to solve for this (especially when you’re reusing images or using Webflow’s CMS), so check that out to learn more.

Okay, what about non-descriptive link content? Well, let's add descriptive text to this link so its action is clear. This doesn’t mean you can just write “click here” or “link” ...We want to make sure that the action we’re performing is described in the link text itself. (Again, this is just one example.)

The other non-descriptive link content? We can fix that, too, by using assets that don’t have text rasterized (baked into the image itself.) In this case, we’re recreating that design using an actual text element inside Webflow.

And for our last example: skipped headings. We can see here we have an H1, we have an H2, some H3s, even some H4s. But wait a second. In this section, we don’t have an H3. (It skips right from H2 to H4.) Now. Could this be a content choice? Sure, and we’ll get to that in a second. But for us, it’s actually an omission. So let’s make sure we get that corrected, so that our hierarchy doesn’t skip a heading level. (That way it won’t jump from H2 to H4; there’s an H3 so that the heading hierarchy is predictable and understandable.)

But (and this is part 3 by the way), there are times where we might want to ignore something that comes up. Maybe for some reason our content absolutely calls for a skip in the heading hierarchy — there are tons of times this happens (especially if we’re developing on the fly, and maybe we have the intention to build the content out of order — everyone can approach this differently.)

That’s why we have the choice to ignore something that comes up in the Audit panel. This dismisses the notification in cases where you want to temporarily or for some reason permanently ignore something coming up in the panel.

But oftentimes, like we said, we just do that temporarily. That’s why it’s critical to unignore things that we might have only wanted to temporarily dismiss. So to unignore? We just unignore. Now that issue is again being flagged, and we can approach solving for that as we continue designing and developing.

But that’s an overview — is this comprehensive? Of course not. But it’s our responsibility to always be seeking ways to make the user experience better for everyone who’s going to be interacting with something we’re building for the web. This is an ongoing process, and as we learn and as we build more, these types of considerations become an integral part of our design and development toolbox. (Not this specific Webflow feature itself, but the considerations around building more inclusive and more effective sites on the web.)

And, that’s also why our accessibility course on Webflow university is an open-ended course. We’re learning, too, and we’re constantly adding what we learn to this course so that we can all build a better web for everyone. And of course, so we can start unignoring things that shouldn’t be afterthoughts; things that every designer and developer should be considering from the very start of our projects. Grimur?

[Grimur] Dear Merriam-Webster,

It’s Grimur again. I noticed you don’t currently list “unignore” as a real word in your dictionary. I’d like to formally petition for “unignore” to be permanently added.

Sincerely, Grimur

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:

To learn more about accessibility, enroll in our accessibility course.

Identify accessibility issues

The Audit panel currently includes 4 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.

The Audit panel button is highlighted in the bottom left of the Webflow Designer.

A close up of the Audit panel and some of its flagged issues, including missing alt text, non-descriptive link content, and 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.

Webflow’s color contrast checker in the color picker for text elements is highlighted.

Missing alt text

Alt text describes the appearance or function of your image content for site visitors who are Blind, low vision, or have visual disabilities. It will also be displayed in place of an image if the image file hasn’t loaded or when a user has chosen not to view images. (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 Blind, low vision, or visually disabled people. It’s also useful for people who have cognitive or learning disabilities.

Learn how to fix missing alt text.

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, and search engines are left guessing as to what your image content contains.

The Audit panel shows a series of image assets flagged as having missing alt text.

Non-descriptive link 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.

Learn how to fix non-descriptive link content.

Why the Audit panel flags links without descriptive content

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

The Audit panel shows a Link block flagged for having non-descriptive link content.

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.

Skipped heading level

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 visually or with screen readers. Absent or poor heading structure forces visitors to work extra hard to find what they’re looking for.

Learn how to fix skipped heading levels.

Why the Audit panel flags skipped heading levels

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.

Headings H1, H2, and H3 are shown in their hierarchy with H1 on top, H2 in the middle, and H3 on the bottom.

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.

The Audit panel shows an H4 Heading flagged for being a skipped heading level.

Duplicate element IDs

Designers and developers use unique identifiers (IDs) to optimize sites for accessibility or to extend site functionality with custom code, including linking, scripting, or styling (with CSS). It’s considered best practice in web development to ensure that each ID is unique across an entire webpage (i.e., each ID is used to identify only a single element).

Why the Audit panel flags duplicate element IDs

Using the same ID on more than one element may cause custom code or screen readers to malfunction, as they’ll only target the first element with the shared ID. While modern browsers typically accept duplicate IDs, these still present an increased risk for site visitors to encounter bugs on the published site.

With the Audit panel, you’ll be able to identify duplicate IDs on a page and act on them before issues occur, reducing the time spent debugging custom code and removing the risk of degrading the accessibility of your published sites.

The Audit panel shows a warning for duplicate ID attributes “inner-link” used on 6 elements.

Fix accessibility issues

In many cases, fixing accessibility issues involves adding the missing identification. We’ll cover:

How to fix missing alt text

You can assign alt text to images from the Asset panel.

An image in the Asset panel has its Asset details modal open so missing alt text can be added.

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.

The Asset details modal allows you to choose from adding descriptive alt text, or setting the asset as “decorative,” which doesn’t require alt text.

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.

The Audit panel categorizes images with missing alt text into 4 groups:

Images with missing alt text in the Asset grouping

If the image is under the Asset grouping in the Audit panel, it means the canvas image is referencing the asset and the asset does not have alt text.

To fix missing alt text on an Image element:

Click the target action arrow to go to the location of the image on the canvas, and open up a Missing alt text informational modal
Click “Find it for me” in the Missing alt text modal to automatically locate the image’s alt text settings in the Asset panel
Add descriptive alt text or mark the image as decorative

Images under the Assets grouping that are missing alt text are highlighted in the Audit panel, and a target action arrow is displayed to indicate you can click it to be taken to the issue that needs to be resolved.

A “find it for me” link is highlighted in the Missing alt text modal to automatically locate the image’s alt text settings in the Asset panel.

An image’s Asset details modal appears after clicking on the “Find it for me” link in the Missing alt text modal.

Good to know: You can click and drag the informational modal to move it around the canvas.

If you want to override alt text set on images in the Asset panel, you can add custom alt text to individual images on the canvas.

Add custom alt text to Image elements on the canvas:

Double click the Image element on the canvas
Choose “Custom description” from the Alt text dropdown menu and set custom alt text for that image

You can read more about setting alt text on individual images in our Alt text for images lesson.

Images with missing alt text in the Rich Text grouping

If the image is under the Rich Text grouping in the Audit panel, it means the canvas image in the rich text element is referencing the asset and the asset does not have alt text.

To fix missing alt text on an image in a rich text element:

Click the target action arrow to go to the location of the rich text element on the canvas, and open up a Missing alt text informational modal
Click “Find it for me” in the Missing alt text modal to automatically locate the image’s alt text settings in the Asset panel
Add descriptive alt text or mark the image as decorative

Images under the Rich text grouping that are missing alt text are highlighted in the Audit panel, and a target action arrow is displayed to indicate you can click it to be taken to the issue that needs to be resolved.

If you want to override alt text set on images in the Asset panel, you can add custom alt text to individual images on the canvas.

Add custom alt text to images in rich text elements:

Double click the image inside the rich text element on the canvas
Click the “wrench” icon
Choose “Custom” from the Alt text dropdown menu and set custom alt text for that image

You can read more about setting alt text on individual images in our Alt text for images lesson.

Images with missing alt text in the Collection List grouping

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

To fix this:

Click the target action arrow to go to the location of the image on the canvas, and open up a Missing alt text informational modal
Click “Show me where” in the Missing alt text modal to bind the alt text to a Plain text field in that Collection
Specify descriptive alt text for each text field in each CMS item in the Collection

Note: Another audit will activate if the bound CMS Plain text field is empty.

Images under the Collection list grouping that are missing alt text are highlighted in the Audit panel, and a target action arrow is displayed to indicate you can click it to be taken to the issue that needs to be resolved.

A “show me where” link is highlighted in the Missing alt text modal to automatically locate the image’s alt text settings.

“Get alt text from Blogs” is highlighted in an image’s settings in the Settings panel.

Images with missing alt text in the Collection name grouping

If the image is under a grouping with the specific name of a Collection (e.g., “Staff profile”), it means the image’s alt text is bound to an empty field in that particular Collection item (e.g., Charles Dickens, Charlotte Brontë, etc.)

To fix this:

Click the target action arrow to go to the location of the image on the canvas, and open up a Missing alt text informational modal
Click “Find it for me” in the Missing alt text modal to automatically locate the empty alt text field in the Collection item
Add descriptive copy, or add a “space” to mark the image as decorative (e.g., press the spacebar on your keyboard)

Images under a named Collection list grouping that are missing alt text are highlighted in the Audit panel, and a target action arrow is displayed to indicate you can click it to be taken to the issue that needs to be resolved.

A “find it for me” link is highlighted in the Missing alt text modal to automatically locate the image’s empty alt text field in the Collection item.

An image’s empty alt text field is highlighted in a Collection item.

The Audit panel also helps you find and fix missing alt text on images in Multi-image fields in Collections.

To fix this:

Click the target action arrow to go to the location of the image on the canvas, and open up a Missing alt text informational modal
Click “Find it for me” in the Missing alt text modal to automatically locate the image with missing alt text in the Multi-image field in the Collection item
Hover over the image, click the 3 disclosure dots, and choose “Edit alt text”
Add descriptive copy, or add a “space” to mark the image as decorative (e.g., press the spacebar on your keyboard)
Save your Collection item

Repeat the above steps for additional images in the Multi-image field.

A “find it for me” link is highlighted in the Missing alt text modal to automatically locate the image’s empty alt text field in the Multi-image field in the Collection item.

Images in a Multi-image field in a Collection item are highlighted.

An “Edit alt text modal” is highlighted after clicking the 3 disclosure dots on an image in a Multi-image field in a Collection item.

Tips for writing effective alt text

Describe the intent, purpose, and meaning of the image
Don’t repeat surrounding text (e.g., alt text isn’t needed if a caption fully describes a picture, alt text is redundant, or it repeats names of people in alt text for their bios. That is repetitive text and doesn't describe the picture or how they look.)
Use punctuation (to help screen readers describe the image with a more human-sounding approach)
Write so Blind, low vision, and visually disabled visitors receive meaningful information about the image from alt text, and keep your description to 1 to 2 sentences of key information (don’t go overboard with your description)
Avoid non-specific words like "chart," "image," or "diagram" — instead describe the meaning or trends shown in the charts, diagrams, or images

Good to know: The Audit panel does not check alt text for images inside Lightbox media elements. Rich text images in the CMS also have limited audit settings (the target action arrow does not open the image’s settings inside the rich text element, so alt text must be checked/added manually).

Resources

To learn more about image alt text and screen readers, check out our Alt text lesson, along with How to Design Great Alt Text: An Introduction and Images must have alternate text from Deque University.

How to fix non-descriptive link content

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”).

A button is highlighted with descriptive link content reading, “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.

A text element is added to a Link block in order to add descriptive link text.

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.

An Image element’s settings is shown in the Settings panel, where you can also add alt text.

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.

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 (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.

In the Navigator, an H2 Heading and an H4 Heading appear next to each other, indicating that the H3 level heading was skipped.

If the skipped heading was an accidental omission, you can set it to the correct heading type:

Select the Heading you want to change
Open the Settings panel (D)
Press the Heading type that was skipped (e.g., “H3”)

In the Settings panel, an H4 Heading is changed to and H3 Heading to maintain heading hierarchy.

Resources

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

How to fix duplicate element IDs

Each element ID must be unique across an entire webpage (i.e., each ID is used to identify only a single element).

Using the same ID on more than one element will trigger an error message in the Settings panel when the ID is added and cause any subsequent site audits to fail. The Audit panel will identify all elements and symbol instances with duplicate IDs to allow you to quickly identify and resolve any duplicate IDs on your site.

To fix duplicate IDs:

Click the target action arrow next to the flagged ID in the Audit panel to show all elements and symbol instances with the duplicate ID
Click the “Show me” arrow next to the flagged elements (this will take you to the element settings in the Settings panel where the ID is set)
Edit or delete the duplicate ID
Repeat the above steps for each element with the duplicate ID

An error appears under the ID field of Link Settings, where an ID of “inner-link” has been entered. The error reads, “This ID is already taken.”

The Audit panel shows a warning for duplicate ID attributes “inner-link” used on 6 elements. The arrow next to the inner-link ID is highlighted.

Expanded Audit panel menu highlighting all instances of the ID “inner-link” on elements and symbol instances. The ID is used on 2 Link elements and 3 H3 elements within symbols.

Expanded Audit panel menu highlighting all instances of the ID “inner-link” on elements and symbol instances. The “Show me” arrow is highlighted next to one of the Link elements where the ID is used.

Resources

To learn more, check out the MDN documentation on the ID attribute.

Ignore accessibility issues

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:

Open the Audit panel
Hover over the issue you want to ignore and press the “silenced bell” icon

The “silenced bell” icon is highlighted alongside an issue in the Audit panel to show how you can ignore a flagged issue.

Unignore accessibility issues

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: