mcpField
A
audit-accessibility-figma

audit-accessibility-figma

github.com/southleftDesign & UI2074 installsUpdated 21w ago
Repository

About audit-accessibility-figma

A Figma skill for auditing one component or component set, producing a weighted accessibility scorecard and prioritized WCAG fixes. It distinguishes interactive from presentational components and adjusts scoring accordingly.

Key features

  1. 01Weighted 0–100 accessibility score
  2. 02Interactive/presentational classification
  3. 03Variant-aware coverage scoring
  4. 04Contrast and color-vision checks
  5. 05Prioritized WCAG recommendations

Use cases

  1. 01Review a button’s focus and interaction states
  2. 02Check a badge without penalizing absent focus states
  3. 03Set stricter mobile tap-target thresholds

MCP support

Runs its audit through `use_figma` and Figma’s Plugin API. It is read-only; fixes are applied separately.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/southleft/skills-for-figma --skill audit-accessibility-figma

After installing, type/audit-accessibility-figmain Claude Code to confirm it loaded.

Bundled filesreferences/audit-categories.mdscripts/audit-accessibility.js

Details

From the project README

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, no figma.closePlugin(); console.log is not returned), inputs inlined as const at 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

  1. Target a component. Set NODE_ID to 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.
  2. Set the tap-target minimum. TARGET_SIZE defaults to 24 (WCAG 2.5.8 minimum); pass 44 or 48 for stricter mobile targets.
  3. Run scripts/audit-accessibility.js via use_figma (skillNames: "audit-accessibility-figma").
  4. Read the scorecard. overallScore is a classification-weighted blend of the six category scores. See references/audit-categories.md for each category, its weight, and how to raise it.
  5. Work the recommendations. recommendations[] is already sorted by priority (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.

Comments

Markdown supported