A

accessibility

작성자 affaan-m

accessibility 스킬은 Web, iOS, Android에서 WCAG 2.2 AA 수준에 맞는 접근 가능한 UI를 설계, 구현, 감사할 수 있도록 돕습니다. 컴포넌트의 역할, 레이블, 상태, 포커스 동작, 접근성 특성을 매핑하는 데 활용할 수 있으며, UX Audit 작업과 구현 검토에 바로 쓸 수 있는 실무형 접근성 가이드를 제공합니다.

Stars156k
즐겨찾기0
댓글0
추가됨2026년 4월 15일
카테고리UX Audit
설치 명령어
npx skills add affaan-m/everything-claude-code --skill accessibility
큐레이션 점수

이 스킬의 점수는 78/100으로, Agent Skills Finder에 올릴 만한 탄탄한 후보입니다. 디렉터리 사용자는 WCAG 2.2 AA 기준의 설계, 구현, 감사 작업을 위해 명확하게 호출할 수 있는 접근성 워크플로를 얻을 수 있으며, 단순한 프롬프트를 넘어 실제로 유용한 수준의 운영 지침도 포함되어 있습니다. 다만 설치 판단을 더 쉽게 해 줄 채택 보조 요소는 아직 부족합니다.

78/100
강점
  • 웹, iOS, Android 접근성 작업에 대한 명확한 사용 사례가 있으며, 감사와 구현까지 포함함
  • WCAG 2.2, POUR, 시맨틱 매핑, 포커스 관리, 레이블링/힌트에 대한 운영 관점이 잘 잡혀 있음
  • 헤딩과 단계별 워크플로 콘텐츠를 갖춘 충분한 SKILL.md 본문으로, 에이전트가 실행하기 쉬움
주의점
  • 설치 명령이나 지원 파일이 없어, 사용자가 SKILL.md만 보고 설정과 통합 방식을 추론해야 함
  • 저장소 증거에 자리표시자 마커가 있고 reference/resources 계층이 없어, 엣지 케이스와 심화 도입에 대한 신뢰가 제한됨
개요

접근성 skill 개요

accessibility skill이 하는 일

accessibility skill은 WCAG 2.2 AA 수준에 맞게 접근 가능한 UI를 설계하고, 구현하고, 점검하는 데 도움을 줍니다. 제품 의도를 실제 의미 구조로 바꾸는 데 초점이 있으며, Web, iOS, Android에서 네이티브 요소, ARIA 역할, 라벨, 힌트, 포커스 동작, 플랫폼별 접근성 특성을 구체적으로 정리하도록 돕습니다.

이 accessibility skill을 설치해야 하는 사람

이 accessibility skill은 일반적인 접근성 체크리스트보다 구현 가능한 지침이 필요한 프론트엔드 엔지니어, 디자인 시스템 팀, UX 감사 담당자, 제품 디자이너에게 가장 잘 맞습니다. 특히 UX Audit 업무에서 접근성 작업을 할 때, “이 흐름은 위험해 보인다”는 수준에서 끝내지 않고 구체적인 수정안으로 옮겨가야 할 때 유용합니다.

어떤 일을 완료하는 데 도움이 되는가

이 skill의 실제 목적은 단순히 “규정을 맞추는 것”이 아닙니다. 보조 기술 사용자가 올바른 역할, 이름, 상태, 순서, 상호작용 모델을 받도록 컴포넌트나 플로우를 접근성 트리에 정확히 매핑하는 것입니다. 이 skill은 광범위한 정책 요약보다 의미 구조 매핑, 포커스 관리, 라벨링, 그리고 POUR 원칙을 더 강하게 강조합니다.

일반 프롬프트보다 이것을 선택하는 이유

일반 프롬프트는 접근성 조언을 너무 막연하게 내놓는 경우가 많습니다. 이 skill은 다음과 같은 구조적 판단이 필요할 때 더 유용합니다. 먼저 컴포넌트의 역할을 식별하고, 네이티브 의미 구조를 우선한 뒤, 라벨, 상태, 키보드 동작, 포커스 처리 방식을 정의하는 식입니다. 이렇게 해야 구현 검토와 감사에서 접근성 적용을 더 실행 가능하게 다룰 수 있습니다.

