접근성과 시맨틱 마크업

<!-- ── aria-label: 시각적 텍스트가 없는 요소에 라벨 제공 ── -->
<button aria-label="메뉴 닫기">
  <svg><!-- X 아이콘 --></svg>
</button>

<!-- ── aria-describedby: 요소에 대한 추가 설명 연결 ── -->
<input type="password" aria-describedby="pw-help" />
<p id="pw-help">비밀번호는 8자 이상이어야 합니다.</p>

<!-- ── aria-expanded: 펼침/접힘 상태 표시 ── -->
<button aria-expanded="false" aria-controls="menu">
  카테고리
</button>
<ul id="menu" hidden>
  <li>웹 개발</li>
  <li>프로그래밍</li>
</ul>

<!-- ── role: 요소의 역할을 명시 ── -->
<div role="alert">저장에 실패했습니다. 다시 시도해 주세요.</div>
<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
  60% 완료
</div>

<!-- ── aria-live: 동적 콘텐츠 변경 알림 ── -->
<div aria-live="polite">검색 결과: 42건</div>

<!-- tabindex="0": 자연스러운 탭 순서에 포함 -->
<div tabindex="0" role="button" onclick="handleClick()">
  커스텀 버튼
</div>

<!-- tabindex="-1": 탭으로 접근 불가, JS로 포커스 가능 -->
<div id="modal" tabindex="-1">
  <!-- 모달이 열리면 JS로 포커스 이동 -->
</div>

<!-- ⚠️ tabindex="1" 이상: 사용하지 마세요! 자연 순서를 깨뜨립니다 -->

/* 포커스 스타일을 절대 제거하지 마세요 */
/* ❌ 나쁜 예 */
*:focus { outline: none; }

/* ✅ 좋은 예: 커스텀 포커스 스타일 제공 */
:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}

/* 마우스 클릭 시에는 포커스 링 숨기기 */
:focus:not(:focus-visible) {
  outline: none;
}

/* 스킵 내비게이션 — 키보드 사용자가 바로 본문으로 이동 */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
}

.skip-link:focus {
  top: 0;
  background: #10b981;
  color: #fff;
  padding: 8px 16px;
}

<!-- ✅ 의미 있는 이미지: 설명 제공 -->
<img src="chart.png" alt="2024년 매출 추이: 1분기 120억에서 4분기 180억으로 증가" />

<!-- ✅ 장식 이미지: 빈 alt -->
<img src="decorative-line.svg" alt="" />

<!-- ✅ 색상 외 추가 단서 제공 -->
<span class="status-error">
  <svg><!-- ⚠️ 아이콘 --></svg>
  오류: 이메일 형식이 올바르지 않습니다
</span>

<!-- ❌ 색상만으로 정보 전달 (접근성 위반) -->
<span style="color: red;">오류 발생</span>