웹접근성::이미지에 텍스트 설정하고 안보이게 (ir효과)

웹접근성 연구소 사이트의 한국형 웹콘텐츠 접근성 지침에 따라 웹콘텐츠 제작기법을 보면준수해줘야 할것들이 있다.

 

웹접근성은 몸이 불편한 사람이라도 정보를 이용하는데 불편함이 없도록 하는것이 목적에 있기 때문에 만약 시각 장애인이 사이트를 이용할 경우

텍스트는 리더기로 읽어줄 수 있지만 이미지는 읽을 수가 없다 그래서 이미지에 텍스트를 붙여준다.

또한 css가 동작하지 않는 환경에서도 어떤 내용인지 파악이 가능해야 하기 때문에 백그라운드로 넣어주는 이미지라고 할지라도

텍스트를 써주는 것이 좋다.

 

이런걸 ir효과라고 하는데

 

http://ui.daum.net/

 

위주소로 가면 다음 웹표준에대한 정의를 볼 수 있는데

 

http://ui.daum.net/convention/css/css_ir

 

여기 ir 기법에 대한 소개가 나와있다.

 

ir 기법은 이미지 대체 텍스트 제공을 위한 css 기법이다.

여러가지 방법과 장단점들이 나와있다.

 

 

 

---

 

 

 

 

1. text-indent 사용 -9999px 만큼 밀어내기

 

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}

 

 

단점은 css on/ image off시 텍스트가 안보인다.

 

 

---

 

 

 

 

2. 배경이미지 설정하고 글자는 span 태그로 감싼 후 z-index:-1을 이용하여 화면에 안보이게 한다. (권장)

 

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>

단점은 추가적으로 span 태그를 사용해야 하고 position  속성을 사용해야 하는 부분이 있다.

 

 

 

---

 

 

 

 

3. 배경이미지 설정 span으로 감싼 후 display:none을 이용해서 화면에서 안보이게

이렇게 하면 스크린리더에서 읽을 수 없고 css만 켜지고 이미지 안보이면 텍스트 안보이고 단점투성이다.

 

 

 

---

 

 

 

 

4. span 감싸고 width 와 height 각각 0으로 하기

 

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;background:url(btn_search.gif) no-repeat}
span {display:block;overflow:hidden;width:0;height:0}

 

이미지 꺼지고 css만 나오면 텍스트 안보인다. 추가적인 태그 사용해야 한다.

 

 

 

---

 

 

 

 

5. span 태그 추가하고 position:absolute 스타일 이용해서 글자를 덮는방법

 

button {display:block;position:relative;width:49px;height:36px;border:0 none;background-color:transparent;cursor:pointer}
button span {position:absolute;top:0;left:0;width:100%;height:100%;background:url(http://icon.daum-img.net/top/2008/btn_search.gif) no-repeat 0 0}
a {display:block;position:relative;width:49px;height:36px}
a span {position:absolute;top:0;left:0;width:100%;height:100%;background:url(http://icon.daum-img.net/top/2008/btn_search.gif) no-repeat 0 0}

 

 

투명한 이미지인 경우 텍스트가 비칠수 있다. 파폭2.0/크롬/ie5 에서 button 엘리먼트 span 엘리먼트 위치가 약간 밀린다.

 

 

---

 

 

 

6. padding-top 값을 이미지 높이만큼 줘서 글자를 밑으로 밀어내서 숨기는 방법

 

button {display:block;overflow:hidden;width:49px;height:36px;padding:36px 0 0 0;border:0 none;background:url(btn_search.gif) no-repeat}
a {display:block;overflow:hidden;width:49px;height:0px !important;height:36px;padding:36px 0 0 0;background:url(btn_search.gif) no-repeat}

 

익스 5에서 제대로 출력하기 위해서 heck을 사용해야 한다.

 

 

 

 

---

 

 

 

 

7. 자바스크립트를 이용하는 방법

 

 

자바스크립트

<script type="text/javascript"> 
function replaceImg() {
    replaceImgBtn = document.getElementById("btn"); 
    replaceImgBtn.innerHTML = "<img src=\"" + replaceImgBtn.className + ".gif\" alt=\"" + replaceImgBtn.innerHTML + "\" />"; 
    replaceImgA = document.getElementById("btnA"); 
    replaceImgA.innerHTML = "<img src=\"" + replaceImgA.className + ".gif\" alt=\"" + replaceImgA.innerHTML + "\" />"; 
}
window.onload = replaceImg; 
</script>

 

 

css

button {width:49px;height:36px;margin:0;padding:0;border:none 0px;background-image:none;background-color:transparent}
button img {display:block}
a img {border:none 0px}

 

 

html

<button id="btn" class="btn_search">검색</button>
<a href="#" id="btnA" class="btn_search">검색</a>

 

단점은 별도의 스크립트 필요 일부 브라우저에서 버튼안의 이미지 엘리먼트 위치가 약간 밀린다.

 

 

 

---

 

 

 

.ir {
    height: 0;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    text-indent: -10000px;
}