accessibility-design

Define accessibility behavior for UI flows and components.

7|Updated Feb 14, 2026
One-click install
npx skills add https://github.com/KentoShimizu/sw-agent-skills --skill accessibility-design-kentoshimizu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: accessibility-design
Source: https://github.com/KentoShimizu/sw-agent-skills/tree/main/skills/accessibility-design
Command: npx skills add https://github.com/KentoShimizu/sw-agent-skills --skill accessibility-design-kentoshimizu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

Accessibility-first design workflow for specifying semantics, keyboard/focus behavior, readability, and assistive-technology expectations. Use when UI accessibility behavior must be defined before implementation or design sign-off; do not use for backend data modeling or deployment pipeline decisions.

Core Features & Use Cases

  • Defines semantic roles, labels, headings, and landmark expectations for UI components.
  • Specifies keyboard navigation, focus order, visibility rules, and assistive-technology announcements.
  • Use Case: For a new dashboard, define accessibility requirements before visual design and development to ensure compliant product releases.

Quick Start

Document the accessibility requirements for a chosen flow or component using the provided templates.

Frequently Asked Questions about accessibility-design

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

FAQPage Schema
How do I define keyboard navigation and focus order for UI components?

To define keyboard navigation and focus order for UI components, you specify explicit focus visibility rules and key interactions using provided accessibility templates to ensure consistent, testable implementation.

What are semantic roles and landmarks in UI accessibility design?

Semantic roles and landmarks in UI accessibility design are structural elements that define regions and content hierarchy, allowing assistive technologies to navigate and announce UI flows accurately to users.

When do I need to document assistive-technology announcements for a project?

You need to document assistive-technology announcements when defining UI accessibility behavior before design sign-off or development, ensuring screen-reader compatibility and testability through manual and automated checks.

Can I use this approach to define accessibility requirements for a new dashboard?

Yes, you can use this approach to define accessibility requirements for a new dashboard, establishing semantic expectations, contrast rules, and keyboard navigation before visual design and development to ensure compliant releases.

What is the best way to ensure UI accessibility behavior is testable across devices?

The best way to ensure UI accessibility behavior is testable across devices is to document explicit semantics, keyboard focus rules, and assistive-technology expectations in templates that support manual and automated checks.

Should I use UI accessibility behavior templates for backend data modeling?

No, you should not use UI accessibility behavior templates for backend data modeling or deployment pipeline decisions; they are specifically designed for front-end UI flows, semantics, and assistive-technology compatibility.