--- name: WaveXis Accessibility version: 1.0.0 author: Mathias Paulenko Echeverz description: "Accessibility auditing with wavexis. a11y tree snapshots, axe-core audits, node traversal, CI gates for WCAG compliance." tags: [accessibility, a11y, wcag, axe-core] trigger: When the user asks about accessibility auditing with wavexis, needs a11y tree snapshots, wants axe-core audits, needs WCAG 2.2 compliance checks, or wants CI accessibility gates. --- # WaveXis Accessibility ## Description Accessibility auditing with wavexis — capture accessibility tree snapshots, inspect individual a11y nodes, traverse ancestors, run axe-core audits, map results to WCAG 2.2 criteria, and enforce CI accessibility gates. ## When to Invoke - Capturing accessibility tree snapshots of a page - Inspecting individual a11y nodes by ID - Traversing a11y node ancestors - Running axe-core accessibility audits - Mapping audit results to WCAG 2.2 criteria - Setting up CI accessibility gates - Checking WCAG compliance for a page ## Prerequisites - `pip install wavexis[cdp]` - Chrome or Edge installed - Basic familiarity with wavexis CLI (see `wavexis-cli-automation` skill) ## a11y Commands ### a11y_tree — Capture accessibility tree Capture a full accessibility tree snapshot of the current page or a specific node: ```bash wavexis a11y_tree https://example.com ``` ### a11y_tree with selector ```bash wavexis a11y_tree https://example.com --selector "main" ``` ### a11y_tree with output ```bash wavexis a11y_tree https://example.com --output a11y-tree.json ``` ### a11y_tree output format ```json { "nodes": [ { "node_id": 1, "role": "WebArea", "name": "Example Domain", "ignored": false, "child_ids": [2, 3, 4] }, { "node_id": 2, "role": "heading", "name": "Example Domain", "level": 1, "ignored": false, "child_ids": [] }, { "node_id": 3, "role": "link", "name": "More information...", "ignored": false, "child_ids": [], "focusable": true, "url": "https://www.iana.org/domains/example" } ] } ``` ### a11y_node — Inspect individual node Inspect a specific accessibility node by its node ID: ```bash wavexis a11y_node https://example.com --node-id 2 ``` ### a11y_node output ```json { "node_id": 2, "role": "heading", "name": "Example Domain", "level": 1, "ignored": false, "ignored_reasons": [], "child_ids": [], "properties": { "level": 1, "browserName": "Example Domain" } } ``` ### a11y_ancestors — Traverse ancestors Get the ancestor chain of a specific accessibility node: ```bash wavexis a11y_ancestors https://example.com --node-id 3 ``` ### a11y_ancestors output ```json { "ancestors": [ { "node_id": 1, "role": "WebArea", "name": "Example Domain" }, { "node_id": 5, "role": "paragraph", "name": "" }, { "node_id": 3, "role": "link", "name": "More information..." } ] } ``` ### a11y command options | Option | Type | Default | Description | |--------|------|---------|-------------| | `--selector` | `str` | None | CSS selector to scope the tree | | `--node-id` | `int` | None | Node ID for `a11y_node` and `a11y_ancestors` | | `--output` | `str` | stdout | Output file path | | `--format` | `str` | `json` | Output format: `json` or `text` | | `--wait-for` | `str` | None | Wait for selector before capture | | `--timeout` | `int` | `30000` | Timeout in ms | ## axe Command — axe-core Audits Run axe-core accessibility audits on a page. ### Basic axe audit ```bash wavexis axe https://example.com ``` ### axe with specific rules ```bash wavexis axe https://example.com --rules color-contrast,label,image-alt ``` ### axe with tags (rule categories) ```bash wavexis axe https://example.com --tags wcag2a,wcag2aa,wcag21aa ``` ### axe with output ```bash wavexis axe https://example.com --output axe-results.json ``` ### axe results format ```json { "passes": [ { "id": "image-alt", "impact": null, "tags": ["wcag2a", "cat.images"], "description": "Images must have alternate text", "nodes": [ { "target": ["img.logo"], "html": "\"Company" } ] } ], "violations": [ { "id": "color-contrast", "impact": "serious", "tags": ["wcag2aa", "cat.color"], "description": "Elements must have sufficient color contrast", "help": "Elements must meet minimum color contrast ratio thresholds", "nodes": [ { "target": [".text-muted"], "html": "Footer text", "failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.2:1" } ] } ], "incomplete": [ { "id": "color-contrast", "impact": "minor", "tags": ["wcag2aa"], "nodes": [] } ], "inapplicable": [ { "id": "audio-caption", "impact": null, "tags": ["wcag2a"], "nodes": [] } ] } ``` ### axe with assert (CI gate) ```bash wavexis axe https://example.com \ --tags wcag2a,wcag2aa \ --assert \ --output axe-results.json ``` Exits with code 1 if any violations are found. ### axe with impact threshold ```bash # Only fail on serious or critical violations wavexis axe https://example.com \ --impact-threshold serious \ --assert \ --output axe-results.json ``` ### axe options | Option | Type | Default | Description | |--------|------|---------|-------------| | `--rules` | `str` | all | Comma-separated rule IDs to run | | `--tags` | `str` | all | Comma-separated tags to filter rules | | `--exclude` | `str` | None | CSS selector to exclude from audit | | `--output` | `str` | stdout | Output file path | | `--format` | `str` | `json` | Output format | | `--assert` | `flag` | off | Exit 1 if violations found | | `--impact-threshold` | `str` | `minor` | Minimum impact to fail: `minor`, `moderate`, `serious`, `critical` | | `--wait-for` | `str` | None | Wait for selector before audit | | `--timeout` | `int` | `30000` | Timeout in ms | ## Interpreting a11y Tree Results ### Key fields | Field | Description | |-------|-------------| | `node_id` | Unique ID for the node in the tree | | `role` | ARIA role (e.g., `heading`, `link`, `button`) | | `name` | Accessible name of the node | | `ignored` | Whether the node is ignored by assistive tech | | `ignored_reasons` | Why the node was ignored | | `child_ids` | Child node IDs | | `level` | Heading level (for heading roles) | | `focusable` | Whether the node is focusable | | `properties` | Additional ARIA properties | ### Common roles | Role | Description | Common elements | |------|-------------|-----------------| | `WebArea` | Root of the a11y tree | `` / document | | `heading` | Heading with level | `

` - `

` | | `link` | Hyperlink | `` | | `button` | Button control | `