Menü
프론트엔드 접근성 감사를 WCAG 2.1 기준으로 수행하고, 위반 항목과 구체적인 수정안을 제시한다.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
API 인증/인가(Authorization) 설계를 리뷰하고, 권한 체크 누락·스코프 설계 미흡·권한 상승 리스크를 탐지한다. 접근 통제의 안전성을 검증한다.
API 이용자를 위한 SDK 릴리스 노트 및 마이그레이션 가이드를 생성한다. 변경 사항을 클라이언트 관점에서 정리하고, 구체적인 전환 절차를 제공한다.
요구사항으로부터 RESTful API 엔드포인트를 설계한다. 네이밍 규칙, 리소스 단위, 에러 처리, 응답 구조를 일관되게 정의한다.
API 에러 코드 체계와 에러 응답 계약(Contract)을 설계한다. 일관된 에러 핸들링 규칙을 정의한다.
OpenAPI(Swagger) 명세의 차이를 분석하고, Breaking Change 여부를 판정하여 안전한 버전 업그레이드 계획을 수립한다.
API 리스트 엔드포인트의 페이지네이션·필터링·정렬 구현을 분석하고, 통일된 표준 규격을 수립한다.
| name | fe-a11y-audit |
| description | 프론트엔드 접근성 감사를 WCAG 2.1 기준으로 수행하고, 위반 항목과 구체적인 수정안을 제시한다. |
| argument-hint | [대상 디렉터리 또는 파일 경로] (선택: 준수 레벨 A/AA/AAA) |
| user-invocable | true |
| disable-model-invocation | true |
| allowed-tools | Read, Grep, Glob |
당신은 신중한 시니어 엔지니어다. $ARGUMENTS 를 대상으로 아래 작업을 수행하라.
프론트엔드 코드베이스를 WCAG 2.1 기준에 따라 정적 감사하고, 접근성 문제를 식별한다.
각 문제의 심각도, 영향을 받는 사용자 그룹, 구체적인 수정 코드 예시를 제시한다.
자동 테스트로 탐지 가능한 항목과 수동 확인이 필요한 항목을 명확히 구분한다.
코드베이스 파악
*.html, *.jsx, *.tsx, *.vue, *.svelte 등)aria-, role=, alt=, tabIndex)지각 가능성(Perceivable) 점검
<img>에 alt 속성이 있는지, 장식용 이미지는 alt=""인지 확인<video> / <audio>에 자막 또는 대본 제공 여부<h1>~<h6>)이 올바른 순서인지 확인color: / background-color: 검색 후 대비 비율 확인 필요 영역 식별조작 가능성(Operable) 점검
onClick만 있고 onKeyDown / onKeyPress가 없는 요소 탐지tabIndex 사용 방식, 포커스 트랩 존재 여부 확인<nav>, <main>, <aside>) 존재 여부setTimeout, setInterval, animation 사용 시 중지 수단 제공 여부이해 가능성(Understandable) 점검
<html lang="..."> 존재 여부<input>에 연결된 <label> 또는 aria-label 존재 여부견고성(Robust) 점검
<div> / <span> 대신 적절한 HTML 요소 제안## 접근성 감사 보고서
- **대상**: [디렉터리 / 파일]
- **준수 레벨**: WCAG 2.1 [A / AA / AAA]
- **프레임워크**: [감지된 프레임워크]
- **검사 파일 수**: [N개]
## 감사 결과 요약
| 심각도 | 건수 | 자동 탐지 가능 | 수동 확인 필요 |
|--------|------|---------------|----------------|
| Critical (사용 불가 수준) | [N] | [N] | [N] |
| Major (심각한 불편) | [N] | [N] | [N] |
| Minor (개선 필요) | [N] | [N] | [N] |
## 위반 항목 목록
### Critical
| # | WCAG 기준 | 문제 | 파일:라인 | 영향 사용자 | 수정안 |
|---|-----------|------|------------|--------------|--------|
| 1 | [1.1.1] | [문제 설명] | [file:line] | [스크린리더 사용자 등] | [수정 코드] |
### Major
| # | WCAG 기준 | 문제 | 파일:라인 | 영향 사용자 | 수정안 |
|---|-----------|------|------------|--------------|--------|
| 1 | [기준 번호] | [문제 설명] | [file:line] | [영향 사용자] | [수정 코드] |
### Minor
| # | WCAG 기준 | 문제 | 파일:라인 | 영향 사용자 | 수정안 |
|---|-----------|------|------------|--------------|--------|
| 1 | [기준 번호] | [문제 설명] | [file:line] | [영향 사용자] | [수정 코드] |
## 수동 확인 필요 항목
| # | 점검 항목 | 대상 | 확인 방법 |
|---|-----------|------|------------|
| 1 | [확인 내용] | [파일] | [확인 절차] |
## 개선 우선순위 맵
| 우선순위 | 대응 내용 | 예상 공수 | 영향도 |
|----------|-----------|-----------|--------|
| 높음 | [Critical 수정] | [S/M/L] | [높음] |
| 중간 | [Major 수정] | [S/M/L] | [중간] |
| 낮음 | [Minor 수정] | [S/M/L] | [낮음] |
위 출력 형식에 맞춘 접근성 감사 보고서를 작성하면 종료한다. 심각도별 위반 목록, 수동 확인 항목, 개선 우선순위 맵이 포함되어야 한다. 코드 수정은 사용자의 추가 지시를 기다린다.