使用 axe DevTools 和 Lighthouse 扫描

You do not need a special setup to start auditing. Both axe DevTools and Lighthouse run right inside Chrome, scanning the page you are already looking at.

The axe DevTools extension adds a tab to your browser developer tools. One click runs the axe-core engine and lists accessibility issues on the page.

Each finding names the broken rule, shows the exact element, rates the impact, and links to a guide explaining how to fix it. No guessing required.

axe DevTools can highlight the failing element right on the page. That makes it obvious which button or image triggered the warning.

axe tags each issue with an impact level: minor, moderate, serious, or critical. Start with critical and serious to fix the biggest blockers first.

Lighthouse is built into Chrome DevTools. Its accessibility category also runs axe-core under the hood and gives you a single score out of one hundred.

Open the Lighthouse panel, tick Accessibility, and click Analyze page load. In seconds you get a score plus a grouped list of failing audits.

A Lighthouse score of one hundred is encouraging, but it only reflects the checks it can automate. Treat it as a floor, never proof of full accessibility.

You can run Lighthouse outside the browser too. Install it with npm and point it at any URL to generate a shareable report.

axe DevTools gives deeper detail and best-practice rules; Lighthouse gives a quick score across many categories. Both share the axe-core engine, so they agree often.

Run a quick scan while you build, not just before release. Catching a missing label now is far cheaper than tracing it back later.

Recall what these two browser tools share.

axe DevTools gives detailed, fixable findings while Lighthouse gives a fast score. Both live in your browser and run axe-core, so scanning early is effortless. 🔍