image 요소의 alt 속성은 어떤 목적으로 사용하나요
이미지의 alt 속성은 단순한 부가 설명이 아니라, 이미지를 사용할 수 없는 상황에서도 콘텐츠의 의미를 전달하기 위한 속성입니다.
대체 텍스트 제공
이미지가 네트워크 문제나 경로 오류로 로드되지 않으면 alt에 작성한 텍스트가 대신 표시됩니다. 사용자는 이미지를 보지 못해도 이미지가 전달하려던 내용을 이해할 수 있습니다.
접근성
스크린 리더를 사용하는 사용자는 이미지를 직접 볼 수 없습니다. 이때 alt 텍스트가 음성으로 읽히므로 이미지 콘텐츠에 접근할 수 있습니다. 따라서 의미 있는 이미지는 목적과 내용을 구체적으로 설명해야 합니다.
SEO
검색 엔진은 이미지의 의미를 텍스트 정보로 판단합니다. 적절한 alt 텍스트는 이미지 검색과 페이지 문맥 이해에 도움을 줄 수 있습니다.
모든 이미지에 설명이 필요한가?
반드시 그렇지는 않습니다. 배경 장식이나 구분선처럼 의미를 전달하지 않는 이미지는 alt=""로 비워두는 것이 좋습니다. 이렇게 하면 스크린 리더가 불필요한 이미지를 건너뜁니다.
<img src="profile.png" alt="김민수 개발자의 프로필 사진" />
<img src="decorative-line.png" alt="" />
정리
alt 속성은 대체 텍스트, 접근성, SEO를 위해 사용됩니다. 의미 있는 이미지는 설명하고, 장식 이미지는 빈 값을 사용해 보조 기술의 탐색 부담을 줄입니다.