alt 속성
alt 속성은 이미지가 전달하는 의미를 텍스트로 제공해 이미지 로딩 실패, 보조 기술, 검색 엔진이 이미지를 이해할 수 있게 하는 HTML 속성입니다.
핵심 역할
- 대체 텍스트: 이미지가 로드되지 않을 때 이미지 대신 표시됩니다.
- 접근성: 스크린 리더가 이미지의 의미를 사용자에게 전달할 수 있습니다.
- SEO: 검색 엔진이 이미지 콘텐츠와 문맥을 이해하는 데 도움을 줍니다.
작성 기준
의미 있는 이미지는 이미지가 전달하는 정보를 간결하게 설명해야 합니다.
<img src="chart.png" alt="2026년 2분기 매출이 전분기 대비 18% 증가한 그래프" />
장식용 이미지는 alt=""처럼 빈 문자열을 사용해 보조 기술이 건너뛰게 하는 편이 좋습니다.
<img src="divider.png" alt="" />
주의사항
- 파일명이나 “이미지” 같은 표현만 넣으면 의미 전달이 부족합니다.
- 주변 텍스트와 같은 설명을 반복하면 스크린 리더 사용자에게 불필요한 중복이 생깁니다.
- 버튼이나 링크 안의 이미지는 시각적 모양보다 실제 동작을 설명해야 합니다.
<a href="/search">
<img src="search.svg" alt="검색" />
</a>
핵심 정리
alt 속성은 이미지를 볼 수 없는 상황에서도 같은 정보를 전달하기 위한 장치입니다.
의미 있는 이미지는 내용을 설명하고, 장식 이미지는 빈 alt를 사용합니다.