HTML5 & CSS3 - 웹표준 이미지의 대체텍스트 넣기 IR 기법

---

HTML5 & CSS3 웹표준 사이트

---

웹접근성을 고려하기 위해 이미지에 대체 텍스트을 넣어야 한다.

개발의 편의성과 효율성을 위해 CSS에서 background ( url '' ) 로 이미지를 넣는다.

background 로 이미지를 넣을 경우 html 의 img 태그와 다르게 대체 텍스트를 넣어줄 수 없어,

다른 방법으로 대체 텍스트를 넣어준다.

 

다음의 다룸이라는 페이지에서 웹표준에 대해 자세한 설명을 확인할 수 있다.

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

다룸, Darum 웹표준을 다루다

간략히..

IR 기법이란?

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

 

사용법

1. Phark Method

- 의미있는 이미지의 대체 텍스트를 제공하는 경우

설정 방법

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

 

CSS

.ir_pm {display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px;}

 

2. WA IR

- 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때

설정 방법

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

 

CSS

.ir_wa {display:block; overflow:hidden; position:relative; z-index:-1; width:100%; height: 100%;} 

 

위와 같이 CSS 에서 설정한 후 사용할 HTML 태그에 class 로 불러와 사용.

ex)

<div class="header-icon">
    <a href="#" class="icon1"><span class="ir_pm">icon1</span></a>
    <a href="#" class="icon2"><span class="ir_pm">icon2</span></a>
    <a href="#" class="icon3"><span class="ir_pm">icon3</span></a>
    <a href="#" class="icon4"><span class="ir_pm">icon4</span></a>
</div>