scan-code-accessibility-figma — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited scan-code-accessibility-figma (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Run 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.
lint-design-figma. Those rules are intentionally disabled here.
audit-accessibility-figma.check-design-parity-figma (feed it the codeSpec.accessibilitythis scan can emit).
use_figma, so the figma-use conventions do not apply.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.
scripts/ dir): cd scripts && npm installInstalls axe-core and jsdom.
node scan.mjs path/to/component.html
node scan.mjs --html '<button>Save</button>'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.severity (critical/warning/info fromaxe impact), wcagTags, helpUrl, and up to 10 offending nodes each, plus a summary.
A bare HTML fragment is auto-wrapped in <!DOCTYPE html><html lang="en">…<body>… before scanning.
{
"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.
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.