ALT 속성이 필요한 이유!! | ALT 속성 없는 이미지 태그 쉽게 찾기

ALT 속성이 없는 이미지 태그를 쉽게 찾는 방법을 알아볼 건데요~

잠깐! 도대체 왜 찾아야 하는 거죠?? 귀찮게....

 

하지만 ALT 속성은

 - 시각장애인을 위한 웹 접근성에 굉장히 필요합니다.

 - SEO에 영향을 줍니다.

 - 일시적인 오류로 이미지가 표시 안될 때 이미지 대신 ALT 속성 값이 표시돼요.

 

그렇기 때문에 최대한 넣어줄 수 있는 부분은 넣어주는 게 좋아요!

 

 

1. 시각장애인을 위한 웹 접근성에 굉장히 필요합니다.

 

HTML 웹페이지를 만드는 데 있어 시각장애인을 위한 배려는 반드시 필요합니다.

시각장애인은 음성인식기를 컴퓨터에 장착을 하고 사용하는데 이 음성인식기를 사용하면 웹사이트의 모든 내용을 음성으로 들을 수 있습니다.

만약 시각 장애인이 어떠한 이미지를 클릭한다면 이미지를 설명해주는 글이 음성인식기를 통해 나오는데 이때 이미지를 설명해주는 글의 역할을 해주는 속성이 ALT 속성입니다.

ALT 속성이 없다면 아무런 내용도 들을 수 없는 거랍니다. 꼭 넣어주어야 해요.

 

 

2. SEO에 영향을 줍니다.

SEO (Search Engine Optimizer)는 단어 그대로 "검색 엔진 최적화"입니다.
다시 말해 네이버, 다음, 구글과 같은 검색엔진에서 검색이 잘 되도록 하는 것입니다.

 

여러분이 공들여서 힘들게 만든 홈페이지!! 왜 만드시는 건가요??
자기만족의 의미로 만들고 싶어서 만드시는 분들도 있겠지만 대부분 다른 사람들이 많이 보라고 만드시는 거 아닐까요??
그렇다면 검색에 노출이 잘되면 좋은 거죠~~

 

검색이 잘되면 좋은데 도대체 SEO에 왜 ALT 속성이 중요한 거냐고요!!!!

SEO는 검색엔진의 Bot들이 웹사이트에서 긁어온 데이터를 가지고 검색엔진에 노출을 시켜주는데 이러한 Bot들은 텍스트만 인식을 할 수가 있어요. 웹사이트에 이미지가 있다는 건 알겠지만 이게 어떤 이미지인지 도저히 알 수가 없어요!!
그래서 Bot들은 이미지 태그에 있는 Alt 속성 값을 가져가서 이게 어떤 이미지인지 알 수 있어요!!

 

아래 예제 코드를 보시면 이해가 되실 수 있을지 모르겠네요^^;;

 

/* 이게 어떤 이미지 인지 Bot은 알수가 없어요 */
<img src="/img.png">

/* Bot은 alt속성값이 있으니 누군가 "웹아이 메인 스크린샷"이라고 검색을 하면 노출 해줄수 있어요 */
<img src="/img.png" alt="웹아이 메인 스크린샷">

 

물론 ALT 속성 값을 입력해준다고 무조건 검색엔진에 노출이 되는 건 아닙니다.

노출될 수 있는 확률을 높여주는 거니까 무조건 노출된다고 장담할 수는 없지만 그래도 할 수 있는 건 다 해보는 게 좋죠? ᄒᄒ

 

 

3. 일시적인 오류로 이미지가 표시되지 않을 때 이미지 대신 ALT 속성 값이 표시돼요.

이미지가 표시되지 않을 때 ALT속성 여부에 따라 보여지는 화면

이미지에서 보듯이 이미지가 지워졌거나 오류로 이미지가 나오지 않을 때 엑박 표시만 돼요...

근데 ALT 속성값을 입력하면 최소한 방문자가 저 위치에는 어떠한 내용의 이미지가 표시되고 있었다고 생각할 수 있죠.

방문자를 위한 최소한의 배려라고 생각하자고요~

 

설명하다 보니 ALT 속성이 중요한 속성이라는 걸 다시 한번 느끼게 되네요;;

ALT 속성 값이 없는 이미지 태그를 찾기 위한 포스팅이었는데 서론이 길었습니다.ㅜ

 

img[alt=""], img:not([alt]){
    border:3px dotted red;
}

 

CSS에서 위에 코드처럼 써주시면 ALT 속성이 없는 이미지에 빨간 점선으로 표시가 되어서 찾기가 쉬워집니다.

 

img[alt=""] //요거는 img 태그중에 alt속성은 있는데 값이 없는 경우를 찾는거에요.
img:not([alt]) //요거는 img 태그중에 alt속성이 아예 없는 경우를 찾는거에요.

 

생각보다 어렵진 않죠?? CSS의 선택자 중에 :not은 제외를 시켜주는 역할을 해요...

그래서 위와 같이 쓴다면 IMG 태그 중에서 ALT 속성이 있는 걸 제외한 IMG 태그를 선택하니까 결국은 ALT 속성이 아예 없는 IMG 태그를 찾게 되는 거죠

자 그럼 이제 확인해봐야겠죠? 아래와 같이 코딩을 하고 확인해 볼게요~

ALT속성이 없는 이미지 찾기 예제

예제로 확인하니 이해가 좀 되셨나요? 앞에 두 개 이미지는 ALT 속성이 없고 값이 없어서 빨간 점선으로 표시해줘요

빨간 점선으로 표시가 되니 어떤 이미지를 찾아서 수정해야 하는지 찾기가 쉽겠죠?

 

궁금하신 점이 있으시다면 "댓글"로 남겨주시면 돼요!~