Using The Axe DevTools Web Accessibility Testing Browser Plugin

Accessibility is no longer optional for modern websites and applications. With legal requirements like the Americans with Disabilities Act (ADA), the European Accessibility Act (EN 301 549), and Web Content Accessibility Guidelines (WCAG) becoming increasingly enforced, ensuring your digital products are usable by everyone isn't just good practice--it's a business necessity.

Axe DevTools, developed by Deque Systems, stands as one of the most widely used accessibility testing tools in the industry. What makes it particularly valuable is its foundation on axe-core, an open-source accessibility testing engine that powers accessibility testing across numerous platforms and tools. Unlike other accessibility checkers that can generate false positives or require extensive configuration, Axe DevTools is designed to provide accurate results with minimal setup, making it accessible to team members across different technical backgrounds.

The philosophy behind Axe DevTools centers on making accessibility testing an integral part of the development process rather than an afterthought. By embedding accessibility checks directly into the browser's developer tools, developers can identify issues as they build, rather than discovering them during expensive late-stage testing or, worse, after deployment. This approach aligns with the principle that accessibility is easiest and most cost-effective to implement when considered from the beginning of a project through accessible design principles.

Installation and Initial Setup

Installing the Browser Extension

Getting started with Axe DevTools is straightforward. The extension is available for all major browsers through their respective extension stores. For Chrome users, the extension can be found in the Chrome Web Store by searching for "Axe DevTools Web Accessibility Testing" or by visiting the direct link provided by Deque. The installation process follows the standard browser extension installation flow--click the install button, confirm the permissions request, and the extension will be ready to use within moments.

Once installed, Axe DevTools doesn't add any visible elements to your browser's standard interface. Instead, it integrates directly into the browser's developer tools. To access Axe DevTools, you'll need to open the developer tools panel first. This can be done through the browser menu (typically found under More Tools > Developer Tools), by right-clicking on any page element and selecting Inspect, or by using the keyboard shortcut--Ctrl+Shift+I on Windows or Command+Option+I on macOS.

Within the developer tools panel, you'll find the Axe DevTools tab located alongside other tabs like Elements, Console, and Network. On some browsers with narrow display areas, this tab might be hidden under a ">>" icon that expands additional tabs.

Configuring for Comprehensive Testing

While Axe DevTools works well out of the box, taking a few moments to configure the settings can significantly improve the depth and usefulness of your scans. The tool includes a Best Practices section that, when enabled, checks for additional issues beyond the core WCAG requirements. These best practice checks can identify potential issues that might not cause immediate accessibility failures but could create problems for certain users or in specific contexts.

To enable Best Practices, navigate to the Options menu within Axe DevTools, then select Settings. Within the Settings panel, you'll find a toggle for enabling Best Practices. Checking this option and saving your settings expands the scope of subsequent scans to include these additional checks, providing more comprehensive accessibility validation for your projects.

Running Accessibility Scans

Scanning a Webpage

With Axe DevTools installed and configured, conducting an accessibility scan is refreshingly simple. Navigate to the webpage you want to test, open the developer tools, and select the Axe DevTools tab. The interface presents a prominent "Scan ALL OF MY PAGE" button--clicking this button initiates a comprehensive scan of the entire page.

The scanning process is remarkably fast, typically completing in a few seconds even for complex pages with hundreds of elements. During the scan, Axe DevTools examines the page's DOM (Document Object Model), analyzing elements against dozens of accessibility rules. It checks for proper semantic markup, ARIA attribute usage, color contrast ratios, keyboard accessibility, form labeling, image alternative text, heading structure, and much more.

For single-page applications or dynamically loaded content, you may need to interact with the page before scanning to ensure all content is loaded. Axe DevTools scans the page in its current state, so any content loaded asynchronously after the initial page load won't be included unless you trigger that loading first.

Targeting Specific Elements

