IR 기법 소개

IR이란?

📌 Image Replacement
: 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것

<img> 태그의 alt 속성 값으로 표현하기에 대체 텍스트가 너무 길거나, CSS background 속성을 사용하여 처리한 의미 있는 이미지일 경우, 마크업으로 대체 텍스트를 제공합니다.

요소를 화면에서 숨기는 방법

스크린 리더가 인식하면서 레이아웃이나 성능 등에 영향을 미치지 않는 방법으로, 아래 속성들을 조합해서 사용합니다. HTML 전체적으로 많이 쓰이기 때문에 클래스로 처리하는 것이 효율적입니다.

<span class="blind">숨김 텍스트</span>
.blind {
    /* 레이아웃에 영향을 끼치지 않도록 */
    position: absolute;

    /* 스크린 리더가 읽을 수 있도록 */
    width: 1px;
    height: 1px;

    /* 눈에 보이는 부분을 제거 */
    clip: rect(0 0 0 0);
    margin: -1px;
    overflow: hidden;
}

clip: rect(top right bottom left);

네개의 좌표로 지정한 직사각형 모양대로 요소를 잘라내는 속성입니다. position 속성 값이 absolute 혹은 fixed인 요소여야하고, 만약 overflow 속성 값이 visible일 경우에는 적용이 되지 않습니다.

IR 기법 요약 정리

• 언제 사용할까?
  <img> 태그 사용 시, 대체 텍스트가 너무 긴 경우
  background-image 속성으로 처리한 의미 있는 이미지

• 어떻게 사용할까?
  시멘틱 마크업 유지
  스크린 리더 인식 가능하고, 레이아웃과 성능에 영향이 없는 CSS 속성 사용
  .blind 클래스 활용