Day 8) 이미지의 대체 텍스트(alt text)

🎄  A11y Advent Calendar (번역) 8일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :)

 

이미지에 대한 대체 텍스트는 이미지가 로드되지 않거나, 이미지를 인식하지 못하는 사용자들이 텍스트 콘텐츠를 통해 의미를 파악할 수 있도록 돕기 위해 사용됩니다. 이는 검색 엔진 최적화는 물론, 스크린 리더를 사용하는 사용자들에게도 매우 중요한 요소입니다.

 

웹에는 대체 텍스트를 작성하는 방법에 대한 많은 리소스가 있지만, 그중에서도 Daniel Göransson의 가이드는 간결하면서도 핵심을 잘 전달해 주는 좋은 예로 꼽힙니다. 주요 내용을 요약하면 다음과 같습니다

 

• 대체 텍스트는 이미지를 설명하는 데 집중해야 합니다. 크레딧, 저작자 표시, 또는 키워드를 채우는 용도로 적합하지 않습니다
• 주요 콘텐츠에 집중하고, 세부 사항을 과도하게 설명하지 않도록 주의하세요. 가능한 한 간결하고 핵심을 전달하세요
• 사진, 그림 또는 이미지라고 언급하지 마세요. alt 속성이 이미 이미지임을 암시하기 때문에 불필요합니다
• 가능하면 마침표로 끝내서 스크린 리더가 알림 후 잠시 멈추도록 하세요

대체 텍스트를 완전히 생략하고 속성을 비워두는 경우(alt="")도 있습니다:

• 이미지가 decoration용이거나 문서 이해에 도움이 되지 않는 경우.
• 기사 목록의 타일이미지나 텍스트가 있는 링크의 아이콘과 같이 이미 주변에 있는 텍스트를 반복하는 경우.
• 피드나 채팅 대화에서 사용자의 프로필 사진처럼 목록의 일부로 반복되는 이미지

이미지는 웹에서 매우 중요한 요소입니다. 하지만 모든 사용자가 이미지를 동일한 방식으로 인식하지는 못합니다. 따라서 이미지에 적절한 대체 텍스트를 제공하는 것은 모든 사용자에게 정보를 공평하게 전달하는 중요한 접근성 고려 사항입니다.

 

alt를 잘 작성하기 위한 가이드를 읽어보고 싶으시다면 제가 작성한 글을 함께 첨부드립니다 :) 

 

 

출처 Day 8) Alternative Text To Images