accessibility skill 사용 방법

설치 컨텍스트와 먼저 읽을 내용

skills 워크플로를 통해 이 skill을 설치한 다음, 먼저 skills/accessibility/SKILL.md를 여세요. 이 skill에는 추가 스크립트나 참고 파일이 없어서, 실제로 도움이 되는 지침은 거의 모두 이 한 문서에 들어 있습니다. 아래 섹션을 순서대로 읽는 것이 좋습니다.

  1. When to Use
  2. Core Concepts
  3. How It Works
  4. 컴포넌트 역할 식별 단계

이건 설정 부담이 적은 가벼운 접근성 설치입니다. 다만 부족한 제품 맥락은 직접 채워 넣어야 합니다.

accessibility skill이 필요한 입력값

accessibility skill은 다음 정보를 제공할 때 가장 효과적입니다.

  • 플랫폼: Web, iOS, Android
  • 컴포넌트 또는 플로우: 버튼, 모달, 폼, 탭, 메뉴, 캐러셀 등
  • 사용자 목표: 사용자가 무엇을 하려는지
  • 현재 구현: HTML, JSX, SwiftUI/UIKit, Jetpack Compose/View XML, 또는 스크린샷과 동작 메모
  • 제약 조건: 디자인 시스템 제한, 레거시 마크업, 서드파티 위젯
  • 감사 대상: WCAG 2.2 AA, 키보드 지원, 스크린 리더 동작, 포커스 순서, 터치 타깃 크기, 이름/상태 문제 등

약한 입력: “이걸 접근 가능하게 만들어 주세요.”
강한 입력: “이 React 모달을 WCAG 2.2 AA 기준으로 점검해 주세요. 의미 역할, 접근 가능한 이름, 포커스 트랩, Escape 동작, 초기 포커스, 복귀 포커스, 스크린 리더 안내를 확인하고, 수정된 JSX를 제안해 주세요.”

대략적인 목표를 강한 프롬프트로 바꾸는 법

accessibility skill을 더 잘 활용하려면 아래와 같은 프롬프트 형태가 좋습니다.

  • UI 역할을 식별하고, 현재 요소를 네이티브 요소로 대체해야 하는지 판단한다.
  • 기대되는 접근성 트리를 설명한다.
  • 필요한 라벨, 역할, 상태, 값, 힌트 정보를 나열한다.
  • 키보드와 포커스 동작을 정의한다.
  • WCAG 2.2 AA 위험 요소를 표시한다.
  • 수정된 코드와 짧은 감사 요약을 함께 반환한다.

예시:
“Web의 커스텀 드롭다운을 검토할 때 accessibility skill을 사용해 주세요. 먼저 이 요소가 네이티브 select, 버튼 + listbox, 또는 다른 패턴 중 무엇이어야 하는지 판단해 주세요. 그다음 예상되는 ARIA, 키보드 상호작용, 포커스 이동, 보이는 포커스 요구사항, 타깃 크기 문제, 수정된 코드를 제시해 주세요.”

감사와 구현을 위한 권장 워크플로

UX Audit용 accessibility 작업은 흐름 단위에서 시작한 뒤 컴포넌트로 내려가세요.

  1. 작업과 실패 위험을 명명한다
  2. 각 상호작용 요소의 실제 역할을 식별한다
  3. 네이티브 의미 구조 대안을 먼저 확인한다
  4. 라벨, 이름, 값, 상태를 검증한다
  5. 키보드 순서와 포커스 가시성을 검토한다
  6. 스크린 리더 안내를 개념적으로 점검한다
  7. 수정 코드나 명세를 요청한다

감사가 아니라 구현이 목적이라면, 설명식 조언만 받지 말고 엔지니어링과 QA에 바로 넘길 수 있는 수용 기준을 요청하세요.

accessibility skill FAQ

이 accessibility skill은 초보자에게도 괜찮은가?

