Accessibility Testing Guide

WAVE and Axe DevTools

Ensuring your web content is accessible is a vital part of creating a usable, inclusive digital experience for all users, including those with disabilities. It also supports compliance with federal accessibility standards and University of Wyoming policies.

This guide introduces two free and easy-to-use browser tools WAVE and Axe DevTools that CMS editors can use to evaluate their published web pages for accessibility. Both tools provide immediate visual feedback and help detect issues that could impact users who rely on assistive technologies such as screen readers or keyboard navigation.

No technical expertise is required, these tools work right in your browser. Whether you’re editing a new page or updating an existing one, regularly testing your pages helps maintain a more accessible and user-friendly website for all.

Explore testing tools

why use these tools

Accessibility testing tools help identify common issues like missing alt text, poor link descriptions or incorrect heading structure before they become barriers for users. WAVE and axe DevTools let editors run quick scans right in the browser and can help ensure that your site is usable for all visitors. They identify common barriers that may not be visually obvious but can prevent users from navigating or understanding your content. By installing these browser extensions, you can quickly scan your live pages and uncover accessibility issues.

Note: These tools do not make any changes to your website or code. They simply provide a detailed accessibility analysis of the live page from within your browser.

While this guide provides solutions for many common issues, some accessibility problems especially those related to templates, global site structure or needing source code access would require a fix from the Web team. If you're unsure how to resolve a particular issue or need assistance, don’t hesitate to reach out to us.

 

install wave            Install axe devtool

wave Tool

What is WAVE?

WAVE(Web Accessibility Evaluation Tool) is a free browser-based accessibility evaluation tool developed by WebAIM. It provides a visual feedback on your webpage that highlights accessibility errors, alerts and structural information. It’s a great first step in spotting issues that affect users relying on screen readers, keyboard navigation or other assistive technologies.

placeholder

Using WAVE is quick and straightforward:

  • Navigate to the published webpage you want to test.
  • Click the WAVE icon in your browser toolbar.
  • WAVE will scan the page and display a visual overlay of accessibility indicators.

You’ll see icons marking errors, contrast issues, alerts and more. Each icon is clickable and includes detailed information, explanations and suggestions on how to fix the issue.(Insert Screenshot Placeholder: WAVE overlay on a sample UW webpage)

wave screenshot

WAVE results are categorized by color-coded icons:

🟥 Errors (Red): Critical issues like missing alternative text or empty links.
🟧 Contrast Errors: Insufficient color contrast between text and background.
🟨 Alerts (Yellow): Potential issues such as skipped headings or redundant links.
🟦 Features (Blue): Structural elements such as landmarks and headings.
🟩 ARIA (Green): Accessibility enhancements using ARIA attributes.
Each icon includes a tooltip with more information. Click on them to explore the issue and learn how to resolve it.

Here are a few common issues WAVE detects and how to address them:

  • Missing alt text:
    → Add descriptive alt text via the CMS media or image editor.
    Use meaningful, concise text that explains the purpose of the image.
  • Empty heading or link:
    → Make sure every heading and link has visible, descriptive text.
    Avoid headings without content or links that say only “click here.”
  • Low contrast text:
    → Adjust the text or background color to meet minimum contrast standards.
    Use tools like WebAIM Contrast Checker to test.
  • Skipped heading levels:
    → Use a logical heading structure: Heading 1 → Heading 2 → Heading 3, etc.
    Don’t jump from H1 to H4, for example.

 

Axe DevTools

What is Axe DevTools

Axe DevTools is a free browser extension developed by Deque that integrates directly into Chrome or Firefox Developer Tools. While it’s slightly more technical than WAVE, Axe provides in-depth accessibility insights, including links to specific WCAG (Web Content Accessibility Guidelines) criteria related to each issue. This makes it a great tool for CMS editors who want to go a step deeper and confirm the accuracy of issues flagged by visual tools like WAVE. Axe also shows you exactly where the problem appears in the page's HTML and offers guidance on how to fix it.

placeholder

Using axe DevTools is easy once you've installed the browser extension

  • Navigate to the live published webpage you want to test.
  • Right-click anywhere on the page and choose “Inspect” to open Developer Tools
  • In the DevTools panel, select the “axe DevTools” tab.
  • Click “Scan ALL of my page” to begin the accessibility scan.
  • Review the list of issues, which are grouped by severity and type.

axe-screenshot

Axe presents results in a clear, developer-friendly format, with helpful context and direct links to documentation. Each issue typically includes:

  • Issue description: A plain-language explanation of the problem
  • Why it matters: Context on how the issue impacts users with disabilities
  • Affected elements: The specific HTML elements where the issue appears
  • Suggested fixes: Practical guidance or code changes to resolve the issue
  • Highlight in page: Use this option to visually locate the issue on your site

Each issue is also tagged with the relevant WCAG criteria, making it easier to align your site with accessibility guidelines.

 

Here are some of the most frequent issues found using axe DevTools, along with quick fixes:

  • Missing form labels or alt text:
    → Add labels to form fields using the <label> tag or aria-label attributes.
    → Add alt text to all non-decorative images.
  • Color contrast issues:
    → Adjust foreground and background colors to meet WCAG contrast ratio requirements (typically 4.5:1 or higher).
    → Use tools like the WebAIM Contrast Checker to verify.
  • Elements not keyboard accessible:
    → Ensure all interactive elements (buttons, links, forms) can be reached and activated using only the keyboard (Tab, Enter, Space).
  • Empty buttons or links:
    → Provide clear and descriptive text for all clickable elements. Avoid leaving buttons blank or using icons without labels.
  • Page missing a title or language attribute:
    → Ensure the HTML <title> tag and lang attribute (e.g., <html lang="en">) are present and accurate.

Additional Resources

 

Using WAVE and axe regularly ensures your content is inclusive, compliant and user-friendly. Editors are encouraged to test pages during content updates, before publishing live(Dev environment) and after major revisions.

If you encounter issues you cannot fix or want a second review, please contact the UW Web Team. We’re here to assist with guidance and page-level reviews.