Skip to content

대체 텍스트 규칙

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


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

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

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


이미지 유형별 대체 텍스트 기준

Section titled “이미지 유형별 대체 텍스트 기준”

SLUR UI System에서는 이미지의 역할에 따라
대체 텍스트 작성 여부와 내용을 구분합니다.

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

  • 아이콘이 의미를 가지는 경우
  • 정보 그래픽, 설명 이미지
  • 텍스트를 포함한 이미지

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


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

  • 버튼 역할의 이미지
  • 링크 역할의 이미지

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


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

  • 시각적 장식
  • 배경 이미지
  • 의미 없는 아이콘

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


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

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

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


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

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

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


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

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