Introduction to the Audit dashboard

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

The Audit dashboard highlights common issues related to accessibility so you can rectify them before making your site live. Critical errors (flagged with a red square) indicate issues where your users might miss crucial site content or experience degraded search performance. Moderate errors (flagged with a yellow triangle) signify important issues that are not imperative to fix.

This tutorial will provide you with insights into the Audit dashboard including:

  1. Spotting accessibility issues
  2. Resolving accessibility issues
  3. Disregarding accessibility issues
  4. Reconsidering accessibility issues

To delve deeper into accessibility, sign up for our accessibility course.

Note: The Audit dashboard does not analyze accessibility issues within components. Therefore, carefully identify and address any accessibility concerns within components manually. Discover more about components.

Spotting accessibility issues

The Audit dashboard currently consists of 4 impactful accessibility checks to help you identify and address common issues during the design phase. It focuses on: 

  1. Missing alternative text
  2. Non-informative link content
  3. Skipped heading levels
  4. Repetitive element IDs

By utilizing the Audit dashboard and learning from the flagged issues, you can enhance your skills and awareness of these considerations so they are integrated into your design and development workflow rather than being an afterthought.

Access the Audit dashboard by clicking the Audit dashboard icon located at the bottom left corner of the Designer.

Expert tip: Use Alt/Option + U on your keyboard to quickly expand or collapse all items in the Audit dashboard.
The Audit dashboard button is highlighted in the bottom left corner of the Webflow Designer.
A close up of the Audit dashboard showing some flagged issues such as missing alt text, non-informative link content, and skipped heading levels.
Handy tip: The Audit dashboard does not cover checks for text color contrast ratios, but Webflow provides an embedded color contrast checker in the color picker for text elements to help you verify your text’s accessibility while designing.
Webflow’s color contrast checker in the color picker for text elements is highlighted. 

Missing alternative text

Alternative text describes the appearance or function of your image content for visitors who are blind, have low vision, or suffer from visual impairments. It also appears in place of an image if the file fails to load or if a user has disabled images. (It also aids in SEO.)

Helpful to note: A screen reader is a tool that converts text and image content into speech and is utilized by blind, visually impaired, or visually challenged individuals. It also benefits those with cognitive or learning disabilities.

Discover how to rectify missing alternative text.

Reason for flagging missing alternative text by the Audit dashboard

Absence of alternative text indicates you have included images without meaningful alt text or failed to designate an image as decorative. If an image conveys essential information not found elsewhere on the page, individuals unable to view the image will miss that information, and search engines will struggle to interpret your image content.

Note: The Audit dashboard does not assess alternative text for images within Lightbox media components. Moreover, it does not evaluate alternative text for images linked to CMS. Be cautious to add alternative text for images within Lightbox media components and images connected to CMS. Learn more about setting up alternative text for CMS-bound images.

The Audit dashboard displays a set of image assets flagged for lacking alternative text.

Non-informative link content

Link text should be distinct, understandable without context, and inform readers of the link’s purpose and destination.

Learn how to rectify non-informative link content.

Reason for flagging links without descriptive content by the Audit dashboard

Empty links refer to links lacking meaningful text or image alternative text, causing confusion for users relying on screen readers.

The Audit panel illustrates a Link block marked for having non-explanatory link content.

Remember that rasterized text on an image (indicating the text is part of the image and not an independent text unit) is not interpretable by screen readers or search engines. It is recommended to ensure that any descriptive text used with an image is an actual text component.

Get acquainted with accessible typography. 

Skipped heading tier

Headings provide individuals with a perception of a page’s arrangement and layout, similar to a table of contents. They enable people to swiftly navigate the structure of your page and divide content to be easily scanned visually or with screen readers. Absence or inadequacy of heading structure compels visitors to put in extra effort to locate what they are seeking.

Discover methods to rectify skipped heading tiers.

Reason for the Audit panel marking skipped heading tiers

Skipped heading tiers imply that your heading elements (H1, H2, etc.) do not adhere to the correct heading hierarchy. H1 is considered the topmost heading, H2 headings group content below H1, H3 headings fall under H2 headings, and so forth. 

Headings H1, H2, and H3 are depicted in their hierarchy with H1 at the pinnacle, H2 in the middle, and H3 at the base. 

The heading hierarchy is disrupted when a heading level is skipped (e.g., having H1 and H3 headings but no H2 headings). This can be perplexing for individuals with cognitive impairments and those using screen readers.

The Audit panel displays an H4 Heading identified for being a skipped heading tier.

Replicated element IDs

