사용 가이드로 건너뛰기
wcag-audit-patterns작성자 Seth Hobson

WCAG Audit Patterns 스킬.

디자인 검토를 위한 Claude Code 및 Codex 스킬입니다: 자동화된 테스트, 수동 검사, 개선 가이드를 포함한 WCAG 2.2 감사.

  • Design Review & Accessibility
  • 리뷰 리포트
wshobson/agents · plugins/accessibility-compliance/skills/wcag-audit-patterns/SKILL.mdSKILL.md
--- name: wcag-audit-patterns description: Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing accessible design patterns. --- ## When to Use This Skill ## Core Concepts ## Detailed patterns and worked examples ## Best Practices
2026-09-14에 업스트림 파일에서 읽은 전문 및 섹션 제목 · 전체 2,439자

01 기능

Claude Code와 Codex에서 wcag-audit-patterns Skill이 수행하는 작업

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

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

스킬 자체의 표현으로

이 스킬은 자동화된 테스트, 수동 검증, 개선 가이드를 결합하여 WCAG 2.2 접근성 감사를 수행합니다. 위반 사항을 영향도(치명적/차단 요소, 심각, 보통)별로 분류하고, 세 가지 준수 수준(법적 기준선인 A, 대부분의 규정에 해당하는 AA, 특수 목적을 위한 AAA)을 다루며, POUR 원칙(인식 가능성, 운용 가능성, 이해 가능성, 견고성)을 적용합니다.

이 스킬은 대체 텍스트 누락, 키보드 접근 문제, 불충분한 색상 대비, 잘못된 헤딩 계층 구조 등 일반적인 위반 사항을 다룹니다. 시맨틱 HTML, 장애가 있는 실제 사용자와의 테스트, 접근 가능한 컴포넌트 라이브러리 구축을 강조하며, 문제의 30~50%만이 자동화로 감지 가능하다는 점을 인식합니다.

산출물

  • 식별된 위반 사항에 대한 실행 가능한 개선 전략
  • 접근 가능한 컴포넌트 라이브러리 문서
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    영향도별 위반 사항 분류

    문제는 치명적(대체 텍스트 누락, 키보드 접근 불가 등의 차단 요소), 심각(불충분한 대비, 건너뛰기 링크 누락), 보통(언어 속성 누락, 불명확한 링크 텍스트)으로 분류됩니다.

  2. 02
    POUR 원칙 적용

    네 가지 원칙에 따라 감사합니다: 인식 가능성(사용자가 콘텐츠를 인식할 수 있는가), 운용 가능성(사용자가 인터페이스를 조작할 수 있는가), 이해 가능성(사용자가 콘텐츠를 이해할 수 있는가), 견고성(보조 기술과 함께 작동하는가).

  3. 03
    자동화 테스트와 수동 테스트 결합

    자동화 도구는 문제의 30~50%를 감지하지만, 포괄적인 범위를 확보하려면 수동 테스트가 필요합니다.

  4. 04
    상세 패턴 문서 참조

    핵심 개념으로 충분하지 않을 경우, 이 스킬은 구체적인 예시와 심층적인 패턴 가이드를 위해 references/details.md를 참조하도록 안내합니다.

02 적합성 확인

wcag-audit-patterns 스킬을 사용해야 하는 경우

이러한 종류의 디자인 검토 작업일 때 Claude Code 또는 Codex에서 wcag-audit-patterns 스킬을 사용하십시오. 아래의 적합성 및 제한 사항은 스킬 자체 파일에서 가져온 것입니다.

