Agent skill

A11y Guide

by mobazha in mobazha/mobazha-unified

Accessibility guide for Mobazha following WCAG 2.1 AA standards including color contrast, reduced motion, ARIA patterns, keyboard navigation, focus management, and screen reader testing.

MPL-2.0Auto-check passedFrontend & Design

Install A11y Guide

skills CLI
$ npx skills add mobazha/mobazha-unified --skill a11y-guide -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install mobazha/mobazha-unified a11y-guide --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/a11y-guide .claude/skills/a11y-guide && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
a11y-guide
GitHub stars
165
Token cost
~1.4k tokens
SKILL.md length
143 words
Files
1
Skills in repo
29
Repo updated
First seen
Licence
MPL-2.0

At a glance

Accessibility guide for Mobazha following WCAG 2.1 AA standards including color contrast, reduced motion, ARIA patterns, keyboard navigation, focus management, and screen reader testing.

  • Building accessible components
  • SKILL.md covers 一、色彩对比度, 二、媒体查询适配, 三、ARIA 模式速查 and 四、键盘导航, plus 3 more sections
  • Calls pnpm
  • Reviewing accessibility

What it does

A11y Guide is an agent skill from mobazha/mobazha-unified. Accessibility guide for Mobazha following WCAG 2.1 AA standards including color contrast, reduced motion, ARIA patterns, keyboard navigation, focus management, and screen reader testing. Use when building accessible components or reviewing accessibility, "无障碍", "可访问性", "a11y", "ARIA", "键盘导航", "屏幕阅读器", "对比度".

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Accessibility. The repository describes itself as: Open-source commerce frontend for storefronts, marketplaces, checkout, and seller management. The licence is MPL-2.0.

When your agent uses it

  • Building accessible components
  • Reviewing accessibility

Example prompts

  • “/a11y-guide”

What it can do on your machine

Read from SKILL.md and the folder at commit 156c699. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • pnpm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • webaim.org

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

A11y Guide loads about 1.4k tokens when it runs. Until then it costs about 80 tokens; SKILL.md has 143 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~80
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from mobazha/mobazha-unified at commit 156c699, republished under its MPL-2.0 licence (© mobazha). 143 words, ~1,379 tokens.

Download SKILL.mdSave it as .claude/skills/a11y-guide/SKILL.md (or your agent's skills folder).
name
a11y-guide
description
Accessibility guide for Mobazha following WCAG 2.1 AA standards including color contrast, reduced motion, ARIA patterns, keyboard navigation, focus management, and screen reader testing. Use when building accessible components or reviewing accessibility, "无障碍", "可访问性", "a11y", "ARIA", "键盘导航", "屏幕阅读器", "对比度".

无障碍设计规范

Mobazha 项目的 WCAG 2.1 AA 无障碍标准和最佳实践。

一、色彩对比度

WCAG AA 最低要求
内容类型最低对比度说明
正文(< 18px)4.5:1正文、描述、标签
大文字(>= 18px bold 或 >= 24px)3:1标题、大号文字
UI 控件和图形3:1按钮边框、图标、输入框边框
装饰性元素无要求纯装饰、已禁用控件
项目注意事项
tsx
// ✅ 好:muted-foreground 在大多数主题下对比度足够
<p className="text-muted-foreground">辅助文字</p>

// ⚠️ 注意:透明度过低可能不满足对比度
<p className="text-muted-foreground/50">这可能对比度不够</p>
// → 改为 text-muted-foreground/70 或测试实际对比度

// ❌ 差:浅色背景上的浅色文字
<p className="text-primary/30">这几乎看不清</p>
验证工具
  • 浏览器 DevTools → Accessibility 面板 → 对比度比率
  • WebAIM Contrast Checker
  • axe DevTools 扩展(自动检测)

二、媒体查询适配

prefers-reduced-motion(必须支持)
tsx
// Tailwind 方式
<div className="animate-fade-in motion-reduce:animate-none">
<button className="transition-all duration-200 motion-reduce:transition-none">

// CSS 全局降级(globals.css 中添加)
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

例外:加载指示器(spinner)不需要降级,因为是功能性动画。

prefers-color-scheme

项目已通过主题系统的 system 模式支持,无需额外处理。

三、ARIA 模式速查

Dialog(已由 Radix 处理)
tsx
// Radix Dialog 自动处理:
// - role="dialog"
// - aria-modal="true"
// - 焦点陷阱
// - Escape 关闭
// 需要手动确保:
<DialogTitle>标题必须存在</DialogTitle>
<DialogDescription className="sr-only">
  无视觉描述时用 sr-only 隐藏
</DialogDescription>
Tabs
tsx
// Radix Tabs 自动处理 role="tablist" / "tab" / "tabpanel"
// 键盘:Arrow 切换、Enter/Space 选择
Alert / Toast
tsx
// 重要通知
<div role="alert" aria-live="assertive">
  操作失败:网络错误
</div>

// 非紧急通知
<div role="status" aria-live="polite">
  已添加到购物车
</div>
图标按钮
tsx
// ✅ 必须有 aria-label
<button aria-label="关闭" onClick={onClose}>
  <X className="w-4 h-4" />
</button>

// ✅ 或使用 sr-only
<button onClick={onClose}>
  <X className="w-4 h-4" />
  <span className="sr-only">关闭</span>
</button>
图片
tsx
// 有信息量的图片
<img alt="红色运动鞋侧面图" src="..." />

// 纯装饰图片
<img alt="" role="presentation" src="..." />

四、键盘导航

基本要求
  • 所有交互元素必须可通过 Tab 聚焦
  • 可见的焦点指示器:
tsx
<button className="focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2">
<input className="focus:ring-2 focus:ring-primary focus:border-primary">
  • 自定义可点击元素(非 <button>/<a>)必须添加 role 和 tabIndex:
tsx
<div
  role="button"
  tabIndex={0}
  onClick={handleClick}
  onKeyDown={(e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      handleClick();
    }
  }}
