alt 속성은 HTML에서 <img> 요소(이미지 삽입 요소)의 속성(attribute) 중 하나로, 이미지를 표시할 수 없는 상황에서 대신 표시될 대체 텍스트(alternative text)를 지정한다. HTML 표준(HTML Living Standard)에 정의된 정식 속성이며, 웹 접근성(Web Accessibility) 측면에서 핵심적인 역할을 수행한다.
정의 및 목적
alt 속성은 이미지의 시각적 콘텐츠를 텍스트로 대체하여 제공하는 것을 목적으로 한다. 브라우저가 항상 이미지를 표시하는 것은 아니며, 다음과 같은 상황에서 alt 속성의 값이 활용된다.
- 비시각적 브라우저(시각 장애인이 사용하는 스크린 리더 등)
- 사용자가 이미지 불러오기를 거부한 경우(대역폭 절약, 개인정보 보호 등)
- 유효하지 않은 이미지이거나 지원하지 않는 형식인 경우
- 네트워크 오류, 콘텐츠 차단, 죽은 링크 등으로 이미지를 표시할 수 없는 경우
사용 가능한 HTML 요소
alt 속성은 주로 <img> 요소에서 사용되지만, HTML 명세에 따르면 <area>, <input type="image"> 요소에서도 사용할 수 있다.
속성값 작성 원칙
HTML 표준은 alt 속성의 값이 이미지와 동등한(equivalent) 콘텐츠를 제공해야 한다고 명시한다. 즉, 페이지의 모든 이미지를 각각의 alt 값으로 완전히 바꾸어도 페이지의 의미가 바뀌지 않아야 한다. 주요 작성 지침은 다음과 같다.
- 정보 제공 이미지: 이미지의 내용을 간결하고 명확하게 설명하는 텍스트를 제공한다. "이미지", "사진"과 같은 단어나 파일 이름은 포함하지 않는다.
- 기능적 이미지(링크나 버튼으로 사용되는 이미지): 이미지의 시각적 형태가 아니라 해당 링크나 버튼의 목적지 또는 기능을 설명하는 텍스트를 제공한다.
- 장식용 이미지: 콘텐츠에 의미를 추가하지 않는 순수 장식용 이미지의 경우, 빈 문자열(
alt="")을 지정한다. 이 경우 스크린 리더는 해당 이미지를 무시한다. - 텍스트 이미지: 이미지 자체가 텍스트로 구성된 경우,
alt속성값은 이미지에 쓰인 텍스트와 동일해야 한다. - 주변 텍스트와 중복되는 이미지: 이미지 주변에 동일한 정보가 텍스트로 이미 제공되고 있다면 빈
alt속성(alt="")을 사용한다. - 복잡한 이미지(그래프, 차트, 다이어그램 등): 이미지가 전달하는 정보를 텍스트로 상세히 설명하거나, 페이지 내 다른 곳에 동일한 정보를 제공한다.
alt 속성 생략과 빈 값의 차이
alt속성을 아예 지정하지 않은 경우: 이미지가 콘텐츠의 중요 부분이지만 텍스트로 표현할 수 없음을 의미한다. 일부 스크린 리더는 파일 이름을 읽어주는 경우가 있어 혼란을 줄 수 있다.alt=""(빈 문자열): 이미지가 콘텐츠의 중요 부분이 아니므로(장식 또는 추적용 픽셀 등) 비시각적 브라우저가 렌더링하지 않아도 된다는 의미다. 시각적 브라우저도alt가 비어있을 경우 깨진 이미지 아이콘을 표시하지 않는다.
title 속성과의 차이
title 속성은 요소 위에 마우스를 올렸을 때 표시되는 툴팁(tooltip)을 제공하지만, alt 속성을 대체할 수 없다. alt는 이미지가 로드되지 않을 때 대체 텍스트로 사용되는 반면, title은 추가 정보를 제공하는 보조적 수단이다. 또한 alt의 값을 title에 반복하는 것은 스크린 리더가 설명을 두 번 읽게 되어 혼란을 줄 수 있으므로 피해야 한다.
접근성 및 SEO 측면
alt 속성은 웹 콘텐츠 접근성 지침(WCAG, Web Content Accessibility Guidelines)의 핵심 요구사항 중 하나로, 성공 기준 1.1.1(비텍스트 콘텐츠)과 직접적으로 관련된다. 또한 검색 엔진은 이미지의 내용을 이해하기 위해 alt 속성을 참조하므로 검색 엔진 최적화(SEO) 측면에서도 중요하게 여겨진다. 다만 alt 속성의 본래 목적은 검색 엔진 최적화가 아닌 웹 접근성 향상에 있음에 유의해야 한다.
브라우저 호환성
alt 속성은 모든 주요 브라우저(Chrome, Edge, Firefox, Safari)에서 폭넓게 지원되며, HTML 초기 버전부터 존재해 온 오래된 속성이다.
