> ## Documentation Index
> Fetch the complete documentation index at: https://docs.testwithlabrador.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Labrador Chrome Extension: AI Accessibility Remediation

> Capture live page HTML with the Labrador Chrome extension and generate AI-powered accessibility remediation guidance for your issues using Claude Opus 5.

The Labrador Chrome extension bridges the gap between your audit in Labrador and the live page you are testing. It supports two core workflows:

* **axe automated scanning**, run an axe scan against the page you are testing and let Labrador map each finding to the correct WCAG criterion as an issue.
* **AI remediation guidance**, click a specific element on the page to capture its HTML and generate developer-ready fix suggestions from Claude Opus 5.

Both workflows depend on the URL set on the Page, Component, or User Journey you are testing. Set a valid URL on every item in your project wherever you can, the extension uses it to open the exact page for scans and captures, and other features like AI remediation depend on it too.

<Note>
  The AI remediation feature is currently in **beta**. Before using the extension on a page, component, or user journey, make sure a valid URL is set on that item in your Labrador project.
</Note>

## Installing the Extension

The extension is available from the Chrome Web Store and takes less than a minute to install.

<Steps>
  <Step title="Download Labrador Accessibility Assistant">
    Download [Labrador Accessibility Assistant](https://chromewebstore.google.com/detail/labrador-accessibility-as/lndpalafhngglhpdjejhelccebmngoho) to add the extension to Chrome.
  </Step>

  <Step title="Click Add to Chrome">
    On the extension listing page, click the **Add to Chrome** button.
  </Step>

  <Step title="Confirm the installation">
    A browser dialog will ask you to confirm. Click **Add extension** to proceed. Chrome will download and install the extension automatically.
  </Step>

  <Step title="Confirm the Labrador icon appears in your toolbar">
    Once installed, the Labrador icon will appear in your Chrome toolbar. If it is hidden, click the puzzle-piece Extensions icon and pin Labrador for easy access.
  </Step>
</Steps>

## Running an axe Scan

The extension can run an [axe-core](https://github.com/dequelabs/axe-core) automated scan against the page you are testing and pull the findings directly into your Labrador project. Each result is mapped to the corresponding WCAG criterion on the item you are testing, so you never have to file findings by hand.

<Steps>
  <Step title="Open the Criteria Overview for the item you are testing">
    In your Labrador project, open the Page, Component, or User Journey you want to scan and go to its **Criteria Overview**.
  </Step>

  <Step title="Trigger an axe scan">
    Click the **Run axe Scan** action on the Criteria Overview. Labrador will open the URL set on the item and the extension will run axe against the loaded page.
  </Step>

  <Step title="Review findings before importing">
    When the scan completes, the extension shows a list of findings for you to review before anything is written to your project. Each finding shows the rule that failed, the affected element, and the WCAG criterion it maps to.
  </Step>

  <Step title="Choose whether to include Best Practice findings">
    axe returns both WCAG violations and Best Practice recommendations. Best Practice findings are shown alongside violations but are left unchecked by default, tick the ones you want to include, or leave them unchecked to import only the WCAG-mapped failures.
  </Step>

  <Step title="Add the selected findings to your test">
    Confirm your selection to import the findings. Each one is automatically added as an issue under the correct WCAG criterion on the item you are testing, with the axe rule and affected element pre-filled.
  </Step>
</Steps>

<Tip>
  Automated scanning catches roughly 30 to 50 percent of accessibility issues on a typical page. Use the axe scan as a fast first pass, then work through the remaining criteria manually and use AI Remediation Recommendations to help draft fixes for anything the scan surfaces.
</Tip>

## Generating a Remediation Recommendation

Follow these steps each time you want to generate AI-assisted guidance for a specific issue.

<Steps>
  <Step title="Create an issue with a clear description">
    In your Labrador project, open the failing criterion on the relevant page or component. Under **Add New Issue**, write a detailed description of the accessibility problem, be specific about what is wrong and who is affected. The quality of your description directly influences the quality of the AI output.
  </Step>

  <Step title="Click Generate Recommendation">
    Below the **Remediation Help** field, click **Generate Recommendation**. Labrador will prepare to capture HTML from the live page.
  </Step>

  <Step title="Navigate to the target page">
    A prompt will direct you to navigate to the page being tested. The extension uses the URL you set on the Page/Component in Labrador to guide you to the correct location.
  </Step>

  <Step title="Click the element causing the issue">
    On the live page, click the specific element that is causing the accessibility problem. If needed, you can first click to select the surrounding context (such as a section or form) and then click the problem element itself.
  </Step>

  <Step title="The extension captures the element's HTML">
    The Labrador extension captures the selected element's HTML and sends it back to Labrador automatically. You will be returned to the Labrador interface.
  </Step>

  <Step title="Labrador generates the recommendation">
    Labrador processes your issue description, the captured HTML, and the WCAG criterion to generate a suggested fix. The recommendation appears under **Remediation Help** in the issue form within a few seconds.
  </Step>

  <Step title="Review and edit before using in your report">
    Read the AI-generated guidance carefully. Edit, expand, or correct it as needed before saving the issue or including the recommendation in an exported report.
  </Step>
</Steps>

## What the AI Generates

The recommendation Claude Opus 5 produces is designed to give developers the context they need to fix the issue without requiring additional back-and-forth.

<CardGroup cols={2}>
  <Card title="Root Cause Identification" icon="magnifying-glass">
    The AI analyses the captured HTML and identifies the specific part of the code responsible for the accessibility failure, such as a missing label, incorrect ARIA role, or skipped heading level.
  </Card>

  <Card title="Code-Level Fix Suggestions" icon="code">
    The recommendation includes concrete, actionable changes, for example, adding `aria-label="Search"` to an unlabelled button, or correcting a heading hierarchy by changing an `<h4>` to an `<h2>`.
  </Card>

  <Card title="WCAG Context" icon="book-open">
    The AI explains why the suggested change addresses the specific WCAG criterion that failed, giving developers the reasoning they need to understand the requirement and apply it consistently elsewhere in the codebase.
  </Card>

  <Card title="Scoped to Your Element" icon="crosshairs">
    Because the recommendation is generated from the actual HTML you captured rather than a generic description, the guidance is specific to the component you are testing rather than a boilerplate explanation of the rule.
  </Card>
</CardGroup>

<Tip>
  A clear, specific issue description consistently produces better AI recommendations. Before clicking **Generate Recommendation**, describe what the problem is, where it occurs on the page, and which group of users is affected, for example: "The search button has no accessible name. Screen reader users cannot determine its purpose when navigating by button." The more context you provide, the more targeted the output will be.
</Tip>

## Reviewing AI Output

Always review AI-generated recommendations before sharing them with developers or including them in exported reports.

Claude Opus 5 is capable of producing high-quality, technically accurate remediation guidance in most cases, but it can occasionally misidentify the root cause, suggest a fix that does not account for your specific codebase structure, or produce guidance that needs adaptation to fit your project's conventions. You are responsible for the accuracy of the remediation guidance that appears in your reports.

<Warning>
  AI-generated content is a starting point, not a final answer. Treat each recommendation as a first draft: verify that the suggested code change actually resolves the issue, check that it does not introduce new problems, and adjust the wording to match your organization's reporting style before sending it to a development team.
</Warning>

## Requirements

Before using the Chrome extension and AI remediation feature, confirm that all of the following conditions are met:

<CardGroup cols={2}>
  <Card title="Google Chrome" icon="chrome">
    The Labrador extension is only available for Google Chrome. It is not currently available for other Chromium-based browsers or Firefox.
  </Card>

  <Card title="Extension Installed" icon="puzzle-piece">
    The Labrador AI Accessibility Assistant extension must be installed and active in Chrome before you click Generate Recommendation.
  </Card>

  <Card title="Valid URL on the Page/Component/User Journey" icon="link">
    The Page, Component, or User Journey record in your Labrador project must have a valid URL set. Without it, the extension cannot navigate to the correct page for axe scans or HTML capture. Setting a URL on every item is the single most important step for getting full value from the extension.
  </Card>

  <Card title="Filled-In Issue Description" icon="pen-to-square">
    You must write an issue description before generating a recommendation. The AI uses your description as context for the guidance it produces.
  </Card>
</CardGroup>

<Info>
  The page you are testing must be open and loaded in your browser. The extension captures HTML from your active browser session, so it can access any page you have already loaded, including pages behind authentication, as long as you are currently signed in. It cannot access pages that you have not loaded or that require authentication you have not completed in that browser session.
</Info>