ScreenshotNeo

BlogHow-to

How to Find and Fix Accessibility Issues with Evinced and BrowserStack

Use Evinced for browser debugging or integrate Evinced and BrowserStack scans into UI tests. Learn how to expose issues, make targeted fixes, and verify them.

By the ScreenshotNeo team4 October 20268 min read

To find and fix accessibility issues, first get the page into the state you want to inspect, run an accessibility scan, examine each finding in context, make a targeted change in the source, and scan again. Use Evinced Debugger for immediate inspection in Chrome DevTools; use Evinced web SDKs or BrowserStack Accessibility Testing when you want checks in a repeatable UI-test workflow. Automated scans help locate issues, but they do not establish that a page is fully accessible or legally conformant.

Choose the right workflow

The choice is mainly about where you want to find issues and how often you want to repeat the check.

Approach Best fit What it provides
Evinced Debugger Investigating a page while developing A Chrome DevTools extension that surfaces issues, severity, associated WCAG success criteria and accessibility best-practice guidance. Its guide also describes quick fixes and issue filters. Evinced product documentation
Evinced web SDK Adding scans to existing UI tests Single-run scanning of the current page state or continuous scanning as a test changes the DOM, with JSON or HTML reports. Documented frameworks include Cypress, Selenium, WebdriverIO, Playwright and TestCafe. Evinced SDK documentation
BrowserStack Accessibility Testing Scanning supported functional tests and reviewing build or test-case results Accessibility scans associated with test runs and reporting in an Accessibility Dashboard. Automated tests are documented as a paid-plan feature, and framework and browser support varies. BrowserStack automated testing documentation

Check each vendor’s current framework, browser, SDK-version, installation and account requirements before choosing or copying setup commands. Evinced says its Playwright SDK has been tested with cloud testing services including BrowserStack and is expected to work there; treat that as vendor guidance, not a guarantee for every combination. Evinced documentation

Find issues in a page with Evinced Debugger

  1. Install and enable Evinced Debugger according to its current product guide. Open the target page in Chrome and open Chrome DevTools.
  2. Reproduce the state you want to assess. Open the menu, submit or populate the form, show the dialog, or activate the relevant control. A scan only sees the rendered state available to it.
  3. Run the inspection and review findings. Use severity filters to prioritize, then open an issue’s details and follow its guidance or associated criteria to locate the relevant element.
  4. Trace the finding to the source that controls it: semantic markup, accessible name, state, keyboard interaction, or styling. Confirm the actual behavior before changing code.
  5. Make a focused source change. Use the extension’s guidance as a starting point; review the result in the application rather than assuming guidance automatically edits your source.
  6. Repeat the same interaction and scan again. Confirm the target issue is gone and check that the change did not break the visual layout or interaction.

Evinced’s Debugger guide describes issue details, severity filtering, WCAG success criteria and best-practice guidance. Consult the current Evinced Debugger guide for installation and usage details.

Put accessibility scans into UI tests

1. Pick the test state and scan mode

For a scan at one point in a test, use a single-run scan after navigation and interactions have produced the target state. For flows where the DOM changes through multiple steps, Evinced documents continuous scanning while the test runs. Decide whether the test should inspect one final state or observe changes throughout the flow.

Evinced’s web SDK introduction lists Cypress, Selenium, WebdriverIO, Playwright and TestCafe. Setup, API names, installation access and supported versions depend on the SDK and may change; use the current guide for your framework rather than relying on a generic command that may be stale. The SDK documentation describes JSON and HTML reports. Evinced web SDK documentation

2. Use BrowserStack when scans belong with supported functional tests

BrowserStack Accessibility Testing adds scans to supported functional test suites and reports results by build and test case in its Accessibility Dashboard. Automated tests require a paid plan according to the current documentation. Check the framework and browser matrix for your exact test configuration. BrowserStack automated tests

BrowserStack documents controls for when scans start and stop. For documented framework combinations, it also supports scanning a page section defined by a CSS selector. Selector behavior and supported combinations have limits; verify them in the current BrowserStack documentation before using scoped scans. Do not assume every framework supports multiple selectors or the same scope controls.

3. Keep the test repeatable

  • Use stable test data and deterministic navigation where possible.
  • Wait until the UI has reached the intended state before scanning; a scan taken before a dialog or menu appears cannot assess that state.
  • Make the test perform the same user actions each run, especially for dynamic controls.
  • Keep the scan scope and timing consistent so report changes reflect application changes rather than a different test state.
  • Retain the report format and run context your team needs to investigate findings. Evinced documents JSON and HTML reports; BrowserStack documents dashboard reporting for builds and test cases.

Understand a finding and make a targeted fix

A finding is a lead to investigate, not a complete diagnosis by itself. Inspect the element and its surrounding interaction. Determine whether the underlying problem concerns structure, a missing or misleading accessible name, an incorrect state, keyboard operation, or visual presentation. Then fix the cause in the source that owns the behavior.

