웹 접근성 개념 · 시맨틱과 ARIA · 폼 접근성 · 이미지·미디어 접근성

<!-- 스크린리더는 이렇게 읽음 -->
<a href="/">홈</a>                  <!-- "홈 링크" -->
<button disabled>제출</button>       <!-- "제출 버튼 비활성화됨" -->
<img src="logo.png" alt="회사 로고">  <!-- "회사 로고 이미지" -->
<img src="deco.png" alt="">          <!-- 장식 이미지는 건너뜀 -->

<img src="chart.png" alt="2024년 1분기 매출: 1억 2천만원">

<video>
  <track kind="captions" src="subtitles.vtt" srclang="ko">
</video>

<!-- 색상만으로 정보 전달 금지 -->

<button onclick="...">제출</button>     <!-- ✓ 키보드 OK -->
<div onclick="...">제출</div>           <!-- ✗ 키보드 불가 -->

<html lang="ko">

<!-- 에러 메시지 구체적으로 -->
<!-- ✗ "입력 오류" -->
<!-- ✓ "이메일 형식이 올바르지 않습니다 (예: user@example.com)" -->

Tab        다음 포커스
Shift+Tab  이전 포커스
Enter      링크 활성화, 버튼 클릭
Space      버튼/체크박스 토글
화살표      라디오, 선택 메뉴
Escape     모달/팝업 닫기

<!-- ✗ -->
<div class="header"><div class="nav">...</div></div>

<!-- ✓ -->
<header><nav>...</nav></header>

<!-- div를 버튼처럼 (피하는 게 좋음) -->
<div role="button" tabindex="0" onclick="..." onkeydown="...">
  클릭
</div>

<!-- 탭 UI -->
<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel1">탭1</button>
  <button role="tab" aria-selected="false" aria-controls="panel2">탭2</button>
</div>
<div role="tabpanel" id="panel1">탭1 내용</div>
<div role="tabpanel" id="panel2" hidden>탭2 내용</div>

<!-- 텍스트 없는 버튼 -->
<button aria-label="메뉴 닫기">
  <svg aria-hidden="true">...</svg>
</button>

<!-- 다른 요소를 레이블로 -->
<h2 id="section-title">최신 상품</h2>
<ul aria-labelledby="section-title">...</ul>

<!-- 모달 제목 -->
<div role="dialog" aria-labelledby="modal-title" aria-modal="true">
  <h2 id="modal-title">주문 확인</h2>
</div>

<!-- 추가 설명 -->
<input type="password" id="pw" aria-describedby="pw-hint">
<p id="pw-hint">8자 이상, 대소문자+숫자+특수문자</p>

<button aria-expanded="false" aria-controls="menu" onclick="toggleMenu()">
  메뉴 열기
</button>
<ul id="menu" hidden>...</ul>

<script>
function toggleMenu() {
  const btn = document.querySelector('button');
  const menu = document.getElementById('menu');
  const isOpen = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', !isOpen);
  menu.hidden = isOpen;
}
</script>

<!-- 장식 아이콘은 스크린리더에서 제외 -->
<button>
  <svg aria-hidden="true" focusable="false">...</svg>
  저장
</button>

<!-- tabindex="0": Tab으로 접근 가능 (자연 순서) -->
<div role="button" tabindex="0">클릭 가능</div>

<!-- tabindex="-1": Tab 불가, JS로 focus() 가능 -->
<div id="modal" tabindex="-1">...</div>

<!-- tabindex="1" 이상: 사용 금지! 자연 순서를 깨뜨림 -->

<a href="#main-content" class="skip-link">본문 바로가기</a>
<nav>... (긴 내비게이션) ...</nav>
<main id="main-content">
  <h1 tabindex="-1">페이지 제목</h1>
</main>

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  padding: 8px 16px;
  background: #000;
  color: #fff;
  z-index: 9999;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

<label for="username">사용자 이름</label>
<input type="text" id="username" name="username">

<label>
  사용자 이름
  <input type="text" name="username">
</label>

<input type="search" aria-label="검색어 입력" placeholder="검색어">

<!-- 동적 추가 시 스크린리더가 즉시 읽음 -->
<div role="alert">
  이메일 형식이 올바르지 않습니다. (예: user@example.com)
</div>

<label for="email">이메일</label>
<input
  type="email"
  id="email"
  aria-describedby="email-error"
  aria-invalid="true"
  required