Designers and developers employ unique identifiers (IDs) to enhance sites for accessibility or to increase site functionality with custom code, encompassing linking, scripting, or styling (using CSS). It is considered standard practice in web development to confirm that each ID is distinct across an entire webpage (i.e., each ID identifies only one element).

Reason for the Audit panel flagging duplicated element IDs

Using the same ID on multiple elements may induce custom code or screen readers to malfunction since they target solely the initial element with the shared ID. Although modern browsers typically accept duplicate IDs, they still pose a heightened risk for site visitors to encounter glitches on the final site. 

By utilizing the Audit panel, you can pinpoint duplicate IDs on a page and address them proactively, reducing the time spent debugging custom code and mitigating the risk of impairing the accessibility of your published sites.

The Audit panel indicates a caution for duplicated ID attributes “inner-link” used on 6 elements.

Rectify accessibility concerns

In numerous instances, rectifying accessibility concerns encompasses adding the absent classification. We’ll discuss: 

  1. How to correct missing alt text
  2. How to rectify non-descriptive link content
  3. How to address skipped heading tiers
  4. How to amend duplicated element IDs

How to correct 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 intended to convey semantic information and is purely decorative, you can explicitly designate 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 determine if an image is decorative or informative, remove it from the page. If information is missing without the image, it’s informative and requires alt text. Images that function as links, buttons, logos, or contain crucial information always necessitate alt text.

Crucial: The Evaluation panel does not verify alt text for visuals within Lightbox multimedia components. Furthermore, the Evaluation panel does not analyze alt text for CMS-bound visuals. Make sure to confirm that you’ve included alt text for any visuals within Lightbox multimedia components and visuals linked to the CMS. Learn more on setting alt text for CMS-bound visuals.

Images without alt text in the Audit panel are segmented into 2 categories: 

  • Resource
  • Textual content

Images missing alt text under the Resource category

Whenever the visual is categorized under the Resource classification in the Audit panel, it indicates that the visual on the canvas is linked to a resource that lacks alt text. 

The Audit panel highlights an image resource with missing alt text under the Resource category.

To rectify missing alt text on an Image component:

  1. Tap on the desired action pointer (this will navigate you to the resource’s preferences in the Resource panel)
  2. Select “Find it for me” within the Absence of alt text interface to automatically pinpoint the alt text settings for the visual in the Resource panel
  3. Incorporate explanatory alt text or designate the visual as ornamental
A cursor is positioned over an issue in the Audit panel to reveal the desired action pointer (highlighted), which guides you to the issue that requires resolution. 
The “Find it for me” option is visible in the Absence of alt text information interface.
The Asset details interface of an image appears after selecting the desired action arrow in the Audit panel. 
Good to remember: You can relocate the informative interface by clicking and dragging it across the canvas.

If you prefer to substitute alt text configured on visuals in the Asset panel, you can introduce custom alt text to individual visuals on the canvas.

To append custom alt text to visual elements on the canvas: 

  1. Choose the Visual component on the canvas 
  2. Select the “gear” icon to access the Visual settings
  3. Opt for “Personalized description” from the Alt text drop-down list and input custom alt text for that visual

Find out more about setting alt text on specific visuals.

Images with missing alt text under the Textual content category

If the visual is part of the Textual content category in the Audit panel, it indicates that the visual within the textual element lacks alt text. 

To resolve missing alt text on a visual within a textual element: 

  1. Tap the desired action pointer to locate the textual element on the canvas and open the Absence of alt text interface
  2. Select “Find it for me” in the Absence of alt text interface to automatically find the alt text settings for the visual in the Resource panel
  3. Integrate explanatory alt text or classify the visual as ornamental
The Evaluation panel highlights an image resource with missing alt text under the Textual content category.
The “Find it for me” option is visible in the Absence of alt text information interface.
An image’s Asset details modal appears after clicking on the target action arrow in the Audit panel.

If you wish to replace alt text defined for images in the Asset panel, you have the option to include personalized alt text for individual images within rich text elements.

To provide customized alt text for images within rich text elements:

  1. Click twice on the image inside the rich text element on the Designer canvas
  2. Tap the “wrench” symbol
  3. Opt for “Custom” from the Alt text dropdown and input custom alt text for that particular image

Find out more about configuring alt text for single images.

Important: The Audit panel does not validate alt text for images within Lightbox media elements. In addition, the Audit panel does not verify alt text for CMS-bound images. Ensure you have provided alt text for all images within Lightbox media elements and images linked to the CMS. Learn more about defining alt text for CMS-bound images.

