accessibility-compliance

개요

accessibility-compliance란?

accessibility-compliance는 접근 가능한 사용자 인터페이스를 구현, 감사 또는 유지해야 하는 프론트엔드 개발자를 위한 실용적인 스킬입니다. WCAG 2.2 가이드라인, ARIA 패턴, 키보드 내비게이션, 스크린 리더 지원, 모바일 접근성에 중점을 둡니다. 이 스킬은 장애가 있는 사람을 포함해 모든 사용자가 웹 또는 React 프로젝트를 사용할 수 있도록 돕습니다.

누가 이 스킬을 사용해야 하나요?

• UI 컴포넌트를 구축하거나 리팩토링하는 프론트엔드 엔지니어
• WCAG 2.2 레벨 AA 또는 AAA 준수를 목표로 하는 팀
• ARIA 역할, 상태, 속성을 추가하는 개발자
• 접근성 감사 또는 포괄적 디자인을 담당하는 모든 사람

해결하는 문제

• 인터페이스가 인지 가능하고, 조작 가능하며, 이해 가능하고, 견고하도록 보장
• 실용적인 ARIA 패턴과 모바일 접근성 기법 제공
• 키보드, 스크린 리더, 터치 사용자용 빌드를 지원
• 법적 및 조직적 접근성 기준 준수를 지원

사용 방법

설치 단계

1. 다음 명령어로 에이전트나 프로젝트에 스킬을 추가하세요:

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

2. SKILL.md 파일에서 accessibility-compliance 기능과 워크플로우의 개요를 확인하세요.

3. 구현 세부사항은 다음 지원 파일을 검토하세요:

   • references/aria-patterns.md: React 예제와 함께하는 ARIA 역할, 상태, 속성
   • references/mobile-accessibility.md: 모바일 터치 타겟 크기, 간격, 스크린 리더 지원
   • references/wcag-guidelines.md: WCAG 2.2 원칙, 적합성 수준, 코드 샘플

프로젝트에 맞게 적용하기

• 제공된 패턴은 참고용이며 바로 적용 가능한 솔루션이 아닙니다. ARIA, 키보드 내비게이션, 모바일 접근성 기법을 코드베이스와 UI 프레임워크에 맞게 조정하세요.
• 특히 커스텀 컴포넌트나 폼을 만들 때 개발 워크플로우에 접근성 검사를 통합하세요.
• 실제 보조 기술(예: VoiceOver, TalkBack, NVDA)과 키보드 내비게이션으로 테스트하세요.

accessibility-compliance를 사용해야 할 때

• 접근성 문제를 감사하거나 수정할 때
• 포괄적 디자인으로 새로운 UI 컴포넌트를 만들 때
• 모바일과 데스크톱 접근성 일관성을 보장할 때
• 조직적 또는 법적 접근성 요구사항을 충족할 때

자주 묻는 질문

accessibility-compliance는 무엇을 다루나요?

이 스킬은 WCAG 2.2 가이드라인, ARIA 패턴, 키보드 내비게이션, 포커스 관리, 접근 가능한 폼, 모바일 터치 타겟, 스크린 리더 지원을 포함합니다. React 및 웹 프로젝트를 위한 코드 예제와 모범 사례를 제공합니다.

어디서부터 시작해야 하나요?

SKILL.md에서 개요를 확인한 후 references/ 폴더에서 상세한 패턴과 코드 샘플을 살펴보세요. 특히 references/aria-patterns.md와 references/mobile-accessibility.md 파일이 실무 구현에 유용합니다.

이 스킬은 React 전용인가요?

많은 예제가 React를 사용하지만, 원칙과 패턴은 모든 프론트엔드 프레임워크나 순수 HTML/JS 프로젝트에 적용할 수 있습니다.

이 스킬이 WCAG 준수를 보장하나요?

아니요. accessibility-compliance는 가이드와 패턴을 제공하지만, 반드시 상황에 맞게 조정하고 테스트해야 합니다. 실제 사용자와 보조 기술로 항상 검증하세요.

추가 자료는 어디서 찾을 수 있나요?

references/ 폴더에서 엄선된 가이드와 코드 샘플을 확인하세요. 전체 파일 목록은 Agent Skills Finder의 Files 탭에서 볼 수 있습니다.