항목별 가이드

이미지·아이콘 버튼·이미지 링크에 알맞은 대체 텍스트(alt)를 주는 방법. 장식 이미지의 alt="", 파일명 alt, 글자가 든 이미지까지 고치는 코드로 정리했습니다.

동영상·오디오에 자막, 대본, 수어를 제공하는 방법. video의 track 요소로 자막을 넣는 코드, 대본을 함께 두는 방법, 자동 생성 자막을 그대로 쓸 때의 주의점을 정리했습니다.

데이터 표에 제목 셀(th)·scope·caption을 주어 화면 낭독기가 셀의 의미를 알 수 있게 하는 방법과, 레이아웃용 표를 처리하는 방법을 코드로 정리했습니다.

화면 낭독기가 읽는 순서(HTML 순서)가 화면에서 보이는 의미 순서와 같게 만드는 방법. CSS로 순서만 바꾼 레이아웃, 숨긴 콘텐츠, 탭·모달 위치 문제를 고치는 코드를 정리했습니다.

'오른쪽 버튼', '빨간 글씨', '동그란 아이콘'처럼 모양·위치·색·소리로만 설명하는 안내를 고치는 방법. 글자 정보를 함께 주는 지시사항 작성법과 코드 예시를 정리했습니다.

색으로만 구분하는 정보를 글자·기호·무늬로도 구분되게 만드는 방법. 본문 속 링크, 필수 입력 표시, 그래프 범례, 선택된 탭, 오류 칸을 고치는 코드를 정리했습니다.

페이지를 열자마자 소리가 나는 동영상·배경음악을 고치는 방법. 자동 재생을 끄거나 음소거로 시작하고, 정지·음량 조절 수단을 제공하는 코드를 정리했습니다.

글자와 배경의 명도 대비 기준(일반 글자 4.5:1, 큰 글자 3:1)과 계산 방법, 기준을 못 넘을 때 색을 고르는 방법, 예외와 자주 틀리는 예를 정리했습니다.

이웃한 콘텐츠 영역을 테두리·구분선·여백·배경색으로 구별되게 만드는 방법. 경계가 없는 카드 목록, 구분되지 않는 입력 칸, 겹쳐 보이는 영역을 고치는 CSS를 정리했습니다.

마우스로 할 수 있는 모든 기능을 키보드로도 할 수 있게 만드는 방법. 클릭되는 div, 마우스 전용 메뉴, 키보드 함정을 고치는 코드와 확인 방법을 정리했습니다.

키보드 초점(포커스)이 논리적인 순서로 이동하고 눈에 보이게 표시되도록 만드는 방법. outline:none, 양수 tabindex, 모달 초점 처리를 고치는 코드를 정리했습니다.

링크·버튼·체크박스 같은 누르는 요소를 충분히 크고 서로 떨어지게 만들어 잘못 누르지 않게 하는 방법. 작은 아이콘 버튼, 붙어 있는 링크, 작은 체크박스를 고치는 CSS를 정리했습니다.

글자 하나(예: s, /)만 눌러 실행되는 단축키가 화면 낭독기·음성 입력 사용자에게 오작동을 일으키지 않게 하는 방법. 끄기·바꾸기·초점 조건을 주는 코드를 정리했습니다.

자동 로그아웃·시간 제한 입력·자동 페이지 전환이 있을 때 사용자가 시간을 늘리거나 끌 수 있게 하는 방법. 끝나기 전에 알리고 연장하는 코드와 주의점을 정리했습니다.

자동으로 넘어가는 슬라이드·배너, 흐르는 공지, 반복 애니메이션에 정지·이전·다음 버튼을 주는 방법. 키보드로 조작되는 슬라이더 코드와 움직임 줄이기 설정을 정리했습니다.

광과민성 발작을 일으킬 수 있는 깜빡이거나 번쩍이는 콘텐츠를 피하는 방법. 초당 깜빡임 횟수 기준, 경고와 정지 수단, 깜빡이는 애니메이션을 고치는 CSS를 정리했습니다.

페이지마다 반복되는 메뉴를 건너뛰고 본문으로 바로 가는 '본문 바로가기' 링크를 만드는 방법. 숨겼다가 초점을 받으면 보이게 하는 CSS와 흔한 실수를 정리했습니다.

