CSS 웹표준 준수를 위한 가상 대체문자 기법

웹표준을 준수하기 위한 가상 대체문자 기법

IR 기법(Image Replacement)은 무엇인가?

IR 기법은 이미지의 대체텍스트를 제공하기 위한 CSS 기법으로 아래와 같이 다양한 CSS 기법을 사용하여 이미지의 대체 텍스트를 제공할 수 있습니다.

여러 가지 기법 중에서 Phark Method와WA IR, Screen out 기법을 주로 사용하여 대체텍스트를 제공할 수 있습니다.

ir_pm(Phark Method)

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

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

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

ir_wa(WA IR)

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

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

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

ir_so(Screen Out)

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

.ir_so {overflow: hidden; position: absolute; width: 0; height: 0; line- height: 0; text-indent: -9999px;}