SVG 접근성: 벡터 그래픽을 포용적으로 만드는 방법

WCAG 2.1 요구사항:
- 비텍스트 콘텐츠에는 대안이 필요
- 색상만으로 정보를 전달하지 않음
- 충분한 색상 대비
- 손실 없이 크기 조절 가능
- 포커스 가능한 요소는 키보드로 접근 가능

<svg aria-hidden="true" focusable="false">
  <!-- 장식용 그래픽 -->
</svg>

<svg role="img" aria-labelledby="chart-title">
  <title id="chart-title">매출 성장 2025</title>
  <!-- 차트 콘텐츠 -->
</svg>

<svg role="img" aria-labelledby="title desc">
  <title id="title">조직도</title>
  <desc id="desc">
    CEO가 최상단에 있는 계층 구조,
    세 명의 VP가 보고하며 각각 팀을 보유.
  </desc>
  <!-- 복잡한 다이어그램 -->
</svg>

<!-- 역할 정의 -->
role="img"           <!-- 정적 이미지 -->
role="graphics-document"  <!-- 복잡한 인터랙티브 -->

<!-- 라벨 -->
aria-label="..."     <!-- 간단한 설명 -->
aria-labelledby="..." <!-- 제목 요소 참조 -->
aria-describedby="..." <!-- 상세 설명 -->

<!-- 상태 -->
aria-hidden="true"   <!-- AT에서 숨기기 -->
focusable="false"    <!-- 포커스 방지 -->

<svg role="img" aria-labelledby="icon-title icon-desc">
  <title id="icon-title">경고</title>
  <desc id="icon-desc">
    주의를 나타내는 느낌표가 있는 노란 삼각형
  </desc>
  <path d="..."/>
</svg>

<svg>
  <a href="/section-1" tabindex="0">
    <rect x="0" y="0" width="100" height="50"/>
    <text>섹션 1</text>
  </a>
</svg>

svg a:focus,
svg [tabindex]:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

svgElement.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    // 요소 활성화
  }
});

최소 요구사항:
텍스트: 4.5:1 (일반), 3:1 (큰 텍스트)
그래픽: 배경 대비 3:1
UI 컴포넌트: 3:1

<!-- 나쁜 예: 색상만 -->
<circle fill="red"/>  <!-- 에러 -->
<circle fill="green"/>  <!-- 성공 -->

<!-- 좋은 예: 패턴 + 색상 -->
<circle fill="red">
  <title>에러</title>
</circle>
<use href="#checkmark" fill="green">
  <title>성공</title>
</use>

<button aria-label="대화상자 닫기">
  <svg aria-hidden="true" focusable="false">
    <path d="..."/>
  </svg>
</button>

<button>
  <svg aria-hidden="true"><!-- 아이콘 --></svg>
  문서 저장
</button>

<svg role="img" aria-label="알림: 읽지 않은 메시지 3개">
  <circle cx="12" cy="12" r="10" fill="#ff0000"/>
  <text x="12" y="16" text-anchor="middle">3</text>
</svg>

@media (prefers-reduced-motion: reduce) {
  svg * {
    animation: none !important;
    transition: none !important;
  }
}

<button id="toggle-animation">
  애니메이션 일시정지
</button>

<svg class="animated-svg">
  <!-- 애니메이션 콘텐츠 -->
</svg>

<a href="/">
  <svg role="img" aria-label="회사명 - 홈">
    <title>회사 로고</title>
    <!-- 로고 경로 -->
  </svg>
</a>

<svg role="img" aria-labelledby="chart-title">
  <title id="chart-title">월별 매출 2025</title>
  <desc>1월 ₩1,500만에서 12월 ₩6,750만으로
        매출이 증가하는 막대 차트</desc>

  <!-- 대체 테이블 제공 -->
</svg>
<table class="sr-only">
  <!-- 접근성 있는 데이터 테이블 -->
</table>

<svg class="icon" aria-hidden="true" focusable="false">
  <use href="#icon-search"/>
</svg>
<span class="icon-label">검색</span>