접근성 검수 체크리스트

페이지의 짜임새를 보조기술이 이해할 수 있는지 확인합니다.

• 페이지마다 내용을 알 수 있는 고유한 <title>이 있습니다. WCAG 2.4.2
• <html lang="ko">처럼 기본 언어가 지정되어 있습니다. WCAG 3.1.1
• <header>, <nav>, <main>, <footer> 등 랜드마크로 영역이 나뉘고, main은 하나입니다. 랜드마크와 제목
• 같은 종류의 랜드마크가 둘 이상이면 aria-label 등으로 구분되는 이름이 있습니다.
• 제목(h1~h6)이 내용 구조에 맞게 쓰였고, 수준을 건너뛰지 않습니다. WCAG 1.3.1
• 본문 바로가기 링크가 있고, 누르면 본문으로 포커스가 이동합니다. WCAG 2.4.1
• 목록은 ul·ol·dl로, 데이터 표는 table·th·caption으로 마크업되어 있습니다. 데이터 표 패턴
• CSS를 끄거나 화면낭독기로 읽어도 읽기 순서가 화면의 논리적 순서와 같습니다. WCAG 1.3.2

모든 상호작용 요소의 이름·역할이 올바른지 확인합니다.

• 모든 버튼과 링크에 기능을 알 수 있는 접근 가능한 이름이 있습니다. 아이콘 버튼도 포함합니다. 접근 가능한 이름
• 링크 텍스트만으로 목적을 알 수 있습니다(“더 보기”, “여기”만 반복되지 않습니다). WCAG 2.4.4
• 보이는 글자와 접근 가능한 이름이 일치하거나, 이름이 보이는 글자로 시작합니다. WCAG 2.5.3
• 네이티브 HTML 요소로 만들 수 있는 컨트롤은 button, a href, input 등을 사용했습니다. ARIA 사용 5원칙
• 직접 만든 위젯에 알맞은 역할이 있고, 필수 상위·하위 역할과 필수 속성을 갖추었습니다. 역할·상태·속성
• 중복되거나 허용되지 않는 role, 네이티브 속성과 충돌하는 aria-*가 없습니다. HTML과 ARIA 매핑
• iframe에 내용을 알 수 있는 title이 있습니다.

마우스 없이 모든 기능을 쓸 수 있는지 확인합니다.

• 모든 기능을 키보드만으로 실행할 수 있습니다. WCAG 2.1.1
• 포커스가 특정 영역에 갇히지 않습니다(모달 대화상자의 의도된 포커스 가두기는 제외). WCAG 2.1.2
• Tab 이동 순서가 논리적이며, 양수 tabindex를 쓰지 않습니다. WCAG 2.4.3
• 포커스를 받은 요소가 눈에 잘 띄게 표시되고, 다른 요소에 가려지지 않습니다. WCAG 2.4.7
• 탭·메뉴·리스트박스 등 복합 위젯은 APG의 키보드 동작(화살표, Home/End, Esc)을 따릅니다. 키보드와 포커스
• 대화상자를 열면 포커스가 안으로 들어가고, Esc로 닫히며, 닫으면 연 버튼으로 포커스가 돌아갑니다. 대화상자 패턴
• 화면에서 숨긴 요소나 aria-hidden="true" 영역 안의 요소로 포커스가 가지 않습니다. 콘텐츠 숨기기

화면의 상태 변화가 보조기술에도 전달되는지 확인합니다.

• 펼침·접힘 버튼의 aria-expanded 값이 실제 상태와 함께 바뀝니다. 펼침 패턴
• 탭·옵션의 aria-selected, 토글 버튼의 aria-pressed, 체크박스의 aria-checked가 화면과 일치합니다. 상태 동기화
• 현재 페이지·현재 단계 표시에 aria-current를 사용했습니다. 이동 경로 패턴
• 사용할 수 없는 컨트롤은 disabled 또는 aria-disabled로 알립니다.
• 직접 만든 슬라이더·진행 막대에 aria-valuenow, aria-valuemin, aria-valuemax(필요하면 aria-valuetext)가 있습니다. 슬라이더 패턴

