IR기법이란?

웹페이지의 로고를 디자인 하는 경우 자주 쓰이기도 하는 IR (Image Replacement) 기법은 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것을 말합니다.

스크린리더 사용자가 로고의 텍스트를 읽을 수는 있지만 실제로 화면에 그 텍스트가 렌더링이 되지는 않고 이미지가 화면에 보이도록 구현을 하는 것입니다.

참고로 IR 대체 텍스트를 작성할 때는 보조기기가 구조에 맞춰 읽어들일 수 있도록 시멘틱 구조를 생각하고 작성해야 합니다.

예시

<div class="header__inner">
  <!-- 로고 -->
  <h1 class="brand">
    <a href="https://www.coupang.com" class="brand__link" target="_blank" rel="noopener noreferrer">
      <figure class="logo logo--ir logo--colorful">
        <span class="sr-only">Coupang</span>
      </figure>
    </a>
  </h1>
</div>

.logo {
  height: 4rem;
}

.logo--ir {
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: contain;
}

.logo--colorful {
  background-image: url('https://image7.coupangcdn.com/image/coupang/common/logo_coupang_w350.png');
}

.sr-only {
  overflow: hidden;
  position: absolute;
  clip: rect(0, 0, 0, 0);
  clip-path: polygon(0 0, 0 0, 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  white-space: nowrap;
}

아래와 같이 텍스트는 화면에서 보이지 않고 이미지 태그만이 브라우저상에서 보이는 것을 확인할 수 있습니다.

또한 이렇게 logo, logo--ir, logo--colorful 로 나누어 작성을 한다면 추후 배경이미지만 바꾸어도 바로 적용이 가능하다는 장점이 있습니다.