IR기법

IR(Image Replacement) 기법은 이미지 대체텍스트를 제공하기 위한 CSS 기법으로 다양한 CSS 기법을 사용하여 이미지 대체 텍스트를 제공할 수 있습니다.

 

1)  Phark Method 

 

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

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

 

항목	장점	단점
스크린 리더가 읽어 줌	O
추가적인 태그 사용 안 함	O
CSS ON / image off시 텍스트 안보임.		O

 

ex) .ir_pm {

     display:block;

     overflow:hidden;

     font-size:0;

     line-height:0;

     text-indent:-9999px;

     }

 

 

2) WA IR

 

의미 있는 이미지의 대체 텍스트로 이미지를 off 시에도 대체 텍스트를 보여주고자 할 때

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

 

 

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

 

ex) .ir_wa {

     display:block;

     overflow:hidden;

     position:relative;

     z-index:-1;

     width:100%;

     height:100%;

     }

 

 

3) Screen Out

 

대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 사용한다.

 

 

ex) .ir_su {

     overflow:hidden;

     position:absolute;

     width:0;

     height:0;

     line-height:0;

     text-indent:-9999px;

     }