개요

웹 접근성(Web Accessibility, a11y)은 장애인, 고령자를 포함한 모든 사용자가 웹 콘텐츠를 동등하게 이용할 수 있도록 보장하는 것입니다. 2025년 현재 많은 국가에서 웹 접근성이 법적 의무가 되었으며, 한국에서도 장애인차별금지법에 의해 공공 및 민간 웹사이트의 접근성 준수가 요구됩니다.

WCAG 2.2가 W3C 권고안으로 확정되면서 새로운 기준들이 추가되었습니다. 이 글에서는 실무에서 바로 적용할 수 있는 접근성 체크리스트를 HTML 코드 예제와 함께 제공합니다.

핵심 개념

WCAG는 4가지 원칙(POUR)을 기반으로 합니다.

• 인식 가능(Perceivable): 모든 콘텐츠를 인식할 수 있어야 합니다. 이미지에 대체 텍스트, 영상에 자막 제공 등.
• 운용 가능(Operable): 키보드만으로 모든 기능을 사용할 수 있어야 합니다. 충분한 시간, 발작 유발 요소 금지 등.
• 이해 가능(Understandable): 콘텐츠와 조작 방법이 이해 가능해야 합니다. 일관된 네비게이션, 오류 방지 등.
• 견고성(Robust): 다양한 보조 기술과 호환되어야 합니다. 올바른 HTML 마크업, ARIA 적절한 사용 등.

WCAG 2.2에서 새로 추가된 주요 기준으로는 Focus Not Obscured(포커스 요소가 가려지지 않아야 함), Dragging Movements(드래그 대체 수단 제공), Target Size(최소 터치 영역 24x24px) 등이 있습니다.

실전 예제

자주 실수하는 접근성 이슈와 올바른 마크업 예제입니다.

<!-- 나쁜 예: 의미 없는 div 남용 -->
<div class="header">
  <div class="nav">
    <div onclick="goTo('/home')">홈</div>
  </div>
</div>

<!-- 좋은 예: 시맨틱 HTML -->
<header>
  <nav aria-label="메인 네비게이션">
    <a href="/home">홈</a>
  </nav>
</header>

<!-- 나쁜 예: 이미지 대체 텍스트 누락 -->
<img src="chart.png">

<!-- 좋은 예: 의미 있는 대체 텍스트 -->
<img src="chart.png" alt="2024년 월별 매출 현황 그래프: 12월 최고 매출 5억원 달성">

<!-- 장식용 이미지는 빈 alt -->
<img src="decorative-line.png" alt="">

<!-- 접근 가능한 폼 -->
<form>
  <div class="form-group">
    <label for="email">이메일 주소</label>
    <input
      type="email"
      id="email"
      name="email"
      autocomplete="email"
      aria-describedby="email-help email-error"
      aria-invalid="false"
      required
    >
    <p id="email-help" class="help-text">업무용 이메일을 입력해 주세요.</p>
    <p id="email-error" class="error-text" role="alert" hidden>
      올바른 이메일 형식이 아닙니다.
    </p>
  </div>

  <!-- 버튼: 충분한 터치 영역 확보 -->
  <button type="submit" style="min-height: 44px; min-width: 44px;">
    제출하기
  </button>
</form>

<!-- 스킵 네비게이션 -->
<a href="#main-content" class="skip-link">본문으로 건너뛰기</a>

/* 스킵 링크: 포커스 시에만 표시 */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: 1rem;
  background: #1f2937;
  color: white;
}

.skip-link:focus {
  top: 0;
}

/* WCAG 2.2: 포커스가 가려지지 않도록 */
:focus {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

/* scroll-margin으로 고정 헤더에 가려지지 않도록 */
:target {
  scroll-margin-top: 80px;
}

/* 강제 색상 모드 지원 */
@media (forced-colors: active) {
  .btn {
    border: 2px solid ButtonText;
  }
}

활용 팁

• 시맨틱 HTML 우선: ARIA보다 네이티브 HTML 요소를 먼저 사용하세요. <button>이 <div role="button">보다 항상 좋습니다.
• 색상 대비: 일반 텍스트는 4.5:1, 큰 텍스트는 3:1 이상의 대비율을 확보하세요. Chrome DevTools에서 바로 확인 가능합니다.
• 키보드 테스트: Tab, Shift+Tab, Enter, Space, Esc로 모든 기능이 동작하는지 주기적으로 테스트하세요.
• 자동화 도구 활용: axe, Lighthouse, WAVE를 개발 파이프라인에 통합하되, 자동화는 전체 이슈의 30-40%만 감지한다는 점을 기억하세요.
• 실제 보조 기술 테스트: VoiceOver(macOS), NVDA(Windows) 등 실제 스크린 리더로 테스트하는 것이 가장 확실합니다.

마무리

웹 접근성은 특별한 기능이 아니라 웹의 기본 품질입니다. WCAG 2.2를 기반으로 한 이 체크리스트를 프로젝트에 적용하면, 모든 사용자에게 더 나은 경험을 제공할 수 있습니다. 접근성은 법적 의무이자, 더 많은 사용자에게 다가가는 가장 확실한 방법입니다.