적합한 경우

  • 웹 콘텐츠의 접근성 감사 수행
  • 기존 인터페이스의 WCAG 위반 사항 수정
  • ADA 또는 Section 508 규제 요건 충족
  • 접근성 소송 대비
  • VPAT 준수 문서 작성

    03 스킬 내부

    wcag-audit-patterns 스킬이 Claude Code와 Codex에 제공하는 규칙

    SKILL.md가 에이전트에게 설정하는 8가지 구체적인 지시, 기본값, 제한 — 결과를 바꾸는 파일의 부분입니다.

    1. 디자인 단계부터 접근성 고려 시작

      접근성은 사후에 보완하는 것이 아니라 디자인 단계 초기부터 반영되어야 합니다.

    2. 시맨틱 HTML을 우선 사용

      네이티브 HTML 요소는 ARIA에 대한 필요성을 줄이고 더 나은 접근성 지원을 제공하므로 기본 선택이 되어야 합니다.

    3. 자동화된 테스트만 의존하지 않기

      자동화 도구는 접근성 문제의 30~50%만 감지할 수 있으므로 수동 테스트가 필요합니다.

    4. ARIA보다 네이티브 HTML 우선

      ARIA를 첫 번째 해결책으로 사용해서는 안 되며, 가능한 한 네이티브 HTML 요소를 우선적으로 사용해야 합니다.

    5. 포커스 아웃라인 유지

      포커스 아웃라인을 숨기면 안 됩니다. 키보드 사용자는 탐색을 위해 이를 필요로 합니다.

    6. 확대(줌) 기능을 비활성화하지 마십시오

      사용자는 콘텐츠 크기를 조절할 수 있어야 하므로 확대 기능을 비활성화해서는 안 됩니다.

    7. 색상 외의 다중 표시 지표

      색상만으로 정보를 전달할 수 없으며, 여러 표시 지표가 필요합니다.

    8. 장애가 있는 사용자와 함께 테스트하기

      장애가 있는 실제 사용자가 최상의 피드백을 제공하므로 테스트에 포함되어야 합니다.

    04 활용하기

    Claude Code 또는 Codex에 wcag-audit-patterns 설치

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

    Claude Code, Codex 또는 사용자의 에이전트에 wcag-audit-patterns 추가

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

    Terminal
    npx skills add https://github.com/wshobson/agents --skill wcag-audit-patterns

    plugins/accessibility-compliance/skills/wcag-audit-patterns/SKILL.md에 대한 일반적인 skills CLI 형식입니다. 저장소가 자체 경로를 문서화할 수 있습니다.

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

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

    Starter prompt
    Audit [website URL or component name] against WCAG 2.2 AA standards. Identify all Critical and Serious violations including missing alt text, keyboard access issues, and color contrast failures. For each violation, provide the specific WCAG success criterion, the impact on users with disabilities, and concrete remediation code. Prioritize issues that would block screen reader users.

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

    첫 번째 결과 확인

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

    • 견고한 구현을 위해 보조 기술과의 호환성을 확인하십시오

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

    05 오픈 소스, 추적 가능

    출처, 라이선스 및 검증

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

    Repository
    github.com/wshobson/agents Branch main
    스킬 파일
    plugins/accessibility-compliance/skills/wcag-audit-patterns/SKILL.md 검증 시 기록된 콘텐츠 체크섬, 커밋 4236bb9
    License
    MIT LICENSE에서.
    리포지토리 스타
    39,635 이 카탈로그에 18개의 스킬을 포함하는 전체 wshobson/agents 저장소에 대해 2026-09-14에 촬영한 GitHub 스냅샷입니다. wcag-audit-patterns의 평가 또는 사용 수가 아닙니다.
    OpenDesign에서 검증됨
    2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

    SKILL.md 내부

    1. 이 스킬을 사용해야 하는 경우감사, 위반 사항 수정, 규제 요건 충족을 포함한 여섯 가지 시나리오를 나열합니다
    2. 핵심 개념세 가지 준수 수준, POUR 원칙, 영향도별 일반적인 위반 사항을 정의합니다
    3. WCAG 준수 수준레벨 A는 법적 기준선이고, AA는 규제의 표준이며, AAA는 특수한 요구 사항을 위한 것입니다
    4. POUR 원칙인식 가능성, 운용 가능성, 이해 가능성, 견고성이라는 네 가지 원칙과 안내 질문
    5. 영향도별 일반적인 위반 사항문제를 심각한 차단 요인, 중대함, 보통으로 분류하고 구체적인 예시를 제시합니다
    6. 세부 패턴과 실제 예시심층적인 패턴 문서는 references/details.md를 참조하도록 안내합니다
    7. 모범 사례접근성을 고려한 개발을 위한 해야 할 일 다섯 가지와 하지 말아야 할 일 다섯 가지를 나열합니다
    스킬 자체 설명
    "자동화된 테스트, 수동 검증 및 수정 지침을 통해 WCAG 2.2 접근성 감사를 수행합니다. 웹사이트 접근성 감사, WCAG 위반 수정 또는 접근 가능한 디자인 패턴 구현 시 사용합니다."

    SKILL.md의 front-matter 설명입니다. 전체 파일은 약 2,439자입니다. GitHub에서 전체 파일 읽기.

    06 설치하기 전에

    wcag-audit-patterns 스킬에 관한 질문

    이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

    어떤 WCAG 준수 수준을 목표로 해야 합니까?

    레벨 AA는 대부분의 규제에서 요구하는 표준 준수 수준입니다. 레벨 A는 최소한의 법적 기준선이며, 레벨 AAA는 특수한 요구 사항에만 필요합니다. 대부분의 ADA 및 Section 508 요건은 AA 준수로 충족됩니다.

    WCAG Audit Patterns

    실제 디자인 검토 작업에서 wcag-audit-patterns 실행

    OpenDesign을 다운로드하고, SKILL.md 링크에서 wcag-audit-patterns를 가져오고, 위의 프롬프트를 붙여넣은 다음, 결과 전에 계획을 읽습니다.

    터미널
    npx skills add https://github.com/wshobson/agents --skill wcag-audit-patterns

    OpenDesign 데스크톱

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

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

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

    macOS, Windows 지원