웹 접근성 아티클

주제별 실무 가이드 모음 · 코드 예시 포함 · 2026년 9월

자동 검사가 잡아 주는 것은 접근성 문제의 일부입니다. 나머지는 "왜 그렇게 해야 하는지"를 알고 손으로 확인해야 합니다. 아래 글들은 실무에서 가장 자주 걸리는 주제를 하나씩, 복사해 쓸 수 있는 코드 예시와 함께 정리한 것입니다. 전체 흐름을 먼저 보고 싶다면 웹 접근성 실무 가이드부터 읽으세요.

• 대체 텍스트(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
• 화면낭독기로 내 사이트 직접 들어보기 NVDA·VoiceOver 30분 입문. 핵심 단축키와 30분 테스트 순서, 자주 듣게 되는 문제와 원인