접근성 감사

Webflow 페이지를 위한 포괄적인 WCAG 2.1 접근성 감사입니다. 상세한 문제 발견과 실행 가능한 수정 사항을 제공합니다.

중요 사항

항상 Webflow MCP 도구를 사용하여 모든 작업을 수행하세요:

시작하기 전에 Webflow MCP의 webflow_guide_tool을 사용하여 모범 사례를 확인하세요.
Webflow MCP의 data_sites_tool과 list_sites 액션을 사용하여 사용 가능한 사이트를 식별하세요.
Webflow MCP의 data_sites_tool과 get_site 액션을 사용하여 사이트 세부 정보를 검색하세요.
Webflow MCP의 data_pages_tool과 list_pages 액션을 사용하여 모든 페이지와 페이지 ID를 가져오세요.
Webflow MCP의 data_element_tool과 get_all_elements 액션을 사용하여(페이지 ID를 직접 전달) 상세 요소 정보를 가져오세요.
Webflow MCP의 data_element_tool과 set_attributes 액션을 사용하여 접근성 문제를 수정하세요.
Webflow MCP의 element_snapshot_tool을 사용하여 요소의 시각적 미리보기를 얻을 수 있습니다. 이는 디자이너 도구이며 사용 시 디자이너 연결이 필요합니다.
Webflow 작업에 다른 도구나 방법을 사용하지 마세요.
모든 도구 호출에는 필수 context 매개변수(15-25단어, 3인칭 관점)를 포함해야 합니다.
감사 또는 수정에 디자이너 연결이 필요하지 않습니다. data_element_tool은 list_pages의 모든 페이지 ID에서 헤드리스로 작동합니다. 디자이너는 선택적 시각적 미리보기를 위해 element_snapshot_tool을 사용하려는 경우에만 필요합니다.

지침

1단계: 사이트 및 페이지 선택

사이트 정보 가져오기: Webflow MCP의 data_sites_tool과 list_sites 액션을 사용하여 대상 사이트를 식별합니다.
페이지 선택 요청:
- 사용자가 페이지 ID를 제공하면 직접 사용합니다.
- 그렇지 않으면 data_pages_tool과 list_pages 액션을 사용하여 사용 가능한 페이지를 표시합니다.
- 사용자가 감사할 페이지를 선택하도록 합니다.
감사 범위 확인: 사용자에게 확인할 항목을 물어봅니다.
- 전체 감사 (모든 접근성 검사)
- 중요 문제만 (WCAG Level A)
- 특정 카테고리 (양식, 버튼, 탐색 등)

2단계: 요소 추출 및 분석

모든 요소 추출: data_element_tool과 get_all_elements 액션을 사용하여 대상 페이지의 ID를 전달하고 상세 분석을 수행합니다. 디자이너 연결이 필요하지 않습니다.
- include_style_properties: true로 설정하여 포커스 스타일을 확인합니다.
- include_all_breakpoint_styles: false로 설정하여 데이터를 최소화합니다.
요소 데이터 구문 분석: 대화형 및 콘텐츠 요소를 식별합니다.
- 버튼 (Button, LinkBlock with button role)
- 링크 (TextLink, Link, LinkBlock)
- 양식 입력 (Input, Select, Textarea)
- 제목 (Heading elements with levels)
- 대화형 div/span (onClick 또는 대화형 역할 확인)
- 이미지 (Image elements) - 이 감사에서는 건너뜁니다.
각 요소의 속성 추출:
- ARIA 속성 (aria-label, aria-describedby, role, tabIndex)
- DOM 속성 (id, domId, href, type, placeholder)
- 텍스트 콘텐츠
- 스타일 속성 (outline, border for focus states)
- 요소 메타데이터 (canHaveAttributes, tag name)

3단계: 접근성 검사

중요 문제 (반드시 수정 - WCAG Level A)

라벨이 없는 아이콘 전용 버튼 (WCAG 4.1.2)
- 찾기: 텍스트 콘텐츠가 없는 버튼 요소
- 확인: aria-label 또는 aria-labelledby 누락
- 영향: 스크린 리더가 버튼 목적을 식별할 수 없음
- 수정: 설명 텍스트로 aria-label 속성 추가
라벨이 없는 양식 입력 (WCAG 1.3.1)
- 찾기: Input, Select, Textarea 요소
- 확인: 연결된 label 또는 aria-label 누락
- 영향: 사용자가 입력 항목의 용도를 모름
- 수정: aria-label 추가 또는 id를 사용하여 <label>과 연결
의미 없는 클릭 핸들러 (WCAG 2.1.1)
- 찾기: Div 또는 Span 요소 (요소 유형으로 식별)
- 확인: 적절한 역할/키보드 지원 없는 대화형 동작
- 영향: 키보드로 접근 불가능, 스크린 리더가 대화형 기능을 놓침
- 수정: role="button", tabIndex="0" 추가, 실제 <button> 사용 권장
대상이 없는 링크 (WCAG 2.1.1)
- 찾기: href 속성이 없는 링크 요소
- 확인: href 없이 onClick만 사용하는 링크
- 영향: 키보드로 접근 불가능, 브라우저 기능이 손상됨
- 수정: 적절한 href 추가 또는 버튼으로 변환

