사용 가이드로 건너뛰기
accessibility-review작성자 Anthropic

Accessibility Review 스킬.

Claude Code 및 Codex를 위한 디자인 검토 스킬입니다. 디자인 또는 페이지의 WCAG 2.1 AA 감사를 수행하며, 대비, 키보드 접근성, 터치 타겟을 점검합니다.

  • Design Review & Accessibility
  • 리뷰 리포트
anthropics/knowledge-work-plugins · design/skills/accessibility-review/SKILL.mdSKILL.md
--- name: accessibility-review description: Run a WCAG 2.1 AA accessibility audit on a design or page. Trigger with "audit accessibility", "check a11y", "is this accessible?", or when reviewing a design for color contrast, keyboard navigation, touch target size, or screen reader behavior before handoff. --- ## Usage ## Testing Approach ## Output ## Accessibility Audit: [Design/Page Name] ## If Connectors Available ## Tips
2026-09-14에 업스트림 파일에서 읽은 앞부분과 섹션 제목 · 전체 4,248자

01 기능

Claude Code와 Codex에서 accessibility-review 스킬이 하는 일

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

디자인이나 페이지를 대상으로 하는 WCAG 2.1 AA 감사 루틴으로, "audit accessibility" 또는 "check a11y" 같은 문구로 실행되며 Figma URL, URL 또는 설명을 인수로 받습니다.

인식, 운용, 이해, 견고성 전반에 걸친 열한 개 기준을 압축한 빠른 참조를 담고 있습니다. 일반 텍스트 4.5:1 대비, 큰 텍스트와 UI 컴포넌트 3:1 대비, 키보드 접근, 가시적 포커스와 44x44 CSS 픽셀 터치 타깃을 다루며, 여덟 가지 흔한 문제와 문제의 약 30%를 잡아내는 자동화 스캔으로 시작하는 다섯 단계 테스트 접근법도 포함합니다. 결과는 심각도 집계, 원칙별 표, 대비·키보드·스크린 리더 섹션, 우선순위가 매겨진 수정 사항이 담긴 고정 형식의 마크다운 보고서에 정리됩니다.

산출물

  • 디자인 또는 페이지 이름과 WCAG 2.1 AA 표준을 머리에 둔 마크다운 접근성 감사 보고서.
  • 발견 사항 섹션은 인식, 운용, 이해, 견고성 표로 나뉘며, 각 표는 문제, 기준, 심각도, 권장 사항을 담습니다.
  • 색상 대비, 키보드 탐색, 스크린 리더 전용 표를 포함하며, 각 요소별로 안내되는 이름도 함께 기록합니다.
  • 사용자를 막는 치명적 수정, 주요 개선 사항, 사소한 편의 사항을 구분한 순서형 우선순위 수정 목록입니다.
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    감사할 대상 넘겨주기

    이 명령은 Figma URL, 페이지 URL 또는 서술형 설명을 인수로 받아 그 대상을 감사합니다.

  2. 02
    열한 가지 AA 기준 확인

    빠른 참조는 기준을 인식, 운용, 이해, 견고성 아래에 묶고, 각 기준의 성공 기준 번호와 임계값을 함께 제시합니다.

  3. 03
    다섯 가지 테스트 패스 실행

    자동화 스캔, 키보드 전용 탐색, 스크린 리더 테스트, 대비 검증, 200% 확대 순서로 진행합니다.

  4. 04
    고정된 보고서 형식 작성

    심각도 요약, 원칙별 발견 사항 표, 그리고 별도의 대비·키보드·스크린 리더 표를 담은 하나의 마크다운 보고서입니다.

  5. 05
    커넥터가 있으면 사용

    디자인 도구가 연결되어 있으면 Figma에서 색상 값, 글꼴 크기, 터치 타깃을 읽고, 프로젝트 트래커가 있으면 발견 사항별로 티켓을 생성합니다.

02 적합성 확인

accessibility-review 스킬을 사용하는 경우

이러한 종류의 디자인 리뷰 작업 시 Claude Code 또는 Codex에서 accessibility-review 스킬을 사용하십시오. 적합성과 제한 사항은 스킬 자체 파일에서 가져왔습니다.

적합한 경우

  • 핸드오프 전에 색상 대비, 키보드 탐색, 터치 타깃 크기 또는 스크린 리더 동작을 디자인에서 검토하는 경우.
  • URL만 전달하면 완성된 페이지를 감사합니다.
  • 디자인 도구가 연결되어 있으면 Figma 파일에서 색상 값과 글꼴 크기, 터치 타깃을 곧바로 읽어옵니다.
  • 감사를 추적 가능한 작업으로 전환합니다. 각 발견 사항마다 티켓을 만들고 기존 개선 에픽에 연결합니다.

한계 인지하기

  • 감사를 완전한 점검으로 간주하는 것입니다. 자동 스캔은 대부분의 문제를 놓치므로 실제 보조 기술 테스트가 여전히 필요합니다.

제공할 사항

  • 디자인 또는 페이지 참조 자체감사 지침에서 첫 번째 인수로 대체됩니다.

03 스킬 내부

accessibility-review 스킬이 Claude Code와 Codex에 부여하는 규칙

