ALT 속성이 없는 너란 녀석!! 찾고 싶다!! | ALT 속성 없는 이미지 태그 쉽게 찾기 ( ALT 속성의 중요성!! ) - STUDY

CSS ALT 속성이 없는 너란 녀석!! 찾고 싶다!! | ALT 속성 없는 이미지 태그 쉽게 찾기 ( ALT 속성의 중요성!! )

작성일 20-11-30 12:14

페이지 정보

작성자웹아이 조회 539회 댓글 0건

본문

ALT 속성이 없는 이미지 태그를 쉽게 찾는 방법을 알아볼 건데요~
잠깐! 도대체 왜 찾아야 하는 거죠?? 귀찮게....

물론 안 찾으셔도 됩니다.^^;; 하지만 ALT 속성

  • 시각장애인을 위한 웹 접근성에 굉장히 필요합니다.
  • SEO에 영향을 줍니다.
  • 일시적인 오류로 이미지가 표시 안될 때 이미지 대신 ALT 속성 값이 표시돼요.

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

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

HTML 웹페이지를 만드는 데 있어 시각장애인을 위한 배려는 반드시 필요합니다.
시각장애인은 음성인식기를 컴퓨터에 장착을 하고 사용하는데요.
이 음성인식기를 사용하면 웹사이트의 모든 내용을 음성으로 들을 수 있습니다.
만약 시각 장애인이 어떠한 이미지를 클릭한다면 이미지를 설명해주는 글이 음성인식기를 통해 나오는데요, 이미지를 설명해주는 글의 역할을 해주는 속성이 ALT 속성입니다.
ALT 속성이 없다면 아무런 내용도 들을 수 없는 거랍니다. 꼭 넣어주어야 해요.

두 번째!! 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 속성 값을 입력해준다고 무조건 검색엔진에 노출이 되는 건 아닙니다.
노출될 수 있는 확률을 높여주는 거니까 무조건 노출된다고 장담할 수는 없어요^^;;
그래도 할 수 있는 건 다 해보는 게 좋죠? ᄒᄒ

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

이미지가 표시되지 않을 때 표시되는 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 태그를 찾게 되는 거죠
자 그럼 이제 확인해봐야겠죠? 아래와 같이 코딩을 하고 확인해 볼게요~

<style> img[alt=""], img:not([alt]){ border:3px dotted red; } </style> <img src="img.png"> // alt속성이 아예 없는 img 태그 <img src="img.png" alt> // alt속성은 있지만 값이 없는 img 태그 <img src="img.png" alt="웹아이 메인 스크린샷"> // alt속성이 있는 img 태그

ALT속성이 없는 이미지에 하이라트 점선 표시하기 ALT속성이 없는 이미지에 하이라트 점선 표시하기

예제로 확인하니 이해가 좀 되셨나요? 앞에 두 개 이미지는 ALT 속성이 없고 값이 없어서 빨간 점선으로 표시해줘요 빨간 점선으로 표시가 되니 어떤 이미지를 찾아서 수정해야 하는지 찾기가 쉽겠죠?

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


추천0

댓글목록

등록된 댓글이 없습니다.

Road to Deveropment
Road to Deveropment
상단으로