웹 접근성 아티클
자동 검사가 잡아 주는 것은 접근성 문제의 일부입니다. 나머지는 "왜 그렇게 해야 하는지"를 알고 손으로 확인해야 합니다. 아래 글들은 실무에서 가장 자주 걸리는 주제를 하나씩, 복사해 쓸 수 있는 코드 예시와 함께 정리한 것입니다. 전체 흐름을 먼저 보고 싶다면 웹 접근성 실무 가이드부터, 검사 결과에 나온 규칙 이름이 낯설다면 검사 규칙 사전부터 읽으세요.
기본기 — 가장 자주 걸리는 문제
- 대체 텍스트(alt) 제대로 쓰는 법 정보·장식·기능·복잡한 이미지, 아이콘, 배경 이미지까지 유형별로 alt를 어떻게 쓰는지. WCAG 1.1.1
- 키보드만으로 쓸 수 있는 사이트 만들기 탭 순서, 포커스 표시, 스킵 링크, 모달 포커스 가두기, roving tabindex. WCAG 2.1.1 · 2.4.3 · 2.4.7
- 색상 대비 4.5:1, 실제로 어떻게 맞추나 대비 비율의 의미와 기준, 흔한 미달 사례, 다크모드, 색만으로 정보 전달 금지. WCAG 1.4.3 · 1.4.1 · 1.4.11
- 접근 가능한 입력 양식 만들기 label 연결, placeholder의 함정, 오류 메시지 전달, autocomplete, fieldset/legend. WCAG 1.3.1 · 3.3.1 · 3.3.2
구조와 동적 요소
- 제목·랜드마크·페이지 제목으로 문서 구조 잡기 h1~h6 위계, main·nav 영역, 본문 바로가기 링크, title과 lang. WCAG 1.3.1 · 2.4.1 · 2.4.2 · 3.1.1
- ARIA는 언제 쓰고 언제 쓰지 말아야 하나 ARIA 첫 번째 규칙, 이름 붙이기, aria-hidden 함정, 펼침 버튼·모달·라이브 영역. WCAG 4.1.2 · 4.1.3 · 2.5.3
- 표·iframe·영상·오디오를 접근 가능하게 만들기 th·scope·caption, iframe title, 자막·대본·음성 해설, 자동 재생 제어. WCAG 1.3.1 · 1.2.x · 1.4.2
사용 환경과 제도
- 확대·터치·움직임: 저시력과 다양한 사용 환경 대응하기 200% 확대·320px 리플로우, 텍스트 간격, 터치 영역 크기, 모션 줄이기. WCAG 1.4.4 · 1.4.10 · 1.4.12 · 2.2.2 · 2.3.1
- 화면낭독기로 내 사이트 직접 들어보기 NVDA·VoiceOver 30분 입문. 핵심 단축키와 30분 테스트 순서, 자주 듣게 되는 문제와 원인
- 한국의 웹 접근성 제도 — KWCAG, 법, 인증마크 한눈에 보기 KWCAG 2.2 구성, WCAG와의 관계, 법적 의무 개요, 품질인증마크, 이 도구의 규칙과 KWCAG 항목 대응
실습
이 아티클들은 웹 접근성 검사·수정 도우미의 검사 항목과 같은 기준(WCAG 2.1)으로 작성했습니다.
검사 결과에 나온 항목의 배경은 검사 규칙 사전에서, 서비스와 작성 원칙은 소개에서 볼 수 있습니다.
문의: dkdnj123@gmail.com