> For the complete documentation index, see [llms.txt](https://chaoslabz.gitbook.io/viewgraph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://chaoslabz.gitbook.io/viewgraph/tutorials/accessibility-audit.md).

# Run an Accessibility Audit

Find and fix WCAG accessibility violations automatically.

**Watch the walkthrough** - Accessibility Audit with ViewGraph:

{% embed url="<https://www.youtube.com/watch?v=ybYn-71Iut8>" %}

## Prerequisites

* ViewGraph extension installed and connected
* A page captured (click ViewGraph icon, then Send to Agent)

## Step 1: Run the audit

Tell your agent:

```
@vg-audit
```

Or the longer version: "Run an accessibility audit on the latest capture."

The agent calls `audit_accessibility` which runs ViewGraph's built-in rules plus axe-core (100+ WCAG rules).

## Step 2: Review the findings

The agent reports issues grouped by severity:

| Severity | Example issues                                                                           |
| -------- | ---------------------------------------------------------------------------------------- |
| Error    | Missing alt text on images, buttons without accessible names, form inputs without labels |
| Warning  | Insufficient color contrast, empty aria-label attributes, missing form validation        |

Each issue includes the element's selector, the WCAG rule violated, and a suggested fix.

## Step 3: Auto-fix

Tell your agent:

```
@vg-a11y
```

This runs the deep audit AND automatically fixes error-level issues:

* Adds `alt` text to images based on context
* Adds `aria-label` to buttons and inputs
* Adds `<label>` elements to form fields
* Adjusts colors to meet WCAG AA contrast ratios (4.5:1)

Warning-level issues are listed but not auto-fixed - they need human judgment.

## Step 4: Verify

Capture the page again and re-run the audit:

```
Capture this page and run another accessibility audit
```

The agent compares before and after: "Fixed 4 issues, 0 new issues introduced."

## What gets checked

ViewGraph's built-in rules:

* `button-no-name` - buttons without text or aria-label
* `missing-alt` - images without alt attributes
* `missing-form-label` - inputs without associated labels
* `insufficient-contrast` - text that fails WCAG AA/AAA contrast
* `form-validation-error` - invalid form states

Plus axe-core's 100+ rules when available in the capture (covers landmarks, heading hierarchy, ARIA attribute validity, focus management, and more).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://chaoslabz.gitbook.io/viewgraph/tutorials/accessibility-audit.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.