WCAG — 정의, Web Content Accessibility Guidelines 및 AA 수준

WCAG란?

WCAG(Web Content Accessibility Guidelines)는 장애가 있는 사람들이 웹 콘텐츠에 접근할 수 있도록 보장하는 권장 사항 세트입니다. 이 표준은 1999년부터 W3C Web Accessibility Initiative(WAI)에서 개발해 왔습니다. WCAG는 시각 장애인, 청각 장애인, 운동 제한이 있는 사람, 언어 및 인지 장애가 있는 사람, 그리고 연령 관련 변화가 있는 노인 사용자를 포함합니다.

첫 번째 버전 WCAG 1.0은 1999년에 출시되었으며 14개의 지침 원칙을 포함했습니다. WCAG 2.0(2008년)은 기술 중립적이 되어 HTML, PDF, 멀티미디어 및 모바일 애플리케이션에 적용 가능해졌습니다. WCAG 2.1(2018년)은 모바일 기기 및 터치 입력에 대한 기준을 추가했습니다. WCAG 2.2(2023년)는 애니메이션 및 포커스에 대한 새로운 기준을 갖춘 현재 버전입니다. WCAG는 법률은 아니지만 많은 국가에서 법률로 참조하고 있습니다.

GOST R 52872-2019(러시아), European Accessibility Act(EU), Section 508(미국) — 모두 WCAG AA 준수를 요구합니다. 기업 및 정부 웹사이트의 경우 WCAG AA는 필수 표준이며, 준수하지 않으면 소송으로 이어집니다. UsableNet(2024)에 따르면 미국에서 12,000건 이상의 웹 접근성 소송이 제기되었습니다.

WCAG 버전 비교

미준수 시 법적 결과

WCAG를 준수하지 않으면 심각한 위험이 따릅니다. 2025년 European Accessibility Act(EAA)가 발효되어 EU 내 모든 공공 웹사이트 및 모바일 애플리케이션에 WCAG 2.1 AA를 요구하고 있습니다. 벌금은 회사 연간 매출의 5%까지 달할 수 있습니다. 미국 소송의 평균 합의 금액은 $25,000~$50,000입니다. 접근성 감사는 출시 전뿐만 아니라 개발의 모든 단계에서 수행해야 합니다.

WCAG의 네 가지 원칙: POUR

POUR는 네 가지 WCAG 원칙의 약어입니다: Perceivable(인지 가능), Operable(운용 가능), Understandable(이해 가능), Robust(견고). 각 원칙에는 지침이 포함되어 있으며, 지침에는 테스트 가능한 성공 기준이 포함되어 있습니다. WCAG 2.2에는 13개의 지침과 86개의 성공 기준이 있습니다. 각 기준에는 수준 A, AA 또는 AAA가 있습니다.

Perceivable — 인지 가능

Perceivable 원칙은 사용자가 인지할 수 있는 형태로 콘텐츠를 제공해야 한다고 요구합니다. 지침: 1.1 Text Alternatives(텍스트 대안), 1.2 Time-based Media(자막, 대본), 1.3 Adaptable(형식 변경 시 손실 없는 콘텐츠), 1.4 Distinguishable(대비 4.5:1, 색상, 소리). 주요 기준 1.4.3 Contrast Minimum(AA)은 가장 자주 위반되며, WebAIM에 따르면 86%의 페이지가 이를 준수하지 않습니다.

Operable — 운용 가능

Operable 원칙은 인터페이스의 운용 가능성을 요구합니다. 지침: 2.1 Keyboard Accessible, 2.2 Enough Time, 2.3 Seizures, 2.4 Navigable, 2.5 Input Modalities. 기준 2.1.1 Keyboard(A)는 가장 중요한 기준 중 하나입니다: 모든 기능이 마우스 없이 키보드로 접근 가능해야 합니다. 클릭으로만 닫히는 모달 창, 키보드 탐색이 없는 드롭다운 — 전형적인 위반 사례입니다.

Understandable — 이해 가능

Understandable 원칙은 콘텐츠와 인터페이스의 이해 가능성을 요구합니다. 지침: 3.1 Readable, 3.2 Predictable, 3.3 Input Assistance. 기준 3.3.4 Error Prevention은 금융 및 의료 애플리케이션에 특히 중요합니다: 입력 오류의 심각한 결과를 방지합니다. 기준 3.2.6 Consistent Help(WCAG 2.2의 새로운 기능)는 도움말 버튼이 동일한 위치에 있어야 한다고 요구합니다.

Robust — 견고

Robust 원칙은 보조 기술과의 호환성을 요구합니다. 지침 4.1 Compatible, 주요 기준 4.1.2 Name, Role, Value(A): 각 UI 구성 요소는 프로그래밍 방식으로 결정 가능한 이름, 역할 및 상태를 가져야 합니다. ARIA 속성(role, aria-label, aria-expanded)이 주요 도구입니다. 이것들이 없으면 스크린 리더는 요소가 버튼, 링크 또는 탭인지 확인할 수 없습니다.

WCAG 원칙 표

WCAG 적합성 수준: A, AA, AAA

WCAG는 세 가지 수준을 정의합니다: A(최소), AA(표준) 및 AAA(최대). 수준 A는 필수 최소 수준입니다: 이것이 없으면 일부 사용자 범주가 콘텐츠에 접근할 수 없습니다. AA는 주요 접근성 장벽을 제거합니다. AAA는 가장 높은 표준이지만 모든 콘텐츠에 대해 달성할 수 있는 것은 아닙니다(예: 일부 수화 또는 오디오 대본이 항상 실현 가능한 것은 아닙니다).

