Skip to Content
AccessibilityWCAG 2.1 / 2.2 체크리스트

WCAG 2.1 / 2.2 체크리스트

기준: W3C WCAG 2.1 (2018) + WCAG 2.2 추가 기준 (2023)
범위: 컴포넌트 라이브러리 코드 레벨 점검 (Level A + Level AA)

원칙 1 — 인식의 용이성 (Perceivable)

1.1 대체 텍스트

#기준레벨점검 방법자동화규칙
1.1.1모든 비텍스트 콘텐츠(이미지, 아이콘, 차트)에 목적을 설명하는 대체 텍스트 제공A<img alt="..."> 존재 여부, 장식 이미지 alt="" 여부🤖A001
1.1.1장식 이미지는 alt=""로 AT 무시 처리Aalt 값이 의미 없는 파일명/URL인지 확인👁—
1.1.1CSS background-image로만 의미 전달 금지A정보 전달 배경 이미지에 대체 텍스트 없음 확인👁—
1.1.1아이콘 전용 버튼에 aria-label 또는 sr-only 텍스트 제공Aicon-only button 점검🤖A003
1.1.1aria-hidden="true" 컨테이너 내부에 sr-only 텍스트 배치 금지 — AT 접근성 트리에서 제거됨Aaria-hidden 내 sr-only 패턴 점검🤖A009

1.2 시간 기반 미디어

#기준레벨점검 방법자동화
1.2.1오디오 전용/비디오 전용 콘텐츠에 대안 제공A플레이어 컴포넌트 점검👁
1.2.2동영상에 자막(CC) 제공Avideo 태그 track 요소 확인👁
1.2.4라이브 오디오에 자막 제공AA—👁
1.2.5동영상에 화면 해설 제공AA—👁

1.3 적응 가능한 콘텐츠

#기준레벨점검 방법자동화규칙
1.3.1정보·구조·관계가 프로그래밍 방식으로 파악 가능 (시맨틱 HTML, label 연결, 표 구조)Asemantic 태그, label/input 연결, th scope🤖A004
1.3.2콘텐츠 읽기 순서가 논리적ADOM 순서 = 시각적 순서 확인👁—
1.3.3모양·색상·위치·방향만으로 콘텐츠 식별 금지A”오른쪽 버튼을 클릭” 같은 표현 확인👁—
1.3.4콘텐츠 방향 제한 금지 (세로/가로 고정 금지)AACSS orientation 미디어 쿼리 확인👁—
1.3.5입력 목적 식별 가능 (autocomplete 속성)AAform input에 autocomplete 속성 여부👁—

1.4 구별 가능한 콘텐츠

#기준레벨점검 방법자동화규칙
1.4.1색상만으로 정보 전달 금지A에러 상태, 링크, 그래프가 색상 외 구분 수단 있는지👁—
1.4.2오디오 자동 재생 제어 가능A자동 재생 오디오 정지/음소거 버튼 확인👁—
1.4.3텍스트 대비율 최소 4.5:1 (18px 미만 일반 텍스트)AALighthouse / axe 색상 대비 점검👁—
1.4.3대형 텍스트(18pt 이상 또는 14pt 굵게) 대비율 3:1 이상AA토큰 값 기반 계산👁—
1.4.4텍스트를 200%까지 확대 가능, 기능 손실 없음AA브라우저 200% 확대 테스트👁—
1.4.5이미지 대신 텍스트 사용 우선AA텍스트 정보를 이미지로만 제공하는 경우 확인👁—
1.4.10320px 너비에서 가로 스크롤 없이 리플로우 가능AA320px viewport 테스트👁—
1.4.11UI 컴포넌트·그래픽 대비율 3:1 이상AA버튼 테두리, 입력 필드 테두리, 아이콘👁—
1.4.12텍스트 간격 조정 시 콘텐츠 손실 없음AAletter-spacing, line-height 변경 테스트👁—
1.4.13hover/focus로 나타나는 콘텐츠: 가리기 가능·고정·지속AAtooltip, popover 동작 확인👁—

원칙 2 — 운용의 용이성 (Operable)