Tips for crafting effective alt text

  1. Explain the purpose, intention, and significance of the image
  2. Avoid repeating surrounding content (e.g., alt text is unnecessary if a caption fully describes an image, alt text is redundant, or it duplicates names of individuals in alt text for their biographies. This is repetitive text and does not describe the image or appearance of individuals.)
  3. Incorporate punctuation (to assist screen readers in providing a more human-like description of the image)
  4. Compose the text so that visually impaired visitors receive substantial information about the image from alt text, and limit your description to 1 to 2 sentences of essential details (do not go overboard with the description)
  5. Avoid vague terms like “chart,” “image,” or “diagram,” unless they add relevant context—instead, elucidate the meanings or trends depicted in charts, diagrams, or images

Resources

To delve deeper into image alt text and screen readers, explore our Alt text tutorial, in conjunction with How to Design Great Alt Text: An Introduction and Images must have alternate text from Deque University.

How to amend uninformative link content

To rectify this issue, ensure that all link components on your page include purposeful, descriptive text.

Avoid generic terms like “read more,” “link,” or “click here.” While the Audit panel does not offer specific advice on generic terms, utilize clear, explicit language regarding the function of the link to enhance its usability (e.g., “Download assets”).

A button is highlighted with descriptive link content reading, “Download assets here.”

You can also utilize assets without text merged with the image. Instead, superimpose text elements on your image assets.

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

Remember, if you employ image links (such as icon buttons), ensure you also include alt text for those.

Select the target action arrow (the arrow in the Audit panel adjacent to your link) and then revise the link by appending alt text for the image/icon (if the link contains an image).

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

You can adjust any alt text modifications in your element settings (the settings for your image element) to enhance the descriptiveness of your alt text.

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

Resources

To explore more about how to configure links and the available options, refer to our links article and the WCAG Link purpose criterion.

How to resolve omitted heading levels

Headings should adhere to a logical, numerical sequence that mirrors the content framework and clearly outlines the section contents.

For instance, the title of this tutorial (Intro to the Audit panel) is the sole level 1 heading (H1) on this page, the subheadings of this tutorial are level 2 headings (H2), and any headings within those subheadings follow further levels (H3, H4, etc.). The heading for this paragraph is a level 3 heading and elucidates theHere is the updated content of this section.

Illustratively, utilizing an <H2> component for a segment title and afterward utilizing <H4> components for the segment’s subheadings will bring about the review failing because the <H3> level is bypassed. 

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 overlooked heading was an unintended exclusion, you can assign it to the proper heading kind: 

  1. Choose the Header you intend to change
  2. Unfold the Settings section (D)
  3. Click on the Header type that was missed (e.g., “H3”) 
In the Settings panel, an H4 Heading is changed to and H3 Heading to maintain heading hierarchy. 

Supporting Material

To delve deeper into proper heading sequence and markup configuration, explore the documentation on WebAIM’s site.

How to amend replicated element IDs

Every element ID should be distinct across an entire webpage (i.e., each ID solely identifies an individual element).

Assigning the same ID to more than one element will prompt an error notification in the Settings panel upon adding the ID and lead to subsequent site audits to fail. The Audit panel will highlight all elements and component instances with duplicated IDs to facilitate identifying and rectifying any duplicated IDs on your site promptly.

For fixing duplicated IDs: 

  1. Tap the desired action arrow adjacent to the flagged ID in the Audit panel to reveal all elements and component instances wielding the duplicated ID 
  2. Click on the “Display me” arrow adjacent to the flagged elements (this action will transport you to the element settings in the Settings panel where the ID is established) 
  3. Adjust or erase the duplicated ID
  4. Repeat the preceding steps for every element with the duplicated 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. 

Supporting Material

For further insight, refer to the MDN documentation on the ID attribute.

Bypass accessibility problems

On certain occasions, you may wish to overlook a flagged problem in the Audit panel. For instance, perhaps your content necessitates a deviation in the heading hierarchy. Or possibly you are constructing impromptu and prefer to arrange your content out of sequence. 

To disregard the problem and waive the notification temporarily (or permanently) in the Audit panel:

  1. Expand the Audit panel
  2. Hover over the problem you wish to disregard and click 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. 

Reconsider accessibility issues

Most of the time, dismissing a problem is a provisional resolution while you compose your design. You can reverse the decision to disregard the issue temporarily, and reflag it for rectification as you progress in designing and developing. 

To reverse dismissing an issue:

  1. Expand the Audit panel
  2. Click the disclosure arrow to the left of the issue you ignored
  3. Hover over the dismissed issue and click the “bell” icon
The bell icon is highlighted alongside an issue in the Audit panel to show how you can unignore a flagged issue. 

Should you possess feedback, issues to report, or queries about the Audit panel, feel free to inform us in the feedback thread on our forum.

Related literature: Enhance the accessibility of your site

Ewan Mak
Latest posts by Ewan Mak (see all)