WCAG 2.1 레퍼런스
Web Content Accessibility Guidelines — 웹 접근성 국제 표준. A → AA → AAA 순으로 요구 수준이 높아진다.
4대 원칙 (POUR)
1Perceivable· 인식 가능
정보와 UI 컴포넌트를 사용자가 인식할 수 있게 제공
2Operable· 운용 가능
UI 컴포넌트와 내비게이션을 운용할 수 있어야 함
3Understandable· 이해 가능
정보와 UI 동작을 이해할 수 있어야 함
4Robust· 견고성
보조 기술을 포함한 다양한 에이전트로 해석할 수 있어야 함
적합성 수준
Level A
최소 기준. 이 기준을 충족하지 못하면 일부 사용자가 콘텐츠에 전혀 접근할 수 없다.
| 기준 번호 | 제목 | 요구사항 |
|---|---|---|
| 1.1.1 | 텍스트 대체 | 모든 비텍스트 콘텐츠(이미지, 아이콘)에 alt 속성 제공 |
| 1.3.1 | 정보와 관계 | HTML 구조(heading, list, table)로 시각적 구조를 코드로 표현 |
| 2.1.1 | 키보드 접근 | 모든 기능을 키보드만으로 사용 가능 |
| 2.4.2 | 페이지 제목 | 각 페이지에 주제를 설명하는 고유한 title 제공 |
| 3.1.1 | 페이지 언어 | html[lang] 속성으로 문서 언어 명시 |
| 4.1.1 | 파싱 | HTML 마크업 오류 없음 (중복 ID, 잘못 닫힌 태그 등) |
| 4.1.2 | 이름·역할·값 | UI 컴포넌트의 role, aria-label, aria-expanded 등 상태 노출 |
Level AA
사실상의 표준. 대부분의 법규 및 기업 정책이 AA 준수를 요구한다. 이 프로젝트의 기준.
| 기준 번호 | 제목 | 요구사항 |
|---|---|---|
| 1.4.3 | 명도 대비 (텍스트) | 일반 텍스트 4.5:1, 큰 텍스트 3:1 이상 |
| 1.4.4 | 텍스트 크기 조절 | 200%까지 확대해도 콘텐츠·기능 유지 |
| 1.4.11 | 비텍스트 대비 | 아이콘·포커스 링·폼 테두리 등 UI 컴포넌트 3:1 이상 |
| 1.4.12 | 텍스트 간격 | 줄높이·자간·단어간격·단락간격 변경 시 기능 손실 없음 |
| 1.4.13 | 호버/포커스 콘텐츠 | 툴팁 등 hover·focus로 나타나는 콘텐츠를 닫거나 유지할 수 있어야 함 |
| 2.4.6 | 제목과 레이블 | 제목·레이블이 주제·목적을 설명해야 함 |
| 2.4.7 | 포커스 표시 | 키보드 포커스 시 시각적 인디케이터 제공 |
| 3.2.3 | 일관된 내비게이션 | 반복되는 네비게이션 순서 일관성 유지 |
| 3.3.1 | 오류 식별 | 입력 오류 시 어느 항목이 왜 잘못됐는지 텍스트로 설명 |
| 3.3.2 | 레이블 또는 지시사항 | 사용자 입력에 레이블이나 안내 지시사항 제공 |
Level AAA
최상위 기준. 모든 콘텐츠에 일괄 적용하기 어려우므로, 특정 상황에서 선택적으로 적용한다.
| 기준 번호 | 제목 | 요구사항 |
|---|---|---|
| 1.4.6 | 명도 대비 (강화) | 일반 텍스트 7:1, 큰 텍스트 4.5:1 이상 |
| 2.1.3 | 키보드 (예외 없음) | 모든 기능을 키보드로 사용. 경로 의존적 동작 포함 |
| 2.2.3 | 시간 제한 없음 | 시간 제한이 요구되지 않는 한 모든 기능에 시간 제한 없음 |
| 2.4.9 | 링크 목적 (링크만으로) | "자세히 보기" 같은 모호한 링크 텍스트 금지 |
| 3.1.3 | 이례적 단어 | 전문용어·은어·관용구에 정의 제공 |
| 3.3.6 | 오류 예방 (전체) | 모든 입력 폼에 검토·확인·취소 중 하나 이상 제공 |
전체 기준: W3C WCAG 2.1