While scanning the entire page is useful for comprehensive audits, Axe DevTools also allows you to focus on specific elements or sections. This is particularly valuable when you've made changes to a particular component and want to verify those changes without re-scanning the entire page. To scan a specific element, use the browser's element selection tool (the cursor icon in the developer tools) to select the element you want to analyze, then run the scan.

This targeted scanning capability is especially useful for component-based development workflows. When building reusable components--whether using React, Vue, Angular, or any other framework--you can test each component in isolation, ensuring it meets accessibility standards before integrating it into larger page layouts. This approach catches issues early in the development process when they're easiest and cheapest to fix, supporting our clean code practices for maintainable digital products.

Understanding and Interpreting Results

The Results Interface

After completing a scan, Axe DevTools presents its findings in a clear, organized interface. The results are divided into two main areas: a summary showing the total count of issues found, and a detailed list of each individual issue. The summary provides a quick overview of the page's accessibility status, allowing you to assess overall severity at a glance.

The issue counts are organized by impact level, helping you prioritize remediation efforts. Issues are typically categorized as:

• Critical - Affecting users with significant disabilities
• Serious - Causing major problems for many users
• Moderate - Causing problems for some users in certain situations
• Minor - Causing inconvenience but not preventing use

This prioritization system aligns with how accessibility issues are typically assessed under WCAG, where failures are grouped by their impact on users.

Reading Issue Details

Clicking on any issue in the list reveals a detailed view with comprehensive information about that specific problem. The detail view shows the exact location in the HTML where the issue occurs, making it easy to find and fix the problematic code. For issues that appear multiple times, the detail view includes navigation controls to move between each instance.

Each issue detail includes:

• Issue Description - Explains what the problem is in clear language
• Location - Identifies precisely where in the HTML the issue occurs
• How to Fix - Specific guidance on resolving the issue
• WCAG Reference - Connects the issue to specific success criteria

This detailed feedback helps developers quickly understand and resolve accessibility issues as part of their quality assurance process, reducing the time needed for remediation.

Common Accessibility Issues Detected

Images and Media

One of the most frequently detected issue categories involves images and their alternative text. Axe DevTools checks for images missing the alt attribute entirely, as well as images with empty alt text that might not be conveying meaningful information to screen reader users. The tool can also identify images with overly long alternative text that might be truncated by assistive technologies, and decorative images that should have empty alt attributes but don't.

For video and audio content, Axe DevTools checks for missing captions, audio descriptions, and transcripts. While the tool can't verify the quality of these alternatives, it can identify when they're missing entirely.

Navigation and Structure

Heading structure issues are among the most common problems Axe DevTools identifies. The tool checks for skipped heading levels (jumping from h1 to h3, for example), multiple h1 elements on a single page, and headings that don't accurately describe the content that follows. These structural issues affect how screen reader users navigate and understand page content.

The tool also checks for proper landmark regions, identifying when content should be wrapped in semantic elements like main, nav, header, footer, and aside. For pages built without these landmarks--or with landmarks used incorrectly--Axe DevTools can suggest improvements that make navigation more efficient for assistive technology users.

Interactive Elements

Form accessibility is another area where Axe DevTools provides significant value. The tool checks for missing form labels, labels that aren't properly associated with their controls, fieldsets without legends, and errors that aren't clearly identified and described. These issues can completely prevent users from completing forms, making them critical accessibility failures that should be addressed through accessible form design.

For buttons and links, Axe DevTools identifies empty or unclear link text, buttons without accessible names, and interactive elements that can't be accessed via keyboard.

Color and Visual Design

Color contrast issues are consistently flagged by Axe DevTools, helping ensure that text is readable for users with low vision or color blindness. The tool checks text against background colors using WCAG contrast ratio requirements, flagging text that doesn't meet the minimum thresholds for its size and importance.

Best Practices for Effective Testing

Integrating Into Development Workflow