심각 문제 (수정 권장 - WCAG Level AA)

대체 없이 포커스 아웃라인 제거 (WCAG 2.4.7)
- 찾기: outline: none 스타일이 있는 요소
- 확인: 표시 가능한 대체 포커스 표시기 없음
- 영향: 키보드 사용자가 포커스를 볼 수 없음
- 수정: 표시 가능한 포커스 스타일 추가 (border, box-shadow, background change)
키보드 핸들러 누락 (WCAG 2.1.1)
- 찾기: onClick 핸들러가 있는 요소
- 확인: Enter/Space 키에 대한 onKeyDown 누락
- 영향: 키보드만으로 사용 불가능
- 수정: 키보드 이벤트 핸들러 추가
터치 대상이 너무 작음 (WCAG 2.5.5)
- 찾기: 클릭 가능한 요소 (버튼, 링크)
- 확인: 너비 또는 높이가 44px 미만
- 영향: 모바일 기기에서 탭하기 어려움
- 수정: padding 또는 min-width/min-height를 44px로 증가

보통 문제 (수정 고려)

제목 계층 구조 문제 (WCAG 1.3.1)
- 찾기: 제목 요소 (h1-h6)
- 확인: 건너뛴 레벨 (h1 → h3, h2 생략)
- 영향: 혼란스러운 문서 구조
- 수정: 올바른 순차적 제목 레벨 사용
양수 tabIndex (WCAG 2.4.3)
- 찾기: tabIndex > 0인 요소
- 확인: 자연스러운 탭 순서를 방해함
- 영향: 혼란스러운 키보드 탐색
- 수정: tabIndex="0" 또는 "-1"만 사용, 자연스러운 DOM 순서 활용
필수 속성이 없는 역할 (WCAG 4.1.2)
- 찾기: ARIA 역할이 있는 요소
- 확인: 필수 ARIA 속성 누락 (예: tabIndex 없는 role="button")
- 영향: 불완전한 접근성 의미론
- 수정: 역할에 필요한 속성 추가

4단계: 문제 분류 및 점수 계산

모든 발견 사항 분류:
- 중요: 반드시 수정 (접근 차단)
- 심각: 수정 권장 (사용성에 상당한 영향)
- 보통: 수정 고려 (경험 개선)
접근성 점수 계산 (0-100):
- 100점에서 시작
- 중요 문제: 각 -10점
- 심각 문제: 각 -5점
- 보통 문제: 각 -2점
- 최소 점수: 0
심각도 요약 생성:
- 발견된 총 문제 수
- 심각도별 분류
- 가장 일반적인 문제 유형
- 가장 큰 영향을 받는 페이지/섹션

5단계: 보고서 생성

특정 형식의 상세 보고서 생성:

═══════════════════════════════════════════════════
접근성 감사: [페이지 이름]
═══════════════════════════════════════════════════

중요 (X개 문제)
───────────────────
[A11Y] 요소: 버튼 "제출"
  문제: 버튼에 접근 가능한 이름 없음
  위치: 양식 섹션, 요소 ID: {component: "abc", element: "xyz"}
  현재: <button><CloseIcon /></button>
  수정: aria-label="닫기" 추가
  WCAG: 4.1.2 이름, 역할, 값

[A11Y] 요소: 입력 필드
  문제: 라벨 없는 양식 입력
  위치: 연락처 양식, 요소 ID: {component: "def", element: "uvw"}
  현재: <input type="email" />
  수정: aria-label="이메일 주소" 추가 또는 <label>과 연결
  WCAG: 1.3.1 정보 및 관계

심각 (X개 문제)
──────────────────
[A11Y] 요소: 링크 "더 보기"
  문제: 표시 가능한 대체 없이 포커스 아웃라인 제거됨
  위치: 블로그 섹션
  현재: outline: none
  수정: 표시 가능한 포커스 스타일 추가 (예: border: 2px solid blue)
  WCAG: 2.4.7 포커스 표시

보통 (X개 문제)
───────────────────
[A11Y] 요소: 제목
  문제: 제목 계층 구조 건너뜀 (h1 → h3)
  위치: 기사 섹션
  현재: <h1>제목</h1> 다음에 <h3>하위 섹션</h3>
  수정: <h2>로 변경하거나 중간 h2 추가
  WCAG: 1.3.1 정보 및 관계

═══════════════════════════════════════════════════
요약
───────────────────────────────────────────────────
총 문제: X개
- 중요: X개 문제
- 심각: X개 문제
- 보통: X개 문제

접근성 점수: XX/100

가장 일반적인 문제:
1. [문제 유형] - X회 발생
2. [문제 유형] - X회 발생
3. [문제 유형] - X회 발생
═══════════════════════════════════════════════════

실행 가능한 인사이트 제공:
- 우선 순위가 지정된 수정 목록 (중요 문제 우선)
- 빠른 해결책 (큰 영향을 주는 쉬운 수정)
- 디자인 패턴 권장 사항
- 더 자세히 알아볼 수 있는 리소스

6단계: 수정 제안 및 승인 (선택 사항)

문제 자동 수정 제안: 수정에 디자이너가 필요하지 않으므로 자동 수정을 직접 제안합니다.

수정 미리보기 표시:

어떤 문제를 수정하시겠습니까?

[1] ✓ 제출 버튼에 aria-label 추가
    요소: 연락처 양식의 버튼
    수정: aria-label="연락처 양식 제출" 추가
    안전: 예 (속성만 추가)

[2] ✓ 이메일 입력에 aria-label 추가
    요소: 연락처 양식의 입력
    수정: aria-label="이메일 주소" 추가
    안전: 예

[3] ⚠️ 제목 계층 구조 수정
    요소: 기사 섹션의 h3
    수정: 제목 레벨을 h3에서 h2로 변경
    안전: 시각적 스타일에 영향을 줄 수 있음

건너뛸 번호를 입력하세요 (예: "3"), "all"은 모두, "none"은 취소

승인된 수정 적용: data_element_tool과 set_attributes 액션 사용
- 일괄 처리
- 큰 수정 세트의 진행 상황 표시
- 각각의 성공/실패 보고
수정 후 보고서 생성:
- 수정된 문제: X개
- 남은 문제: Y개
- 새로운 접근성 점수: XX/100 (YY/100에서 개선됨)

7단계: 내보내기 및 리소스 (선택 사항)

내보내기 형식 제공:
- Markdown (읽을 수 있는 문서)
- JSON (추적을 위한 기계 판독 가능)
- CSV (팀 검토를 위한 스프레드시트)
리소스 제공:
- WCAG 2.1 빠른 참조 링크
- Webflow 접근성 모범 사례
- 권장 테스트 도구 (브라우저 확장 프로그램, 스크린 리더)

중요 고려 사항

이 스킬이 확인하는 항목

✅ 버튼 접근성 (라벨, 역할) ✅ 양식 입력 라벨 및 연결 ✅ 링크 의미론 및 키보드 접근 ✅ 포커스 가시성 및 키보드 탐색 ✅ 제목 계층 구조 및 구조 ✅ ARIA 역할 및 속성 ✅ 터치 대상 크기 ✅ 대화형 요소 의미론

이 스킬이 확인하지 않는 항목

❌ 이미지 대체 텍스트 (대신 asset-audit 스킬 사용) ❌ 색상 대비 비율 (시각적 분석 필요) ❌ 애니메이션/모션 환경 설정 ❌ 스크린 리더 테스트 (수동 확인 필요) ❌ 콘텐츠 가독성 (언어 수준, 명확성)

제한 사항

시각적 전용 문제(색상 대비, 작은 텍스트)를 감지할 수 없음
실제 스크린 리더 동작을 테스트할 수 없음
콘텐츠 품질이나 명확성을 검증할 수 없음
요소 속성과 구조에만 의존함

예시

예시 1: 전체 페이지 감사

사용자 프롬프트:

내 홈페이지에 접근성 감사를 실행해줘

1단계: 사이트 및 페이지 선택

🔍 접근성 감사: 페이지 선택

홈페이지의 접근성 문제를 감사하는 데 도움을 드리겠습니다.

먼저 사이트 정보를 가져오겠습니다...

사용 가능한 사이트:
1. 회사 웹사이트
2. 포트폴리오 사이트

어떤 사이트인가요? (1/2)

사용자 응답: 1

2단계: 페이지 선택

회사 웹사이트의 사용 가능한 페이지:
1. 홈 (/)
2. 소개 (/about)
3. 연락처 (/contact)
4. 블로그 (/blog)

어떤 페이지를 감사하시겠습니까? (홈의 경우 1)

사용자 응답: 1

3단계: 감사 범위

어떤 수준의 감사를 원하십니까?

1. 전체 감사 (모든 WCAG 검사) - 권장
2. 중요 문제만 (Level A 준수)
3. 특정 카테고리 (버튼, 양식, 탐색)

선택: (1/2/3)

사용자 응답: 1

4단계: 감사 진행 상황

🔄 접근성 감사 실행 중...

진행 상황:
✅ 페이지 콘텐츠 추출 완료 (45개 요소)
✅ 버튼 및 대화형 요소 분석 중
✅ 양식 입력 및 라벨 확인 중
✅ 제목 계층 구조 검증 중
✅ 키보드 탐색 확인 중
🔄 포커스 상태 분석 중...

분석 완료!

5단계: 보고서

═══════════════════════════════════════════════════
접근성 감사: 홈
═══════════════════════════════════════════════════

중요 (3개 문제)
───────────────────
[A11Y] 요소: 버튼 (네비게이션 토글)
  문제: 아이콘 전용 버튼에 접근 가능한 이름 없음
  위치: 헤더 네비게이션
  요소 ID: {component: "nav-01", element: "btn-menu"}
  현재: <button><MenuIcon /></button>
  수정: aria-label="네비게이션 메뉴 열기" 추가
  WCAG: 4.1.2 이름, 역할, 값

[A11Y] 요소: 입력 (이메일 구독)
  문제: 라벨 없는 양식 입력
  위치: 푸터, 뉴스레터 가입
  요소 ID: {component: "footer-01", element: "email-input"}
  현재: <input type="email" placeholder="이메일 입력" />
  수정: aria-label="뉴스레터용 이메일 주소" 추가
  WCAG: 1.3.1 정보 및 관계

[A11Y] 요소: Div (클릭 가능한 카드)
  문제: 의미 없는 대화형 요소
  위치: 서비스 섹션, 카드 2
  요소 ID: {component: "services-01", element: "card-02"}
  현재: <div onClick={...}>서비스 카드</div>
  수정: <button>으로 변환하거나 role="button" + tabIndex="0" 추가
  WCAG: 2.1.1 키보드

심각 (5개 문제)
──────────────────
[A11Y] 요소: 링크 "더 알아보기"
  문제: 표시 가능한 대체 없이 포커스 아웃라인 제거됨
  위치: 히어로 섹션
  요소 ID: {component: "hero-01", element: "cta-link"}
  현재: outline: none
  수정: 포커스 스타일 추가 - border: 2px solid #0066cc 또는 box-shadow
  WCAG: 2.4.7 포커스 표시

[A11Y] 요소: 버튼 "구독"
  문제: 터치 대상이 너무 작음 (30px × 36px)
  위치: 푸터 뉴스레터 양식
  요소 ID: {component: "footer-01", element: "submit-btn"}
  현재: 작은 버튼
  수정: padding 증가 또는 min-height: 44px 설정
  WCAG: 2.5.5 대상 크기

[계속해서 3개의 심각 문제...]

보통 (4개 문제)
───────────────────
[A11Y] 요소: 제목 "서비스"
  문제: 제목 계층 구조 건너뜀 (h1 → h3)
  위치: 서비스 섹션
  요소 ID: {component: "services-01", element: "heading"}
  현재: <h1>서비스</h1> 다음에 <h3>서비스</h3>
  수정: <h2>로 변경하거나 중간 h2 추가
  WCAG: 1.3.1 정보 및 관계

[계속해서 3개의 보통 문제...]

═══════════════════════════════════════════════════
요약
───────────────────────────────────────────────────
총 문제: 12개
- 중요: 3개
- 심각: 5개
- 보통: 4개

접근성 점수: 47/100

가장 일반적인 문제:
1. 아이콘 전용 버튼에 라벨 없음 - 3회 발생
2. 포커스 아웃라인 제거됨 - 2회 발생
3. 제목 계층 구조 건너뜀 - 2회 발생
═══════════════════════════════════════════════════

6단계: 수정 제안

어떤 문제를 자동으로 수정하시겠습니까?

✓ 바로 수정 가능한 항목 (디자이너 불필요):
[1] 네비게이션 토글 버튼에 aria-label 추가
[2] 이메일 구독 입력에 aria-label 추가
[3] 서비스 카드에 role="button" 및 tabIndex="0" 추가
[4] "더보기" 링크에 포커스 스타일 추가

