How A11yDetector works
Run scans, review issues, and understand what to fix from one clear workflow. A11yDetector helps teams move from detection to action with structured reports and practical remediation guidance.
A practical accessibility workflow inside your browser
A11yDetector is a browser extension that scans web pages for accessibility issues based on WCAG criteria. It helps identify problems related to keyboard interaction, screen reader support, color contrast, zoom, and more, while also providing suggested fixes for each issue found.
Workflow steps
1. Run a scan
You can choose which tests to run, define the scan scope, and select the viewport before launching the analysis. A11yDetector supports checks for keyboard, screen reader, color contrast, and zoom.
2. Track progress
Follow the scan in real time as each test runs. The progress view shows status updates, completion percentage, and the current state of every test so you can see what is pending, running, or done.
3. Review reports
Open completed reports, explore issues grouped by WCAG criteria, and inspect each finding in detail. Reports include affected elements, expert descriptions, code references, suggested fixes, and issue management options such as dismissing non-relevant findings.
Detailed guide
Start fast or customize your scan
Run a full scan on the current page in one click, or open the customization options to choose exactly what to test.
What you can customize
- Tests: Keyboard, Screen reader, Color contrast, Zoom
- Scope: Entire page or a specific CSS selector
- Viewport: Desktop, Laptop, Tablet, Mobile, or custom dimensions
- URL input: Scan the current page or enter a URL manually
Choose a full-page scan for a broad check, or narrow the scope to a specific component when you need a more focused review.
See what is happening while the scan runs
The Progress tab gives visibility into the live status of the scan. It shows status messages, a progress bar, and the state of each selected test, helping users understand that the scan is moving forward and when results are ready to review.
No guesswork. You can follow the scan from request to completion in real time.
Turn findings into action
Once the scan is complete, reports make it easier to review and act on issues. Findings are grouped by WCAG criterion, and each issue can be opened to reveal the affected element, a detailed explanation, the relevant code, and a suggested solution.
- Report cards with scanned URL and issue count
- Grouped findings by WCAG criterion
- Detailed issue views with code snippets
- Suggested fixes with corrected examples
- Options to copy listings, copy full reports, or open the full report
- Dismiss controls for issues that are not relevant
Review special cases without blocking the workflow
A11yDetector can also flag tabindex items for review. These are presented as suggestions for consideration, not necessarily hard errors, so teams can inspect them without interrupting the scan flow.
Not every flagged item is a defect. Some findings are surfaced for review so teams can apply product context before deciding.
Tips for better scans
- Use a quick scan when you want an immediate overview of the current page.
- Use CSS selector scope when you want to inspect a specific module or section.
- Change the viewport to test responsive behavior across device sizes.
- Dismiss issues only when they are intentionally out of scope or not applicable.
- Review tabindex suggestions carefully, since they may reflect intentional design choices.
Need the full guide?
Prefer a document you can share internally or keep for onboarding? Download the A11yDetector Mini Technical Guide.
Download mini guide