Alt 속성 (Alt Attribute)

Alt 속성, 또는 대체 텍스트(Alternative Text)는 HTML에서 이미지 태그(<img>)에 사용되는 속성으로, 이미지의 의미와 내용을 설명하는 텍스트를 제공하는 역할을 합니다. 이 속성은 이미지가 로드되지 않거나 접근성 도구(스크린 리더 등)를 사용하는 사용자들에게 중요한 정보를 전달하기 위해 사용됩니다. 웹 접근성 측면에서 Alt 속성은 필수 요소 중 하나로 간주됩니다.

Alt 속성의 중요성

Alt 속성은 다양한 측면에서 중요한 역할을 합니다.

1. 웹 접근성 향상
   Alt 속성은 시각 장애인이나 저시력자들이 스크린 리더를 통해 웹 콘텐츠를 탐색할 수 있도록 돕습니다. 이미지를 설명하는 대체 텍스트는 이미지의 내용을 전달하여, 시각적 정보에 접근할 수 없는 사용자들도 웹 페이지의 주요 정보를 이해할 수 있게 합니다.
2. SEO 최적화
   검색 엔진 크롤러는 이미지의 내용을 직접 분석할 수 없기 때문에, Alt 속성에 작성된 텍스트를 바탕으로 이미지의 내용을 파악합니다. 따라서, Alt 속성에 이미지에 대한 명확한 설명을 제공하면 검색 엔진에서 이미지의 가치를 인식하고 검색 랭킹을 개선할 수 있습니다.
3. 웹 사용성 향상
   네트워크 문제로 인해 이미지가 로드되지 않을 때, Alt 속성에 정의된 텍스트가 사용자에게 표시됩니다. 이를 통해 사용자는 이미지가 없는 상황에서도 웹 콘텐츠의 내용을 이해할 수 있습니다.

Alt 속성 사용 예시

Alt 속성은 HTML 코드 내에서 이미지 태그에 다음과 같은 형태로 작성됩니다.

<img src="image.jpg" alt="설명하는 텍스트">

예를 들어, 제품 페이지에서 특정 제품 사진을 보여주는 이미지에 대해 다음과 같이 Alt 속성을 설정할 수 있습니다.

<img src="shoes.jpg" alt="블랙 러닝화, 메쉬 소재, 사이즈 260">

이 경우 Alt 속성은 ‘블랙 러닝화, 메쉬 소재, 사이즈 260’이라는 값을 가지며, 스크린 리더 사용자나 이미지 로드가 되지 않는 경우 이 텍스트가 표시됩니다.

Alt 속성 사용 시 주의사항

• 명확하고 구체적인 설명: Alt 속성은 이미지를 정확하게 설명하는 텍스트를 제공해야 합니다. 모호하거나 불필요한 단어는 피하고, 이미지가 전달하는 정보에 충실한 설명을 작성합니다.
• 데코레이션용 이미지: 순수하게 장식용으로 사용되는 이미지에는 빈 Alt 속성(alt=””)을 사용할 수 있습니다. 이는 스크린 리더가 해당 이미지를 무시하도록 하여 사용자 경험을 개선하는 데 도움이 됩니다.
• 키워드 스터핑 피하기: SEO 목적으로 과도하게 키워드를 넣는 것은 오히려 검색 엔진에 부정적인 영향을 미칠 수 있습니다. Alt 속성은 자연스럽게 작성하고, 키워드가 불필요하게 반복되지 않도록 주의합니다.

Alt 속성 예시와 Best Practice

참조

• 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