⚠️ 신중한 검토 필요:
[5] 서비스 섹션 제목 레벨 변경 (h1→h2)
[6] 구독 버튼 패딩 증가

수정할 번호를 입력하세요 (예: 1,2,3), "all"은 모두, "none"은 취소

사용자 응답: 1,2,4

7단계: 수정 적용

🔄 수정 적용 중...

✅ 네비게이션 토글 버튼에 aria-label 추가됨
✅ 이메일 구독 입력에 aria-label 추가됨
✅ "더보기" 링크에 포커스 스타일 추가됨

모든 선택된 수정 사항이 성공적으로 적용되었습니다!

8단계: 수정 후 보고서

═══════════════════════════════════════════════════
수정 후 접근성 감사: 홈
═══════════════════════════════════════════════════

수정된 문제: 3개
남은 문제: 9개

새로운 접근성 점수: 77/100 (이전 47/100에서 개선됨)

권장 다음 단계:
1. 나머지 중요 문제 수정 (서비스 카드)
2. 심각 문제 검토 (포커스, 터치 대상)
3. 보통 문제 검토 (제목 계층)
═══════════════════════════════════════════════════

예시 2: 중요 문제만 감사

사용자 프롬프트:

연락처 페이지의 중요 접근성 문제만 확인해줘

응답:

🔍 접근성 감사: 중요 문제만

사이트와 페이지를 선택해 주세요...

사용 가능한 사이트:
1. 회사 웹사이트
2. 포트폴리오 사이트

선택: 1

페이지:
1. 홈 (/)
2. 소개 (/about)
3. 연락처 (/contact)
4. 블로그 (/blog)

선택: 3

🔄 중요 문제 감사 중...

분석 완료! 중요 문제만 표시합니다:

중요 (2개 문제)
───────────────────
[A11Y] 요소: 버튼 (전송)
  문제: 버튼에 접근 가능한 이름 없음
  요소 ID: {component: "contact-01", element: "submit-btn"}
  현재: <button><SendIcon /></button>
  수정: aria-label="메시지 전송" 추가
  WCAG: 4.1.2

[A11Y] 요소: 입력 (메시지)
  문제: 라벨 없는 양식 입력
  요소 ID: {component: "contact-01", element: "message-input"}
  현재: <textarea placeholder="메시지를 입력하세요"></textarea>
  수정: aria-label="메시지" 추가
  WCAG: 1.3.1

이러한 중요 문제를 자동으로 수정하시겠습니까? (네/아니요)

예시 3: 특정 카테고리 감사 (버튼)

사용자 프롬프트:

내 사이트의 모든 버튼 접근성을 확인해줘

응답:

🔍 접근성 감사: 버튼

사이트와 페이지를 선택해 주세요...

사용 가능한 사이트:
1. 회사 웹사이트

페이지:
1. 홈 (/)
2. 소개 (/about)
3. 연락처 (/contact)

선택: all (모든 페이지)

🔄 모든 페이지의 버튼 접근성 감사 중...

페이지 1/3: 홈
✅ 버튼: "시작하기" - 통과
✅ 버튼: "문의하기" - 통과
❌ 버튼: 메뉴 토글 - aria-label 누락

페이지 2/3: 소개
✅ 버튼: "팀 보기" - 통과
✅ 버튼: "연락처" - 통과

페이지 3/3: 연락처
❌ 버튼: 전송 - aria-label 누락

요약:
총 버튼: 5개
통과: 3개
실패: 2개

버튼 접근성 점수: 60/100

자동 수정하시겠습니까? (네/아니요)

webflow/webflow-skills

webflow-skills란 무엇인가요?

즐겨 사용하는 AI에게 물어보기

문서

접근성 감사

중요 사항

지침

1단계: 사이트 및 페이지 선택

2단계: 요소 추출 및 분석

3단계: 접근성 검사

중요 문제 (반드시 수정 - WCAG Level A)

심각 문제 (수정 권장 - WCAG Level AA)

보통 문제 (수정 고려)

4단계: 문제 분류 및 점수 계산

5단계: 보고서 생성

6단계: 수정 제안 및 승인 (선택 사항)

7단계: 내보내기 및 리소스 (선택 사항)

중요 고려 사항

이 스킬이 확인하는 항목

이 스킬이 확인하지 않는 항목

제한 사항

예시

예시 1: 전체 페이지 감사

예시 2: 중요 문제만 감사

예시 3: 특정 카테고리 감사 (버튼)

관련 스킬

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me