# Scan Code Accessibility Figma

> Scan generated/authored HTML for accessibility violations with axe-core (Deque) running over JSDOM — structural and semantic rules: ARIA attributes and roles, accessible names, alt text, form labels, heading order, landmarks, semantic HTML, tabindex, duplicate IDs, lang attribute, and ~50 more. Use on the CODE side of a Figma-to-code workflow: triggers 'scan this HTML for accessibility', 'run axe…

- **Type:** Skill
- **Install:** `agentstack add skill-southleft-skills-for-figma-scan-code-accessibility-figma`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [southleft](https://agentstack.voostack.com/s/southleft)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [southleft](https://github.com/southleft)
- **Source:** https://github.com/southleft/skills-for-figma/tree/main/skills/scan-code-accessibility-figma

## Install

```sh
agentstack add skill-southleft-skills-for-figma-scan-code-accessibility-figma
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# scan-code-accessibility-figma — axe-core + JSDOM scan of HTML

Run [axe-core](https://github.com/dequelabs/axe-core) (Deque's accessibility engine) against an HTML
string using JSDOM. This is the **code side** of the accessibility story: it checks the markup your
Figma-to-code workflow produced. It pairs with `lint-design-figma` (design side) to cover both ends.

**Not a `use_figma` skill.** This runs in plain Node — no Figma file, no Plugin API. axe-core owns the
rule database; this skill never invents rules.

## Skill boundaries
- **Design-side visual a11y** (contrast, focus rings, target size, color-only) → use
  `lint-design-figma`. Those rules are intentionally disabled here.
- **Per-component design scorecard** → use `audit-accessibility-figma`.
- **Design-vs-code parity** → use `check-design-parity-figma` (feed it the `codeSpec.accessibility`
  this scan can emit).
- This skill does **not** use `use_figma`, so the `figma-use` conventions do not apply.

## Why visual rules are disabled

JSDOM provides a DOM but **no layout engine and no computed visual styles** — there is nothing to
measure pixels or rendered colors against. So axe's visual rules would always be "incomplete" or
wrong. The scan disables them explicitly:

- `color-contrast` and `color-contrast-enhanced` — need rendered colors.
- `link-in-text-block` — needs surrounding text layout.
- `target-size` — needs rendered box dimensions.

Everything structural/semantic (ARIA, roles, names, labels, alt, headings, landmarks, lang, dup IDs,
tabindex, ~50 rules total) runs normally. For the visual half, run `lint-design-figma` on the design.

## Usage

1. **Install deps once** (in this skill's `scripts/` dir):
   ```bash
   cd scripts && npm install
   ```
   Installs `axe-core` and `jsdom`.
2. **Run the scan** against an HTML file or an inline string:
   ```bash
   node scan.mjs path/to/component.html
   node scan.mjs --html 'Save'
   ```
   Optional flags:
   - `--tags wcag22aa` — filter to a WCAG tag set (`wcag2a`, `wcag2aa`, `wcag21aa`, `wcag22aa`, `best-practice`). Repeatable / comma-separated.
   - `--context '#my-component'` — scope the scan to a CSS selector.
   - `--include-passing` — include counts of passing / incomplete / inapplicable rules.
   - `--map-to-codespec` — also emit a `codeSpecAccessibility` object (semantic element, role, aria-label, focusVisible, keyboard interactions, disabled/error support) ready to drop into `check-design-parity-figma`'s `codeSpec.accessibility`.
3. **Read the JSON** on stdout: violations grouped by rule with `severity` (critical/warning/info from
   axe `impact`), `wcagTags`, `helpUrl`, and up to 10 offending nodes each, plus a `summary`.

A bare HTML fragment is auto-wrapped in `……` before scanning.

## Output shape

```jsonc
{
  "engine": "axe-core", "version": "4.x", "mode": "jsdom-structural",
  "note": "JSDOM mode: structural/semantic checks only. Visual rules disabled — use lint-design-figma.",
  "categories": [ { "rule": "button-name", "severity": "critical", "count": 1, "description": "...", "wcagTags": ["wcag2a","wcag412"], "helpUrl": "...", "nodes": [ { "html": "...", "target": ["button"], "failureSummary": "..." } ] } ],
  "summary": { "critical": 1, "warning": 0, "info": 0, "total": 1 }
}
```

Severity mapping: axe `critical`/`serious` → `critical`, `moderate` → `warning`, `minor` → `info`.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [southleft](https://github.com/southleft)
- **Source:** [southleft/skills-for-figma](https://github.com/southleft/skills-for-figma)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-southleft-skills-for-figma-scan-code-accessibility-figma
- Seller: https://agentstack.voostack.com/s/southleft
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.