skills.rest
jens-wedin
jens-wedinCOMMUNITY
Explore all skills by this author →
GitHub

a11y-design

Annotate designs into developer-ready accessibility requirements with a reusable template.

Updated Feb 26, 2026
Search Tags:#design#accessibility#a11y#figma#contrast#handoff#annotations
One-click install
npx skills add https://github.com/jens-wedin/a11y-skill --skill a11y-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: a11y-design
Source: https://github.com/jens-wedin/a11y-skill/tree/main/a11y-design
Command: npx skills add https://github.com/jens-wedin/a11y-skill --skill a11y-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps designers ensure accessibility is addressed early in the design process by translating visual designs into structured, developer-ready a11y requirements.

Core Features & Use Cases

  • Annotate designs into clear developer requirements and generate an annotation template from references/annotation-template.md.
  • Assess designs for contrast, focus indicators, landmarks, and semantic structure to enable accessible handoffs and design-system alignment.
  • Align with Figma MCP workflows or screenshot-based reviews to produce deliverables for developers before implementation.

Quick Start

Annotate my design for accessibility by sharing a Figma link or screenshots and specify the design file and constraints.

Frequently Asked Questions about a11y-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I annotate Figma designs for accessibility handoff?▼

Annotate Figma designs for accessibility handoff by sharing your file link and specifying constraints. The skill translates visual designs into developer-ready specs covering focus order, landmarks, text alternatives, and heading hierarchy.

What accessibility requirements should I define before developer handoff?▼

Accessibility requirements to define before handoff include focus order, landmarks, text alternatives, heading hierarchy, and ARIA roles. Addressing these early ensures semantic structure and state definitions are clear for developers.

Can I use screenshots to review designs for accessibility and contrast?▼

Yes, you can use screenshots to review designs for accessibility and contrast. The skill assesses visual designs and generates structured annotation requirements without requiring direct Figma integration.

Does this skill work with Figma MCP workflows?▼

Yes, it aligns with Figma MCP workflows to produce accessibility deliverables. It maps landmarks, focus order, and ARIA guidance directly from your design files to prepare developer-ready specs.

What is the best way to document ARIA roles and focus order for developers?▼

The best way to document ARIA roles and focus order is using a structured annotation template. The skill generates a reusable template from references to map semantic structure and state definitions for developers.

Why should accessibility annotations happen before implementation?▼

Accessibility annotations should happen before implementation to move accessibility left in the design process. Translating visual designs into structured requirements early prevents costly rework and ensures design-system alignment.

Related Skills

Explore More Design & Creative Skills→
serkan-ozalserkan-ozal
7

visual-testing

Detect visual discrepancies between live pages and Figma design references.

Community
Intermediate
lord-vinayaklord-vinayak

accessibility-annotations

Generate accessibility annotations for Figma design handoff.

Community
Advanced
ilandahanilandahan
9

atomic-design

Extract Figma design tokens and scaffold atomic UI components.

Community
Advanced
AribSudiaAribSudia
2

arib-check-a11y

Audit frontend codebases for WCAG 2.1 Level AA accessibility compliance.

Community
Advanced