No Result Found
Connect and get help from 7,000+ developers on our Discord community. Ask the CommunityAsk the Community

Fix accessibility violations

Scan your application for WCAG violations and apply code fixes directly from your IDE.

Test Companion scans your local development server or any accessible URL, identifies accessibility violations in the rendered DOM, and generates code fixes. You can fix all issues at once or select specific categories. The fixes modify your source code to add missing attributes, correct contrast ratios, and resolve structural problems.

Prerequisites

  • VS Code with the Test Companion extension installed.
  • Access to the source code for the project you want to fix.

Initiate an accessibility scan

  1. Open the Test Companion panel in VS Code.
  2. In the chat box, provide context using one or more of these methods:
    • Prompt: Describe what you want to scan or paste the URL directly into the chat.
    • Attach a file: Click the + (Add Files & Images) icon to attach a PRD, spec, or screenshot.
    • Add workspace context: Type @ to reference specific files, folders, git commits, or terminal output.

    Provide AI with context including URLs, files, and workspace references before starting a scan

  3. Press Enter.

If your local development server is not running, Test Companion detects this and attempts to start it automatically (for example, by running npm run dev) before launching the browser.

Review detected violations

After the scan completes, Test Companion generates a summary report categorized by severity: Critical, Serious, Moderate, and Minor.

Accessibility scan results showing identified violations grouped by severity

The report highlights specific violations such as:

  • HTML structure: Missing lang attributes on the <html> tag.
  • Media: Images missing alt text.
  • Forms: Input fields lacking associated labels.
  • Visuals: Elements falling below minimum color contrast ratios.

You can view the specific file paths and code lines associated with each issue in the detailed dropdown.

Apply fixes

Choose to fix all identified issues or select specific categories to address.

  1. In the chat, Test Companion presents remediation options:
    • Fix all issues: Apply patches for every violation found.
    • Fix only Critical issues: Apply patches for missing alt text on images and missing labels on form inputs.
    • Fix only Serious issues: Apply patches for color contrast violations and missing lang attributes.
    • Fix Critical + Serious issues: Apply patches for both Critical and Serious categories.
    • Choose specific issues: Select individual violations to fix.

    Select a remediation strategy from the fix options presented in the chat

  2. Test Companion analyzes your codebase and generates the necessary code changes.

Test Companion modifies code to preserve existing logic while adding accessibility attributes. Two common examples:

Missing alt text (React/JSX):

Before:

<img src={product.image} />

After:

<img src={product.image} alt={product.name} />

Color contrast (CSS):

Before:

.price-tag {
  color: #999; /* Contrast ratio 2.1:1 (Fail) */
}

After:

.price-tag {
  color: #767676; /* Contrast ratio 4.5:1 (Pass) */
}

Review the proposed code changes in the editor diff view before accepting them.

Verify fixes

After applying changes, verify that the violations are resolved.

  1. Test Companion automatically triggers a re-scan of the updated application.
  2. Review the Verification Results summary.
  3. Confirm that the status for targeted issues is marked as Resolved.

You can also manually inspect visual changes (such as contrast updates) in the browser instance launched by Test Companion.

Example prompts

Full scan:

Scan localhost:3000 for all accessibility violations. Fix everything that is Critical or Serious.

Targeted scan:

Check the signup form at localhost:3000/register for accessibility issues.
Focus on form labels, error messages, and keyboard navigation.

Post-fix verification:

Re-scan localhost:3000/checkout. I applied your previous fixes and want to confirm
all issues are resolved.

Next steps

  • Prompt guide: Learn how to write prompts that produce the best results for accessibility scans.
  • Configure AI settings: Configure auto-approve to let Test Companion apply fixes automatically.
  • Fix failed tests: Diagnose and fix test failures from your CI/CD builds.

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback!

Talk to an Expert
Download Copy Check Circle