[CSS] IR 기법

IR(Image Replacement) 기법이란?

이미지의 대체 텍스트를 제공하기 위한 CSS 기법으로, 주로 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하기 위함이다. 이미지 스프라이트(Image Sprite) 기법을 사용하는 경우에도 쓰일 수 있다.

 

<img src="/img/button.jpg" alt="대체 텍스트">

 

위와 같이 img 태그를 사용할 때 alt 속성으로 대체 텍스트를 삽입할 수 있지만, CSS background-image 속성을 사용해서 이미지를 사용하는 경우에는 그럴 수 없다.

 

네이버에서는 아래처럼 사용했다.

.blind {
	position: absolute;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
}

 

그리고 H5BP(HTML5 Boilerplate)의 방법.

.sr-only {
    position: absolute; /* position: absolute/fixed 에서만 clip 속성 작동 */
    margin: -1px;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    white-space: nowrap;
    overflow: hidden; /* overflow: visible 이면 clip 속성 작동 안됨 */
    clip: rect(0, 0, 0, 0);
}

 

 

권장되지 않는 방법들

1. 스크린 리더기가 읽을 수 없기에 권장되지 않는 방법들

1. display: none;
2. width 및 height를 0으로 지정
3. visibility: hidden;

2. 스크린 리더기가 읽을 수 있지만 권장되지 않는 방법들

1. opacity:o; (자리를 차지함)
2. text-indent: -9999px; (화면 밖으로 멀리 내빼는 방식. 전체 레이아웃 크기가 커져서 성능 이슈 있음.)