>
焦点管理
场景操作
Dialog 打开焦点移到 Dialog 内第一个可聚焦元素(Radix 自动处理)
Dialog 关闭焦点返回触发元素(Radix 自动处理)
路由切换焦点移到页面主内容区域(需手动处理)
元素删除焦点移到前一个或后一个元素
Toast 出现不抢夺焦点(aria-live 通知即可)
SPA 路由切换焦点管理
tsx
// 在 layout 或路由变化时
useEffect(() => {
  // 将焦点移到主内容区域
  const main = document.getElementById('main-content');
  if (main) {
    main.focus({ preventScroll: true });
  }
}, [pathname]);

// 主内容区域
<main id="main-content" tabIndex={-1} className="outline-none">
  {children}
</main>;
跳转链接(Skip Navigation)
tsx
// 放在 <body> 最前面
<a
  href="#main-content"
  className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[9999] focus:bg-background focus:px-4 focus:py-2 focus:rounded-md focus:shadow-lg"
>
  跳转到主内容
</a>

五、屏幕阅读器

隐藏视觉元素
tsx
// 仅屏幕阅读器可见
<span className="sr-only">购物车中有 3 件商品</span>

// 对屏幕阅读器隐藏(纯装饰)
<div aria-hidden="true">🎉</div>
动态内容更新
tsx
// 购物车数量变化
<span aria-live="polite" className="sr-only">
  购物车已更新,当前 {count} 件商品
</span>

// 加载状态
<div aria-busy={isLoading} aria-live="polite">
  {isLoading ? '加载中...' : content}
</div>

六、测试

手动测试清单
  • 仅用键盘操作完整流程(Tab/Shift+Tab/Enter/Escape/Arrow)
  • 所有交互元素有可见的焦点指示器
  • 所有图标按钮有文本描述(aria-label 或 sr-only)
  • 所有图片有 alt 文本(装饰图片 alt="")
  • Dialog 打开/关闭焦点管理正确
  • 在系统设置中开启减少动效,确认动画降级
  • 文字放大到 200%,布局不破碎
自动化测试(推荐集成)
typescript
// Playwright a11y 测试
import AxeBuilder from '@axe-core/playwright';

test('首页无障碍检查', async ({ page }) => {
  await page.goto('/');

  const results = await new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa']).analyze();

  expect(results.violations).toEqual([]);
});
bash
# 安装
pnpm --filter @mobazha/web add -D @axe-core/playwright

快速检查清单

  • 色彩对比度是否满足 WCAG AA(正文 4.5:1,大文字 3:1)?
  • 动画是否添加 motion-reduce: 降级?
  • 图标按钮是否有 aria-label 或 sr-only 文本?
  • 表单输入是否有关联的 <label> 或 aria-label?
  • 焦点指示器是否可见(focus-visible:ring-2)?
  • 自定义可点击元素是否有 role="button" 和键盘事件?
  • 动态内容更新是否有 aria-live 通知?

© mobazha, MPL-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .cursor/skills/a11y-guide of mobazha/mobazha-unified.

Open the folder on GitHubat commit 156c699

Compare with similar skills

A11y Guide next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

A11y Guide compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
A11y Guide this skillmobazha/mobazha-unified165—~1.4kAutomated safety check: PassMPL-2.0
Web Interface Guidelines Reviewervercel-labs/openreview1.7k97 repos~308Automated safety check: PassNone
Accessibility Reviewmarkmead/hyperui12k1 repos~1.1kAutomated safety check: PassMIT
Web Animation DesignbaptisteArno/typebot.io11k2 repos~2.7kAutomated safety check: PassCustom licence
Accessibility Fixeribelick/ui-skills9.6k4 repos~1.2kAutomated safety check: PassMIT
Wcag Audit PatternsvmDeshpande/ai-agent-automation17811 repos~610Automated safety check: PassApache-2.0

