# Accessibility (a11y) Tools
Accessibility inspection and auditing commands.
## take-aria-snapshot
Capture an ARIA accessibility snapshot of the page or element.
```bash
browser-devtools-cli a11y take-aria-snapshot [options]
```
**Arguments:**
| Argument | Type | Required | Default | Description |
|----------|------|----------|---------|-------------|
| `--selector` | string | No | `body` | CSS selector for element to snapshot |
**Description:**
Captures a YAML-formatted accessibility tree showing:
- Page URL and title
- Semantic structure and roles
- Accessibility labels and states
- Element hierarchy
**Examples:**
```bash
# Full page ARIA snapshot
browser-devtools-cli a11y take-aria-snapshot
# Specific component
browser-devtools-cli a11y take-aria-snapshot --selector "#main-nav"
# Form accessibility
browser-devtools-cli a11y take-aria-snapshot --selector "form#login"
```
**Output:**
```yaml
- Page URL: https://example.com/
- Page Title: Example Domain
- Page/Component Snapshot:
```yaml
- heading "Example Domain" [level=1]
- paragraph: This domain is for use in illustrative examples...
- link "More information..."
```
---
## take-ax-tree-snapshot
Capture a detailed Accessibility Tree (AX Tree) snapshot with visual information.
```bash
browser-devtools-cli a11y take-ax-tree-snapshot [options]
```
**Arguments:**
| Argument | Type | Required | Default | Description |
|----------|------|----------|---------|-------------|
| `--roles` | array | No | interactive roles | Filter by roles (button, link, textbox, etc.) |
| `--include-styles` | boolean | No | `true` | Include computed CSS styles |
| `--include-runtime-visual` | boolean | No | `true` | Include bounding box, visibility info |
| `--check-occlusion` | boolean | No | `false` | Check if elements are visually occluded |
| `--only-visible` | boolean | No | `false` | Only return visible nodes |
| `--only-in-viewport` | boolean | No | `false` | Only return nodes in viewport |
| `--text-preview-max-length` | number | No | `80` | Max length of text preview |
**Role filter options:**
`button`, `link`, `textbox`, `checkbox`, `radio`, `combobox`, `switch`, `tab`, `menuitem`, `dialog`, `heading`, `listbox`, `listitem`, `option`
**Examples:**
```bash
# Full AX tree snapshot
browser-devtools-cli a11y take-ax-tree-snapshot
# Only buttons and links (JSON for parsing)
browser-devtools-cli --json a11y take-ax-tree-snapshot --roles button,link
# Visible elements only
browser-devtools-cli --json a11y take-ax-tree-snapshot --only-visible
# Check for occlusion issues
browser-devtools-cli --json a11y take-ax-tree-snapshot --check-occlusion
# Minimal output (no styles)
browser-devtools-cli a11y take-ax-tree-snapshot --include-styles false
# Form inputs only
browser-devtools-cli --json a11y take-ax-tree-snapshot --roles textbox,checkbox,radio,combobox
```
**Output (JSON):**
```json
{
"url": "https://example.com/",
"nodes": [
{
"role": "link",
"name": "More information...",
"boundingBox": { "x": 100, "y": 200, "width": 150, "height": 20 },
"visible": true,
"inViewport": true
}
]
}
```
## Accessibility Audit Example
```bash
SESSION="--session-id a11y-audit --json"
# Navigate to page
browser-devtools-cli $SESSION navigation go-to --url "https://example.com"
# Get semantic structure
browser-devtools-cli a11y take-aria-snapshot
# Check interactive elements have labels
browser-devtools-cli $SESSION a11y take-ax-tree-snapshot --roles button,link,textbox
# Check for hidden/occluded interactive elements
browser-devtools-cli $SESSION a11y take-ax-tree-snapshot --check-occlusion --only-in-viewport
# Check heading structure
browser-devtools-cli $SESSION a11y take-ax-tree-snapshot --roles heading
# Screenshot for reference
browser-devtools-cli $SESSION content take-screenshot --name "a11y-audit"
```
## Common Accessibility Checks
### Form Accessibility
```bash
# Check all form inputs have labels
browser-devtools-cli --json a11y take-ax-tree-snapshot --roles textbox,checkbox,radio,combobox
```
Verify:
- All inputs have `name` field populated (proper labels)
- Correct roles assigned
- Appropriate states (disabled, required)
### Navigation Accessibility
```bash
# Check navigation links
browser-devtools-cli --json a11y take-ax-tree-snapshot --roles link,button,menuitem
```
Verify:
- All links have descriptive text
- Buttons are properly labeled
- Menu items are accessible
### Heading Structure
```bash
# Check heading hierarchy
browser-devtools-cli --json a11y take-ax-tree-snapshot --roles heading
```
Verify:
- Proper heading hierarchy (h1 → h2 → h3)
- No skipped levels
- Meaningful heading text
