웹 접근성 가이드 - 모두를 위한 웹사이트 만들기

<!-- 모든 interactive 요소는 포커스 가능 -->
<button type="button">클릭</button>
<a href="/page">링크</a>

<!-- 포커스 순서 논리적으로 -->
<nav>
  <a href="#main">본문으로 건너뛰기</a> <!-- 첫 번째 -->
</nav>
<main id="main">
  <!-- 메인 콘텐츠 -->
</main>

<!-- ❌ div에 클릭 이벤트 (키보드 접근 불가) -->
<div onclick="handleClick()">클릭하세요</div>

<!-- ❌ 포커스 불가능한 요소 -->
<span onclick="doSomething()">버튼처럼 보임</span>

<header>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="/">홈</a></li>
      <li><a href="/about">소개</a></li>
    </ul>
  </nav>
</header>

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

<footer>
  <p>&copy; 2025 회사명</p>
</footer>

<!-- ❌ 모든 게 div -->
<div class="header">
  <div class="nav">
    <div class="link">홈</div>
    <div class="link">소개</div>
  </div>
</div>

<div class="content">
  <div class="title">제목</div>
  <div class="text">내용...</div>
</div>

<h1>페이지 제목</h1>
  <h2>섹션 1</h2>
    <h3>섹션 1.1</h3>
    <h3>섹션 1.2</h3>
  <h2>섹션 2</h2>
    <h3>섹션 2.1</h3>

<!-- ❌ 계층 건너뛰기 -->
<h1>페이지 제목</h1>
<h3>섹션 제목</h3>  <!-- h2를 건너뜀! -->
<h2>다음 섹션</h2>  <!-- 순서가 뒤바뀜! -->

<!-- 의미 있는 이미지 -->
<img src="chart.png" alt="2025년 매출 증가 그래프: 1분기 30%, 2분기 45% 증가">

<!-- 장식용 이미지 -->
<img src="decoration.png" alt="" role="presentation">

<!-- 링크 안의 이미지 -->
<a href="/profile">
  <img src="avatar.png" alt="김철수 프로필">
</a>

<!-- ❌ alt 없음 -->
<img src="chart.png">

<!-- ❌ 의미 없는 alt -->
<img src="chart.png" alt="이미지">
<img src="graph.png" alt="graph.png">

<!-- ❌ 너무 긴 alt -->
<img src="product.png" alt="이 제품은 매우 훌륭한 제품으로서 우리 회사의 최신 기술을 활용하여...">

<!-- ❌ 색상만 사용 -->
<p style="color: red;">오류가 발생했습니다</p>

<!-- ✅ 아이콘과 텍스트 함께 -->
<p>
  <svg aria-hidden="true"><!-- 오류 아이콘 --></svg>
  <span class="error-text">오류가 발생했습니다</span>
</p>

<!-- 버튼 상태 -->
<button aria-pressed="false">구독</button>
<button aria-pressed="true">구독 중</button>

<!-- 확장 가능한 영역 -->
<button aria-expanded="false" aria-controls="menu">
  메뉴
</button>
<div id="menu" hidden>
  <!-- 메뉴 내용 -->
</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>

<!-- 라이브 리전 (동적 콘텐츠) -->
<div aria-live="polite" aria-atomic="true">
  <p>3개의 새 메시지가 있습니다</p>
</div>

<!-- 로딩 상태 -->
<button aria-busy="true">
  저장 중...
</button>

<!-- 레이블 연결 -->
<button aria-label="닫기">
  <svg><!-- X 아이콘 --></svg>
</button>

<!-- 설명 추가 -->
<input
  type="email"
  aria-describedby="email-hint"
>
<span id="email-hint">
  example@email.com 형식으로 입력하세요
</span>

<!-- ❌ 네이티브 버튼을 div로 만들지 마세요 -->
<div role="button" tabindex="0" onclick="...">
  클릭
</div>

<!-- ✅ 그냥 button 사용 -->
<button type="button">클릭</button>

<!-- ❌ 불필요한 role -->
<nav role="navigation">  <!-- nav는 이미 navigation role -->
  <ul role="list">  <!-- ul은 이미 list role -->
    <li role="listitem">  <!-- li는 이미 listitem role -->
      항목
    </li>
  </ul>
</nav>

<!-- ✅ 간결하게 -->
<nav aria-label="Main navigation">
  <ul>
    <li>항목</li>
  </ul>
</nav>

<!-- 명확한 레이블 -->
<label for="email">이메일</label>
<input
  type="email"
  id="email"
  name="email"
  required
  aria-required="true"
  aria-describedby="email-hint"
>
<span id="email-hint">
  example@email.com 형식으로 입력하세요
</span>

<!-- 오류 표시 -->
<label for="password">비밀번호</label>
<input
  type="password"
  id="password"
  aria-invalid="true"
  aria-describedby="password-error"
>
<span id="password-error" role="alert">
  비밀번호는 최소 8자 이상이어야 합니다
</span>

<!-- 그룹화 -->
<fieldset>
  <legend>배송 방법</legend>
  <label>
    <input type="radio" name="shipping" value="standard">
    일반 배송
  </label>
  <label>
    <input type="radio" name="shipping" value="express">
    빠른 배송
  </label>
</fieldset>

<!-- ❌ 레이블 없음 -->
<input type="text" placeholder="이름 입력">

<!-- ❌ 레이블과 연결 안 됨 -->
<label>이메일</label>
<input type="email">

<!-- ❌ 오류 표시가 명확하지 않음 -->
<input type="password" style="border-color: red;">

<!-- 중요하지 않은 업데이트 -->
<div aria-live="polite">
  <p>10초 전에 업데이트됨</p>
</div>

<!-- 중요한 업데이트 (즉시 알림) -->
<div aria-live="assertive">
  <p>오류: 파일을 저장할 수 없습니다</p>
</div>

<!-- 상태 메시지 -->
<div role="status" aria-live="polite">
  <p>저장되었습니다</p>
</div>

<!-- 경고 메시지 -->
<div role="alert" aria-live="assertive">
  <p>연결이 끊어졌습니다</p>
</div>

<!-- ❌ div를 버튼처럼 사용 -->
<div class="button" onclick="submit()">
  제출
</div>

<!-- ✅ 네이티브 button 사용 -->
<button type="button" onclick="submit()">
  제출
</button>

<!-- ❌ placeholder만 사용 -->
<input type="text" placeholder="이름">

<!-- ✅ label 사용 -->
<label for="name">이름</label>
<input type="text" id="name" placeholder="홍길동">

<!-- ❌ 아이콘만 -->
<button>
  <svg><!-- X 아이콘 --></svg>
</button>

<!-- ✅ aria-label 추가 -->
<button aria-label="닫기">
  <svg aria-hidden="true"><!-- X 아이콘 --></svg>
</button>

<!-- ❌ 자동 재생 -->
<video autoplay>
  <source src="video.mp4">
</video>

<!-- ✅ 사용자 제어 -->
<video controls>
  <source src="video.mp4">
  <track kind="captions" src="captions.vtt" srclang="ko" label="한국어">
</video>