2.1 키보드 접근성

#기준레벨점검 방법자동화규칙
2.1.1모든 기능을 키보드로 사용 가능ATab/Enter/Space/Arrow keys로 전체 기능 테스트🤖+👁A010
2.1.1div/span/li 등 비인터랙티브 요소에 onClick 단독 사용 금지 — role 없으면 키보드 접근 불가AonClick + 비인터랙티브 요소 패턴 점검🤖A016
2.1.1↳ 예외 — 팝업 닫기 backdrop 오버레이(fixed inset-0)는 aria-hidden="true" 추가 + 팝업 내 닫기 버튼 또는 ESC 키 대안 제공Abackdrop 패턴 점검🤖+👁A016
2.1.2키보드 포커스 갇힘 없음Amodal, dialog, dropdown에서 Escape 및 Tab 이탈 확인👁—
2.1.4단일 키 단축키 비활성화 또는 재설정 가능A단일 문자 단축키 사용 시 비활성화 방법 제공👁—

2.2 충분한 시간

| # | 기준 | 레벨 | 점검 방법 | 자동화 | | ----- | ---------------------------------------------------------- | ---- | -------------------------------- | ------ | --- | | 2.2.1 | 시간 제한 콘텐츠 — 끄기/연장/조정 가능 | A | 타이머, 자동 로그아웃 확인 | 👁 | | 2.2.2 | 자동 재생·자동 업데이트 콘텐츠 — 일시정지·정지·숨기기 가능 | A | Carousel 자동재생 정지 버튼 확인 | 🤖 | — |

2.3 발작 예방

#기준레벨점검 방법자동화
2.3.1초당 3회 이상 번쩍이는 콘텐츠 없음A애니메이션 flash 확인👁

2.4 내비게이션

#기준레벨점검 방법자동화규칙
2.4.1반복 콘텐츠 건너뛰기 수단 제공 (skip to main)A페이지 첫 번째 링크가 “본문 바로가기”인지👁—
2.4.2페이지 제목 제공A<title> 또는 Next.js <Head> 확인👁—
2.4.3포커스 순서가 의미/기능에 맞게 유지ATab 순서 확인 (DOM 순서 기반)👁—
2.4.4링크 목적이 링크 텍스트 또는 문맥으로 파악 가능A”여기”, “클릭” 등 모호한 링크 텍스트 없음👁—
2.4.6제목과 레이블이 내용을 설명AAform label, heading이 의미 있는 텍스트인지👁—
2.4.3포커스 이동 순서가 의미/기능에 맞게 유지ATab 순서 확인 (DOM 순서 기반)👁—
2.4.3tabIndex 양수 사용 금지 — DOM 순서 기반 포커스 흐름 유지AtabIndex 값 점검🤖A018
2.4.7포커스 스타일 시각적으로 표시AAoutline-none 단독 사용 없음🤖A006
2.4.11[WCAG 2.2] 포커스 ring이 요소를 완전히 둘러싸며 최소 크기 확보AAfocus ring이 2px 이상, 대비율 3:1 이상👁—
2.4.12[WCAG 2.2] 포커스 시 다른 콘텐츠에 가려지지 않음AAsticky header/footer에 포커스 요소가 가려지는지👁—
2.4.13[WCAG 2.2] 포커스 가시성 강화AAA——

2.5 입력 방식

#기준레벨점검 방법자동화
2.5.1경로 기반 제스처(swipe)에 단순 제어 대안 존재ACarousel 버튼 제공 여부👁
2.5.3버튼/컨트롤의 레이블이 visible text와 일치Aaria-label이 보이는 텍스트와 동일한 목적인지👁
2.5.8[WCAG 2.2] 터치 대상 크기 최소 24×24 CSS pxAA버튼, 링크, 체크박스 크기 확인👁

원칙 3 — 이해의 용이성 (Understandable)

3.1 가독성

#기준레벨점검 방법자동화
3.1.1페이지 언어 명시 (lang 속성)A<html lang="ko"> 확인👁
3.1.2언어가 바뀌는 부분에 lang 속성AA인라인 외국어 텍스트 확인👁

