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

연말에 메모장을 정리하다가 alt 속성에 대해 적어둔 노트가 나왔다. 다시 읽어보니 두 번째 섹션에 적힌 내용이 살짝 부정확해서 그 자리에서 고쳤다.

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

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

써도 좋고 안 써도 좋은 속성이라고 가볍게 봤었는데, 막상 정리해놓고 보니 사실상 필수다.

"비워두면 됨"이라고 적어뒀는데, 정확히는 빈 문자열을 넣는 거였다

장식용 이미지에는 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 자체를 빼는 게 아니라 빈 값을 명시해야 한다. 메모 다시 읽다가 알았다.