zivtech/a11y-meta-skills

a11y-meta-skills은(는) 무엇을 하나요?

Claude Code용 접근성 기획-비평 스킬 세트 — WCAG 구현 계획 + ARIA/포커스/의미론 검토

개요

이 스킬은 접근성(A11Y) 작업을 두 단계로 나누어 수행합니다:

1. 기획(Planner): WCAG 가이드라인에 따라 구현 계획 수립
2. 비평(Critic): 코드 리뷰를 통해 접근성 문제 식별 및 수정 제안

지원 플랫폼

• Claude Code (기본)
• Cursor
• Codex

주요 기능

• ARIA 속성 검증: role, aria-label, aria-hidden 등 ARIA 속성의 올바른 사용 확인
• 포커스 관리: 키보드 포커스 순서, 포커스 표시기, 포커스 트랩 방지
• 시맨틱 구조 검토: HTML5 시맨틱 요소(<nav>, <main>, <aside> 등)의 적절한 사용
• 색상 대비 검사: WCAG AA/AAA 기준에 따른 텍스트와 배경 간 대비 확인
• 키보드 접근성: Tab 키 순서, 키보드 이벤트 핸들링 평가

사용 방법

기획 모드

# Claude Code에게 접근성 계획 요청
Claude: "이 페이지의 접근성 계획을 세워줘"

비평 모드

# 코드 리뷰 요청
Claude: "이 컴포넌트의 접근성을 검토해줘"

예시

기획:

• <form> 요소에 aria-labelledby 추가
• 키보드 포커스 순서를 시각적 순서와 일치시키기
• 이미지에 설명적인 alt 텍스트 제공

비평:

• 발견: <button> 내 aria-hidden="true"가 포커스 가능 요소를 가림
• 제안: aria-hidden 제거 또는 tabindex="-1" 추가

참고 자료

• WCAG 2.1 가이드라인
• ARIA 작성 방법
• WAI-ARIA 1.2 명세