---
title: WCAG 2.2 신규 성공 기준 9개
source: https://www.w3.org/WAI/WCAG22/quickref/
fetched: 2026-05-18
category: wcag22
---

# WCAG 2.2 신규 성공 기준 (2023년 10월 W3C 권고)

WCAG 2.2는 WCAG 2.1에 9개의 신규 Success Criteria(SC)를 추가했다. 아래는 각 SC의 레벨, 핵심 요건, 영향받는 컴포넌트 패턴을 정리한다.

---

## 2.4.11 Focus Not Obscured (Minimum)
**레벨: AA**

**요약:** 키보드 포커스를 받은 컴포넌트가 다른 콘텐츠에 완전히 가려지면 안 된다.

**영향받는 패턴:**
- Sticky header / sticky footer 내부에 포함된 인터랙티브 요소
- Fixed position modal backdrop 뒤로 숨겨지는 요소
- z-index 문제로 포커스 링이 가려지는 custom dropdown, tooltip

**실전 체크:**
- `position: sticky` 헤더 높이만큼 `scroll-margin-top` 설정
- 모달 열릴 때 focus trap 적용하여 모달 외부 요소가 포커스 안 받도록 처리

---

## 2.4.12 Focus Not Obscured (Enhanced)
**레벨: AAA**

**요약:** 포커스 인디케이터가 최소한의 겹침도 없이 완전히 보여야 한다. (2.4.11의 강화 버전)

**영향받는 패턴:**
- 2.4.11과 동일하나 더 엄격: 부분적 가려짐도 불허
- 팝오버, 드롭다운, 툴팁이 포커스 요소 위를 부분적으로라도 덮는 경우

---

## 2.4.13 Focus Appearance
**레벨: AA**

**요약:** 포커스 인디케이터는 최소 크기, 색상 대비, 시각적 구분 기준을 만족해야 한다.

**요건:**
- 포커스 인디케이터 둘레: 컴포넌트 경계의 최소 CSS 둘레 길이만큼의 영역
- 색상 대비: 포커스 전후 색상 차이 3:1 이상

**영향받는 패턴:**
- `outline: none` 으로 포커스 링 제거한 모든 컴포넌트
- 커스텀 버튼, 링크, 입력 필드의 `:focus-visible` 스타일
- 브라우저 기본 outline을 덮어쓰는 컴포넌트 라이브러리

**실전 체크:**
```css
/* 최소 요건 충족 예시 */
:focus-visible {
  outline: 2px solid #005FCC;
  outline-offset: 2px;
}
```

---

## 2.5.7 Dragging Movements
**레벨: AA**

**요약:** 드래그 제스처가 필요한 모든 기능은 단일 포인터(클릭/탭)로 대체 가능해야 한다.

**영향받는 패턴:**
- Drag-and-drop 파일 업로드 → 클릭으로 파일 선택 버튼 필요
- 정렬 가능한 리스트(sortable list) → 키보드/버튼 기반 순서 변경 제공
- 슬라이더(range input) → 키보드 방향키로 값 조정 가능해야 함
- Carousel / 이미지 스와이프 → 이전/다음 버튼 필수

---

## 2.5.8 Target Size (Minimum)
**레벨: AA**

**요약:** 포인터 입력 대상(터치/클릭 영역)은 최소 24×24 CSS px 이상이어야 한다.

**예외:** 대상 간격이 24px 이상이거나, 인라인 텍스트 링크, 브라우저 기본 컨트롤은 예외

**영향받는 패턴:**
- 아이콘 버튼 (닫기, 좋아요, 공유) — padding으로 터치 영역 확보 필요
- 체크박스, 라디오 버튼의 실제 클릭 영역
- 테이블 내 액션 버튼, 태그 삭제 버튼

**실전 체크:**
```css
/* 아이콘 버튼 터치 영역 확보 */
.icon-btn {
  min-width: 24px;
  min-height: 24px;
  padding: 8px; /* 시각적 크기와 터치 영역 분리 */
}
```

---

## 3.2.6 Consistent Help
**레벨: A**

**요약:** 도움말 메커니즘(고객센터 링크, 챗봇, FAQ 등)은 같은 유형의 페이지 내에서 일관된 위치에 제공해야 한다.

**영향받는 패턴:**
- 글로벌 네비게이션 내 고객센터/도움말 링크
- 페이지마다 위치가 달라지는 채팅 위젯
- 온보딩 툴팁 버튼의 비일관적 배치

**실전 체크:** 도움말 관련 UI 요소의 위치를 공통 레이아웃 컴포넌트로 고정

---

## 3.3.7 Redundant Entry
**레벨: A**

**요약:** 같은 세션 내 이전에 입력한 정보를 다시 입력하도록 요구하면 안 된다.

**영향받는 패턴:**
- 멀티 스텝 폼 (배송지 → 청구지 주소 동일 여부)
- 회원가입 후 바로 로그인 정보 재입력 요구
- 이메일 확인을 위한 이메일 재입력 필드

**실전 체크:**
- 이전 단계 값 자동 채우기 or "이전과 동일" 체크박스 제공
- 확인용 재입력이 꼭 필요하면 허용되나 최소화

---

## 3.3.8 Accessible Authentication (Minimum)
**레벨: AA**

**요약:** 인증 과정에서 인지 기능 테스트(퍼즐, 기억, 계산)에만 의존하면 안 된다.

**허용 예외:** 사용자 제공 오브젝트 인식, 비비음문자(non-text) CAPTCHA에 대체 수단 제공

**영향받는 패턴:**
- 텍스트 기반 CAPTCHA → 오디오 CAPTCHA 또는 이미지 CAPTCHA 대안 필요
- 복잡한 보안 질문만으로 구성된 로그인
- OTP/매직링크 대안 없이 복잡한 패스워드 규칙만 강제

**실전 체크:**
- 패스워드 매니저 지원 (`autocomplete` 속성 적절히 설정)
- 생체인증, 매직링크, 소셜 로그인 등 대안 제공

---

## 3.3.9 Accessible Authentication (Enhanced)
**레벨: AAA**

**요약:** 3.3.8보다 강화된 요건 — 인지 기능 테스트를 완전히 배제해야 한다. 오브젝트 인식 예외도 불허.

**영향받는 패턴:**
- 3.3.8과 동일하나 이미지 선택 CAPTCHA도 불허
- 완전히 패스워드리스(passwordless) 인증 또는 완전 대체 수단 필요

---

## 체크리스트 요약

| SC | 레벨 | 핵심 포인트 |
|----|------|------------|
| 2.4.11 | AA | 포커스 완전 가려짐 금지 |
| 2.4.12 | AAA | 포커스 부분 가려짐도 금지 |
| 2.4.13 | AA | 포커스 인디케이터 크기·대비 기준 |
| 2.5.7 | AA | 드래그 → 단일 포인터 대안 필수 |
| 2.5.8 | AA | 터치 타겟 최소 24×24px |
| 3.2.6 | A | 도움말 위치 일관성 |
| 3.3.7 | A | 이전 입력 재입력 금지 |
| 3.3.8 | AA | 인증 인지 테스트 대안 필수 |
| 3.3.9 | AAA | 인증 인지 테스트 완전 배제 |
