accessibility-compliance

accessibility-compliance 스킬 개요

accessibility-compliance 스킬이 하는 일

accessibility-compliance 스킬은 웹과 모바일 UI 작업에서 바로 구현에 옮길 수 있는 접근성 가이드를 만들도록 에이전트를 돕습니다. 특히 WCAG 2.2, ARIA 사용, 키보드 접근, 스크린 리더 지원, 모바일 접근성에 강하게 초점을 맞춥니다. 단순히 일반적인 접근성 체크리스트를 작성하는 용도보다, 실제 인터페이스를 만들고 고치는 팀에 더 잘 맞습니다.

accessibility-compliance를 설치하면 잘 맞는 사용자

이 스킬은 다음과 같은 경우에 특히 적합합니다.

• accessibility-compliance for UX Audit가 필요한 UX 감사 담당자
• 컴포넌트의 접근성 이슈를 수정하는 프론트엔드 엔지니어
• 접근 가능한 상호작용 패턴을 정의해야 하는 디자인 시스템 팀
• form, dialog, menu 같은 인터랙티브 UI를 출시하는 제품 팀
• VoiceOver와 TalkBack을 고려한 가이드가 필요한 모바일 또는 크로스플랫폼 팀

해야 할 일이 “이 화면이나 컴포넌트를 구체적인 수정안과 함께 WCAG 준수에 더 가깝게 바꾸기”라면, 이 스킬은 막연한 디자인 프롬프트보다 훨씬 실무적입니다.

일반 프롬프트와 다른 점

accessibility-compliance skill의 핵심 가치는 막연한 원칙 설명이 아니라, 실제 접근성 구현 패턴 쪽으로 모델의 출력을 좁혀준다는 데 있습니다. 저장소에는 다음과 같은 집중도 높은 참고 자료가 포함되어 있습니다.

• references/wcag-guidelines.md
• references/aria-patterns.md
• references/mobile-accessibility.md

그래서 semantic HTML과 ARIA 중 무엇을 우선할지 판단하거나, 접근 가능한 form 구조를 잡거나, 키보드 동작을 개선하거나, 모바일의 터치 타겟 가이드를 점검하는 작업에 더 잘 맞습니다.

설치 전에 사용자가 가장 궁금해하는 점

accessibility-compliance install을 검토하는 대부분의 사용자는 보통 다음을 확인하고 싶어 합니다.

• 정책 문구가 아니라 실제 코드 수정 중심의 결과를 주는지
• 웹과 모바일 이슈를 모두 다루는지
• 감사 용도와 구현 용도를 모두 지원하는지
• 네이티브 시맨틱과 ARIA 사용에 대해 분명한 관점을 갖고 있는지
• UI 컴포넌트 리뷰 과정의 왕복 커뮤니케이션을 줄이는 데 도움이 되는지

이 기준으로 보면 이 스킬은 꽤 탄탄합니다. 가장 큰 차별점은 WCAG 개념, ARIA 패턴, 모바일 접근성을 한 패키지 안에서 실무적으로 폭넓게 다룬다는 점입니다.

잘 맞는 경우와 안 맞는 경우

잘 맞는 경우:

• 인터랙티브 컴포넌트 감사
• 기존 코드의 접근성 문제 수정
• dialog, accordion, form, navigation의 접근 가능한 동작 설계
• 포커스 순서, label, 안내 알림, reduced motion 지원 검토

안 맞는 경우:

• 특정 법역의 법적 준수 해석
• 자동 테스트 환경 구성 자체
• 접근성과 무관한 픽셀 단위의 시각 디자인 비평
• 참고 자료 범위를 넘어서는 플랫폼별 네이티브 API 심화 내용

accessibility-compliance 스킬 사용 방법

설치 맥락과 호출 방식

upstream SKILL.md에는 설치 명령이 따로 없어서, 디렉터리 사용자는 보통 저장소에서 직접 추가하게 됩니다.

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

그다음에는 단순히 “접근성 체크해줘”라고 하기보다, 구체적인 접근성 작업을 주는 방식으로 호출하는 것이 좋습니다. 이 스킬은 검토할 수 있을 만큼 구조가 드러난 컴포넌트, 플로우, 화면이 있을 때 가장 잘 작동합니다.

