대체 텍스트 규칙

대체 텍스트(alt)는 단순한 설명 문구가 아니라, 이미지의 역할과 의미를 전달하기 위한 구조 요소입니다. 대체 텍스트는 많을수록 좋은 것이 아니라, 정확할수록 좋은 정보입니다.

---

대체 텍스트의 역할

대체 텍스트는 다음 역할만을 담당합니다.

• 이미지를 볼 수 없는 사용자에게 의미 전달
• 이미지의 기능 또는 정보를 보완
• 보조 기술이 이미지를 올바르게 해석하도록 지원

대체 텍스트는 이미지를 설명하기 위한 장식 문구가 아닙니다.

---

역할별 대체 텍스트 규칙

이미지의 역할 3분류는 이미지 역할에서 정의합니다. 여기서는 그 역할별로 대체 텍스트를 어떻게 작성하는지만 다룹니다.

정보 전달 이미지

의미나 정보를 전달하는 이미지는 반드시 대체 텍스트를 제공해야 합니다.

대체 텍스트는 이미지가 전달하려는 핵심 의미만 포함해야 합니다.

<img src="/sales-q4.png" alt="분기별 매출 그래프">

<!-- ❌ 나쁜 예: 역할 대신 무의미한 표현 -->
<img src="/sales-q4.png" alt="이미지">
<img src="/sales-q4.png" alt="그래프 사진">

---

기능 이미지

동작을 유발하는 이미지에는 기능을 설명하는 대체 텍스트를 제공합니다.

이 경우 대체 텍스트는 이미지의 모양이 아니라 기능을 설명해야 합니다.

<button class="btn m_primary" type="button"><img class="i_icon" src="/icon-search.svg" alt="검색"></button>

<!-- ❌ 나쁜 예: 기능이 아니라 모양을 설명 -->
<button class="btn m_primary" type="button"><img class="i_icon" src="/icon-search.svg" alt="돋보기 아이콘"></button>

---

장식 이미지

순수 장식 목적의 이미지는 대체 텍스트를 제공하지 않습니다.

이 경우 alt=""를 사용해 보조 기술의 읽기 대상에서 제외합니다.

<img class="i_deco" src="/divider.svg" alt="">

<!-- ❌ 나쁜 예: 장식인데 무의미한 alt로 읽게 만듦 -->
<img class="i_deco" src="/divider.svg" alt="장식 이미지">

---

중복 대체 텍스트 금지

이미지 주변에 이미 동일한 텍스트 정보가 존재하는 경우, 중복된 대체 텍스트를 제공하지 않습니다.

• 캡션과 동일한 내용
• 버튼 텍스트와 동일한 의미
• 문맥상 충분히 설명되는 이미지

중복된 대체 텍스트는 정보 전달을 방해할 수 있습니다.

---

대체 텍스트 작성 기준

대체 텍스트를 작성할 때는 다음을 기준으로 합니다.

• 간결하고 명확한 표현 사용
• 불필요한 수식어 제거
• “이미지”, “사진”과 같은 표현 사용 금지
• 문맥 없이도 의미가 전달되는지 확인

대체 텍스트는 UI 설명이 아니라 의미 전달 수단입니다.

---

대체 텍스트 규칙의 목적

대체 텍스트 규칙은 접근성을 충족하기 위한 의무 사항이 아니라, UI 의미를 정확히 전달하기 위한 기준입니다.

대체 텍스트가 명확할수록 UI는 더 많은 사용자에게 자연스럽게 전달됩니다.