접근성 (WCAG 2.2)은(는) 무엇을 하나요?
이 스킬은 디지털 인터페이스가 스크린 리더, 스위치 제어 또는 키보드 탐색을 사용하는 모든 사용자에게 지각 가능, 작동 가능, 이해 가능, 견고(POUR)하도록 보장합니다. WCAG 2.2 성공 기준의 기술적 구현에 중점을 둡니다.
사용 시기
- 웹, iOS 또는 Android용 UI 컴포넌트 사양 정의.
- 기존 코드에서 접근성 장벽 또는 준수 격차 감사.
- 대상 크기(최소) 및 포커스 모양과 같은 새로운 WCAG 2.2 표준 구현.
- 하이레벨 디자인 요구사항을 기술적 속성(ARIA 역할, 특성, 힌트)으로 매핑.
핵심 개념
- POUR 원칙: WCAG의 기초(지각 가능, 작동 가능, 이해 가능, 견고).
- 의미론적 매핑: 일반 컨테이너보다 네이티브 요소를 사용하여 내장된 접근성 제공.
- 접근성 트리: 보조 기술이 실제로 "읽는" UI의 표현.
- 포커스 관리: 키보드/스크린 리더 커서의 순서와 가시성 제어.
- 레이블링 및 힌트:
aria-label,accessibilityLabel,contentDescription을 통해 컨텍스트 제공.
작동 방식
1단계: 컴포넌트 역할 식별
기능적 목적을 결정합니다(예: 버튼인가, 링크인가, 탭인가?). 사용자 정의 역할을 사용하기 전에 가장 의미론적인 네이티브 요소를 사용합니다.
2단계: 지각 가능 속성 정의
- 텍스트 명암비가 4.5:1(일반) 또는 3:1(큰/UI)을 충족하는지 확인.
- 비텍스트 콘텐츠(이미지, 아이콘)에 텍스트 대안 추가.
- 기능 손실 없이 최대 400% 확대까지 반응형 리플로우 구현.
3단계: 작동 가능한 컨트롤 구현
- 최소 24x24 CSS 픽셀 대상 크기 보장(WCAG 2.2 SC 2.5.8).
- 모든 대화형 요소가 키보드로 도달 가능하고 가시적 포커스 표시기가 있는지 확인(SC 2.4.11).
- 드래그 동작에 대한 단일 포인터 대안 제공.
4단계: 이해 가능한 로직 보장
- 일관된 탐색 패턴 사용.
- 수정 제안과 함께 설명적인 오류 메시지 제공(SC 3.3.3).
- 동일한 데이터를 두 번 요청하지 않도록 "중복 입력"(SC 3.3.7) 구현.
5단계: 견고한 호환성 확인
- 올바른
이름, 역할, 값패턴 사용. - 동적 상태 업데이트를 위한
aria-live또는 라이브 리전 구현.
접근성 아키텍처 다이어그램
flowchart TD
UI["UI 컴포넌트"] --> Platform{플랫폼?}
Platform -->|웹| ARIA["WAI-ARIA + HTML5"]
Platform -->|iOS| SwiftUI["접근성 특성 + 레이블"]
Platform -->|Android| Compose["시맨틱스 + 콘텐츠 설명"]
ARIA --> AT["보조 기술 (스크린 리더, 스위치)"]
SwiftUI --> AT
Compose --> AT
플랫폼 간 매핑
| 기능 | 웹 (HTML/ARIA) | iOS (SwiftUI) | Android (Compose) |
|---|---|---|---|
| 기본 레이블 | aria-label / <label> | .accessibilityLabel() | contentDescription |
| 보조 힌트 | aria-describedby | .accessibilityHint() | Modifier.semantics { stateDescription = ... } |
| 동작 역할 | role="button" | .accessibilityAddTraits(.isButton) | Modifier.semantics { role = Role.Button } |
| 실시간 업데이트 | aria-live="polite" | .accessibilityLiveRegion(.polite) | Modifier.semantics { liveRegion = LiveRegionMode.Polite } |
예제
웹: 접근 가능한 검색
<form role="search">
<label for="search-input" class="sr-only">제품 검색</label>
<input type="search" id="search-input" placeholder="검색..." />
<button type="submit" aria-label="검색 제출">
<svg aria-hidden="true">...</svg>
</button>
</form>
iOS: 접근 가능한 동작 버튼
Button(action: deleteItem) {
Image(systemName: "trash")
}
.accessibilityLabel(\