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