For example, if a finding concerns a control’s name, inspect what assistive technology can identify and whether that name makes sense in context. If it concerns a dynamic control, check its state and keyboard behavior as well as its initial appearance. Avoid suppressing a finding or changing markup solely to satisfy a scan without confirming the user-facing behavior.

BrowserStack Test Companion documents scanning rendered pages, generating code fixes in source files, and rescanning to verify targeted issues. Review generated edits before keeping them, confirm you have access to the source, and inspect for visual or functional side effects. BrowserStack Test Companion documentation

Verify the fix

  1. Repeat the same route, data setup and interactions that exposed the issue.
  2. Run the same scan with the same scope and timing.
  3. Confirm the specific finding is resolved in the report or debugger.
  4. Check the changed control in the browser, including its keyboard interaction and rendered appearance where relevant.
  5. Run the related UI test again and review neighboring findings for regressions.

BrowserStack explicitly documents rescanning to verify targeted issues. The same repeatable loop is useful when fixing a finding surfaced through Evinced: reproduce, change, rescan and inspect the actual page.

Browser debugging or automated scans?

Question Debugger inspection UI-test scanning
When should I use it? When you need to inspect a page during development. When checks should recur as part of supported UI tests.
How is state reached? You interact with the page in the browser. The test navigates and performs the interaction sequence.
What reporting is documented? Issue details, severity filters and guidance. Evinced documents JSON or HTML reports; BrowserStack provides dashboard reporting for builds and test cases.
What should I verify first? Current extension requirements and Chrome setup. Exact SDK, framework, browser, account and plan support.

The approaches can complement one another: use browser inspection to investigate a specific page state, then add repeatable checks to a supported test workflow where that provides useful coverage.

Troubleshooting

Symptom Likely cause What to do
No issue appears, but a problem is still visible in another state The scan ran before the relevant menu, dialog, validation message or content was rendered. Reproduce that state before a single-run scan, or use a documented continuous-scan workflow where appropriate.
A UI test scan reports fewer issues than expected The test did not reach the same state, or its scope excluded the relevant content. Compare the test’s actions and scan timing with the manual reproduction. Check whether selector scoping is supported for that framework.
SDK setup or imports do not match a guide SDK versions and installation requirements can change, and guides may cover different frameworks. Use the current vendor guide for the selected SDK and verify its version and access requirements.
BrowserStack does not start an accessibility scan The framework or browser combination may not be supported, or automated tests may not be available under the account plan. Check the current support matrix and plan requirements, then confirm the test configuration.
A finding returns after it was fixed The change may have affected only one component instance, route or state; alternatively, the rerun may use different data or actions. Compare the exact element, route, state, scope and test data between runs. Fix the source that owns the repeated behavior.
A generated fix changes the appearance or breaks interaction The edit may not fit the component’s context or styling. Review the source diff, test the rendered page and keyboard behavior, and adjust or revert the change before rescanning.

Performance, reliability and cost

Scan cost in time depends on where and how often scans run, the test environment, and the size and behavior of the page. Keep checks focused on meaningful states and avoid duplicate scans that add no coverage. Continuous scanning can observe DOM changes over a flow, while a single-run scan focuses on a selected state; choose based on the behavior the test needs to cover.

For reliability, keep state setup deterministic, use the same scan timing and scope between runs, and check vendor compatibility for the exact SDK, browser and framework versions. Cloud-service compatibility statements are vendor guidance, not a promise for every configuration. BrowserStack’s automated accessibility tests are documented as a paid-plan feature; confirm current account requirements and pricing with the vendor. The reviewed sources do not establish a universal scan-time benchmark or a claim that automated scanning alone provides complete accessibility assurance.

Or skip the browser setup

If the task is capturing a web page screenshot rather than auditing its accessibility, ScreenshotNeo provides a website screenshot API and MCP server. Its API accepts a URL in one GET request and returns an image or PDF. For example, this cURL request saves a WebP capture of Stripe:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

Node.js:

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`ScreenshotNeo returned ${res.status}`);
await Bun.write('shot.webp', res);

See the ScreenshotNeo API documentation for parameters and response details. ScreenshotNeo removes cookie banners, popups and chat widgets before the shot; bot checks, blank pages and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card required.

FAQ

Does an accessibility scan prove a site is accessible?

No. These tools surface automated findings, but a scan does not prove complete accessibility or conformance. Investigate findings and assess the experiences and states that matter to your users.

Can I scan just one section of a page?

BrowserStack documents CSS-selector scoping for certain framework combinations, with limitations. Confirm support for your exact setup in its current documentation.

Can I use Evinced with BrowserStack?

Evinced says its Playwright SDK has been tested with cloud testing services including BrowserStack and is expected to work. Check current versions and requirements for your configuration.

Should I fix every finding in one pass?

Prioritize based on the finding’s context and severity, make focused changes, and verify each affected state. A repeatable scan helps track the specific issues addressed.