클로드스킬마트스킬 둘러보기스킬이 뭐예요?
 
← 목록으로

웹 접근성 (a11y) 감사

WCAG 2.2 기준으로 웹사이트 접근성을 점검하고 코드 수준에서 개선안을 제시하는 스킬입니다.

개발·코딩중급★ 2,599⑂ 238AI 점수 9/10마지막 업데이트: 2026. 6. 14.

무엇을 해주나

WCAG 2.2와 Lighthouse 접근성 감사 항목을 기반으로, Claude가 여러분의 HTML/CSS/JS를 접근성 관점에서 점검하고 수정안을 제안합니다.

  • POUR 4원칙과 A/AA/AAA 준수 수준 정리
  • 대체 텍스트, 색상 대비(4.5:1 / 3:1), 자막·트랜스크립트
  • 키보드 접근성, 포커스 표시, 포커스 가림 방지(2.4.11), 스킵 링크
  • WCAG 2.2 신규 항목: 타깃 크기 24×24px, 드래그 대안, 중복 입력 방지, 접근 가능한 인증
  • ARIA 남용 방지, 라이브 리전, 폼 라벨·에러 처리
  • Lighthouse / axe-core 자동 검사 명령과 수동 테스트 체크리스트

이런 분께 추천

  • 공공기관·금융 등 접근성 법적 요구(AA)를 맞춰야 하는 프론트엔드 개발자
  • 접근성 지식이 부족해 무엇부터 고쳐야 할지 모르는 팀
  • 디자인 시스템·컴포넌트 라이브러리를 접근성 있게 만들고 싶은 분
  • 리팩터링 시 접근성 회귀를 막고 싶은 QA 담당자

활용 예시

  1. "이 랜딩 페이지 a11y 감사해줘" → 대체 텍스트 누락, 대비 부족한 색상, 포커스 아웃라인 제거 코드를 찾아 수정 diff 제안
  2. "이 모달 컴포넌트 키보드 접근성 개선해줘" → 네이티브 <dialog> 또는 포커스 트랩 패턴으로 리팩터링
  3. "우리 결제 폼을 WCAG 2.2 AA에 맞춰줘" → 라벨 연결, aria-invalid/role="alert" 에러 안내, 중복 입력 제거, 버튼 최소 24×24px 적용

· · · 설치 가이드 · · ·

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

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

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

직접 명령으로 설치하기

git clone https://github.com/addyosmani/web-quality-skills.git && cp -r web-quality-skills/skills/accessibility ~/.claude/skills/

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

  1. 터미널을 엽니다. (macOS: 터미널, Windows: PowerShell 또는 WSL)
  2. 스킬 폴더가 없다면 만듭니다: mkdir -p ~/.claude/skills
  3. 저장소를 내려받습니다: git clone https://github.com/addyosmani/web-quality-skills.git
  4. 참조 파일까지 포함해 폴더 전체를 복사합니다: cp -r web-quality-skills/skills/accessibility ~/.claude/skills/
  5. 설치 확인: ls ~/.claude/skills/accessibility (SKILL.md와 references 폴더가 보이면 성공)
  6. Claude Code를 재시작하고 "이 페이지 접근성 감사해줘" 또는 "WCAG 2.2 기준으로 점검해줘"라고 요청하면 자동 실행됩니다.
GitHub에서 원본 보기 ↗라이선스: MIT