Local development
Check accessibility on localhost and staging pages
Check the rendered page during development, while the component and its source are still fresh in your mind.
Open your local page in Chrome
Start your project’s normal development server and open its local HTTP address in Chrome, such as http://localhost:3000. Use the browser page, rather than an editor’s embedded preview, to open the extension.
ADA Compliance Scanner’s published version accepts ordinary HTTP and HTTPS pages, including localhost addresses. Browser-internal pages and the Chrome Web Store are blocked. Results also depend on whether the extension can access the page and its frames.
Scan the state that matters
Choose Scan page after the page has loaded. Test the initial screen, then open the menu, dialog, or form state you want to inspect and scan again. Interactions can reveal content that was absent or hidden during the first check.
Review the affected HTML and the finding’s explanation. Use highlighting to connect the report to the component on the page. The scanner can identify what is rendered; it does not know your project’s component tree or source filenames.
After a code change, run a fresh scan
The extension keeps temporary scan results for the browser session. Reopening the popup may show cached results with a notice. Choose Re-scan after editing or reloading; do not treat a cached result as evidence about your latest code.
Use the same page state when comparing before and after. If your test depended on an open dialog, reopen it before rescanning. Check the related interaction with a keyboard as well.
Understand frames and permissions
The extension initially uses access to the active tab. A page can contain frames from other origins, such as a payment widget or embedded form. Inspect the coverage notice for anything that was not scanned.
The published extension offers optional broader access for frames. Grant it only if you want that coverage and understand the permission request. An unscanned frame is outside the result’s scope. Chrome’s activeTab documentation explains temporary access.
Local files are a separate case
A file:// page is different from a localhost web server. Chrome may require you to enable Allow access to file URLs in the extension’s details before it can scan a local file. Where possible, use your project’s ordinary development server so the page behaves more like the deployed version.
Check staging and production too
Local testing helps you catch issues early, but deployment can change fonts, content, authentication, and third-party widgets. Repeat the relevant scans and manual checks on staging and on the released experience.