인식 가능
사용자가 정보를 알아차릴 수 있어야 합니다. 이미지에는 대체 텍스트가 필요하고, 영상에는 자막이나 설명이 필요할 수 있습니다.
웹 콘텐츠 접근성의 국제 기준입니다.
WCAG는 웹 콘텐츠를 더 많은 사람이 인식하고, 조작하고, 이해하고, 안정적으로 사용할 수 있도록 정리한 국제 기준입니다. 기준 문장을 외우기보다, 어떤 불편을 줄이기 위한 말인지 먼저 이해하는 것이 중요합니다.
WCAG를 읽는 기본 구조
WCAG는 네 가지 원칙에서 출발합니다. 각 원칙 아래에 지침이 있고, 실제 검토에는 성공 기준을 사용합니다.
운용 가능
사용자가 기능을 조작할 수 있어야 합니다. 마우스만이 아니라 키보드로도 메뉴, 버튼, 입력폼을 사용할 수 있어야 합니다.
이해 가능
사용자가 화면과 문장을 이해할 수 있어야 합니다. 버튼 이름, 오류 안내, 화면 흐름이 예측 가능해야 합니다.
견고성
브라우저, 기기, 보조기술이 바뀌어도 콘텐츠가 안정적으로 해석되어야 합니다. 이름, 역할, 상태가 코드로도 전달되어야 합니다.
실무에서 자주 만나는 용어
기준을 함께 읽을 때 자주 나오는 말을 먼저 이해하면 회의와 검토가 쉬워집니다.
지침
큰 목표입니다. 예를 들어 “키보드로 접근 가능해야 한다”처럼 어떤 방향을 지켜야 하는지 알려줍니다.
성공 기준
검토할 수 있는 문장입니다. 실제 점검에서는 이 기준을 보고 통과 여부와 개선 방향을 판단합니다.
준수 수준 A, AA, AAA
기준의 요구 수준을 나누는 방식입니다. 실무에서는 보통 A와 AA를 먼저 확인하는 경우가 많습니다.
보조기술 호환
화면낭독기나 키보드 조작 같은 도구가 화면의 구조와 상태를 이해할 수 있도록 만드는 일입니다.
- WCAG 원문은 기술 표준 문서이기 때문에 처음 읽으면 어렵게 느껴질 수 있습니다. 이 페이지는 기준의 뜻을 먼저 이해하도록 돕는 안내입니다.
- 정확한 원문 확인이 필요할 때는 W3C WAI 공식 기준을 함께 확인합니다.
화면을 볼 때 확인할 질문
WCAG를 실제 화면에 적용할 때는 아래 질문으로 먼저 확인합니다.
이미지 없이도 의미가 전달되나요?
중요한 이미지는 대체 텍스트나 본문 설명으로 같은 정보를 전달해야 합니다.
키보드만으로 이동할 수 있나요?
메뉴, 링크, 버튼, 입력폼을 키보드로 순서대로 이동하고 실행할 수 있어야 합니다.
초점 위치가 분명히 보이나요?
현재 선택된 위치가 굵은 테두리나 배경 변화처럼 색상 외의 방식으로도 구분되어야 합니다.
오류를 이해하고 고칠 수 있나요?
입력 오류가 있을 때 문제 항목과 수정 방법을 함께 안내해야 합니다.
WCAG 2.2 지침별 보기
WCAG 2.2는 4개 원칙 아래 13개 지침으로 구성됩니다. 각 지침 페이지에서 뜻과 해당 성공 기준을 함께 봅니다.
이 영역은 WCAG 2.2의 지침과 성공 기준을 중심으로 정리한 자료입니다.
1.1 텍스트 대체
이미지, 아이콘, 그래프처럼 텍스트가 아닌 콘텐츠도 같은 목적을 이해할 수 있게 텍스트 대안을 제공합니다.
텍스트 대체 보기1.2 시간 기반 미디어
영상과 음성처럼 시간에 따라 재생되는 콘텐츠에 자막, 대본, 음성 설명 등 필요한 대체 수단을 제공합니다.
시간 기반 미디어 보기1.3 적응 가능
화면 배치가 바뀌거나 보조기술로 읽어도 정보의 구조와 순서가 유지되도록 만듭니다.
적응 가능 보기1.4 명확한 구분
사용자가 내용을 더 쉽게 보고 들을 수 있도록 색상, 대비, 글자 크기, 소리, 간격을 조정합니다.
명확한 구분 보기2.1 키보드 접근 가능
마우스 없이 키보드만으로도 모든 주요 기능을 사용할 수 있게 합니다.
키보드 접근 가능 보기2.2 충분한 시간
시간 제한이나 자동 재생 때문에 사용자가 내용을 읽거나 기능을 쓰지 못하는 일이 없게 합니다.
충분한 시간 보기2.3 발작과 신체 반응 예방
깜빡임이나 번쩍임, 강한 움직임이 사용자의 신체 반응을 유발하지 않도록 제한합니다.
발작과 신체 반응 예방 보기2.4 탐색 가능
사용자가 현재 위치와 이동 경로를 이해하고 필요한 정보로 쉽게 이동할 수 있게 합니다.
탐색 가능 보기2.5 입력 방식
터치, 포인터, 동작 기반 입력을 사용하는 사람도 기능을 안정적으로 조작할 수 있게 합니다.
입력 방식 보기3.1 읽기 가능
사용자가 페이지의 언어와 문장을 이해할 수 있도록 언어 정보를 제공합니다.
읽기 가능 보기3.2 예측 가능
사용자가 예상하지 못한 이동이나 실행이 갑자기 일어나지 않도록 화면 흐름을 일관되게 유지합니다.
예측 가능 보기3.3 입력 도움
사용자가 입력 과정에서 오류를 찾고 이해하고 수정할 수 있게 돕습니다.
입력 도움 보기4.1 호환 가능
브라우저와 보조기술이 화면 요소의 이름, 역할, 상태를 안정적으로 해석할 수 있게 합니다.
호환 가능 보기