2026-03-26

이미지 alt 속성

alt 속성이란?

alt는 alternative text의 줄임말

이미지를 볼 수 없을 때 그 이미지를 대신 설명해주는 텍스트

<img src="profile.jpg" alt="사용자 프로필 사진" />

⇒ 이미지를 불러오지 못하거나 스크린 리더를 사용하는 경우 이미지 대신 전달되는 정보

왜 필요한가?

  • 웹 접근성 스크린 리더를 사용하는 시각 장애 사용자는 이미지를 직접 볼 수 없기 때문에, alt 속성을 통해 이미지의 내용을 음성으로 듣게 됨
  • 이미지 로드 실패 대응
    • 네트워크 문제 등으로 이미지를 로드할 수 없는 상황에서 대체 텍스트를 제공
    • 사용자에게 콘텐츠를 이해할 수 있도록 돕는 역할
  • 의미 전달 이미지가 단순 장식이 아니라 중요한 정보라면 그 정보를 텍스트로 보완해야 한다.
  • SEO 보조 검색 엔진은 이미지를 시각적으로 분석할 수 없기 때문에, alt 속성에 포함된 텍스트를 기반으로 이미지의 콘텐츠를 이해하고 이를 검색 결과에 반영 적절한 키워드가 포함된 alt 속성은 이미지 검색에서 상위 노출을 도울 수 있습니다.

모든 이미지에 alt 속성을 꼭 작성해야하나?

단순 장식용 이미지는 의미 전달이 목적이 아니므로 alt=""처럼 빈 문자열로

<img src="divider.png" alt="" />

이렇게 해야 스크린 리더가 불필요하게 읽지 않는다.

⇒ alt를 아예 생략하는 것과 alt=""는 다르다.

  • alt 생략 → 스크린 리더가 파일명 등을 읽을 수 있음
  • alt="" → 장식용 이미지라고 명확히 전달

참고자료

  • https://developer.mozilla.org/ko/docs/Web/HTML/Reference/Elements/img#alt
  • https://codingeverybody.kr/html-img-alt-%EC%86%8D%EC%84%B1/
  • https://idearabbit.co.kr/%EA%B2%80%EC%83%89-%EC%97%94%EC%A7%84-%EC%B5%9C%EC%A0%81%ED%99%94-%EB%B0%A9%EB%B2%95/alt-tag/

results matching ""

    No results matching ""