SKILL.md가 에이전트를 위해 설정하는 7가지 구체적 지침, 기본값, 한도 — 결과를 바꾸는 파일의 부분

  1. UI 구성 요소에 3:1 기준 적용

    1.4.11에 따라 UI 구성 요소와 그래픽에는 최소 3:1의 비텍스트 명도 대비가 필요합니다.

  2. 44x44 터치 타깃 강제

    2.5.5 기준에 따라 터치 타깃은 최소 44x44 CSS 픽셀이어야 합니다.

  3. 모든 요소를 키보드로 접근 가능하게

    모든 기능은 키보드로 사용할 수 있어야 하며(2.1.1), 포커스 표시가 보여야 합니다(2.4.7).

  4. 200% 확대를 통과 또는 실패로 판정

    200% 확대 상태에서 레이아웃을 테스트하고, 깨지는 경우 문제로 표시합니다.

  5. 모든 발견 사항을 기준에 연결

    발견 사항 표의 각 행에는 문제와 심각도, 권장 사항과 함께 WCAG 기준이 명시됩니다.

  6. 심각도를 치명적, 중대, 경미로 등급화

    발견 사항에는 세 가지 심각도 중 하나가 지정되며, 권장 사항 열에 색상 표시로 나타납니다.

  7. 명도 대비와 키보드부터 시작

    이 스킬은 가장 흔하고 영향이 큰 문제를 잡아내기 때문에 명도 대비와 키보드를 먼저 기본값으로 삼습니다.

04 활용하기

Claude Code 또는 Codex에 accessibility-review 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용자의 Agent에 accessibility-review 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill accessibility-review

design/skills/accessibility-review/SKILL.md에 대한 일반적인 skills CLI 형식이며, 저장소마다 자체 경로를 문서화할 수 있습니다.

스킬에 첫 번째 디자인 리뷰 작업 부여

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt
Audit accessibility for [Figma URL for the checkout flow] before we hand it to engineering. Start with contrast and keyboard access, and flag anything that would block a screen reader user as critical.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

  • 키보드만으로 전체를 탐색합니다.
  • 감사에 의존하지 말고 VoiceOver 또는 NVDA로 테스트합니다.
  • 실제 명도 대비를 요구 값과 대조해 확인합니다.
  • 우선순위 수정 사항을 순서대로 처리하고, 다듬기보다 차단 이슈를 먼저 해결합니다.

OpenDesign에서는 SKILL.md 링크에서 accessibility-review를 가져옵니다: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택합니다.

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author
Anthropic
스킬 파일
design/skills/accessibility-review/SKILL.md 검증 시 기록된 콘텐츠 체크섬; 커밋 8f877b6
License
Apache-2.0 LICENSE에서 확인
리포지토리 스타
24,012 이 카탈로그에 7개의 스킬이 포함된 anthropics/knowledge-work-plugins 리포지토리 전체에 대해 2026-09-14에 촬영된 GitHub 스냅샷입니다. accessibility-review에 대한 평가 또는 사용 횟수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

  1. 사용법명령 형식과 인수가 감사에 어떻게 치환되는지 보여줍니다.
  2. WCAG 2.1 AA 빠른 참조인식의 용이성, 운용의 용이성, 이해의 용이성, 견고성 아래에 기준값과 함께 나열된 11개 기준입니다.
  3. 흔한 문제대비와 폼 레이블부터 포커스 트랩과 시간 제한까지, 반복적으로 발생하는 여덟 가지 실패입니다.
  4. 테스트 접근법다섯 단계: 자동 스캔, 키보드, 스크린 리더, 대비, 200% 확대.
  5. 출력심각도 요약, 원칙별 표, 대비 행, 우선순위 수정 사항을 포함한 보고서 템플릿입니다.
  6. 커넥터를 사용할 수 있는 경우디자인 도구나 프로젝트 트래커를 연결하면 무엇이 달라지는지 설명합니다.
  7. 팁대비와 키보드부터 시작하고, 실제 보조 기술로 테스트하며, 영향도를 기준으로 우선순위를 정합니다.
스킬 자체 설명
"디자인 또는 페이지에 대해 WCAG 2.1 AA 접근성 감사를 실행합니다. "접근성 감사", "a11y 검사", "접근성이 있습니까?"로 트리거하거나, 인계 전 색상 대비, 키보드 탐색, 터치 대상 크기 또는 스크린 리더 동작을 검토할 때 사용합니다."

SKILL.md의 프론트 매터 설명입니다. 전체 파일은 약 4,248자입니다. GitHub에서 전체 파일 읽기.

접근성 검토

실제 디자인 리뷰 작업에서 accessibility-review를 실행합니다.

OpenDesign를 다운로드하고 SKILL.md 링크에서 accessibility-review를 가져온 후 위 프롬프트를 붙여넣고 결과 전에 계획을 확인하십시오.

터미널
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill accessibility-review

OpenDesign 데스크톱

하나의 디자인 시스템으로 모든 결과물에 브랜드 일관성을

완전한 Vibe Design Workspace에서 하나의 브랜드 규칙을 웹사이트, 슬라이드, 인터랙티브 프로토타입, 대시보드, 이미지, HTML 영상에 적용하세요. 로컬 Codex, Claude Code, Cursor 등을 연결해 무료로 제작할 수 있습니다.

  • 웹, 슬라이드, 프로토타입, 대시보드, 이미지, 영상
  • 140개+ 디자인 시스템과 전체 템플릿·스킬 라이브러리
  • 로컬 Codex 및 21개+ 코딩 에이전트 연결 · 무료
무료 다운로드

macOS, Windows 지원