liminfoWCAG Accessibility Reference
WCAG 2.2 접근성 기준 인터랙티브 체크리스트
WCAG Accessibility Reference 소개
이 WCAG 접근성 레퍼런스는 웹 콘텐츠 접근성 가이드라인(WCAG) 2.1 성공 기준을 인지, 조작, 이해, 견고의 4대 기본 원칙으로 구성한 체계적이고 검색 가능한 가이드입니다. 각 항목은 기준 번호, 적합성 레벨(A, AA, AAA), 쉬운 언어의 설명, 실제 웹 프로젝트에서 각 요구사항을 구현하는 방법을 보여주는 실용적인 HTML/ARIA 코드 예제를 포함합니다.
인지 섹션은 이미지의 대체 텍스트(1.1.1, alt 속성, SVG용 aria-label), 비디오 동기화 자막(1.2.2), 시맨틱 HTML을 통한 프로그래밍 구조(1.3.1), AA 레벨에서 일반 텍스트 최소 4.5:1 및 큰 텍스트 3:1 명도 대비(1.4.3), AAA 레벨에서 7:1 향상 대비(1.4.6), UI 컴포넌트 비텍스트 대비(1.4.11), 텍스트 간격 적응성(1.4.12)을 다룹니다. 조작 섹션은 키보드 접근성(2.1.1), 키보드 트랩 없음(2.1.2), 시간 제어(2.2.1), 깜빡임 임계값(2.3.1), 건너뛰기 탐색(2.4.1), 포커스 표시(2.4.7), 제스처 대안(2.5.1)을 다룹니다.
이해 섹션은 페이지 언어 선언(3.1.1), 포커스 시 예상치 못한 변경 없음(3.2.1), aria-invalid와 role="alert"를 사용한 오류 식별(3.3.1), 입력 레이블과 안내(3.3.2), 법적/금융 제출의 오류 방지(3.3.4)를 문서화합니다. 견고 섹션은 ARIA 속성을 사용한 커스텀 UI 컴포넌트의 이름/역할/값(4.1.2)과 aria-live 영역을 사용한 상태 메시지(4.1.3)를 다룹니다. 웹 개발자, QA 엔지니어, UX 디자이너, WCAG 준수를 위해 일하는 프로젝트 매니저에게 필수적인 레퍼런스입니다.
주요 기능
- 인지, 조작, 이해, 견고 4대 WCAG 원칙 전체 수록(기준 번호 및 적합성 레벨 포함)
- AA(텍스트 4.5:1, UI 3:1)와 AAA(텍스트 7:1) 레벨의 명도 대비 요구사항과 실질적 측정 안내
- 키보드 접근성 기준: 완전한 키보드 조작(2.1.1), 트랩 없음(2.1.2), 포커스 표시(2.4.7), 건너뛰기 링크(2.4.1)
- ARIA 구현 예제: aria-label, aria-invalid, aria-describedby, aria-live, role="alert", role="progressbar"
- 폼 접근성 패턴: role="alert"를 사용한 오류 식별, 레이블 연결, 오류 방지 워크플로
- 미디어 접근성: track 요소를 사용한 비디오 자막, SVG 및 이미지 포함 비텍스트 콘텐츠의 대체 텍스트
- 시간 및 모션 기준: 조절 가능한 시간 제한(2.2.1), 깜빡임 임계값(2.3.1), prefers-reduced-motion 지원
- 접근성 감사 중 빠른 조회를 위한 기준 번호, 키워드, 원칙 카테고리별 검색
자주 묻는 질문
WCAG Level A, AA, AAA의 차이는 무엇인가요?
Level A는 충족해야 하는 필수 요구사항(예: 대체 텍스트, 키보드 접근)이 포함된 최소 적합성 레벨입니다. Level AA는 대부분의 웹사이트의 표준 목표로 A 요구사항에 4.5:1 대비 비율, 포커스 표시 등 향상된 기준이 추가됩니다. Level AAA는 7:1 대비 비율 등 더 엄격한 요구사항의 최고 레벨이지만 전체 사이트에서 완전한 AAA 적합성 달성은 현실적으로 어렵습니다. 대부분의 법적 요구사항과 조직 정책은 Level AA를 목표로 합니다.
텍스트가 WCAG를 준수하려면 어떤 대비 비율이 필요한가요?
WCAG AA: 일반 텍스트(18pt 미만 또는 14pt 볼드 미만)는 최소 4.5:1, 큰 텍스트(18pt 이상 또는 14pt 볼드 이상)는 최소 3:1이 필요합니다. AAA: 일반 텍스트 7:1, 큰 텍스트 4.5:1이 필요합니다. 비텍스트 UI 컴포넌트(버튼, 입력 테두리, 아이콘)는 AA 레벨에서 배경과 3:1이 필요합니다(기준 1.4.11). 브라우저 개발자 도구나 대비 검사 도구를 사용하여 배경색 대비 비율을 측정하세요.
ARIA로 커스텀 컴포넌트를 접근성 있게 만들려면?
WCAG 4.1.2(이름, 역할, 값)를 따르세요: 모든 인터랙티브 요소에 이름(aria-label 또는 보이는 레이블), 역할(네이티브 HTML 요소는 암묵적 역할을 가지며, role="button", role="progressbar" 등 사용), 동적 값(aria-valuenow, aria-expanded, aria-checked)을 노출하세요. 커스텀 위젯의 경우 tabindex로 포커스를 관리하고, 키보드 이벤트(Enter, Space, 화살표 키)를 처리하며, aria-live 영역으로 상태 변경을 알려주세요.
건너뛰기 탐색 링크란 무엇이며 어떻게 구현하나요?
건너뛰기 탐색 링크(WCAG 2.4.1)는 키보드 사용자가 헤더와 내비게이션 메뉴 같은 반복 콘텐츠 블록을 건너뛰고 메인 콘텐츠로 바로 이동할 수 있게 합니다. 첫 번째 포커스 가능한 요소로 <a href="#main" class="skip-link">본문으로 건너뛰기</a>를 배치하고 <main id="main">으로 페이지 콘텐츠를 감쌉니다. 포커스될 때까지 시각적으로 숨기고 :focus 시 보이게 스타일링하세요.
폼 오류를 올바르게 식별하고 알리려면?
WCAG 3.3.1: 잘못된 필드에 aria-invalid="true"를 표시하고 aria-describedby로 오류 메시지 요소를 연결합니다. 오류 메시지 컨테이너에 role="alert" 또는 aria-live="assertive"를 사용하여 스크린 리더가 즉시 알려주게 합니다. WCAG 3.3.2에서는 항상 <label for="fieldId">로 보이는 레이블과 도움이 되는 플레이스홀더 텍스트나 안내를 제공하세요. 3.3.4에서는 중요한 제출에 확인 단계와 실행 취소 기능을 제공합니다.
키보드 접근성이 왜 중요하며 "키보드 트랩 없음"은 무엇인가요?
키보드 접근성(2.1.1)은 많은 사용자가 마우스를 사용할 수 없기 때문에 중요합니다: 스크린 리더 사용자, 운동 장애가 있는 사람, 키보드 탐색을 선호하는 파워 유저 등. 모든 인터랙티브 요소는 Tab으로 도달 가능하고 Enter/Space로 활성화 가능해야 합니다. "키보드 트랩 없음"(2.1.2)은 Tab/Escape로 빠져나올 수 없는 컴포넌트에 사용자가 갇히면 안 된다는 뜻입니다. 모달이 가장 흔한 키보드 트랩이므로 항상 Escape 키 핸들러를 구현하고 닫을 때 트리거 요소로 포커스를 반환하세요.
prefers-reduced-motion 미디어 쿼리를 접근성을 위해 어떻게 처리하나요?
WCAG 2.3.1은 초당 3회 이상 깜빡이는 콘텐츠를 금지합니다. 그 외에도 전정기관 장애가 있는 많은 사용자가 애니메이션에서 불편함을 느낍니다. CSS에서 @media (prefers-reduced-motion: reduce)를 사용하여 불필요한 애니메이션, 트랜지션, 자동 재생 콘텐츠를 비활성화하거나 최소화하세요. JavaScript에서는 window.matchMedia("(prefers-reduced-motion: reduce)").matches를 확인하여 조건부로 애니메이션을 건너뛰세요.
aria-live란 무엇이며 "polite"와 "assertive"는 언제 사용하나요?
aria-live는 스크린 리더가 콘텐츠 변경을 모니터링하는 라이브 영역을 만듭니다. aria-live="polite"는 스크린 리더가 현재 작업을 마친 후 알려야 하는 긴급하지 않은 업데이트에 사용합니다(예: "로딩 완료", 검색 결과 수). aria-live="assertive"(또는 role="alert")는 사용자를 즉시 중단시키는 긴급 메시지에 사용합니다(예: 폼 유효성 검사 오류, 세션 타임아웃 경고). assertive 남용은 사용자 경험을 방해하므로 WCAG 4.1.3에 따라 대부분의 상태 업데이트에는 polite를 사용하세요.