TIL 07 | IR 기법

IR 기법

IR(Image Replacement)기법은 이미지의 대체 텍스트를 제공하기 위한 CSS기법을 사용하여 이미지의 대체 텍스트를 제공할 수 있다. 즉, 눈에 보이는 디자인만 이쁘게 해서 설계하는 것이 아니라, 스크린리더기 사용자에게도 편리하게 이용할 수 있게 해야되기 때문에 적절히 IR기법을 사용해야 된다.

Phark Method

• 의미 있는 이미지의 대체 텍스트를 제공하는 경우 사용한다.
• 이미지로 대체할 요소에 배경 이미지를 설정하고 text-indent를 이용하여 화면 바깥으로 -9999px만큼 빼내에 보이지 않게 하는 방법.
• ex. 로고, 아이콘의 대체 텍스트

.ir_pm {
  display: block;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
}

WE IR

• 의미 있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고 할 때 사용한다.
• 이미지로 대체할 요소의 배경 이미지를 설정하고 글자는 <span> 요소로 감싼 후 z-index: -1;를 속성을 이용하여 화면에 보이지 않게 처리한다.

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

Screen Out

• 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때
• ex. HTML에서 시멘틱 태그 또는 박스별로 영역을 나눌 때 어떠한 영역 이미지인지 타이틀을 제공해야 한다. 그럴 때 제목 요소에 적용할 수 있다.

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

a11y-hidden

• 접근성을 고려한 텍스트 감춤 클래스
• ex. <label> 을 사용할 때 설명하기 위한 텍스트도 사용해야 되고 디자인도 해야되는 경우, 내가 가장 종종 쓰는 CSS Class이다.

.a11y-hidden {
  overflow: hidden;
  position: absolute;
  clip:     rect(0 0 0 0); /* IE 6,7 */
  clip:     rect(0,0,0,0);
  width:    1px;
  height:   1px;
  margin:   -1px;
  border:   0;
  padding:  0;
}

caption.a11y-hidden {
  position: static;
}

.a11y-hidden.focusable:focus {
  overflow: visible;
  position: static;
  clip:     auto;
  width:    auto;
  height:   auto;
  margin:   0;
}