🖼️ `alt` 속성 누락 또는 오용: 이미지 접근성의 맹점

웹 접근성 저해 (스크린 리더 사용자): 시각 장애가 있는 사용자는 스크린 리더를 통해 웹 페이지 콘텐츠를 이해합니다. alt 속성이 없거나 부적절하면, 스크린 리더는 이미지가 무엇을 나타내는지 전달할 수 없으므로, 사용자는 이미지에 담긴 중요한 정보나 문맥을 완전히 놓치게 됩니다. 이는 웹 사이트의 포괄성을 심각하게 해칩니다.

SEO (검색 엔진 최적화) 불리: 검색 엔진 크롤러는 alt 텍스트를 사용하여 이미지의 내용을 파악합니다. 적절한 alt 텍스트가 없으면 검색 엔진이 이미지를 제대로 이해하고 인덱싱하기 어려워집니다. 이는 이미지 검색 결과나 전체 페이지의 검색 엔진 순위에 부정적인 영향을 미칠 수 있습니다.

이미지 로딩 실패 시 문맥 상실: 네트워크 문제, 경로 오류 등으로 인해 이미지가 로드되지 못했을 때, 브라우저는 깨진 이미지 아이콘과 함께 alt 텍스트를 표시합니다. alt 텍스트가 없거나 의미 없는 내용이라면, 사용자는 이미지가 있어야 할 자리에 무엇이 있었는지 전혀 파악할 수 없어 혼란을 겪게 됩니다.

콘텐츠의 의미 부족: alt 속성은 이미지가 전달하는 정보를 텍스트 형태로 보완하여, 콘텐츠의 전체적인 의미와 맥락을 풍부하게 만듭니다. alt 속성이 부재하거나 오용되면, 이 중요한 의미론적 연결 고리가 끊어져 정보의 전달력이 약해집니다.

모든 의미 있는 이미지에 alt 속성 제공: 이미지가 콘텐츠의 핵심적인 정보를 전달하거나 문맥을 제공한다면, 반드시 간결하면서도 정확하게 이미지를 설명하는 alt 텍스트를 포함해야 합니다. 예를 들어, alt="메인 페이지로 이동하는 로고" 보다는 alt="회사 로고"가 더 적절할 수 있습니다.

• 나쁜 예: <img src="dog.jpg" alt="" /> (강아지 사진인데 빈 값)
• 좋은 예: <img src="dog.jpg" alt="잔디밭에서 뛰어노는 골든 리트리버" />

장식용 이미지에는 alt="" 사용: 이미지가 순전히 시각적인 목적(예: 테두리, 배경 이미지, 구분선 등)으로 사용되며 콘텐츠에 어떤 정보도 추가하지 않는다면, alt="" (빈 alt 속성)으로 처리해야 합니다. 이는 스크린 리더가 해당 이미지를 건너뛰도록 지시하여 불필요한 반복이나 혼란을 방지합니다.

• 나쁜 예: <img src="spacer.gif" alt="스페이서 이미지" /> (장식용인데 텍스트가 있음)
• 좋은 예: <img src="line.png" alt="" /> (장식용 구분선 이미지)

간결하고 명확하게 작성: alt 텍스트는 이미지의 핵심 내용을 전달하되, 불필요한 단어를 피하고 간결하게 작성해야 합니다. "이미지", "사진"과 같은 단어는 스크린 리더가 이미지를 읽을 때 자동으로 알려주므로 중복해서 작성할 필요가 없습니다.

복잡한 이미지 처리: 그래프, 차트, 다이어그램 등 정보량이 많은 이미지의 경우, alt 속성에는 간략한 요약이나 제목을 넣고, aria-describedby 속성을 사용하여 이미지에 대한 더 자세한 설명을 제공하는 별도의 텍스트 블록이나 링크를 연결할 수 있습니다.