>
<p id="email-error" role="alert">
  이메일 형식이 올바르지 않습니다.
</p>

<input type="text" required aria-required="true">
<input aria-invalid="false">                                       <!-- 통과 전 -->
<input aria-invalid="true" aria-describedby="error-msg">           <!-- 에러 -->
<span id="error-msg">필수 입력 항목입니다.</span>

<!-- 여러 도움말 연결 (공백 구분) -->
<input type="password" id="pw" aria-describedby="pw-hint pw-error">
<p id="pw-hint">8자 이상, 대소문자+숫자+특수문자</p>
<p id="pw-error" role="alert" hidden>비밀번호가 조건을 충족하지 않습니다.</p>

<!-- ✗ 색상만 -->
<input style="border-color: red">

<!-- ✓ 색상 + 아이콘 + 텍스트 -->
<div class="field-error">
  <input aria-invalid="true" aria-describedby="email-error">
  <span class="error-icon" aria-hidden="true">⚠</span>
  <p id="email-error" role="alert">이메일 형식이 올바르지 않습니다.</p>
</div>

/* ✗ 대비율 2.3:1 */
input { border: 1px solid #cccccc; }
label { color: #aaaaaa; }

/* ✓ 4.5:1 이상 */
input { border: 2px solid #767676; }
label { color: #1a1a1a; }

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

/* ✓ 방법 1: 기본 outline 개선 */
:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ✓ 방법 2: 마우스는 숨기고 키보드만 표시 */
:focus { outline: none; }
:focus-visible { outline: 3px solid #0066cc; }

<img src="decoration-wave.svg" alt="">
<img src="spacer.gif" alt="">

<!-- ✗ -->
<img src="chart.png" alt="차트">
<img src="photo.jpg" alt="사진">

<!-- ✓ -->
<img src="sales-chart.png" alt="2024년 1분기 매출: 1월 800만원, 2월 950만원, 3월 1,200만원. 전분기 대비 50% 성장.">
<img src="profile.jpg" alt="김철수, 개발팀 시니어 엔지니어">

<!-- ✗ 이미지 설명 -->
<a href="/home"><img src="logo.png" alt="파란색 로고"></a>

<!-- ✓ 링크의 목적지 -->
<a href="/home"><img src="logo.png" alt="메인 페이지로 이동"></a>

<!-- ✗ -->
<button><img src="close.svg" alt="X"></button>

<!-- ✓ 동작 설명 -->
<button><img src="close.svg" alt="닫기"></button>

<!-- 또는 -->
<button aria-label="닫기"><img src="close.svg" alt=""></button>

<figure>
  <img src="complex-chart.png" alt="월별 판매 추이 차트" aria-describedby="chart-desc">
  <figcaption id="chart-desc">
    2024년 1~6월 판매 데이터. 1월 800, 2월 950, 3월 1200,
    4월 1100, 5월 1350, 6월 1500건. 전반적 상승 추세.
  </figcaption>
</figure>

<video controls>
  <source src="lecture.mp4" type="video/mp4">
  <track
    kind="captions"     <!-- captions: 청각 장애인용 (말+음향), subtitles: 외국어 -->
    src="lecture-ko.vtt"
    srclang="ko"
    label="한국어 자막"
    default
  >
</video>

WEBVTT

00:00:00.000 --> 00:00:03.500
안녕하세요. 오늘은 웹 접근성에 대해 알아봅니다.

00:00:03.500 --> 00:00:07.000
첫 번째 주제는 이미지 alt 텍스트입니다.

00:00:07.000 --> 00:00:10.500
[화면 전환음]
alt 속성은 이미지를 텍스트로 설명합니다.

<!-- ✗ 색상만으로 -->
<p style="color: red">오류가 발생했습니다.</p>
<p style="color: green">성공했습니다.</p>

<!-- ✓ 색상 + 아이콘 + 텍스트 -->
<p class="error">
  <span aria-hidden="true">✗</span>
  오류가 발생했습니다.
</p>
<p class="success">
  <span aria-hidden="true">✓</span>
  성공했습니다.
</p>

.spinner { animation: spin 1s linear infinite; }
.slide   { transition: transform 0.3s ease; }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
  .slide   { transition: none; }
  video[autoplay] { animation: none; }
}

const prefersReducedMotion =
  window.matchMedia('(prefers-reduced-motion: reduce)').matches;

if (!prefersReducedMotion) {
  element.classList.add('animate');
}