accessibility-compliance작성자 Seth Hobson

Accessibility Compliance 스킬.

디자인 리뷰를 위한 Claude Code 및 Codex 스킬입니다: 모바일 접근성 및 보조 기술 지원이 포함된 WCAG 2.2 준수 인터페이스.

Design Review & Accessibility
UI 코드

wshobson/agents · plugins/ui-design/skills/accessibility-compliance/SKILL.mdSKILL.md

--- name: accessibility-compliance description: Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences. --- ## When to Use This Skill ## Detailed patterns and worked examples ## Best Practices ## Testing Tools

2026-09-14에 업스트림 파일에서 읽은 전문 및 섹션 제목 · 전체 2,402자

01 기능

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

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

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

스킬 자체의 표현으로

이 스킬은 모바일 접근성과 보조 기술 지원을 갖춘 WCAG 2.2 준수 인터페이스를 구현합니다. 에이전트가 시맨틱 HTML, ARIA 패턴, 키보드 내비게이션, 포커스 관리, 스크린 리더 호환성, 동적 콘텐츠 알림을 다루도록 안내합니다. iOS VoiceOver, Android TalkBack, 데스크톱 스크린 리더(NVDA, JAWS)를 아우릅니다.

커스텀 ARIA보다 네이티브 요소를 우선시하며, prefers-reduced-motion, prefers-contrast와 같은 사용자 환경설정을 존중하고, 자동화 도구(axe DevTools, WAVE, Lighthouse)와 실제 보조 기술로 테스트합니다. 이 스킬은 대체 텍스트 누락, 낮은 대비, 키보드 트랩, 레이블 없는 폼 입력 등 흔한 위반 사항을 다룹니다.

산출물

적절한 ARIA 패턴, 포커스 관리, 스크린 리더 지원을 갖춘 WCAG 2.2 준수 인터페이스

예시 프롬프트 보기 ↗

작동 방식

01
키보드 우선 인터랙션 설계
모든 인터랙티브 컴포넌트가 마우스 없이 작동하도록 하고, 포인터 이벤트를 추가하기 전에 키보드 내비게이션을 먼저 구축합니다.

02 적합성 확인

accessibility-compliance 스킬 사용 시점

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

적합한 경우

웹 애플리케이션 또는 사이트의 WCAG 2.2 Level AA 또는 AAA 준수를 구현하기
VoiceOver, NVDA, JAWS, TalkBack과 함께 작동하는 스크린 리더 접근성 인터페이스 구축
인터랙티브 컴포넌트에 키보드 내비게이션과 포커스 관리 추가
접근성 감사를 수행하고 기존 인터페이스의 위반 사항 수정
인터페이스에서 모션 감소 및 고대비 사용자 환경설정 지원

03 스킬 내부

접근성 준수(accessibility-compliance) 스킬이 디자인 리뷰에 제공하는 것

SKILL.md가 Claude Code 또는 Codex에게 지시하는 2가지 작업, 파일 자체의 섹션 순서대로.

모범 사례
가능한 경우 ARIA보다 네이티브 요소를 선호합니다; 사용자 테스트에 장애인을 포함합니다; 마우스 없이 작동하는 상호작용을 설계합니다
테스트 도구
axe DevTools, WAVE, Lighthouse; VoiceOver (macOS/iOS), NVDA/JAWS (Windows), TalkBack (Android); NoCoffee (시각), Silktide (다양한 장애)

04 활용하기

Claude Code 또는 Codex에 accessibility-compliance 설치

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

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

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

Terminal

npx skills add https://github.com/wshobson/agents --skill accessibility-compliance

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

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

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

Starter prompt

Audit the [product dashboard] for WCAG 2.2 Level AA compliance. Check for missing alt text, color contrast violations, keyboard traps, and unlabeled form inputs. Implement focus management for the [modal dialog component] and add ARIA live regions to announce [real-time notification updates]. Test with VoiceOver and ensure the interface respects prefers-reduced-motion.

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

첫 번째 결과 확인

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

macOS 또는 iOS에서 VoiceOver로 직접 테스트하여 스크린 리더 알림과 내비게이션을 확인합니다
NoCoffee 같은 시각 시뮬레이터와 Silktide 같은 장애 시뮬레이터를 사용하여 다양한 장애를 테스트합니다

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

OpenDesign 다운로드 빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

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

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

SKILL.md 내부

이 스킬을 사용할 때WCAG 준수, 스크린 리더, 키보드 내비게이션, 포커스 관리, 폼, 모바일 접근성, 감사
상세 패턴과 예제상위 수준 가이드만으로 충분하지 않을 때 패턴 문서가 있는 references/details.md를 안내합니다
모범 사례8가지 핵심 규칙: 시맨틱 HTML, 실제 사용자 테스트, 키보드 우선, 포커스 스타일, 텍스트 대체, 확대, 라이브 영역, 환경설정
흔한 문제대체 텍스트 누락, 낮은 대비, 키보드 트랩, 레이블 없는 입력, 자동 재생, 잘못된 커스텀 컨트롤, 건너뛰기 링크, 포커스 순서
테스트 도구자동화 도구(axe, WAVE, Lighthouse), 수동 스크린 리더(VoiceOver, NVDA, JAWS, TalkBack), 시뮬레이터(NoCoffee, Silktide)

스킬 자체 설명

"모바일 접근성, 포용적 디자인 패턴, 보조 기술 지원을 갖춘 WCAG 2.2 준수 인터페이스를 구현합니다. 접근성 감사, ARIA 패턴 구현, 스크린 리더용 빌드, 포용적 사용자 경험 보장 시 사용합니다."

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

접근성 준수

실제 디자인 리뷰 작업에서 accessibility-compliance 실행.

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

OpenDesign 다운로드 모든 스킬 보기

터미널

npx skills add https://github.com/wshobson/agents --skill accessibility-compliance