060. 접근성(a11y) — 색상 대비, 키보드 내비게이션, ARIA

일반 텍스트 (18px 미만 또는 Bold 14px 미만):  대비율 4.5:1 이상
큰 텍스트 (18px 이상 또는 Bold 14px 이상):    대비율 3:1 이상
UI 컴포넌트, 그래픽:                           대비율 3:1 이상

# 흔히 실패하는 사례
배경: #FFFFFF (흰색)
텍스트: #9CA3AF (회색) → 대비율 2.85:1 ← AA 실패

배경: #FFFFFF
텍스트: #6B7280 (더 진한 회색) → 대비율 4.61:1 ← AA 통과

# 브랜드 컬러 사용 시
배경: #3B82F6 (파란색)
텍스트: #FFFFFF (흰색) → 대비율 3.07:1 ← 큰 텍스트만 AA 통과
텍스트: #1E3A8A (진한 파란색) → 대비율 4.73:1 ← AA 통과

// 나쁜 예: 색상만으로 오류 표시
<Input style={{ borderColor: 'red' }} />

// 좋은 예: 색상 + 아이콘 + 텍스트
<Input
  error
  style={{ borderColor: 'var(--color-danger)' }}
/>
<span>
  <ErrorIcon aria-hidden="true" />
  이메일 형식이 올바르지 않습니다
</span>

/* 나쁜 예: 포커스 표시 제거 */
*:focus { outline: none; }

/* 좋은 예: 대체 포커스 스타일 */
*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
/* :focus-visible은 마우스 클릭 시에는 적용 안 되고 키보드 포커스 시에만 적용됨 */

// 커스텀 버튼처럼 동작하는 div
<div
  role="button"
  tabIndex={0}
  aria-pressed={isActive}
  onClick={handleClick}
  onKeyDown={(e) => e.key === 'Enter' && handleClick()}
>
  좋아요
</div>

// 아이콘만 있는 버튼 — 스크린 리더에게 의미 전달
<button aria-label="검색">
  <SearchIcon aria-hidden="true" />
</button>

// 로딩 상태 알림
<button aria-busy={isLoading} disabled={isLoading}>
  {isLoading ? '저장 중...' : '저장'}
</button>

// 오류 메시지 연결
<input
  id="email"
  aria-describedby="email-error"
  aria-invalid={hasError}
/>
<p id="email-error" role="alert">
  이메일 형식이 올바르지 않습니다
</p>

// 의미 있는 이미지
<img src="profile.jpg" alt="홍길동 프로필 사진" />

// 장식용 이미지 (건너뜀)
<img src="decoration.svg" alt="" aria-hidden="true" />

// 나쁜 예
<input placeholder="이메일을 입력하세요" />

// 좋은 예
<label htmlFor="email">이메일</label>
<input id="email" placeholder="example@email.com" />

<div aria-live="polite" aria-atomic="true">
  {statusMessage}  {/* 장바구니에 추가됐습니다 등 */}
</div>