먼저 읽어야 할 파일

빠르게 도입하려면 다음 순서로 보세요.

1. plugins/ui-design/skills/accessibility-compliance/SKILL.md
2. plugins/ui-design/skills/accessibility-compliance/references/wcag-guidelines.md
3. plugins/ui-design/skills/accessibility-compliance/references/aria-patterns.md
4. plugins/ui-design/skills/accessibility-compliance/references/mobile-accessibility.md

이 순서는 실제 팀의 작업 흐름과도 비슷합니다. 먼저 준수 목표를 잡고, 그다음 구현 패턴을 보고, 마지막으로 플랫폼별 예외와 경계 조건을 확인하는 방식입니다.

accessibility-compliance가 잘 작동하려면 어떤 입력이 필요한가

accessibility-compliance usage의 품질은 입력의 구체성에 크게 좌우됩니다. 가능하면 아래 정보를 함께 주세요.

• 컴포넌트 또는 페이지 유형
• 현재 코드나 markup
• 프레임워크 (React, Next.js, Vue, plain HTML, React Native)
• 상호작용 방식
• 목표 기준, 보통 WCAG 2.2 AA
• 디바이스 범위: desktop web, mobile web, iOS, Android
• 감사 도구나 사용자 테스트에서 이미 확인된 이슈

약한 입력:

• “Make this accessible.”

강한 입력:

• “Review this React modal for WCAG 2.2 AA. Check keyboard trap behavior, focus return, accessible name/description, escape handling, and screen reader announcements. Suggest code changes before release.”

막연한 목표를 좋은 프롬프트로 바꾸는 법

좋은 accessibility-compliance guide 프롬프트는 보통 다섯 요소로 구성됩니다.

1. 대상 UI
2. 사용자 상호작용
3. 준수 목표
4. 원하는 산출물
5. 제약 조건

예시:

• “Use the accessibility-compliance skill to audit this checkout form for WCAG 2.2 AA. Identify failures by issue, explain user impact, and provide corrected JSX for labels, error messaging, field grouping, and keyboard flow. Keep the current visual design if possible.”

이 방식이 단순히 “best practices 알려줘”라고 묻는 것보다 낫습니다. 수정 가능한 형태의 결과를 강제로 끌어내기 때문입니다.

accessibility-compliance for UX Audit에 가장 잘 맞는 워크플로

accessibility-compliance for UX Audit에는 다음 순서를 추천합니다.

1. 이슈를 먼저 발견하게 한다
2. 심각도와 사용자 영향을 묻는다
3. 각 이슈에 대응하는 수정안을 요청한다
4. 수정된 markup 또는 컴포넌트 코드를 요청한다
5. 재검증 체크리스트를 요청한다

이 순서를 쓰면 첫 답변이 지나치게 개념적인 수준에 머무는 흔한 실패를 줄일 수 있습니다. 이 스킬은 감사 결과를 구현 세부사항으로 밀어붙일 때 가장 유용합니다.

페이지뿐 아니라 컴포넌트에 써야 강하다

이 스킬은 재사용 가능한 상호작용 패턴에 특히 강합니다. 좋은 대상은 다음과 같습니다.

• dialogs and focus traps
• accordions
• menus and disclosures
• forms and validation
• tabs
• carousels
• icon buttons
• mobile touch targets

바로 이런 지점에서 일반 프롬프트는 ARIA를 과하게 쓰거나, 키보드 동작과 스크린 리더 동작을 놓치는 경우가 많습니다.

참고 자료가 실무에서 의미하는 것

포함된 참고 자료를 보면 실무적으로 세 가지 운영 원칙이 드러납니다.

• ARIA를 추가하기 전에 semantic HTML을 우선한다
• 기본 기준선은 WCAG 2.2 AA로 본다
• 데스크톱 키보드 사용만이 아니라 모바일 접근성도 함께 고려한다

실전에서는 이 차이가 큽니다. 좋은 프롬프트라면 불필요한 ARIA를 최소화하고, 추가한 ARIA 속성의 이유를 설명하라고 명시하는 편이 좋습니다.

