見出し、例、コード、表、リンク、参照画像を含む原文を表示しています。
audit-accessibility-figma — per-component a11y scorecard
Run a deep accessibility audit on a single component or component set and get a weighted 0–100 scorecard with prioritized fixes. Where lint-design-figma sweeps a whole tree for many rule violations, this skill goes deep on one component: it understands variant axes, classifies the component as interactive vs presentational, and scores each a11y dimension accordingly.
All via use_figma, on any plan — it inspects the real variant tree, fills, strokes, effects, and the component description.
Skill boundaries
- `use_figma` rules — load the official `figma-use` skill first; it is the full Figma Plugin API reference. Essentials these scripts rely on: plain JS with top-level
await+return(no IIFE, nofigma.closePlugin();console.logis not returned), inputs inlined asconstat the top of each script, colors in 0–1 range, load fonts before any text op,await figma.getNodeByIdAsync(...), and atomic errors (a failed script applies nothing — read the error, fix, retry). - Tree-wide WCAG + design-system lint → use
lint-design-figma. - CODE-side a11y (axe-core over HTML) → use
scan-code-accessibility-figma. - Design-vs-code drift → use
check-design-parity-figma.
Workflow
- Target a component. Set
NODE_IDto a COMPONENT_SET, COMPONENT, or INSTANCE id (the script
walks INSTANCE → main component → parent set automatically). Leave it null to audit the current single selection.
- Set the tap-target minimum.
TARGET_SIZEdefaults to 24 (WCAG 2.5.8 minimum); pass 44 or 48
for stricter mobile targets.
- Run `scripts/audit-accessibility.js` via
use_figma
(skillNames: "audit-accessibility-figma").
- Read the scorecard.
overallScoreis a classification-weighted blend of the six category
scores. See references/audit-categories.md for each category, its weight, and how to raise it.
- Work the recommendations.
recommendations[]is already sorted bypriority
(high/medium/low) with the WCAG SC named. Fix, then re-run to confirm the score moved.
Key rules
- Interactive vs presentational is auto-detected from the component name and variant axes. It
changes which categories are scored and their weights — a badge is not penalized for lacking a focus state; a button is.
- Colors are 0–1 floats. Contrast uses sRGB luminance; color-blind simulation uses
Brettel/Viénot dichromat matrices.
- Coverage means interaction states for interactive components, and variant-axis completeness
(actual variants ÷ expected combinations) for presentational ones.
- The audit is read-only — apply fixes with
manage-variables-figma/figma-use, then re-audit.
