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

접근성 (Accessibility)

WCAG의 POUR 원칙을 기준으로 UI의 접근성 문제를 진단하고 고치도록 Claude를 안내하는 스킬입니다.

디자인·UI중급★ 642⑂ 66AI 점수 10/10마지막 업데이트: 2026. 9. 14.

무엇을 해주나

  • 접근성(a11y), WCAG, ARIA, 스크린리더, 키보드 내비게이션, 색상 대비, 대체 텍스트, 자막, 모션 축소, 터치 타깃 크기 관련 작업이 감지되면 자동으로 발동합니다.
  • WCAG의 네 가지 원칙(POUR: 인지 가능·운용 가능·이해 가능·견고함)을 감사 렌즈로 사용해 문제를 분류합니다.
  • 키보드 → 스크린리더 → 대비/색상 → 구조 → 폼/오류 → 타깃·시간 → 미디어/모션 → 200% 확대까지 8단계 빠른 감사 체크리스트를 순서대로 실행합니다.
  • WCAG로 덮이지 않는 인지 접근성(W3C COGA 8개 목표), prefers-reduced-motion 패턴과 광민감성 한계는 별도 참조 문서로 심화 안내합니다.
  • 언어·문화·기기·비용 같은 '맥락' 문제는 접근성이 아니라 포용적 설계(inclusive-design) 스킬로 넘기라고 명확히 선을 그어 줍니다.

이런 분께 추천

  • 웹·앱 프론트엔드 개발자, Flutter/React 등 UI를 직접 만드는 엔지니어
  • 접근성 감사 리포트를 작성해야 하는 UX 디자이너·QA 담당자
  • 공공/금융 서비스처럼 WCAG 준수 근거가 필요한 팀
  • '접근성을 어디서부터 봐야 하는지' 감이 없는 초·중급 실무자

활용 예시

  1. "이 결제 폼을 접근성 있게 만들어줘" → 라벨 누락(placeholder만 사용), 오류 메시지-필드 연결, 포커스 순서 문제를 POUR 기준으로 정리해 수정안을 제시.
  2. "이 컴포넌트로 a11y 감사 돌려줘" → 8단계 체크리스트대로 키보드 도달성, 대비 4.5:1 충족, 동적 토스트의 스크린리더 알림 여부를 점검.
  3. "애니메이션이 너무 어지럽다는 피드백이 왔어" → prefers-reduced-motion 대응 패턴과 초당 3회 이상 깜빡임 제한을 적용한 코드로 수정.

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

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

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

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

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

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

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

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

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

직접 명령으로 설치하기

git clone https://github.com/evanca/flutter-ai-rules.git && mkdir -p ~/.claude/skills && cp -r flutter-ai-rules/skills/accessibility ~/.claude/skills/

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

  1. 터미널(macOS는 터미널, Windows는 PowerShell/WSL)을 엽니다.
  2. 스킬을 담을 폴더를 만듭니다: mkdir -p ~/.claude/skills
  3. 저장소를 내려받습니다: git clone https://github.com/evanca/flutter-ai-rules.git
  4. 이 스킬만 복사합니다: cp -r flutter-ai-rules/skills/accessibility ~/.claude/skills/
  5. references/ 폴더의 참조 문서(cognitive-accessibility.md, motion-and-sensory.md)가 함께 복사됐는지 확인합니다.
  6. Claude Code를 다시 실행한 뒤 "이 화면 접근성 감사해줘"처럼 요청하면 스킬이 자동으로 사용됩니다.