{"id":5505,"date":"2024-04-14T11:45:23","date_gmt":"2024-04-14T03:45:23","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5505"},"modified":"2024-04-14T11:45:23","modified_gmt":"2024-04-14T03:45:23","slug":"introduction-to-the-audit-dashboard","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/introduction-to-the-audit-dashboard\/","title":{"rendered":"Introduction to the Audit dashboard"},"content":{"rendered":"\n
\n

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.<\/p>\n

This tutorial will provide you with insights into the Audit dashboard including:<\/p>\n

    \n
  1. Spotting accessibility issues<\/li>\n
  2. Resolving accessibility issues<\/li>\n
  3. Disregarding accessibility issues<\/li>\n
  4. Reconsidering accessibility issues<\/li>\n<\/ol>\n

    To delve deeper into accessibility, sign up for our accessibility course.<\/p>\n

    Note: <\/strong>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.<\/p><\/blockquote>\n

    Spotting accessibility issues<\/h2>\n

    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:\u00a0<\/p>\n

      \n
    1. Missing alternative text<\/li>\n
    2. Non-informative link content<\/li>\n
    3. Skipped heading levels<\/li>\n
    4. Repetitive element IDs<\/li>\n<\/ol>\n

      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.<\/p>\n

      Access the Audit dashboard by clicking the Audit dashboard icon<\/strong> located at the bottom left corner of the Designer.
      <\/strong><\/p>\n

      Expert tip:<\/strong> Use Alt\/Option<\/strong> + U<\/strong> on your keyboard to quickly expand or collapse all items in the Audit dashboard<\/strong>.<\/h6>\n
      \n
      \"The<\/div>\n<\/figure>\n
      \n
      \"A<\/div>\n<\/figure>\n
      Handy tip:<\/strong> 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.<\/h6>\n
      \n
      \"Webflow\u2019s<\/div>\n<\/figure>\n

      Missing alternative text<\/h3>\n

      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.)<\/p>\n

      \u200dHelpful to note:<\/strong> 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.<\/h6>\n

      Discover how to rectify missing alternative text.<\/p>\n

      Reason for flagging missing alternative text by the Audit dashboard<\/h4>\n

      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.<\/p>\n

      Note: <\/strong>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.<\/p><\/blockquote>\n

      \n
      \"The<\/div>\n<\/figure>\n

      Non-informative link content<\/h3>\n

      Link text should be distinct, understandable without context, and inform readers of the link’s purpose and destination.<\/p>\n

      Learn how to rectify non-informative link content.<\/p>\n

      Reason for flagging links without descriptive content by the Audit dashboard<\/h4>\n

      Empty links refer to links lacking meaningful text or image alternative text, causing confusion for users relying on screen readers.<\/p>\n

      \n
      \n
      \"The<\/div>\n<\/figure>\n

      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.
      <\/strong><\/p>\n

      Get acquainted with accessible typography.\u00a0<\/p>\n

      Skipped heading tier<\/h3>\n

      Headings provide individuals with a perception of a page\u2019s 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.<\/p>\n

      Discover methods to rectify skipped heading tiers.<\/p>\n

      Reason for the Audit panel marking skipped heading tiers<\/h4>\n

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

      \"Headings<\/figure>\n

      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.<\/p>\n

      \"The<\/div>\n<\/figure>\n

      Replicated element IDs<\/h3>\n

      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).<\/p>\n

      Reason for the Audit panel flagging duplicated element IDs<\/h4>\n

      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.\u00a0<\/p>\n

      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.<\/p>\n

      \"The<\/figure>\n

      Rectify accessibility concerns<\/h2>\n

      In numerous instances, rectifying accessibility concerns encompasses adding the absent classification. We\u2019ll discuss:\u00a0<\/p>\n

        \n
      1. How to correct missing alt text<\/li>\n
      2. How to rectify non-descriptive link content<\/li>\n
      3. How to address skipped heading tiers<\/li>\n
      4. How to amend duplicated element IDs<\/li>\n<\/ol>\n

        How to correct missing alt text<\/h3>\n

        You can assign alt text to images from the Asset panel.\u00a0<\/p>\n

        \"An<\/figure>\n

        Or, if an image isn\u2019t intended to convey semantic information and is purely decorative, you can explicitly designate the image as decorative so that screen readers skip it.\u00a0<\/p>\n

        \"The<\/figure>\n
        Note:<\/strong> To determine if an image is decorative or informative, remove it from the page. If information is missing without the image, it\u2019s informative and requires alt text. Images that function as links, buttons, logos, or contain crucial information always necessitate alt text.<\/strong><\/h6>\n

        Crucial: <\/em><\/strong>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.
        <\/strong><\/p><\/blockquote>\n

        Images without alt text in the Audit panel are segmented into 2 categories:\u00a0<\/p>\n