img Alt 속성 이란?
img alt 속성 사용은 짧은 텍스트로 이미지를 대체하여 설명 할 수 있게 도와줍니다. 웹 페이지를 불러올 때 이미지 불러오기를 실패하거나 화면을 읽어주는 서비스를 이용할 때 활용됩니다. 웹 접근성과 SEO에서 중요한 역할을 합니다.
이미지 알트 속성 작성 기본
- 이미지의 의미 전달: alt 속성은 글의 맥락 안에서 단순히 이미지의 특징만 설명하는게 아니라 내용과 기능을 설명해야 합니다.
- 간결하게: 필요한 정보를 제공하면서 간결하게 작성해야 합니다.
- 중복 피하기: 의미 전달을 명확하게 하기 위해 주변에 있는 글과 똑같은 내용을 반복하는 건 피해야 합니다.
이미지 종류에 따른 이미지 알트 속성 가이드
- 정보성 이미지: 이미지가 사진, 일러스트 등일 경우 이미지가 나타내는 핵심적인 내용을 짧게 설명해야 합니다.
- 꾸미기 이미지: 해당 페이지에서 특별한 의미가 없이 꾸미는 목적으로 이미지를 삽입한 경우 alt 속성을 비워둡니다.
- 기능적 이미지: 시각적인 정보보다 링크 연결 등 특정한 기능이 있는 있는 경우 그 기능을 작성합니다.
- 텍스트 이미지: 읽을 수 있는 텍스트를 이미지로 삽입 했다면 그 내용을 그대로 작성합니다.
알트 속성 삽입 방법
글을 작성하는 편집기에서 지원을 할 경우 이미지를 클릭 후 ‘대체 텍스트’ 항목에 알트 속성을 입력하면 됩니다. 워드프레스 블로그 등의 웹 표준을 잘 지원하는 블로그 편집기에서는 쉽게 찾을 수 있습니다.
편집기에서 따로 편의 기능으로 알트 속성을 삽입을 지원하지 않으면 html 편집 모드에서 입력해야 합니다. 이미지를 삽입 한 후 html 편집 모드로 이미지 위치를 확인하면 아래 예시처럼 알트 속성이 없습니다.
<p>
<img src="example.png" > example
</p>여기서 아래 예시 처럼 alt=”내용” 을 추가해주면 알트 속성이 삽입됩니다.
<p>
<img src="example.png" alt="알트 속성 입력 예시" > example
</p>