클로드스킬마트스킬 둘러보기바로 쓰는 문장영상으로 배우기터미널 사용법스킬이 뭐예요?
 
← 목록으로

접근성 테스트 (Accessibility Testing)

axe-core 연동, WCAG 2.2 AA 체크리스트, 키보드·스크린리더·ARIA 검증을 한 번에 정리해주는 웹 접근성 테스트 레퍼런스 스킬.

개발·코딩중급★ 526⑂ 45AI 점수 7/10마지막 업데이트: 2026. 8. 8.

무엇을 해주나

  • axe-core 자동 검사 코드를 테스트 환경별로 제공합니다. jest-axe(컴포넌트 단위), @axe-core/playwright(E2E), cypress-axe(사이프러스) 세 가지 설정 스니펫을 그대로 붙여 쓸 수 있습니다.
  • WCAG 2.2 AA 위반 상위 20개 체크리스트를 표로 제공합니다. alt 텍스트, 폼 레이블, 4.5:1 색상 대비, 헤딩 계층, 포커스 표시, 키보드 트랩, 400% 확대 시 리플로우 등 실제 감사에서 가장 많이 걸리는 항목 중심입니다.
  • 키보드 내비게이션 테스트 패턴: 모달 탭 순서, 포커스 트랩과 Escape 처리, 스킵 링크, 방향키 기반 리스트박스/메뉴 조작을 Playwright 코드로 검증하는 예시가 들어 있습니다.
  • ARIA 패턴 템플릿: 라이브 리전(role="alert", aria-live), 다이얼로그, 탭, 콤보박스, sr-only 유틸 CSS까지 올바른 마크업 예시를 제공합니다.
  • 위반 → 수정 대조표와 GitHub Actions 접근성 워크플로 YAML, macOS VoiceOver 단축키 표도 포함됩니다.

이런 분께 추천

  • React/Next.js 등 프런트엔드를 다루며 접근성 QA를 자동화하고 싶은 개발자
  • 공공기관·금융·교육처럼 WCAG AA 준수 근거가 필요한 프로젝트 담당자
  • 디자인 시스템 컴포넌트의 ARIA 마크업을 표준에 맞게 정리하려는 UI 엔지니어
  • PR마다 접근성 회귀를 막고 싶은 QA/DevOps 담당자

활용 예시

  1. "로그인 폼 컴포넌트에 jest-axe 테스트를 추가해줘" → jest-axe 설정과 toHaveNoViolations 단정문이 포함된 테스트 파일 생성.
  2. "이 모달의 포커스 트랩과 Escape 닫기를 Playwright로 검증해줘" → 탭 순서 검증, 트리거 요소로 포커스 복귀까지 체크하는 E2E 테스트 작성.
  3. "이 페이지 마크업에서 WCAG AA 위반 항목을 찾아 고쳐줘" → 아이콘 버튼 aria-label 누락, placeholder를 레이블로 쓴 입력, 색상만으로 표시한 에러 등을 찾아 수정안 제시.

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

아래를 Claude에 붙여넣으면 설치하지 않고도 이 스킬을 그대로 씁니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/vibeeval/vibecosystem/HEAD/skills/accessibility-testing/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

Claude가 링크를 열지 못하면, 링크를 직접 열어 내용을 복사해 붙여넣으세요.

↓ 쓸 만하면 아래에서 ZIP을 받아 설치하세요. 그러면 매번 붙여넣지 않아도 알아서 작동합니다.

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 vibeeval/vibecosystem 의 skills/accessibility-testing 폴더를 내 ~/.claude/skills/accessibility-testing/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/vibeeval/vibecosystem.git /tmp/vibecosystem && mkdir -p ~/.claude/skills && cp -r /tmp/vibecosystem/skills/accessibility-testing ~/.claude/skills/

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. 터미널을 엽니다(macOS는 터미널, Windows는 Git Bash 또는 WSL).
  2. 스킬 저장소를 내려받습니다: git clone https://github.com/vibeeval/vibecosystem.git /tmp/vibecosystem
  3. Claude Code 스킬 폴더를 준비합니다: mkdir -p ~/.claude/skills
  4. 이 스킬만 복사합니다: cp -r /tmp/vibecosystem/skills/accessibility-testing ~/.claude/skills/
  5. ls ~/.claude/skills/accessibility-testing 명령으로 SKILL.md가 있는지 확인합니다.
  6. Claude Code를 다시 실행하고 "접근성 테스트 스킬을 써서 이 컴포넌트를 검사해줘"처럼 요청합니다.
  7. 실제 테스트를 돌리려면 프로젝트에 필요한 패키지를 설치하세요: npm i -D jest-axe @axe-core/playwright cypress-axe (사용하는 테스트 도구에 맞춰 선택)
GitHub에서 원본 보기 ↗라이선스: MIT