접근성 (Accessibility)
WCAG의 POUR 원칙과 실전 감사 체크리스트로 화면 낭독기·키보드·명암비·모션 접근성을 점검해 주는 스킬입니다.
디자인·UI중급★ 612⑂ 60AI 점수 8/10마지막 업데이트: 2026. 8. 4.
무엇을 해주나
Claude가 접근성(a11y) 작업을 할 때 참고할 판단 기준을 제공합니다. WCAG의 네 가지 원칙(Perceivable·Operable·Understandable·Robust, 줄여서 POUR)을 감사 렌즈로 삼아 문제를 분류하고, 키보드 내비게이션 → 화면 낭독기 → 명암비 → 시맨틱 구조 → 폼과 오류 메시지 → 터치 타겟과 타임아웃 → 미디어와 모션 → 200% 확대 리플로우 순서의 8단계 체크리스트로 점검합니다.
또한 WCAG만으로는 다루기 어려운 인지 접근성(W3C COGA 8개 목표)과 모션·감각·고령 사용자 관련 지침을 별도 참고 문서로 분리해, 필요한 순간에만 깊이 있게 불러오도록 설계되어 있습니다. 언어·문화·기기·비용 같은 '맥락' 이슈는 형제 스킬인 inclusive-design으로 넘기도록 경계가 명확히 정의되어 있습니다.
이런 분께 추천
- 접근성 검수 요청을 받았지만 어디서부터 봐야 할지 막막한 프론트엔드·Flutter 개발자
- 자동 검사 도구(axe, Lighthouse) 점수만으로는 부족하다고 느끼는 QA·디자이너
- 디자인 시스템이나 컴포넌트 라이브러리에 접근성 기준을 문서화하려는 팀
- 공공·금융 등 WCAG 준수 의무가 있는 프로젝트 담당자
활용 예시
- "이 결제 폼을 접근성 관점에서 감사해줘"라고 요청하면 라벨 누락, placeholder만 있는 필드, 색상만으로 표시된 오류 등을 POUR 분류로 정리해 줍니다.
- "모달 다이얼로그 포커스 트랩을 고쳐줘"라고 하면 포커스 순서, 되돌아갈 지점, ESC 처리, 화면 낭독기 announce 여부까지 함께 점검합니다.
- "화면 전환 애니메이션이 어지럽다는 피드백이 있어"라고 하면 prefers-reduced-motion 대응 패턴과 초당 3회 이상 깜빡임 금지 같은 광민감성 기준을 적용해 수정안을 제시합니다.
· · · 설치 가이드 · · ·
설치 없이 지금 한 번 써보기
아래를 Claude에 붙여넣으면 설치하지 않고도 이 스킬을 그대로 씁니다.
이 파일의 지시를 읽고 그대로 따라서 나를 도와줘: https://raw.githubusercontent.com/evanca/flutter-ai-rules/HEAD/skills/accessibility/SKILL.md 내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)
Claude가 링크를 열지 못하면, 링크를 직접 열어 내용을 복사해 붙여넣으세요.
↓ 쓸 만하면 아래에서 ZIP을 받아 설치하세요. 그러면 매번 붙여넣지 않아도 알아서 작동합니다.
Claude 앱에 설치 (터미널 필요 없음)
- 아래 버튼으로 ZIP 파일을 받으세요.
- Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
- Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 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자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.
- 터미널을 엽니다.
- 스킬 폴더가 없으면 만듭니다:
mkdir -p ~/.claude/skills - 저장소를 내려받습니다:
git clone https://github.com/evanca/flutter-ai-rules.git - 스킬만 복사합니다:
cp -r flutter-ai-rules/skills/accessibility ~/.claude/skills/ - (권장) 함께 언급되는 형제 스킬도 복사합니다:
cp -r flutter-ai-rules/skills/inclusive-design ~/.claude/skills/ ~/.claude/skills/accessibility/references/안에 참고 문서가 함께 복사되었는지 확인합니다.- Claude Code를 재시작한 뒤 "이 화면 접근성 점검해줘"처럼 요청하면 스킬이 자동으로 활성화됩니다.
GitHub에서 원본 보기 ↗라이선스: MIT