Accessibility Developer Tools (ADT)
raw JSON →The Accessibility Developer Tools (ADT) library provides a suite of accessibility-related testing and utility code primarily for web browsers. Its core functionality includes an accessibility audit API, offering a collection of rules to check for common accessibility problems within an HTML page. Beyond auditing, it offers utilities such as contrast ratio calculation, ARIA attribute validation, and accessible name computation following WAI-ARIA specifications. The current stable version is 2.12.0, with a release cadence that appears somewhat irregular, often driven by bug fixes, performance enhancements, and new audit rules. Key differentiators include its focus on practical, rule-based audits for web content and its integration capabilities with testing frameworks like Selenium and headless browsers like PhantomJS. It's often used in CI/CD pipelines to automate accessibility checks.
Common errors
error ReferenceError: axs is not defined ↓
axs_testing.js script is included in your HTML page before any calls to axs, or if in Node.js, ensure require('accessibility-developer-tools') is executed and assigns axs to a global or local variable. error Error: Command failed: java -jar ... closure-compiler.jar ↓
error Cannot read property 'run' of undefined (reading 'Audit') ↓
axs_testing.js (or the equivalent module export) and that it completes execution without errors. This can happen if dependencies for the library itself fail to load. Warnings
breaking The `axs.AuditRule.run()` method signature changed in v0.0.4. It now accepts an options object instead of previous arguments. ↓
gotcha Building the project (e.g., from source) requires a Java Development Kit (JDK) to run Closure Compiler, which is used in the build process. ↓
gotcha Prior to v2.11.0, properly `require`ing the accessibility developer tools in Node.js environments was problematic or not officially supported, primarily designed for browser global usage. ↓
gotcha The audit configuration options were enhanced in v2.9.0 to support specifying options through an object when initializing audits. ↓
deprecated Direct DOM manipulation and global scope reliance in accessibility tools can be less robust in modern component-based frameworks. While effective, integrating with Shadow DOM or isolated web components may require specific patterns or workarounds. ↓
Install
npm install accessibility-developer-tools yarn add accessibility-developer-tools pnpm add accessibility-developer-tools Imports
- axs wrong
import { axs } from 'accessibility-developer-tools';correctimport 'accessibility-developer-tools'; // Exposes global 'axs' // Or for CJS: const axs = require('accessibility-developer-tools'); - axs.Audit.run wrong
import { Audit } from 'accessibility-developer-tools'; Audit.run();correct// After importing or including the library: axs.Audit.run(); - axs.constants.AuditResult wrong
import { AuditResult } from 'accessibility-developer-tools/constants';correct// After importing or including the library: const resultType = axs.constants.AuditResult.PASS;
Quickstart
import puppeteer from 'puppeteer';
async function runAccessibilityAudit(url) {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url, { waitUntil: 'networkidle0' });
// Inject accessibility-developer-tools library
// This assumes the library is installed and available in node_modules
// or fetched from a CDN directly.
// For simplicity, we'll use a direct CDN path here for the browser-global version.
await page.addScriptTag({
url: 'https://raw.githubusercontent.com/GoogleChrome/accessibility-developer-tools/stable/dist/js/axs_testing.js'
});
// Run the audit and get results
const results = await page.evaluate(() => {
if (typeof axs === 'undefined' || !axs.Audit || !axs.Audit.run) {
return { error: 'accessibility-developer-tools not loaded or initialized.' };
}
const auditResults = axs.Audit.run();
return auditResults.map(result => ({
ruleName: result.rule.name,
result: result.result,
elements: result.elements ? result.elements.map(el => el.outerHTML) : []
}));
});
console.log(`Accessibility audit for ${url}:`);
results.forEach(item => {
console.log(` Rule: ${item.ruleName} - Result: ${item.result}`);
if (item.elements && item.elements.length > 0) {
console.log(' Failing elements:', item.elements.slice(0, 3).join(' ')); // Log first 3 elements
}
});
await browser.close();
}
// Example usage: You'd typically run this against a local or staging URL
runAccessibilityAudit('https://www.google.com');