에필로그
6개월이 지났습니다.
김개발은 새로운 동료가 입사하면 제일 먼저 이 말을 했습니다.
"코드 작성하고 Tab 키 한 번 눌러보세요. 포커스가 보이나요?"
그것이 김개발이 박멘토에게 처음 배운 것이었습니다.
그날 오후, 팀에 메일 한 통이 왔습니다.
"안녕하세요. 저는 시각장애가 있는 사용자입니다. 얼마 전부터 귀사 서비스를 NVDA로 사용하고 있는데, 이전과 달리 스크린리더가 모든 버튼 이름을 제대로 읽어주고, 폼도 레이블이 연결되어 있어 혼자서도 회원가입을 완료할 수 있었습니다. 정말 감사합니다."
김개발이 그 메일을 박멘토에게 전달했습니다.
박멘토가 답했습니다. "이게 접근성이에요."
웹 접근성은 특정 사용자를 위한 특별한 기능이 아닙니다. 더 나은 코드, 더 명확한 정보 구조, 더 많은 사람이 사용할 수 있는 웹. 그것이 우리가 지향하는 곳입니다.
부록 — 자주 묻는 질문 (FAQ)
Q. 접근성을 처음 시작하려면 어디서부터?
axe DevTools 설치 후 현재 프로젝트를 스캔하세요.
Critical 오류 3개를 골라 이번 주 안에 수정하세요.
완벽한 시작보다 작은 시작이 중요합니다.
Q. 디자이너가 접근성을 고려하지 않는 디자인을 줬어요.
색상 대비 문제는 구체적인 수치로 전달하세요.
"이 텍스트는 배경과 대비가 2.5:1이고 WCAG 기준은 4.5:1입니다."
데이터로 대화하면 협력하기 훨씬 쉬워집니다.
Q. 프로젝트 일정이 빠듯한데 접근성까지 신경 써야 하나요?
처음부터 접근성을 고려하면 추가 시간이 거의 들지 않습니다.
나중에 수정하는 것이 훨씬 더 오래 걸립니다.
최소한 Critical 오류(alt, label, 포커스)만이라도 지금 잡으세요.
Q. 자동화 도구가 오류 없다고 하는데 스크린리더로 테스트해야 하나요?
자동화 도구는 30~40%만 탐지합니다.
월 1회 30분이라도 NVDA나 VoiceOver로 주요 흐름을 테스트하세요.
Q. KWCAG와 WCAG 중 어느 것을 따라야 하나요?
한국 법적 기준은 KWCAG 2.2입니다.
WCAG 2.2를 준수하면 KWCAG 2.2도 대부분 충족됩니다.
공공기관 납품이 있다면 KWCAG 2.2 기준을 명시적으로 확인하세요.
접근성 코드 레퍼런스 — 한 페이지 요약
<!-- 1. 페이지 기본 구조 --><!DOCTYPE html><html lang="ko"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>현재 페이지 제목 | 사이트명</title></head><body> <!-- 2. 스킵 내비게이션 (첫 번째 요소) --> <a href="#main-content" class="skip-link">본문으로 건너뛰기</a> <!-- 3. 랜드마크 구조 --> <header> <nav aria-label="주요 메뉴"> <ul> <li><a href="/" aria-current="page">홈</a></li> </ul> </nav> </header> <main id="main-content" tabindex="-1"> <h1>페이지 제목</h1> <!-- 4. 이미지 --> <img src="info.jpg" alt="구체적인 이미지 설명"> <img src="deco.png" alt=""> <!-- 장식 이미지 --> <!-- 5. 접근성 폼 --> <form> <label for="email">이메일 <span aria-label="필수">*</span></label> <input type="email" id="email" required aria-required="true" aria-describedby="email-hint" autocomplete="email" > <p id="email-hint">예: [email protected]</p> <button type="submit">제출</button> </form> <!-- 6. Live Region --> <div role="status" aria-live="polite" class="sr-only" id="status"></div> <div role="alert" aria-live="assertive" class="sr-only" id="error"></div> </main> <footer> <nav aria-label="하단 메뉴">...</nav> </footer></body></html>/* 접근성 필수 CSS *//* 스크린리더 전용 */.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}/* 스킵 링크 */.skip-link { position: absolute; top: -100%; left: 1rem; padding: 0.75rem 1.5rem; background: #005FCC; color: white; z-index: 9999;}.skip-link:focus { top: 0; }/* 포커스 스타일 */:focus-visible { outline: 3px solid #005FCC; outline-offset: 2px;}/* 상대 단위 */html { font-size: 100%; } /* 브라우저 설정 존중 */body { font-size: 1rem; line-height: 1.6; }/* 모션 줄이기 */@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }}이 교재를 마친 여러분을 환영합니다.
웹은 모두를 위한 것입니다. 그 신념으로 코드를 쓰는 한 명의 개발자가 늘어날 때마다, 세상은 조금 더 열립니다.
"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." — Tim Berners-Lee, W3C Director