IR 기법

IR 기법은 이미지 대체텍스트 제공을 위한 CSS 기법으로 다양한 CSS 기법을 사용하여 이미지 대체텍스트를 제공할 수가 있으며, 이 중에 널리 알려진 기법들을 소개하고자 한다. Daum은 이러한 여러 가지 기법 중에서 Phark Method와WA IR 기법을 주로 사용하여 대체텍스트를 제공해주고 있다.

 

Phark Method (권장)

이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로(-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하는 방법

CSS

button {display:block;width:49px;height:36px;margin:0;padding:0;border:none;background:url(btn_search.gif) no-repeat;text-indent:-9999px}
a {display:block;overflow:hidden;float:left;width:49px;height:36px;background:url(btn_search.gif) no-repeat;text-indent:-9999px}

HTML

<button>검색</button>
<a href="#">검색</a>

장단점

항목	장점	단점
스크린 리더기 읽어줌	○
추가적인 태그 사용 안 함	○
CSS on / Image off 시 텍스트 안보임		○

 

---

WA IR (권장)

이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 span 태그로 감싼 후 z-index:-1을 이용하여 화면에 안보이게 처리

CSS

body {position:relative;z-index:0;margin:15px;padding:0;background-color:#fafafa}
button {width:49px;height:36px;margin:0;padding:0;border:none;background:url(btn_search.gif) no-repeat}
a {display:block;width:49px;height:36px;font-weight:bold;font-size:13px;background:url(btn_search.gif) no-repeat;color:#4b5bc9;text-decoration:none}
span {display:block;position:relative;z-index:-1;padding:8px 0;border:1px solid #bcc1ec;background-color:#F1F3FF;text-align:center}

HTML

<button>
    <span>검색</span>
</button>
<a href="#">
    <span>검색</span>
</a>

장단점

항목	장점	단점
스크린 리더기 읽어줌	○
CSS on / Image off 시 텍스트 보임	○
추가적인 태그 사용함		○
position 속성 사용(성능 관련 이슈)		○