네, 기본적인 UI 구현을 이미 알고 있다면 괜찮습니다. 이 skill은 핵심 접근성 개념을 비교적 쉽게 설명하지만, WCAG 전체를 배우는 초급 과정은 아닙니다. 혼자 공부하는 자료라기보다, 구현을 돕는 가이드로 보는 편이 맞습니다.

접근성 install 결정을 내리기에 충분한가?

대체로 그렇습니다. 이 skill은 범위가 분명하고, 워크플로가 구체적이며, 실무적인 기술 초점이 뚜렷합니다. 다만 패키징의 깊이는 아쉽습니다. 함께 쓸 예제, 테스트 스크립트, 플랫폼별 참조 파일은 없습니다. 재사용 가능한 자료가 많이 필요하면 다소 간결하게 느껴질 수 있지만, 빠른 안내가 목적이라면 도입하기 쉽습니다.

일반적인 accessibility 프롬프트와 뭐가 다른가?

차이는 프레이밍에 있습니다. 이 accessibility 가이드는 역할 식별, 의미 구조 매핑, 접근성 트리 관점, 라벨, 포커스 관리에 초점을 둡니다. 일반 프롬프트는 ARIA 속성으로 바로 뛰어들기 쉬운데, 그러면 과한 설계나 잘못된 패턴으로 이어질 수 있습니다.

언제 이 skill을 쓰지 말아야 하나?

법적 승인, 복잡한 보조 기술 호환성 테스트, 매우 특수한 네이티브 플랫폼 엣지 케이스를 이 accessibility skill 하나에만 의존해서는 안 됩니다. 이 skill은 실사용 기기, 스크린 리더, 키보드 전용 워크플로로 하는 수동 테스트를 대체하기보다, 설계와 코드 판단에 더 강합니다.

accessibility skill 개선 방법

코드 조각만 주지 말고 UI 맥락을 더 풍부하게 제공하기

품질을 가장 크게 좌우하는 것은 맥락입니다. 사용자 작업, 컨트롤이 상태를 바꾸는지 아니면 이동을 일으키는지, 화면에 무엇이 보이는지, 현재 무엇이 깨지는지를 함께 넣으세요. 접근성 권장은 마크업만이 아니라 동작에 달려 있습니다. div 하나도 여러 패턴을 나타낼 수 있으니, 의도한 상호작용을 명확히 정의할수록 skill의 결과가 좋아집니다.

ARIA를 묻기 전에 패턴 선택을 먼저 요청하기

흔한 실패는 잘못된 컴포넌트에 ARIA를 억지로 덧씌우는 것입니다. accessibility 출력 품질을 높이려면 “이건 실제로 어떤 패턴인가?”를 먼저 물어보세요. 예를 들어 수정 전에 네이티브 버튼, 링크, disclosure, 탭, 대화상자, listbox 중 무엇이 맞는지 판단해 달라고 요청하세요. 이렇게 하면 불필요한 커스텀 위젯을 줄일 수 있습니다.

구현 가능한 섹션으로 결과를 요청하기

accessibility skill을 더 잘 활용하려면 응답 형식을 구조화해 달라고 하세요.

  • 발견된 문제
  • 사용자 영향
  • WCAG 2.2 관련 쟁점
  • 권장 의미 구조 패턴
  • 정확한 코드 변경
  • 테스트 단계

이 형식은 하나의 긴 설명문보다 엔지니어링, QA, 디자인 시스템 담당자에게 넘기기 좋습니다.

실제 실패 증거를 반영해 반복 개선하기

첫 결과를 받은 뒤에는 스크린 리더 안내 문구, 키보드 트랩, 보이는 포커스 누락, 터치 타깃 측정값처럼 구체적인 내용을 다시 넣어 개선하세요. 이 skill은 일회성 준수 점검으로 쓰기보다, UX Audit 결과를 바탕으로 반복 보완하는 루프로 사용할 때 훨씬 강력해집니다.

평점 및 리뷰

아직 평점이 없습니다
리뷰 남기기
이 스킬의 평점과 리뷰를 남기려면 로그인하세요.
G
0/10000
최신 리뷰
저장 중...