HTML alt 속성, 빈 값 명시와 alt 생략의 차이

이미지에 alt를 어떤 기준으로 넣어야 하는지 다시 짚어봤다. 특히 장식용 이미지에서 alt를 어떻게 처리할지가 애매했다.

alt를 "선택"이라고 생각하면 안 됐던 이유

스크린 리더는 <img>에 글자가 아니라 이미지가 들어있다는 사실만 알지, 그 이미지가 무엇인지는 모른다. alt가 있어야 그 자리에서 대신 읽어준다. 네트워크가 끊겨 이미지가 깨졌을 때도 alt 텍스트가 대신 표시된다. 검색엔진도 이미지의 의미를 alt를 통해 파악하니 SEO에도 영향이 있다.

써도 좋고 안 써도 좋은 속성이라고 가볍게 봤었는데, 사실상 필수였다.

alt 생략과 alt=""는 스크린 리더에서 다르게 읽힌다

장식용 이미지에는 alt가 필요 없다고 알고 있었다. 구분선, 배경 느낌의 데코, 정보를 담지 않는 아이콘 같은 것들. 여기까지는 맞다.

걸린 건 "비워둔다"가 정확히 무엇을 뜻하는지였다. alt를 아예 안 쓰는 것과 alt=""를 넣는 것은 다르다. alt 속성 자체가 없으면 스크린 리더가 fallback으로 이미지의 src 파일명을 읽어버린다. decorative-line-bg-final-v2.png 같은 게 읽힌다는 뜻이다.

그래서 장식 이미지라도 alt를 생략하는 게 아니라 alt=""를 명시적으로 적어야 한다. 또는 role="presentation"을 붙여서 보조 기술이 이 이미지를 무시하도록 알려주는 방법도 있다.

<img src="decorative-line.png" alt="" />
<img src="ornament.svg" role="presentation" />

스크린 리더가 의미 없는 파일명까지 읽지 않게 하려면 alt 자체를 빼는 게 아니라 빈 값을 명시해야 한다.