image의 alt

개발을 하면서 alt에 대해 내가 알고 있던 것은 네트워크 에러 시에 따는 대체 텍스트라는 것이었다. 그리고 블로그에서 사용하는 이미지의 캡션 정도로 알고 있었다. 이것 외에도 alt 속성이 발휘할 수 있는 힘은 다양하다.

<img
  class="fit-picture"
  src="/shared-assets/images/examples/grapefruit-slice.jpg"
  alt="Grapefruit slice atop a pile of other slices" />

대체 텍스트

위에서 언급했듯, 이미지를 로드할 수 없는 상황에서 대체 텍스틀 제공하여 사용자에게 이미지를 이해할 수 있도록 돕는 역할을 한다. 그러한 상황에는 네트워크 문제 혹은 존재하지 않는 이미지일 때가 있다. 그 때는 이미지 대신 alt 속성에 작성된 문구로 표시되어 이미지의 의도를 전달할 수 있다.

접근성 측면

이 부분이 예상하지 못했던 부분이었다.
작년 하반기에, 접근성 관련해서 아이디어 기획 관련 프로젝트를 진행한 적이 있다. 시각장애 사용자를 위한 프로젝트였는데 그 때 스크린 리더의 개념을 알게 되었고 스크린 리더가 이미지를 읽을 때는 alt 속성을 읽는다는 것을 알게 되었다. 스크린 리더 사용자는 alt의 텍스트를 음성으로 듣게 된다. alt 속성을 사용하면 시각 장애 여부와 상관없이 누구나 이미지 컨텐츠를 이해할 수 있다.

SEO 측면

검색 엔진은 이미지를 시각적으로 분석할 수 없기 때문에 alt 속성에 텍스트를 기반으로 이미지의 컨텐츠를 이해하고 이를 검색 결과에 반영한다. 적절한 키워드가 포함된 alt 속성은 이미지 검색에서 상위 노출을 도울 수 있다.