더 강한 출력을 위한 프롬프트 패턴

다음과 같은 요청 형식을 쓰면 좋습니다.

• Context: “This is a React checkout drawer.”
• Target: “Meet WCAG 2.2 AA.”
• Review scope: “Keyboard access, focus order, visible labels, error association, live region announcements.”
• Constraints: “Do not rewrite the design system API.”
• Deliverable: “Return prioritized issues, corrected JSX, and a manual test checklist.”

이 구조는 열린 형태의 리뷰 요청보다 일관되게 더 좋은 accessibility-compliance usage 결과를 만듭니다.

accessibility-compliance 출력에서 기대해야 할 것

좋은 accessibility-compliance skill 응답이라면 다음이 포함되어야 합니다.

• 사용자 영향과 연결된 이슈 목록
• 접근성 원칙 또는 기준에 대한 참조
• 구체적인 markup 또는 코드 수정안
• 키보드 및 포커스 동작 메모
• 스크린 리더의 이름 읽기와 알림 처리 가이드
• 해당되는 경우 모바일 전용 메모

출력이 원칙 설명만 하고 코드 수준의 수정으로 내려오지 않는다면, 프롬프트가 너무 넓다는 신호입니다.

accessibility-compliance 스킬 FAQ

accessibility-compliance는 입문자에게도 괜찮은가?

네, 기본적인 UI 구조를 알고 있다면 괜찮습니다. 다만 이 스킬은 markup, 컴포넌트, 감사 결과를 함께 줄 수 있을 때 가치가 더 커집니다. 입문자도 사용할 수는 있지만, 특정 시맨틱 선택이나 ARIA 선택이 왜 중요한지 후속 질문을 하게 될 가능성은 있습니다.

일반 접근성 프롬프트보다 더 나은가?

구현 작업이라면 대체로 그렇습니다. 일반 프롬프트는 “alt text를 추가하세요”, “키보드 내비게이션을 보장하세요” 같은 일반론으로 흐르기 쉽습니다. 반면 accessibility-compliance skill은 저장소 참고 자료에 있는 WCAG 2.2, ARIA 패턴, 모바일 접근성 관점에 더 단단히 고정된 답을 내놓을 가능성이 큽니다.

자동 접근성 테스트를 대체하나?

아니요. 자동화 도구와 수동 리뷰를 보완하는 용도입니다. 정적 도구가 자주 놓치는 포커스 관리, 알림 타이밍, 모바일 상호작용 세부사항 같은 부분을 해석하고 수정안을 제안하며 컴포넌트 동작을 검토하는 데 쓰는 것이 맞습니다.

언제 accessibility-compliance를 쓰지 말아야 하나?

다음이 필요하다면 다른 도구를 보는 편이 낫습니다.

• 법률 자문이나 인증 판단
• 코드베이스 전체를 대상으로 한 완전 자동 스캔
• 참고 패턴 범위를 넘어서는 네이티브 모바일 플랫폼 심화 사항
• 접근성과 무관한 UX 비평

이 스킬은 가이드를 제공하는 도구이지, 준수를 보증하는 도구는 아닙니다.

모바일 접근성도 잘 지원하나?

AI 스킬 기준으로는 꽤 괜찮은 편입니다. 전용 참고 파일인 mobile-accessibility.md에서 터치 타겟 크기, 간격, iOS와 Android의 스크린 리더 관련 사항을 다룹니다. 그래서 데스크톱 웹만 보는 접근성 프롬프트보다 모바일 리뷰에서 더 신뢰할 만합니다.

디자인 시스템 작업에도 쓸 수 있나?

네. 재사용 컴포넌트의 접근 가능한 기본값을 정의하는 데 잘 맞습니다. 특히 시맨틱, 키보드 처리, ARIA 상태, 포커스 관리가 여러 제품에서 일관되게 유지되어야 하는 상황에 유용합니다.

accessibility-compliance 스킬을 더 잘 활용하는 법

요약이 아니라 실제 산출물을 제공하라

accessibility-compliance 결과를 가장 빠르게 개선하는 방법은 실제 JSX, HTML, React Native 코드, 주석이 달린 스크린샷, 또는 단계별 상호작용 설명을 주는 것입니다. 막연한 제품 요약만으로는 포커스 순서, label, 알림 동작을 안정적으로 추론할 수 없습니다.