페이지 제목(title), 프레임 제목, 본문 제목(h1~h6)을 알맞게 제공하는 방법. 모든 페이지에 같은 title, 단계를 건너뛴 제목, 제목 없는 iframe을 고치는 코드를 정리했습니다.

링크 글자만 보고도 어디로 가는지 알 수 있게 만드는 방법. '더보기', '여기를 클릭', 아이콘만 있는 링크, 새 창 링크를 고치는 코드를 정리했습니다.

전자책·보고서처럼 쪽 번호가 있는 원본을 웹으로 옮길 때, 원본과 같은 위치(쪽)로 찾아갈 수 있게 하는 방법. 쪽 표시와 쪽 목록을 넣는 코드를 정리했습니다.

두 손가락 확대, 쓸어넘기기, 끌어서 옮기기처럼 여러 손가락이나 경로가 필요한 동작을, 한 번 누르기로도 할 수 있게 하는 방법. 지도·슬라이더·정렬 목록 코드를 정리했습니다.

누르는 순간(down) 바로 실행돼 실수를 되돌릴 수 없는 기능을 고치는 방법. 손을 뗄 때(up·click) 실행하고, 누른 채 밖으로 빠져나가면 취소되게 하는 코드를 정리했습니다.

버튼·링크에 보이는 글자와 프로그램이 읽는 이름(aria-label 등)을 일치시키는 방법. 음성 입력 사용자가 보이는 글자로 누를 수 있도록 aria-label을 고치는 코드를 정리했습니다.

기기를 흔들거나 기울여서 실행되는 기능을 버튼으로도 실행할 수 있게 하고, 동작 인식을 끌 수 있게 하는 방법. devicemotion 이벤트를 쓰는 코드의 수정 예를 정리했습니다.

html 요소에 lang 속성으로 페이지의 주 언어를 알려 화면 낭독기가 올바른 발음으로 읽게 하는 방법. lang 누락, 잘못된 값, 다른 언어로 된 부분 표시를 고치는 코드를 정리했습니다.

사용자가 의도하지 않은 화면 변화(초점만 옮겼는데 이동, 선택 상자를 바꾸자마자 이동, 예고 없는 새 창)를 막는 방법. 확인 버튼을 두고 새 창을 미리 알리는 코드를 정리했습니다.

고객센터·문의하기·도움말·채팅 상담 같은 도움 정보를 여러 페이지에서 같은 위치와 순서로 제공하는 방법. 공통 레이아웃으로 위치를 고정하는 코드 예를 정리했습니다.

입력 오류가 생겼을 때 어느 칸이 왜 틀렸는지 알려주고 고칠 수 있게 하는 방법. aria-invalid·aria-describedby로 오류 문구를 연결하고, 첫 오류 칸으로 초점을 옮기는 코드를 정리했습니다.

입력 칸마다 무엇을 넣는지 알려주는 레이블을 제공하는 방법. label for 연결, placeholder만 쓴 입력 칸, 레이블 없는 검색창·체크박스 묶음을 고치는 코드를 정리했습니다.

로그인·본인 인증에서 기억력 퍼즐이나 글자 옮겨 적기 같은 인지 능력 시험만 요구하지 않게 하는 방법. 비밀번호 붙여넣기·자동 완성 허용, 캡차 대안을 코드로 정리했습니다.

여러 단계 신청서에서 이미 입력한 정보를 다시 입력하게 하지 않는 방법. '주소와 같음' 체크, 이전 단계 값 채우기, autocomplete 속성으로 자동 완성을 돕는 코드를 정리했습니다.

KWCAG에 남아 있는 마크업 오류 방지 항목. 중복 id, 태그 중첩 오류, 닫히지 않은 태그, 중복 속성을 찾고 고치는 방법과 해외 자동 검사 도구가 이를 잡지 않는 이유를 정리했습니다.

직접 만든 탭·아코디언·모달·메뉴 같은 웹 애플리케이션 부품이 화면 낭독기와 키보드로 쓸 수 있도록 역할·상태·이름을 전달하는 방법. WAI-ARIA 코드 예시로 정리했습니다.