alt attribute는 이미지의 콘텐츠나 기능을 설명하는 텍스트 대안을 제공합니다. 이미지를 볼 수 없는 사용자와 도구를 위해 쓰입니다.
html
<img src="chart.png" alt="Sales grew 40% from Q1 to Q2" />
alt를 소리 내어 읽어, 시각 장애가 있는 사용자가 이미지가 전달하는 바를 알 수 있습니다. 이것이 없으면 파일 이름이나 그냥 "image"만 듣게 되어 쓸모가 없습니다.alt 텍스트를 보여줍니다.alt를 사용해 이미지를 이해하고 색인합니다(이미지 SEO).<!-- ✅ "image of..."가 아니라 의미를 설명하라 -->
<img src="dog.jpg" alt="A golden retriever catching a frisbee" />
<!-- ✅ 기능적 이미지는 동작을 설명하라 -->
<a href="/home"><img src="logo.png" alt="Acme home" /></a>
<!-- ✅ 장식용 이미지는 빈 alt를 주어 스크린 리더가 건너뛰게 하라 -->
<img src="divider.png" alt="" />
alt=""(비어 있지만 존재함)은 중요합니다. 스크린 리더에게 "이것은 장식용이니 무시하라"고 알려줍니다. alt를 완전히 생략하는 것은 다릅니다. 그러면 리더가 파일 이름을 읽을 수 있습니다.
alt는 이미지에 대해 가장 중요한 accessibility attribute이며 accessibility 표준(WCAG)에 따른 법적 요구사항입니다.
시각 장애가 있는 사용자가 콘텐츠를 인지할 수 있게 하고, 이미지가 깨졌을 때 대체 수단을 제공하며, SEO에 도움이 됩니다. 이미지가 맥락 속에서 무엇을 의미하는지를 설명하고, 순수하게 장식용인 이미지에는 alt=""를 사용하십시오.