포커스 밖에서 일어나는 변화가 안내되는지 확인합니다.

• 저장 완료, 장바구니 담기, 검색 결과 건수 같은 상태 메시지가 status 또는 aria-live로 안내됩니다. WCAG 4.1.3
• 긴급한 오류·경고만 alert(assertive)로 알리고, 남용하지 않습니다. 라이브 리전
• 라이브 리전 컨테이너는 페이지에 미리 있고, 내용만 바꿔 넣습니다.
• 로딩 중 상태와 완료가 안내되며, 새로 추가된 콘텐츠로 이동할 방법이 있습니다. 동적 콘텐츠
• 자동으로 바뀌거나 움직이는 콘텐츠(캐러셀 등)를 멈출 수 있고, 시간 제한은 연장할 수 있습니다. 캐러셀 패턴

입력 필드와 오류 처리를 확인합니다.

• 모든 입력 필드에 <label>(또는 aria-labelledby)로 연결된 레이블이 있습니다. placeholder만으로 레이블을 대신하지 않습니다. 폼
• 필수 입력은 required(또는 aria-required)와 화면상 표시로 함께 알립니다.
• 관련 있는 라디오·체크박스 묶음은 fieldset·legend(또는 radiogroup, group)로 묶었습니다. 라디오 그룹 패턴
• 오류가 있는 필드에 aria-invalid를 지정하고, 오류 메시지를 aria-describedby 또는 aria-errormessage로 연결했습니다. 폼 검증 패턴
• 입력 형식 안내(예: 8자 이상)를 aria-describedby로 연결했습니다. 설명 연결
• 개인정보 입력 필드에 알맞은 autocomplete 값을 지정했습니다. WCAG 1.3.5
• 제출 후 오류가 있으면 오류 요약 또는 첫 오류 필드로 포커스를 옮기거나 안내합니다. WCAG 3.3.1

텍스트가 아닌 콘텐츠와 색 사용을 확인합니다.

• 의미 있는 이미지에 내용을 대신하는 대체 텍스트가 있습니다. WCAG 1.1.1
• 장식 이미지는 alt="", 장식 SVG·아이콘 폰트는 aria-hidden="true"로 숨겼습니다.
• 의미 있는 인라인 SVG에 role="img"와 이름(<title> 또는 aria-label)이 있습니다. img 역할
• 차트·도표처럼 복잡한 이미지는 본문이나 aria-describedby로 자세한 설명을 제공합니다.
• 텍스트 명도 대비가 4.5:1(큰 텍스트 3:1) 이상이고, 아이콘·포커스 표시 등 UI 구성 요소는 3:1 이상입니다. WCAG 1.4.3
• 색만으로 정보를 구분하지 않습니다(오류 표시, 필수 항목, 그래프 범례 등). WCAG 1.4.1
• 동영상에 자막, 필요하면 음성 해설이나 대본이 있습니다. WCAG 1.2.2

터치 화면과 모바일 화면낭독기에서 확인합니다.

• VoiceOver(iOS)와 TalkBack(Android)으로 주요 과제를 끝까지 수행할 수 있습니다. 화면낭독기 테스트
• 터치 대상이 충분히 크고(최소 24×24 CSS 픽셀, 권장 44×44) 서로 떨어져 있습니다. WCAG 2.5.8
• 세로·가로 방향 모두에서 사용할 수 있습니다. WCAG 1.3.4
• 320 CSS 픽셀 너비(400% 확대)에서도 가로 스크롤 없이 내용을 읽을 수 있고, 확대가 막혀 있지 않습니다. WCAG 1.4.10
• 여러 손가락·경로 기반 제스처나 기기 흔들기로만 되는 기능은 단순한 대체 조작을 함께 제공합니다. WCAG 2.5.1
• 접근성 포커스(쓸기 탐색) 순서가 화면 순서와 같고, 화면 밖이나 숨긴 메뉴가 읽히지 않습니다. 모바일 ARIA