Skip to main content
Glama
southleft

figma-console-mcp

by southleft

figma_scan_code_accessibility

Scan HTML code for accessibility violations using axe-core. Detects ARIA, labels, alt text, heading order, and semantic issues.

Instructions

Scan HTML code for accessibility violations using axe-core (Deque). Runs structural/semantic checks via JSDOM: ARIA attributes, roles, labels, alt text, form labels, heading order, landmarks, semantic HTML, tabindex, duplicate IDs, lang attribute, and ~50 more rules. Visual checks (color contrast, focus visibility) are disabled in this mode — use figma_lint_design for visual a11y on the design side. Also surfaces a WCAG 1.4.12 (Text Spacing) / 1.4.4 (Resize Text) advisory when typography is locked to fixed px units — the code side is where text-spacing override support is actually verified (a sub-1.5 line height in a design is not itself a failure). Together, these two tools provide full-spectrum accessibility coverage across design and code. Pass component HTML directly or use with figma_check_design_parity for design-to-code a11y comparison. No Figma connection required — this is a standalone code analysis tool.

Input Schema

NameRequiredDescriptionDefault
htmlYesHTML string to scan. Can be a full document or a component fragment (will be wrapped in a valid document).
tagsNoWCAG tag filter. Examples: ['wcag2a'], ['wcag2aa'], ['wcag21aa'], ['wcag22aa'], ['best-practice']. Defaults to all structural rules if omitted.
contextNoCSS selector to scope the scan to a specific element (e.g., '#my-component', '.card'). Scans entire document if omitted.
mapToCodeSpecNoIf true, includes a codeSpec.accessibility object auto-extracted from the HTML + scan results. Pass this directly into figma_check_design_parity's codeSpec.accessibility field for automated design-to-code a11y parity checking.
includePassingRulesNoIf true, includes count of passing and incomplete rules in the response (default: false).

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observedv1.46.0

TDQS

A4.4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the burden and discharges most of it: discloses the engine (axe-core/JSDOM), that visual rules are disabled in this mode, that a WCAG 1.4.12/1.4.4 advisory is emitted for fixed px typography, and that it is standalone. It stops short of describing error/failure behavior or performance limits on large documents.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness3/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Front-loaded and purposeful for the first several sentences, but the closing line ('Together, these two tools provide full-spectrum accessibility coverage') and the repeated explanation of why code-side text spacing matters are padding. Roughly two sentences could be cut without losing agent-relevant information.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a standalone 5-parameter analysis tool with no output schema, the description covers purpose, scope, alternatives, and the shape of results (advisories, passing-rule counts via schema). Only failure modes and output structure detail are missing, which is acceptable given the richness elsewhere.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so baseline is 3. The description adds integration meaning beyond the schema — passing component HTML directly and using results with figma_check_design_parity for design-to-code comparison — which contextualizes why the mapToCodeSpec option exists.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb and resource: scan HTML code for accessibility violations via axe-core/JSDOM, and enumerates exactly which rule families are checked (ARIA, roles, labels, alt text, heading order, landmarks, etc.). It also names the sibling it is not (figma_lint_design for visual a11y), so an agent can distinguish it from the design-side audit tools without opening the schema.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Explicitly carves out when NOT to use it (visual checks like color contrast and focus visibility are disabled — use figma_lint_design instead) and when to use it (code-side text-spacing verification, pairing with figma_check_design_parity). It also states the prerequisite profile: no Figma connection needed, HTML passed directly.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Deploy Server

Other Tools