3.2 예측 가능성

#기준레벨점검 방법자동화
3.2.1포커스 이동만으로 컨텍스트 변경 없음ASelect focus 시 자동 submit 여부👁
3.2.2입력 시 컨텍스트 자동 변경 없음 (별도 확인 없이 submit 금지)A파일 업로드 onChange auto-submit👁
3.2.6[WCAG 2.2] 도움말 위치가 일관됨A—👁

3.3 입력 지원

#기준레벨점검 방법자동화규칙
3.3.1입력 오류를 텍스트로 설명AFieldError 또는 에러 메시지 표시 여부🤖—
3.3.2레이블 또는 입력 안내 제공Ainput에 label 연결 여부👁—
3.3.2placeholder 단독 사용 금지 — id/aria-label/aria-labelledby 없는 input 점검Aplaceholder 레이블 대체 패턴 점검🤖A019
3.3.3오류 수정 제안 제공AA에러 메시지에 수정 방법 포함 여부👁—
3.3.4중요 입력 — 취소·검토·확인 가능AAsubmit 전 확인 dialog 여부👁—
3.3.7[WCAG 2.2] 반복 입력 자동 채우기 지원Aautocomplete 속성👁—
3.3.8[WCAG 2.2] 인지 기능 테스트 없이 인증 가능AACAPTCHA 대안 제공👁—

원칙 4 — 견고성 (Robust)

4.1 호환성

#기준레벨점검 방법자동화규칙
4.1.1마크업 파싱 오류 없음 (중복 id, 태그 닫힘)AHTML validator / React key prop👁—
4.1.2name, role, value가 프로그래밍 방식으로 파악 가능AARIA role·state·property 적절성🤖A002, A007, A008
4.1.2시맨틱 HTML 요소에 중복 ARIA role 선언 금지 (<nav role="navigation"> 등)A네이티브 요소 + 동일 role 중복 점검🤖A017
4.1.2Skeleton 로딩 placeholder에 aria-hidden="true" 또는 부모 aria-busy 제공Askeleton.primitive 파일 점검🤖A005
4.1.2aria-label과 sr-only 동시 사용 금지 — 하나만 사용A이중 레이블 패턴 점검🤖A011
4.1.2role="group" 3회 이상 중첩 회피 — 불필요한 group role 제거A동일 파일 내 중첩 group 패턴 점검🤖A012
4.1.3상태 메시지가 역할이나 속성으로 AT에 전달됨AArole="status", role="alert", aria-live 사용🤖A013, A014

자동화 규칙 요약

규칙 IDWCAG 기준심각도
A0011.1.1Critical
A0024.1.2Critical
A0034.1.2Critical
A0041.3.1Critical
A0054.1.2 — Skeleton aria-hidden 누락Critical
A0062.4.7 / 2.4.11 — outline-none focus-visible 보상 없음Warning
A0074.1.2 — role=“group” accessible name 없음Warning
A0082.4.1 — role=“region” aria-label 없음Warning
A0091.1.1 — aria-hidden 내부 sr-only 무효화Warning
A0102.1.1 — Drag/Resize 키보드 접근 불가Warning
A0114.1.2 — aria-label + sr-only 중복Warning
A0124.1.2 — role=“group” 중첩Warning
A0134.1.3 — SVG 요소에 직접 role=status/alert 적용Suggestion
A0144.1.3 — role=“alert” 정적 렌더 패턴 검토Suggestion
A0151.3.1 — 알림/에러 제목 div 사용Suggestion
A0162.1.1 — 비인터랙티브 요소 onClick 키보드 접근 불가Critical
A0174.1.2 — 시맨틱 HTML 요소 중복 role 선언Warning
A0182.4.3 — tabIndex 양수 사용Warning
A0193.3.2 — placeholder 단독 사용 레이블 대체Warning

참고: W3C WAI — https://www.w3.org/WAI/standards-guidelines/wcag/ 
WCAG 2.2 Quick Reference — https://www.w3.org/WAI/WCAG22/quickref/ 

Last updated on
HTML 웹표준 + ARIA 사용 기준