Alt 속성, 또는 대체 텍스트(Alternative Text)는 HTML에서 이미지 태그(<img>)에 사용되는 속성입니다. 이 속성은 이미지를 표시할 수 없거나, 이미지를 인식할 수 없는 사용자를 위한 텍스트 정보를 제공합니다.
Alt 속성은 웹 접근성이 중요한 부분 중 하나로, 시각 장애인이나 저시력자들이 스크린 리더를 사용하여 웹사이트를 탐색할 때 중요한 역할을 합니다. 또한, 이미지가 로드되지 않을 때, 대신 표시되는 텍스트로서 웹사이트의 사용성을 향상시킵니다.
사용 예시
HTML 코드 내에서 이미지 태그는 다음과 같이 사용됩니다.
<img src="image.jpg" alt="설명하는 텍스트">이 경우, alt 속성은 “설명하는 텍스트”라는 값을 가집니다. 이미지가 표시되지 않거나, 스크린 리더를 사용하는 사람이 이 이미지를 접근할 때, 이 텍스트가 사용됩니다.
주의점
alt속성은 가능한 명확하고 정확하게 이미지의 내용을 설명해야 합니다. 이는 스크린 리더를 사용하는 사람들이 이미지의 내용을 정확하게 이해할 수 있도록 돕습니다.- 데코레이션 목적의 이미지에는 빈
alt속성(alt="")을 사용할 수 있습니다. 이 경우, 스크린 리더는 이 이미지를 무시하게 됩니다.
참조
- W3C Web Accessibility Initiative – Providing text alternatives : https://www.w3.org/WAI/tutorials/images/decision-tree/
- MDN Web Docs – HTML: img alt Attribute : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt