웹표준을 준수한 이미지 적용 방법 / 대체텍스트

1. img로 표현
   1. 의미가 있을 때(logo, menu ..) - alt 태그를 이용해 대체 문자를 표현해 준다
2. background 속성으로 표현
   1. 의미가 없을 때 - 대체 문자 X
3. 의미 있는 이미지도 background 속성으로 표현 
   1. 요즘 많이 사용되는 방법
   2. 가상으로 대체 문자를 만들어 준다(IR 효과) - 웹표준을 준수하기 위해서는 접근성을 위해 이미지의 의미가 있는경우 문자로 표현해 주어야 한다.
   3. 이미지 스프라이트 효과(여러 로고가 들어있는 한 개의 이미지를 적용, 포지션값을 변경해 각기 다른 로고를 나타낼 수 있다)

 

 

<IR 효과>

IR 기법은 이미지 대체 텍스트를 제공하기 위한 CSS 기법으로 다양한 CSS기법을 사용하여 이미지 대체 텍스트를 제공한다

 

 

 

Phark Method

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

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

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

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

 

PWA IR

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

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

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

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

 

Screen Out

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

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

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