[html] <img>태그 alt 속성

안녕하세요. 플입니다.

오늘은 alt속성을 알아보겠습니다.

---

 1.  <img> 태그

 

<img> 태그의 구성은

<img src="이미지주소" alt="이미지 설명">

위와 같이 서술됩니다.

 

이미지 주소를 불러와

화면에 이미지를 띄워줍니다.

 

이미지를 불러온 화면 예시입니다.

 

---

 2.  alt 속성

 

alt는

대체하다는 뜻의 영어단어

'Altemate'의 줄임말입니다.

 

이미지를 불러오지 못했을 때

이미지 설명을 대체로 불러옵니다.

 

이렇게 이미지를 불러오지 못하면

alt속성에 적힌 글이 대신 나타납니다.

 

아래의 코드가 실제 코드입니다.

alt에 해당하는 visual이 글로 나온 걸 알 수 있습니다.

<img src="images/visual.jpg" alt="visaul">

 

---

 3.  웹 접근성

 

alt의 사용 목적은

웹 접근성과 큰 관련이 있습니다.

 

웹 접근성이란 모든 사용자가

웹에 쉽게 접근하도록 만드는 것을 의미합니다.

 

특히 장애인이나 나이가 많아

인터넷을 하기 어려운 사람들도

이용하기 쉽도록 만들어야 합니다.

 

alt가 웹 접근성과 관련이 있는 이유는

시각장애인을 위한 웹페이지를 소리로 읽어주는 서비스에서

이미지에 해당하는 글이기 때문입니다.

 

쉽게 말해 이미지 대신 alt속성을 읽어줍니다.

속성을 잘 적어두면 이미지를 보지 않아도

어떤 이미지인지 알 수 있죠.

이것이 웹 접근성입니다.

 

또한 버전이 달라 이미지가 뜨지 않는 경우가 발생하는데

이런 경우에도 이미지가 보이지 않아도 alt속성을 확인하면

어떤 내용을 담고 있는지 알 수 있습니다.

 

이렇게 사용자의 편의를 고려해 웹페이지를 제작하는 것이

웹 접근성입니다.

 

---

모두 웹 접근성이 탁월한 홈페이지를 만들어봐요~

 

그럼 이만.

총총.