‹ 首页

accessibility-patterns

@vibeeval · 收录于 1 周前 · 上游提交 1 个月前

WCAG 2.2 AA compliance, ARIA patterns, keyboard navigation, screen reader optimization

场景无障碍审计上线前检查

适合你，如果你需要确保网站符合WCAG无障碍标准

/ 下载安装
accessibility-patterns.skill双击,或拖进 Claude 桌面版 / Cowork,即完成安装↓ .skill↓ .zip
用别的 agent?下载 .zip 解压,把文件夹放进它的技能目录
Claude Code~/.claude/skills/(项目级 .claude/skills/)
Codex CLI~/.codex/skills/
Cursor自动读取上面两处目录
其他工具见其文档的「skills」目录;两个下载是同一份文件,只是名字不同
/ 通过 npx 安装 校验哈希
npx oh-my-skill add vibeeval/vibecosystem/accessibility-patterns
/ 通过 bash 安装
curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- vibeeval/vibecosystem/accessibility-patterns
/ 已经装过?验证本机副本,不用重装
npx oh-my-skill verify vibeeval/vibecosystem/accessibility-patterns
安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。
515GitHub stars
~817上下文体积 · 单文件
镜像托管

怎么用

技能原文 SKILL.md作者撰写 · MIT · cea9462

Accessibility Patterns

WCAG 2.2 AA Requirements
Perceivable

| Kriter | Kural | Kontrol | |--------|-------|---------| | 1.1.1 | Non-text content alt text | <img alt="description"> | | 1.3.1 | Semantic HTML | Headings, landmarks, lists | | 1.4.3 | Color contrast | 4.5:1 normal text, 3:1 large | | 1.4.11 | UI component contrast | 3:1 borders, icons |

Operable

| Kriter | Kural | Kontrol | |--------|-------|---------| | 2.1.1 | Keyboard accessible | Tab, Enter, Space, Escape | | 2.4.3 | Focus order | Logical tab sequence | | 2.4.7 | Focus visible | Visible focus indicator | | 2.5.8 | Target size | Min 24x24px (44x44px önerilir) |

Understandable

| Kriter | Kural | Kontrol | |--------|-------|---------| | 3.1.1 | Language of page | <html lang="tr"> | | 3.2.1 | On focus | No unexpected context change | | 3.3.1 | Error identification | Clear error messages | | 3.3.2 | Labels or instructions | Form labels visible |

ARIA Patterns
<!-- Dialog -->
<div role="dialog" aria-modal="true" aria-labelledby="title">
  <h2 id="title">Confirm</h2>
  <button aria-label="Close dialog">×</button>
</div>

<!-- Tabs -->
<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel1">Tab 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel2">Tab 2</button>
</div>
<div role="tabpanel" id="panel1">Content 1</div>

<!-- Live region (dynamic updates) -->
<div aria-live="polite" aria-atomic="true">
  3 new messages
</div>
Keyboard Navigation
// Focus trap (modal/dialog)
function useFocusTrap(ref: RefObject<HTMLElement>) {
  useEffect(() => {
    const focusable = ref.current?.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    )
    const first = focusable?.[0] as HTMLElement
    const last = focusable?.[focusable.length - 1] as HTMLElement

    function handleKeyDown(e: KeyboardEvent) {
      if (e.key !== 'Tab') return
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault(); last.focus()
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault(); first.focus()
      }
    }
    ref.current?.addEventListener('keydown', handleKeyDown)
    first?.focus()
    return () => ref.current?.removeEventListener('keydown', handleKeyDown)
  }, [ref])
}
Skip Links
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- ... navigation ... -->
<main id="main-content">...</main>

<style>
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 100;
}
.skip-link:focus { top: 0; }
</style>
Motion Preferences
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
Testing
# axe-core (automated)
npx @axe-core/cli https://localhost:3000

# Lighthouse accessibility audit
lighthouse --only-categories=accessibility https://localhost:3000
Checklist
  • [ ] Semantic HTML (headings, landmarks, lists)
  • [ ] Alt text on all images
  • [ ] Color contrast 4.5:1 (text), 3:1 (UI)
  • [ ] Keyboard navigable (tab order logical)
  • [ ] Focus visible indicator
  • [ ] Skip link to main content
  • [ ] Form labels and error messages
  • [ ] ARIA roles where needed
  • [ ] prefers-reduced-motion respected
  • [ ] axe-core test pass
Anti-Patterns
  • <div onclick> instead of <button>
  • Color-only information (add icon/text)
  • Auto-playing video/audio
  • Removing focus outline without replacement
  • Using ARIA when native HTML suffices
按 MIT 许可原样转载,未经改动 · 在 GitHub 查看 →

评论

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。
…