The value of accessibility testing is maximized when it's integrated into regular development practices rather than treated as a separate phase. Developers who run Axe DevTools scans as they build--checking each new component or page section before moving on--catch issues early when they're simplest to fix. This approach avoids the accumulation of accessibility debt that becomes overwhelming when addressed only at project milestones.

Consider establishing team norms around accessibility testing. For example, a practice of scanning before committing code, or requiring clean scans for pull requests, can maintain accessibility standards throughout the development process. The speed of Axe DevTools makes it particularly suitable for this integrated approach--unlike comprehensive accessibility audits that might take hours or days, a single-page scan completes in seconds.

Testing Beyond the Initial Load

Accessibility testing must account for the dynamic nature of modern web applications. Many issues only appear after user interaction--modal dialogs, expanded sections, form validation messages, and other dynamic content can introduce accessibility problems that aren't present in the initial page state.

When testing, interact with the page as a real user would. Open modal dialogs and verify they're accessible. Expand accordions and test their content. Submit forms with errors and ensure error messages are properly announced. Navigate through the page using only the keyboard, checking that all interactive elements are reachable and operable.

Complementing Automated Testing

While Axe DevTools provides valuable automated testing capabilities, it's important to understand its limitations. Automated tools can only catch issues that can be programmatically detected--approximately 30-40% of total accessibility issues. The remaining issues require manual testing, screen reader testing, and testing with people with disabilities. Axe DevTools should be part of a broader accessibility testing strategy that includes keyboard-only navigation testing, screen reader testing, zoom and magnification testing, and testing with various browser configurations.

Limitations and Considerations

What Automated Tools Can't Catch

Understanding the limitations of automated accessibility testing helps set realistic expectations and ensures comprehensive coverage. Axe DevTools can't evaluate whether content makes sense or is useful--it can only check for technical compliance with accessibility standards. A page might pass all automated checks while still being confusing or unusable for some users.

The tool also can't assess the quality of alternatives provided. It can check that images have alt text, but not whether that alt text effectively conveys the image's meaning. It can verify that form fields have labels, but not whether those labels are clear and descriptive. These qualitative assessments require human evaluation that complements the automated scanning.

Context-dependent issues often escape automated detection. Whether link text like "click here" is problematic depends on what follows it and where the link appears on the page. Whether alternative text is appropriate depends on the image's purpose and context. These nuances require human judgment that automated tools can't replicate.

Dealing with False Positives and Negatives

Like any automated tool, Axe DevTools occasionally flags issues that aren't actually problems (false positives) or misses issues that exist (false negatives). False positives often occur with complex custom components where Axe DevTools doesn't recognize the accessibility patterns being used. False negatives occur when accessibility issues exist but can't be detected through HTML analysis alone.

Testing in Context

The context of testing affects Axe DevTools results and their interpretation. Testing in different browsers might reveal different issues due to browser-specific behaviors. Testing with different viewport sizes captures accessibility concerns that appear only at certain breakpoints. For responsive designs, test at multiple sizes to catch issues related to touch target size and content reflow that are size-dependent.

Summary

Axe DevTools provides a powerful, accessible entry point into accessibility testing for development teams of all sizes. By integrating directly into the browser's developer tools, it makes accessibility checking a natural part of the development workflow rather than a separate, time-consuming activity. The tool's accuracy, speed, and actionable results help developers understand and address accessibility issues effectively.

However, Axe DevTools is most valuable as part of a comprehensive accessibility strategy that includes manual testing, assistive technology testing, and user testing with people with disabilities. The tool catches a significant portion of accessibility issues--those that can be programmatically detected--but the remaining issues require human evaluation and judgment.

By establishing regular accessibility testing habits, understanding both the capabilities and limitations of automated tools, and maintaining a commitment to inclusive design, teams can create digital experiences that serve all users effectively. Our accessibility auditing services can help you develop these capabilities and ensure your digital products meet the highest standards of accessibility and inclusivity.