추천만 요구하지 말고 이슈 매핑을 요구하라

더 강한 요청 방식은 다음과 같습니다.

• “List each issue, affected users, violated principle or criterion, and exact fix.”

이렇게 해야 모델이 감사 가능한 형태의 출력을 내놓게 됩니다. 이런 구조가 없으면 답변이 일반적인 조언으로 흘러가기 쉽습니다.

어느 정도까지 바꿔도 되는지 명확히 알려라

접근성 수정은 종종 디자인 시스템 제약과 충돌합니다. 에이전트가 다음 중 어디까지 허용되는지 명시하세요.

• markup만 변경 가능
• 필요한 경우에만 ARIA 추가 가능
• 컴포넌트 계층 구조 재구성 가능
• 명확성을 위해 copy 수정 가능
• 현재 디자인이 접근 불가능하다면 상호작용 패턴 변경 가능

이 정보는 많은 사용자가 생각하는 것보다 결과 품질에 더 큰 영향을 줍니다.

흔한 실패 패턴: ARIA 과용

접근성 작업에서 반복적으로 나타나는 문제 중 하나는 네이티브 HTML로 충분한데도 ARIA를 덧붙이는 것입니다. 다음처럼 명시하면 결과가 좋아집니다.

• “Prefer native semantic elements and only use ARIA when native semantics are insufficient.”

이 지시는 저장소의 ARIA 참고 자료와도 맞고, 품질 낮은 수정안을 줄이는 데 도움이 됩니다.

흔한 실패 패턴: 상태 변화 누락

첫 답변은 label과 focus는 잡아도 동적 상태 변화를 놓치는 경우가 많습니다. 다음 항목을 구체적으로 요청하세요.

• focus entry and return
• expanded/collapsed state announcements
• validation error association
• async status messaging with live regions
• reduced motion and high contrast considerations where relevant

이런 세부사항이 accessibility-compliance guide의 실사용 가치를 크게 끌어올립니다.

첫 답변 뒤에 반드시 한 번 더 반복하라

초기 감사 후에는 다음 중 하나로 이어가면 좋습니다.

• “Rewrite the component with the fixes applied.”
• “Prioritize only release-blocking issues.”
• “Convert this into QA test steps.”
• “Explain what should be tested with screen readers.”
• “Separate WCAG AA requirements from nice-to-have AAA improvements.”

이 과정을 거치면 스킬이 단순 리뷰어에서 실제 전달물을 만드는 도우미로 바뀝니다.

저장소 참고 자료는 필요한 곳만 정확히 보라

처음부터 저장소 전체를 읽을 필요는 없습니다. 문제가 다음에 가깝다면:

• semantic structure 또는 conformance target: references/wcag-guidelines.md부터 시작
• widget behavior 또는 roles: references/aria-patterns.md 열기
• touch targets 또는 mobile AT: references/mobile-accessibility.md 열기

이런 식의 선택적 읽기 경로가 accessibility-compliance install과 실제 도입 속도를 높여줍니다.

근거 설명을 요청해 신뢰도를 높여라

각 수정안이 왜 중요한지, 키보드 사용자, 스크린 리더 사용자, 저시력 사용자, 모션 민감 사용자 관점에서 설명해 달라고 요청하세요. 이렇게 하면 피상적인 수정안을 걸러낼 수 있고, 리뷰 과정에서 구현 작업의 필요성을 팀 내에 설명하기도 쉬워집니다.

프로덕션 준비 수준의 결과를 얻는 가장 좋은 방법

가장 가치 높은 accessibility-compliance usage를 원한다면, 한 번에 아래 항목 전체를 요청하세요.

• 우선순위가 매겨진 발견 사항
• 수정된 코드
• 근거 설명
• 수동 검증 체크리스트
• 남아 있는 위험 요소 또는 가정

대부분의 팀이 실제로 필요한 것은 바로 이 패키지입니다. “접근성을 개선해야 한다”는 단계에서 “지금 구현하고 검증할 수 있다”는 단계로 넘어가게 해주기 때문입니다.