수준 A(30개 기준): 텍스트 대안, 키보드 운용성, 충분한 시간, 3Hz 이상의 깜박임 없음. 수준 AA(+24개 기준): 대비율 4.5:1, 비디오 자막, 텍스트 크기 200%까지, 명확한 키보드 포커스. 수준 AAA(+32개 기준): 대비율 7:1, 수화, 애니메이션 비활성화(2.3.3), 오디오 대본. 정부 웹사이트의 경우 AA면 충분합니다.

WCAG 감사 프로세스

WCAG 접근성 감사에는 다음이 포함됩니다: 자동 테스트(axe DevTools, WAVE, Lighthouse — 30~40%의 오류 발견), 수동 키보드 및 스크린 리더 테스트(VoiceOver, TalkBack, NVDA), 복잡한 기준에 대한 전문가 감사 및 장애가 있는 사용자와의 사용자 테스트. 감사 보고서에는 적합성 수준과 각 기준에 대한 부적합 목록이 포함되어야 합니다.

WCAG 2.2의 새로운 기능

WCAG 2.2는 9개의 새로운 기준을 추가했습니다. 주요 기준: 2.4.11 Focus Appearance(AA) — 3:1 대비로 2px 이상의 포커스 표시기, 2.5.8 Target Size Minimum(AA) — 최소 24x24픽셀 터치 대상, 3.3.7 Accessible Authentication(AA) — CAPTCHA 없는 인증. 기준 2.3.3 Animation from Interactions(AAA) — 비활성화 가능한 애니메이션 또는 5초 이하.

Focus Appearance는 가장 중요한 변경 사항입니다. 이전에는 대체 없이 outline: none이 위반이었지만 명확한 요구 사항은 없었습니다. WCAG 2.2는 다음을 규정했습니다: 두께 >= 2px, 배경과의 대비 3:1, 표시기 영역이 최소한 요소 영역 이상. border-radius가 있는 사용자 정의 버튼의 경우 outline 대신 box-shadow를 사용하세요.

CSS의 Focus Appearance

/* WCAG 2.2 Focus Appearance (2.4.11 AA) */
:focus-visible {
    outline: 3px solid #0066CC;
    outline-offset: 2px;
}

.button:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px #FFFFFF,
        0 0 0 6px #0066CC;
}

@media (prefers-color-scheme: dark) {
    :focus-visible { outline-color: #66B2FF; }
}

@media (prefers-contrast: more) {
    :focus-visible { outline: 4px solid #000; outline-offset: 3px; }
}

:focus-visible 스타일링은 Focus Appearance 기준 준수를 보장합니다. box-shadow를 통한 대안은 border-radius가 있는 요소에 적합합니다. 다크 테마와 High Contrast는 포커스 색상을 조정합니다.

Accessible Authentication

기준 3.3.7 Accessible Authentication(AA)는 가장 논란이 많은 새로운 기능 중 하나입니다. 객체 인식 CAPTCHA, 퍼즐, 슬라이더 드래그 — 대안이 없으면 위반입니다. 허용되는 방법: 이메일/SMS를 통한 OTP, 생체 인증(Face ID, Touch ID), QR 코드, 매직 링크. 이는 인지 장애가 있는 사람들뿐만 아니라 모든 사용자의 삶을 더 편리하게 만듭니다.

모바일 애플리케이션용 WCAG

WCAG는 네이티브 iOS 및 Android 애플리케이션에 적용됩니다. 네 가지 POUR 원칙이 모바일 인터페이스를 완전히 포괄합니다. 특정 기준: 2.5.1 Pointer Gestures(높은 정밀도가 필요 없는 제스처), 2.5.2 Pointer Cancellation(실수로 터치한 경우 취소), 2.5.3 Label in Name(버튼 텍스트가 접근성 레이블과 일치). iOS는 UIKit/UIAccessibility를 사용하고, Android는 AccessibilityService와 ContentDescription을 사용합니다.

모바일 애플리케이션에서 가장 자주 위반되는 사항: 1.1.1 Non-text Content — contentDescription이 없는 아이콘, 2.4.3 Focus Order — 잘못된 탐색 순서, 2.5.8 Target Size — 24x24dp보다 작은 버튼, 1.4.3 Contrast — 배경 이미지의 텍스트. iOS는 Xcode에서 Accessibility Inspector를 제공하고, Android는 자동 감사를 위한 Accessibility Scanner를 제공합니다.

WCAG 준수 SwiftUI 코드

import SwiftUI

struct AccessibleButton: View {
    let action: () -> Void
    let title: String
    let icon: String

    var body: some View {
        Button(action: action) {
            HStack {
                Image(systemName: icon)
                Text(title)
            }
            .padding(16)
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(12)
            .frame(minWidth: 48, minHeight: 48)
        }
        .accessibilityLabel(title)
        .accessibilityHint("작업을 위해 클릭")
        .accessibilityAddTraits(.isButton)
    }
}

struct AccessibleForm: View {
    @State private var email = ""

    var body: some View {
        VStack(spacing: 16) {
            VStack(alignment: .leading) {
                Text("이메일")
                TextField("이메일 입력", text: $email)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .autocapitalization(.none)
                    .accessibilityLabel("이메일 입력 필드")
                    .accessibilityHint("이메일 주소 입력")
            }
            AccessibleButton(
                action: { },
                title: "보내기",
                icon: "paperplane.fill"
            )
        }
        .padding()
    }
}

accessibilityLabel, accessibilityHint 및 minWidth/minHeight >= 48pt가 있는 SwiftUI 구성 요소는 WCAG 2.5.8(Target Size) 및 2.5.3(Label in Name) 준수를 보장합니다. Xcode Accessibility Inspector를 사용하여 VoiceOver 포커스, 탐색 순서 및 터치 대상 크기를 확인하세요. 유사한 요구 사항이 Modifier.semantics를 통해 Jetpack Compose에도 적용됩니다.