웹 접근성(A11y) 실천 가이드

웹 접근성(Accessibility, A11y)은 장애가 있는 사람을 포함한 모든 사용자가 웹을 이용할 수 있도록 보장하는 것입니다. 시각 장애인의 스크린 리더, 지체 장애인의 키보드 전용 탐색 등 다양한 사용 환경을 고려해야 합니다. 접근성을 지키면 SEO도 함께 좋아집니다.

시맨틱 HTML — 기본 중의 기본

<!-- 나쁜 예 -->
<div class="header">
  <div class="nav">
    <div onclick="go('/')">홈</div>
  </div>
</div>

<!-- 좋은 예 -->
<header>
  <nav aria-label="주요 메뉴">
    <a href="/">홈</a>
  </nav>
</header>

<main>
  <article>
    <h1>제목</h1>
    <p>내용</p>
  </article>
</main>

<footer>
  <address>contact@devlog.kr</address>
</footer>

이미지 alt 텍스트

<!-- 정보를 전달하는 이미지 -->
<img src="chart.png" alt="2026년 1분기 매출이 전년 대비 23% 상승한 막대 그래프">

<!-- 장식용 이미지 (스크린 리더가 무시) -->
<img src="divider.png" alt="">

<!-- 기능 버튼의 아이콘 -->
<button aria-label="메뉴 닫기">
  <img src="close.svg" alt="">
</button>

키보드 접근성

<!-- 클릭 가능한 요소는 button 또는 a 사용 -->
<button onclick="openModal()">모달 열기</button>

<!-- div를 버튼처럼 쓸 때 (최후의 수단) -->
<div
  role="button"
  tabindex="0"
  onclick="openModal()"
  onkeydown="if(event.key==='Enter'||event.key===' ')openModal()"
>모달 열기</div>

<!-- 포커스 표시 절대 제거하지 말 것 -->

/* 절대 금지 */
* { outline: none; }

/* 대신 커스텀 포커스 스타일 */
:focus-visible {
  outline: 2px solid #6891f8;
  outline-offset: 2px;
  border-radius: 4px;
}

ARIA 속성 활용

<!-- 모달 -->
<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="modal-title"
  aria-describedby="modal-desc"
>
  <h2 id="modal-title">확인</h2>
  <p id="modal-desc">정말 삭제하시겠습니까?</p>
</div>

<!-- 상태 알림 -->
<div role="status" aria-live="polite">
  저장되었습니다.
</div>

<!-- 확장/축소 버튼 -->
<button aria-expanded="false" aria-controls="menu">메뉴</button>
<ul id="menu" hidden>...</ul>

색상 대비

WCAG 2.1 기준으로 일반 텍스트는 4.5:1, 큰 텍스트(18px 이상)는 3:1 이상의 명암 대비가 필요합니다.

/* 나쁜 예 — 대비 부족 */
.subtle { color: #aaa; background: #fff; } /* 2.3:1 */

/* 좋은 예 */
.readable { color: #595959; background: #fff; } /* 7:1 */

/* OKLCH로 접근성 있는 색상 선택 */
.text-muted { color: oklch(45% 0.05 240); } /* 충분한 대비 */

폼 접근성

<form>
  <div>
    <!-- label과 input을 반드시 연결 -->
    <label for="email">이메일 <span aria-hidden="true">*</span></label>
    <input
      type="email"
      id="email"
      name="email"
      required
      aria-required="true"
      aria-describedby="email-hint email-error"
    >
    <span id="email-hint">예: hello@example.com</span>
    <span id="email-error" role="alert"></span>
  </div>
</form>