[접근성] 배경이미지에 대체텍스트 - IR (Image Replacement) 기법

한번이라도 웹 접근성을 고려해 웹 설계를 해봤다면 IR기법이 생소하진 않을것이다.

필자도 항상 접근성을 고려한 웹 개발을 하려고 노력은 하고 있지만,

요즘은 혼자서 개발을 맡게 되면서 많이 신경을 쓰지 못하게 된것같아 반성하고 있다.

 

그런 의미로 오늘 IR기법을 시작으로 접근성 관련 포스트를 올리면서 초심(?)을 잃지 않도록 노력하려한다

IR기법(Image Replacement)

의미있는 이미지를 배경처리하고 그에 상응하는 내용을 텍스트로 기입해 역활이나 의도를 명시하는 방법이다. 

보통 img 태그에 alt 속성을 이용하면 따로 이 작업이 필요없지만 CSS background 속성을 사용해 이미지를 넣는 경우도 많기 때문에 

모든 사용자에게 동일한 정보 제공을 하기 위해선 알아두면 좋은 기법이다.

 

텍스트는 스크린리더에서만 읽히고 디자인상 화면에 보이지 않아야 함으로 visibility: hidden과 display: none처럼 스크린리더가 읽지 못하는 방법이 아닌 아래와 같은 방법으로 처리가 가능하다.

 

• text-indent
• padding
• z-index
• clip

 

text-indent

<button type="button" class="btn-prev">이전 목록 보기</button>

.btn-prev {
  background: transparent url(./images/back_forward.png) 0 0 no-repeat;
  border: 0;
  width: 20px;
  height: 20px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

 

들여쓰기 속성을 사용해 텍스트를 버튼 영역 밖으로 밀어낸뒤 overflow:hidden 처리를 하는 방식이다. 

white-space: nowrap과 같이 사용해야 줄바꿈이 되지않으면서 넘치는 영역이 숨김 표시가 된다.

 

overflow나 white-space 속성없이 그냥 text-indent:-9999px을 해도 되긴하지만,

그만큼 큰 캔버스를 생성해야하기 때문에 성능상 (육안으로는 구별이 거의 불가능한) 문제가 생길수도 있기 때문에 위와 같은 방법을 써서 영역을 조금이나마 작게 설정해주는 방법이다. 

 

padding 

 

비슷한 방법으로 최소한 요소의 높이값만큼 padding-top을 주고 넘치는 영역을 overflow:hidden 처리를 할수도 있다.

 

z-index

 

텍스트에 z-index 속성값을 음의정수로 주어 맨 뒤에 배치하는 방법.

.text {
 position: relative;
 z-index: -10;
}​

 

단점으로는 이미지가 정상적으로 로드 되지 않을때 숨겨진 텍스트가 화면에 노출될수도 있다. 

대체 text로 사용하려면 상관없지만 스크린 리더에만 읽히도록 하고 싶다면 적합한 방법은 아니다

 

clip

 

필자가 가장 많이 사용하고 있는 방식이다.

보통 클래스 이름은 .a11y-hidden (accessibility hidden)으로 지어서 사용하고 있다 .

 

.a11y-hidden{ 
  margin: 0;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: polygon(0 0, 0 0, 0 0); // 크롬, 파이어폭스, 오페라
  clip: rect(0 0 0 0); // IE 6, 7
  clip: rect(0,0,0,0); // 그 이후 IE
}