홈페이지를 만들때 이미지를 사용할 경우 img태그를 사용해 alt로 이미를 부여 합니다.
IR(image replacement)은 웹표준 및 접근성을 위한 기법입니다. 이미지를 배경으로 처리하고 이미지의 의미를 텍스트화 하여 CSS로 숨겨, 이미지 대체 텍스트를 제공하기 위한 기법 입니다. IR기법은 앞에서 얘기한 대로 접근성이 매우 유용하기 때문에 검색시에 검색엔진으로 부터 높은 가중치를 받을 수 있습니다.
IR을 사용하는 방법으로는 크게
padding을 사용하는 방법(가로 250px,세로 195px인 이미지)
CSS ZenGarden
.brand1{ background:pink url()no-repeat;height: 0;width: 250px;padding-left: 195px;overflow: hidden;}
text-indent 를 사용하는 방법
CSS ZenGarden
.brand2{background: pink url(/images/title.png)no-repeat;height: 195px;width: 290px;text-indent: 290px;
/\ text-indent: -9999px; */*white-space: nowrap;overflow: hidden;}
*text-indent의 값을 -9999px을 주어 텍스트를 아예 화면 밖으로 밀어 버리는 경우도 있지만, 이 경우에는 성능상 좋지 않으므로 white-space:nowrap와 overflow:hidden을 사용한다.
postion을 활용하는 방법
CSS ZenGarden
.brand3{background: lime ;height: 195px;width: 290px;text-align: center;line-height: 195px; font-size: 16px;font-weight: 400;position: relative;} .brand3::after{ content: “”;position: absolute;top: 0;left: 0;background: url(/images/title.png)no-repeat;width: 100%;height: 100%;}
이외에도 숨기고자하는 텍스트를 span태그로 감싸 준 후 화면에서 안보이게 처리해주는 방법도 있고, 방법은 다양하다.
그리고 Daum은 이런 여러기법중에서 Phark Method와WA IR 기법을 주로 사용하여 대체텍스트를 제공해주고 있다.
Phark Method (권장): 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로(-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하는 방법.
장점:스크린 리더기가 읽어주고,추가적인 태그사용을 하지 않는다.
WA IR 기법(권장):이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 span 태그로 감싼 후 z-index:-1을 이용하여 화면에 안보이게 처리하는 방법.
장점:스크린 리더기 가 읽어줌,CSS on / Image off 시 텍스트 보임.