Similar skills

  • Web Interface Guidelines Reviewer

    vercel-labs/openreview

    Official

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…

    1.7k GitHub starsUsed in 97 repos~308 tokens
    Frontend & DesignAuto-check passed
  • Accessibility Review

    markmead/hyperui

    Run a WCAG 2.1 AA accessibility audit on a design or page. An agent skill from markmead/hyperui.

    12k GitHub starsUsed in 1 repo~1.1k tokens
    Frontend & DesignAuto-check passed
  • Web Animation Design

    baptisteArno/typebot.io

    Guides easing, timing and animation choices for UI motion, based on a web animation course, and reviews existing animations in a before-and-after table.

    11k GitHub starsUsed in 2 repos~2.7k tokens
    Frontend & DesignAuto-check passed
  • Accessibility Fixer

    ibelick/ui-skills

    Audits and fixes HTML accessibility problems such as ARIA labels, keyboard navigation, focus management, contrast and form errors with minimal changes.

    9.6k GitHub starsUsed in 4 repos~1.2k tokens
    Frontend & DesignAuto-check passed
  • Wcag Audit Patterns

    vmDeshpande/ai-agent-automation

    Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance.

    178 GitHub starsUsed in 11 repos~610 tokens
    Frontend & DesignAuto-check passed
  • Baseline UI

    ibelick/ui-skills

    Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.

    9.6k GitHub starsUsed in 8 repos~855 tokens
    Frontend & DesignAuto-check passed

More from mobazha/mobazha-unified

All 29 skills in this repo
  • API Reference

    mobazha/mobazha-unified

    Look up Mobazha backend API endpoints, request/response formats, and field mappings.

    165 GitHub stars~1.7k tokensUpdated 7 days ago
    Auto-check passed
  • Code Review

    mobazha/mobazha-unified

    Review code for quality, architecture consistency, and adherence to Mobazha project standards using confidence-based filtering.

    165 GitHub stars~464 tokensUpdated 7 days ago
    Auto-check passed
  • Code Simplifier

    mobazha/mobazha-unified

    Simplify and refine recently written code for clarity, consistency, and maintainability while preserving all functionality.

    165 GitHub stars~601 tokensUpdated 7 days ago
    Auto-check passed
  • Commit Helper

    mobazha/mobazha-unified

    Generate commit messages and run pre-commit validation following Mobazha conventions.

    165 GitHub stars~735 tokensUpdated 7 days ago
    Auto-check passed
  • Component Dev

    mobazha/mobazha-unified

    Create and modify UI components following Mobazha conventions including directory structure, spacing standards, accessibility, and testing.

    165 GitHub stars~638 tokensUpdated 7 days ago
    Auto-check passed
  • Debug Troubleshoot

    mobazha/mobazha-unified

    Troubleshooting handbook for common issues in Mobazha development including build errors, Matrix connection issues, wallet problems, and performance debugging.

    165 GitHub stars~1.4k tokensUpdated 7 days ago
    Auto-check passed

Questions about A11y Guide

What does A11y Guide do?

Accessibility guide for Mobazha following WCAG 2.1 AA standards including color contrast, reduced motion, ARIA patterns, keyboard navigation, focus management, and screen reader testing. A11y Guide is an agent skill from mobazha/mobazha-unified.1 AA standards including color contrast, reduced motion, ARIA patterns, keyboard navigation, focus management, and screen reader testing.

When should I use A11y Guide?

A11y Guide fits situations like: building accessible components; reviewing accessibility.

How do I install A11y Guide in Claude Code?

Run `npx skills add mobazha/mobazha-unified --skill a11y-guide -a claude-code`. Or copy the skill folder (.cursor/skills/a11y-guide in mobazha/mobazha-unified) into .claude/skills/a11y-guide in your project. Claude Code loads it when a task matches its description.

How do I install A11y Guide in Codex?

Run `npx skills add mobazha/mobazha-unified --skill a11y-guide -a codex`. Or copy the skill folder (.cursor/skills/a11y-guide in mobazha/mobazha-unified) into .agents/skills/a11y-guide in your project. Codex loads it when a task matches its description.

Can I use A11y Guide in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add mobazha/mobazha-unified --skill a11y-guide -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/a11y-guide, .gemini/skills/a11y-guide, .github/skills/a11y-guide and .opencode/skills/a11y-guide in your project.

What does A11y Guide need to run?

Going by SKILL.md and its folder, A11y Guide needs the command-line tools its instructions call (pnpm).

Does A11y Guide access the network?

SKILL.md names 1 domain. As links in the text: webaim.org. This is read from the text; nothing was executed.

Is A11y Guide safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does A11y Guide use?

A11y Guide is published under the MPL-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does A11y Guide use?

About 1.4k tokens (SKILL.md is roughly 5.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to A11y Guide?

Skills that share tags, products or a category with A11y Guide: Web Interface Guidelines Reviewer (vercel-labs/openreview, 1.7k stars), Accessibility Review (markmead/hyperui, 12k stars), Web Animation Design (baptisteArno/typebot.io, 11k stars) and Accessibility Fixer (ibelick/ui-skills, 9.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains A11y Guide?

mobazha (a GitHub organization) maintains it in mobazha/mobazha-unified, which has 165 GitHub stars. The repository holds 29 skills in this directory. The repository was last updated on October 3, 2026.

Source: mobazha/mobazha-unified on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.