axe DevTools Violations on Your Site

Why it matters

axe DevTools, developed by Deque Systems, is the industry-standard accessibility testing engine powering Lighthouse, Siteimprove, and hundreds of other tools. The axe-core library has been downloaded over 2 billion times and is trusted by Microsoft, Google, and Apple. When axe flags violations, you can be confident they are real WCAG failures — axe has a near-zero false positive rate by design. axe categorizes violations by impact: Critical violations completely block users with disabilities from accessing content; Serious violations create significant barriers; Moderate and Minor violations reduce the quality of the experience. Integrating axe into your CI/CD pipeline is one of the highest-leverage accessibility investments — it prevents regressions from shipping without adding manual testing overhead.

Symptoms — what you'll see

If your site has this problem, you may observe any of the following:

• axe DevTools extension shows violation count in browser toolbar
• Violations panel shows Critical, Serious, Moderate, and Minor categories
• Highlighted elements on page with violation markers
• CI/CD pipeline failing due to axe-core violations in automated tests
• Deque axe DevTools Pro showing violations with guided fixes
• axe-core integration in Cypress/Playwright tests reporting failures

Common causes

• Missing semantic HTML — custom components built with divs that do not expose roles
• Incorrect ARIA usage: roles applied to wrong elements, required ARIA properties missing
• Images without alt text, especially dynamically loaded product images
• Form controls without accessible names
• Color contrast failures across text elements
• Missing skip navigation link (WCAG 2.4.1)
• Duplicate IDs in the document causing ARIA labelledby/describedby references to fail
• Frame/iframe elements without title attributes

How to fix it

1. 1Install axe DevTools Chrome extension from Deque and run it on each page type.
2. 2Sort violations by "Impact" — fix Critical first, then Serious, Moderate, Minor.
3. 3For each violation, click "Highlight" to see affected elements, then "More info" for the specific fix guidance.
4. 4Most common Critical violations: missing image alt text, form inputs without labels, color contrast failures, empty interactive elements.
5. 5Most common Serious violations: ARIA role violations, missing landmarks, incorrect heading structure.
6. 6Use axe's "Best Practices" tab for non-WCAG improvements that still affect accessibility.
7. 7Integrate axe-core into your test suite: npm install axe-core @axe-core/react (for React) and run checks in CI.
8. 8Use axe DevTools Pro's "Fix" suggestions for guided remediation with code examples.

// Automated test WITHOUT axe — misses accessibility regressions
describe('Homepage', () => {
  it('loads correctly', () => {
    cy.visit('/');
    cy.get('.hero').should('be.visible');
  });
});

// Automated test WITH axe — catches accessibility violations in CI
import 'cypress-axe';

describe('Homepage', () => {
  it('has no accessibility violations', () => {
    cy.visit('/');
    cy.injectAxe();
    cy.checkA11y(null, {
      rules: {
        'color-contrast': { enabled: true },
        'image-alt': { enabled: true },
        'label': { enabled: true },
      },
      // Fail only on critical/serious violations
      includedImpacts: ['critical', 'serious'],
    });
  });
});

How to test your fix

After applying the fix, verify it works using these testing steps:

1. Install axe DevTools extension from Deque (Chrome Web Store or Firefox Add-ons).
2. Navigate to each page type and open DevTools > axe DevTools tab.
3. Click "Scan ALL of my page" and wait for results.
4. Review violations by impact level and note the count per category.
5. For each violation, use Highlight to identify affected elements and More info for fix details.
6. For automated testing: npm install axe-core and integrate with your existing test framework.
7. Set up axe in CI/CD to block deployments when Critical/Serious violations are introduced.

Frequently asked questions