Agent skill · software engineering · aiskillstore
accessibility-wcag
Enforce WCAG 2.2 accessibility standards. Use when creating UI components, reviewing frontend code, or when accessibility issues are detected. Covers semantic HTML, ARIA, keyboard navigation, and color contrast.
Why this skill is useful
Provides specific WCAG 2.2 compliance patterns and examples that the AI wouldn't reliably generate on its own.
What it needs
Requires @axe-core/react, @lhci/cli, eslint-plugin-jsx-a11y installed locally. About 3k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Accessibility (WCAG 2.2) 웹 접근성 표준 WCAG 2.2를 준수하도록 강제하는 스킬입니다. 2025 Context WCAG 2.2는 2023년 10월 ISO 표준(ISO/IEC 40500)으로 채택되었습니다. 유럽 접근성법(EAA)은 2025년 6월부터 시행됩니다. Core Principles (POUR) 원칙 설명 예시 ------ ------ ------ Perceivable 인지 가능 대체 텍스트, 자막, 색상 대비 Operable 조작 가능 키보드 접근, 충분한 시간 Understandable 이해 가능 명확한 언어, 예측 가능한 동작 Robust 견고함 보조 기술 호환성 Rules 1. Semantic HTML (필수) 2. 이미지 대체 텍스트 (필수) 3. 키보드 접근성 (필수) 4. 포커스 관리 5. 색상 대비 (WCAG AA 기준) 텍스트 크기 최소 대비율 ------------ ------------ 일반 텍스트 4.5:1 큰 텍스트 (18pt+, 14pt bold+) 3:1 UI 컴포넌트/그래픽 3:1 6. 폼 레이블 (필수) 7. ARIA 역할 및 속성 8. 건너뛰기 링크 WCAG 2.2 신규 기준 2.4.11 Focus Not Obscured (AA) 2.5.7 Dragging Movements (AA) 2.5.8 Target Size (AA) 테스트 도구 자동화 도구 eslint 설정 수동 테스트 체크리스트 [ ] 키보드만으로 모든 기능 사용 가능 [ ] Tab 순서가 논리적 [ ] 포커스 표시가 명확함 [ ] 스크린 리더로 내용 이해 가능 [ ] 200% 확대해도 콘텐츠 손실 없음 [ ] 색상만으로 정보 전달하지 않음 Workflow 1. 컴포넌트 작성 시 2. 코드 리뷰 시 Checklist [ ] 시맨틱 HTML 태그 사용 [ ] 모든 이미지에 의미 있는 alt [ ] 폼 요소에 label 연결 [ ] 키보드만으로 조작 가능 [ ] 포커스 표시 명확 [ ] 색상 대비 4.5:1 이상 [ ] 터치 타겟 44x44px 이상 [ ] 건너뛰기 링크 제공 [ ] axe/Lighthouse 테스트 통과 References WCAG 2.2 WAI-ARIA 1.2 eslint-plugin-jsx-a11y
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/accessibility-wcag