Webi Blog

웹아이에서 운영되고 있는 블로그입니다.

Web/CSS

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

웹아이 2021. 8. 24. 10:50
반응형

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 속성이 없고 값이 없어서 빨간 점선으로 표시해줘요

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

 

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

 

 

반응형