기업들이 사용하는 IR(image Replacement) 기법들

들어가며

Image Replacement - IR기법은 스크린 리더 사용자들을 위한, 이미지를 대신하는 대체 텍스트를 제공하는 기법이다.

특정 요소를 스크린 리더 친화적 환경을 위해서라면 html 문서에는 남겨둬야하지만, 동시에 디자인적으로는 숨겨야 하는 때가 있다. 주로 헤딩(h1, h2, ...) 태그나 input의 label과 같이 정보를 전달하는 텍스트 등이 주로 그렇다.

이런 IR 기법은 스크린 리더의 사용성을 높일 뿐 아니라 검색 엔진 최적화에도 도움을 준다.

요소를 그저 "보이지 않게" 하려면 여러 방법들이 쉽게 떠오른다.

• color: transparent;
• opacity: 0;
• visiblity: hidden;
• display: none; 등등 ...

하지만, 이런 속성들은 자신의 공간을 그대로 차지한다거나, 아예 마크업 자체를 인식하지 못한다거나 하는 문제로 인해 위 명시한 IR 기법의 목적을 위해 사용하기에는 적합하지 않을 수 있다.

그럼 대체 어떻게 가려야 하는거야? 😫

우리의 이런 고민, 다행히도 우리나라의 대표적인 IT 기업들이 선행해서 고민해왔고, 각 기업마다 내부에서 사용하는 통일된 기법들이 존재한다.

이 글에서는 각 기업들의 어떤 방식으로 IR을 처리하는 지 살펴보도록 하자.

1. 카카오(다음)

1.1 의미있는 텍스트가 담긴 이미지의 대체 텍스트

다음 카카오는 PC와 Mobile 웹에서 IR을 처리하는 방법이 약간 달랐다.

/* pc용 */
.ir_pm{
	display:block;
	overflow:hidden;
	Font-size:1px;
	line-height:0;
	text-indent:-9999px;
}

/* mobile용 */
.ir_pm{
	display:block;
	overflow:hidden;
	font-size:1px;
	line-height:0;
	color:transparent; 
}

pc용 IR css을 확인하면, 원래는 들여쓰기의 용도로 사용되는 text-indent 속성을 이용해 텍스트를 저 너머 먼 곳으로 보내고 있다.

반면 mobile용 css에서는 텍스트의 색에 transparent 값을 주어 보이지 않게 만들었다. 이는 trnasparent 키워드는 Internet Explore 9부터 지원하기 때문.

하지만 최근에는 관공서 홈페이지가 아니라면 Internet Explore 10 버전까지 지원하는 추세여서, mobile 용으로 바뀌었을 지도 모른다.

이 방법을 통해서는 width, height를 제어하지 않고 콘텐츠 너비를 유지하되 line-height: 0, color: transpert(혹은 text-indent) 속성을 통해 내용을 숨기고 있어 스크린 리더에 친화적이다.

(+ 현재 다음 페이지에서는 ir_pm 사용이 확인되지 않는 걸 보아, 1.3의 ir_wa 클래스로 대체되었을 가능성이 있다.)

1.2 스크린 리더가 읽을 필요 없을 경우

스크린 리더가 내용을 읽을 필요는 없지만, 웹 표준을 준수하기 위해 사용한 헤딩 등 마크업 구조상 필요한 경우가 존재한다.

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

이 경우 .screen_out class를 사용하는데. 일반적인 스크린 리더들은 width와 height가 없는 요소들의 내용을 읽지 않는다.(예외 있음)

1.3 중요한 이미지의 대체텍스트

중요한 이미지가 로딩이 되지 않거나 손실되어 off될 때에도 대체 텍스트를 보여주고자 할 때는 아래 .ir_wa 클래스를 이용한다.

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

다른 기법들과는 다르게, width와 height에 100%를 주어 요소 그대로의 자리를 차지하고 있음을 볼 수 있다. 하지만 z-index 속성에 음수값을 주어서 텍스트가 이미지의 뒤에 숨도록 만든다.

❓ 내 질문
"그럼 이 기법은 img 태그에 넣는 alt값 대신에 넣는 거라고 보면 될까요?"

✅ 답변
"네. 이미지의 alt값처럼 사용되는, 백그라운드 판 alt라고 이해해주시면 됩니다." -재현님

다음 홈페이지를 방문해 개발자도구를 켜고, Ctrl(혹은 커맨드) + F를 눌러 ir_wa를 검색해보면 많이 사용되고 있음을 알 수 있다.
메인 페이지에만 ir_wa 클래스만 78번 사용되었다.

카테고리 목록이 text로 이루어진 것 처럼 보이지만, 사실은 이미지가 씌워져 있고 아래에 "캘린더"라는 글씨가 숨겨져 있다.

2. 네이버

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

나는 주로 네이버의 기법을 많이 사용한다. clip 속성은 IE 4버전부터 지원하기 때문에 크로스 브라우징 이슈도 쉽게 피해간다. width와 height이 1px씩 가지고 있어 스크린 리더도 내용을 읽을 수 있지만, clip으로 잘라내고 네거티브 margin을 주어서 컨텐츠가 영역 밖으로 나가 보이지 않는다.

네이버에서는 IR 기법으로 blind 한 개의 클래스만을 사용한다.

3. 쿠팡

쿠팡의 경우 따로 상태를 특정하는 클래스가 있지 않고, 검색창의 이미지에 사용하고 있다.

.product-search a.search {
    overflow: hidden;
    position: absolute;
    right: 0;
    width: 50px;
    height: 39px;
    background-position: -112px -71px;
    text-indent: -9em;
}

overflow: hidden과 text-indent로 글씨를 날려버렸다. position: absolute를 주었기 때문에 레이아웃에 영향을 미치지 않는다.

맺으며

기업마다 다른 기법을 사용하고 있고, 비슷한 결과를 보이지만 사용하는 상황이 조금씩 다르다. 또 스크린 리더를 고려하느냐, 고려하지 않느냐의 차이도 존재한다.

우리가 IR 기법을 사용할 때는, 내가 하는 프로젝트가 브라우저를 어디까지 지원하는가, 스크린 리더를 고려하는가 하지 않는가의 상황을 살펴 선택적으로 사용하면 된다.

혹은 웹 접근성과 SEO를 고려하면서도, 코드를 간소화 할 수 있는 나만의 IR 기법을 만들어 보는 것도 좋겠다.