IR 기법

[CSS] IR(Image Replacement) 기법

웹 접근성 준수를 위해 이미지 사용 시 대체 텍스트를 제공해야 한다.
단순히 스크린 리더 사용자뿐 아니라 검색 엔진의 효과적인 내용 수집을 위해서도 필수적이다.

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

가장 간단하게는 위와 같이 img 태그 내 alt 속성을 주는 것이겠지만 CSS background-image 속성을 사용하여 이미지를 넣는 경우도 상당수 차지하기 때문에 IR 기법에 대해 알아보자. (사실 그동안 어느정도 안다고 생각하며 깊게 고민하지 않고 사용했다..)

BAD - 스크린 리더가 읽을 수 없는 방법

.hidden {
    display: none;
}

화면에 표시되지 않고 스크린 리더가 읽을 수 없다.

.hidden {
    visibility: hidden;
}

화면에 표시되지 않으나 영역(width, height 등)은 차지한다. 스크린 리더가 읽을 수 없다.

.hidden {
   width: 0;
   height: 0;
   font-size: 0;
   line-height: 0;
}

위와 같이 사이즈를 0으로 지정하는 방법 역시 스크린 리더가 읽을 수 없다.

우리의 목표는 시각적으로 숨기지만 스크린 리더는 읽을 수 있어야 하기 때문에 아래 방법으로 사용하자!

SO-SO

Phark Method 기법

<button>검색</button>

button {
    text-indent: -9999px;
}

추가 태그도 필요없고 해상도의 범위(화면) 밖으로 텍스트만 날려버리는 가장 간단한 고전(?) 방법이다. 하지만 정상적으로 이미지가 로드되지 않은 상황에서 일반 사용자도 대체 텍스트를 확인할 수 없으며, (요즘 디바이스 사양에서는 미미하겠지만) text-indent 속성이 적용된 요소가 많을 때 웹페이지 로드 시 위치값을 그만큼 많이 계산해야 하므로 성능 저하를 불러올 수 있는 단점이 있다.

WA IR 기법

<button>
    <span>검색</span>
</button>

button {
    /* 이미지 버튼 속성 정의 */
}

button span {
    position: relative;
    z-index: -1;
}

추가 태그(span)를 사용하여 이미지 아래로 텍스트를 숨기는 기법이다. 이 방법 역시 적용된 요소가 많을수록 position 속성에 따른 성능 저하 이슈가 있다.

BEST

마지막으로 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);
    clip-path: inset(50%); /* H5BP에선 안씀 */
}

margin과 clip-path 속성을 제외하고 H5BP나 부트스트랩이나 나머지는 동일하다.

0 사이즈를 피하고자 width와 height를 1px을 준다. 하지만 1px의 공간으로는 텍스트의 공백과 줄바꿈의 계산되지 않기 때문에 (공백은 1개만 표시하고 줄바꿈은 되지 않는) white-space: nowrap으로 정의한다. (스크린 리더가 줄바꿈은 공백으로 해석하지 않아 띄어쓰기가 되지 않은 하나의 긴 단어처럼 읽어준다고 한다.)