대체 텍스트

개요

대체 텍스트(Alt Text)는 HTML <img> 요소의 alt 속성에 입력하는 짧은 텍스트로, 이미지가 시각적으로 보여주는 내용을 글로 옮긴 값입니다. 이미지를 직접 볼 수 없는 상황에서 그 이미지를 대신하는 텍스트라고 이해하면 됩니다.

대체 텍스트는 크게 세 가지 역할을 합니다. 첫째, 접근성입니다. 스크린리더는 이미지 자리에서 alt 값을 소리 내어 읽어 주므로, 시각 장애가 있는 사용자가 이미지의 내용과 기능을 인지할 수 있습니다. 둘째, 이미지 검색입니다. 검색엔진은 alt 텍스트를 페이지 맥락과 함께 활용해 이미지의 주제를 파악합니다. 셋째, 대체 표시입니다. 네트워크 오류, 잘못된 이미지 형식, 콘텐츠 차단 등으로 이미지가 로드되지 않을 때 브라우저가 alt 텍스트를 대신 보여 줍니다.

모범 사례

• 간결성: 정확하면서도 간결하게 작성합니다. 이미지의 내용과(링크된 이미지라면) 기능을 핵심만 담습니다.
• 맥락 반영: 주변 텍스트가 이미 이미지를 설명하고 있다면 짧게 줄이고, 맥락만으로 이미지를 이해하기 어렵다면 더 충실하게 설명합니다.
• 키워드 스터핑 금지: alt 속성을 키워드로 가득 채우는 행위는 사용자 경험을 해치고 스팸으로 판단될 수 있습니다.
• 군더더기 표현 제거: "이미지", "~사진" 같은 표현은 스크린리더가 이미 이미지임을 알려 주므로 넣지 않습니다.
• 장식용 이미지: 정보 가치가 없는 순수 장식 이미지는 빈 alt(alt="")로 처리해 스크린리더가 건너뛰게 합니다. 가능하면 CSS 배경 이미지로 처리하는 방법도 있습니다.
• alt 속성 자체는 항상 포함: 빈 값이라도 모든 이미지에 alt 속성을 둡니다.

코드 예시

<!-- 권장: 무엇을 보여 주는지 구체적으로 설명 -->
<img src="puppy.jpg" alt="공놀이를 하는 달마시안 강아지">

<!-- 비권장: 모호하거나 비어 있음 -->
<img src="puppy.jpg" alt="강아지">

<!-- 비권장: 키워드 스터핑 -->
<img src="puppy.jpg" alt="강아지 강아지 분양 강아지 사진 댕댕이 강아지 종류">

<!-- 장식용 이미지: 빈 alt -->
<img src="divider.png" alt="">

근거

• Google 이미지 SEO 문서는 "키워드를 적절히 사용해 맥락에 맞는 유용하고 정보가 풍부한" alt 텍스트를 권장하며, alt="강아지"보다 alt="공놀이를 하는 달마시안 강아지"처럼 구체적인 설명을 선호합니다. 또한 키워드 스터핑은 부정적 경험을 유발하고 스팸으로 간주될 수 있다고 명시합니다.
• WebAIM은 스크린리더가 이미지 자리에서 대체 텍스트를 읽어 준다고 설명하며, 정확하고 등가적이되 간결할 것, 주변 맥락을 고려할 것, 장식 이미지는 alt=""로 둘 것을 권장합니다.
• MDN은 alt 속성이 필수이며, 비시각 브라우저, 이미지 미표시 설정, 지원하지 않는 형식, 로드 오류 시에 대체 텍스트가 표시된다고 설명합니다. 장식 이미지는 빈 alt로 처리하라고 안내합니다.

실행 체크리스트

• 모든 의미 있는 이미지에 내용을 설명하는 alt 텍스트를 작성했는가
• 설명이 정확하면서도 간결한가
• 주변 텍스트와 중복되지 않고 페이지 맥락에 맞는가
• 키워드를 나열하지 않았는가
• "이미지", "사진" 같은 군더더기 표현을 뺐는가
• 장식용 이미지는 빈 alt(alt="")로 처리했는가
• 빈 값이라도 모든 이미지에 alt 속성이 존재하는가

참고·출처

• Google Search Central — Google Images SEO best practices
• WebAIM — Alternative Text
• MDN — The Image Embed element (<img>)